clean up styling

Author: michelleyeoh

app/(pages)/(hackers)/_components/StarterKit/Ideate/Ideate.tsx

@@ -5,7 +5,7 @@ import IdeateWinningHacks from './IdeateWinningHacks';
 
 export default function Ideate() {
   return (
-    <div className="my-[100px] ml-[24px] mr-0 flex flex-col gap-[112px] bg-[#F1FFCC] p-[7%] pr-[7%] md:ml-[60px] md:mr-0 md:gap-[144px]">
+    <div className="flex flex-col gap-[112px] bg-[#F1FFCC] py-[7%] px-[4%] md:gap-[144px]">
       <IdeateHero />
       <IdeatePrinciples />
       <IdeateWinningHacks />

app/(pages)/(hackers)/_components/StarterKit/Ideate/IdeateHero.tsx

@@ -6,7 +6,7 @@ export default function IdeateHero() {
   return (
     <IdeateSection eyebrow="Ideate" title="What is a winnable idea?">
       <div className="grid items-start gap-8 md:grid-cols-[minmax(0,1fr)_minmax(320px,0.95fr)] md:gap-12 lg:gap-16">
-        <div className="max-w-[34rem] pt-[5%] self-start space-y-6 text-[0.95rem] leading-[1.3] text-[#5e6457] md:text-[1rem] lg:text-[1.05rem]">
+        <div className="max-w-[34rem] pt-[5%] self-start space-y-6 text-[1rem] text-[#5e6457]">
           <p>
             A winnable idea is{' '}
             <span className="underline decoration-[#a7ae85] decoration-[1.5px] underline-offset-[0.18em]">
@@ -25,7 +25,6 @@ export default function IdeateHero() {
             src={podium}
             alt="HackDavis animals celebrating on a podium"
             className="relative z-10 h-auto w-full self-end object-contain px-3 pt-3 md:px-5 md:pt-5"
-            priority
           />
         </div>
       </div>

app/(pages)/(hackers)/_components/StarterKit/Ideate/IdeateInfoCard.tsx

@@ -10,15 +10,15 @@ export default function IdeateInfoCard({
   description,
 }: IdeateInfoCardProps) {
   return (
-    <article className="flex h-full flex-col gap-5 text-text-dark">
+    <article className="flex h-full flex-col gap-5">
       <div className="relative flex aspect-[1.22] items-center justify-center overflow-hidden rounded-[22px] bg-[#cfeff3]">
         {visual}
       </div>
       <div className="space-y-3">
-        <h3 className="font-metropolis text-[1.35rem] font-semibold leading-tight md:text-[1.6rem]">
+        <h3 className="font-jakarta text-[1.25rem] font-semibold text-[#1F1F1F]">
           {title}
         </h3>
-        <p className="max-w-[20rem] text-[1rem] leading-[1.15] text-[#58635b] md:text-[1.05rem]">
+        <p className="max-w-[20rem] text-[1rem] text-[#000000a6]">
           {description}
         </p>
       </div>

app/(pages)/(hackers)/_components/StarterKit/Ideate/IdeateMentorCallout.tsx

@@ -15,15 +15,15 @@ export default function IdeateMentorCallout() {
           />
         </div>
         <div className="order-2 flex flex-col gap-6 md:order-2">
-          <p className="text-[0.6rem] font-jakarta uppercase tracking-[0.2em] text-text-gray md:text-xs">
+          <p className="text-[1rem] font-dm-mono uppercase text-[#00000066]">
             Still Feel Stuck?
           </p>
-          <p className="max-w-[38rem] text-[0.92rem] leading-[1.35] text-[#5e6457] md:text-[1rem] lg:text-[1.08rem]">
+          <p className="max-w-[38rem] text-[#656565] text-[1rem]">
             No worries, we have a panel of industry mentors who are ready to
             lend you help at any part of your development process.
           </p>
-          <div className="hidden rounded-[24px] bg-[#eef8bf] px-6 py-5 text-[#5e6457] md:block md:px-8 md:py-6">
-            <p className="text-[1rem] leading-[1.3] md:text-[1.18rem]">
+          <div className="hidden rounded-[20px] bg-[#E9FBBA] px-6 py-5 text-[#000000a6] md:block md:px-8 md:py-6">
+            <p className="text-[1rem]">
               <span className="italic">Note:</span> If you have any questions
               regarding hackathon events, please contact a{' '}
               <a
@@ -42,7 +42,7 @@ export default function IdeateMentorCallout() {
               href="https://discord.gg/Ba5xAtf8"
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-3 font-dm-mono text-[1.05rem] uppercase tracking-[0.12em] text-text-dark underline underline-offset-4 transition hover:opacity-75 md:text-[1.18rem]"
+              className="inline-flex items-center gap-3 font-dm-mono text-[1.125rem] uppercase text-[#3F3F3F] underline underline-offset-4 transition hover:opacity-75"
             >
               <ArrowRight className="h-5 w-5" />
               Contact a mentor

app/(pages)/(hackers)/_components/StarterKit/Ideate/IdeateSection.tsx

@@ -15,10 +15,10 @@ export default function IdeateSection({
     <section className="flex flex-col gap-4 md:gap-6">
       <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
         <div className="max-w-2xl">
-          <p className="text-[0.6rem] font-jakarta uppercase tracking-[0.2em] text-text-gray md:text-xs">
+          <p className="text-[1rem] font-dm-mono uppercase text-[#00000066]">
             {eyebrow}
           </p>
-          <h2 className="mt-1 font-metropolis text-2xl font-bold tracking-[0.02em] text-text-dark md:text-[2rem]">
+          <h2 className="mt-1 font-jakarta text-[28px] md:text-[32px] font-semibold text-[#3F3F3F]">
             {title}
           </h2>
         </div>

app/(pages)/(hackers)/_components/StarterKit/Ideate/WinningHackCard.tsx

@@ -41,13 +41,13 @@ export default function WinningHackCard({
           )}
         </div>
         <div className="flex flex-1 flex-col gap-2 md:gap-3">
-          <p className="font-dm-mono text-[0.72rem] uppercase tracking-[0.16em] text-[#aaaaaa] md:text-[0.82rem]">
+          <p className="font-dm-mono text-[1rem] uppercase text-[#00000066]">
             {award} {year}
           </p>
-          <h3 className="font-metropolis text-[1.15rem] font-semibold leading-none text-text-dark md:text-[1.6rem]">
+          <h3 className="font-metropolis text-[1.25rem] font-semibold text-[#1F1F1F]">
             {title}
           </h3>
-          <p className="max-w-[42rem] text-[0.98rem] leading-[1.1] text-[#6b6b6b] md:text-[1.05rem]">
+          <p className="max-w-[42rem] text-[1rem] text-[#000000a6]">
             {description}
           </p>
         </div>

app/(pages)/(hackers)/_components/StarterKit/Introduction.tsx

@@ -3,7 +3,7 @@ import mascots from '@public/hackers/starter-kit/introduction/startkit_mascots.s
 
 export default function Introduction() {
   return (
-    <div className="my-[100px] mx-[60px] gap-[32px] md:gap-[8%] flex flex-col md:flex-row items-center">
+    <div className="py-[7%] px-[4%] gap-[32px] md:gap-[8%] flex flex-col md:flex-row items-center">
       <div className="flex-1">
         <Image src={mascots} alt="hackdavis mascots looking at computer" />
       </div>