Winnable idea desktop + mobile

Author: haylietan

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] mx-[24px] p-[7%] md:mx-[60px] bg-[#F1FFCC] border-2 border border-black flex flex-col gap-[48px]">
+    <div className="my-[100px] mx-[24px] p-[7%] md:mx-[60px] bg-[#F1FFCC] flex flex-col gap-[48px]">
       <IdeateHero />
       <IdeatePrinciples />
       <IdeateWinningHacks />

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

@@ -1,27 +1,30 @@
 import Image from 'next/image';
-import podium from '@public/hackers/starter-kit/ideate/podium.svg';
+import podium from '@public/hackers/starter-kit/ideate/WinnableIdea.svg';
 import IdeateSection from './IdeateSection';
 
 export default function IdeateHero() {
   return (
     <IdeateSection eyebrow="Ideate" title="What is a winnable idea?">
-      <div className="grid gap-6 rounded-[28px] bg-[linear-gradient(135deg,rgba(255,255,255,0.62)_0%,rgba(245,255,208,0.7)_100%)] p-4 shadow-[0_16px_45px_rgba(175,209,87,0.12)] ring-1 ring-[#e7efb6] md:grid-cols-[minmax(0,1.1fr)_minmax(260px,0.9fr)] md:items-center md:p-6 lg:p-8">
-        <div className="space-y-4 text-sm leading-7 text-[#5e6457] md:text-base">
+      <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]">
           <p>
-            A winnable idea is not always the most complicated one. It is clear,
-            purposeful, and rooted in a real user need.
+            A winnable idea is{' '}
+            <span className="underline decoration-[#a7ae85] decoration-[1.5px] underline-offset-[0.18em]">
+              not
+            </span>{' '}
+            always the most complicated one. It is clear, purposeful, and rooted
+            in a real user need.
           </p>
           <p>
             When your team combines impact, audience awareness, and a unique
             angle, your project is much more likely to stand out to judges.
           </p>
         </div>
-        <div className="relative mx-auto flex aspect-[1.25] w-full max-w-[360px] items-center justify-center overflow-hidden rounded-[26px] bg-[linear-gradient(180deg,#d4f5f7_0%,#d4f4de_100%)] p-4">
-          <div className="absolute inset-x-[10%] bottom-[10%] h-[18%] rounded-full bg-[#b9e48e]/50 blur-2xl" />
+        <div className="relative mx-auto flex aspect-[1.48] w-full max-w-[33rem] items-end justify-center overflow-hidden rounded-[26px] bg-[#D5FDFF] md:self-end md:justify-self-end">
           <Image
             src={podium}
             alt="HackDavis animals celebrating on a podium"
-            className="relative h-full w-full object-contain"
+            className="relative z-10 h-auto w-full self-end object-contain px-3 pt-3 md:px-5 md:pt-5"
             priority
           />
         </div>