462 starterkit green section

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

@@ -0,0 +1,15 @@
+import IdeateHero from './IdeateHero';
+import IdeateMentorCallout from './IdeateMentorCallout';
+import IdeatePrinciples from './IdeatePrinciples';
+import IdeateWinningHacks from './IdeateWinningHacks';
+
+export default function Ideate() {
+  return (
+    <div className="flex flex-col gap-[112px] bg-[#F1FFCC] py-[7%] px-[4%] md:gap-[144px]">
+      <IdeateHero />
+      <IdeatePrinciples />
+      <IdeateWinningHacks />
+      <IdeateMentorCallout />
+    </div>
+  );
+}

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

@@ -0,0 +1,33 @@
+import Image from 'next/image';
+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 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-[1rem] text-[#5e6457]">
+          <p>
+            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.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 z-10 h-auto w-full self-end object-contain px-3 pt-3 md:px-5 md:pt-5"
+          />
+        </div>
+      </div>
+    </IdeateSection>
+  );
+}

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

@@ -0,0 +1,27 @@
+interface IdeateInfoCardProps {
+  visual: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+export default function IdeateInfoCard({
+  visual,
+  title,
+  description,
+}: IdeateInfoCardProps) {
+  return (
+    <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-jakarta text-[1.25rem] font-semibold text-[#1F1F1F]">
+          {title}
+        </h3>
+        <p className="max-w-[20rem] text-[1rem] text-[#000000a6]">
+          {description}
+        </p>
+      </div>
+    </article>
+  );
+}

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

@@ -0,0 +1,56 @@
+import Image from 'next/image';
+import { ArrowRight } from 'lucide-react';
+import mentorGraphic from '@public/hackers/starter-kit/ideate/TalkMentor.svg';
+import IdeateSection from './IdeateSection';
+
+export default function IdeateMentorCallout() {
+  const mentorDiscordLink = 'https://discord.gg/wc6QQEc';
+  return (
+    <IdeateSection eyebrow=" " title="">
+      <div className="grid items-start gap-8 md:grid-cols-[minmax(320px,0.95fr)_minmax(0,1fr)] md:gap-10 lg:gap-14">
+        <div className="relative order-1 mx-auto flex aspect-[1.72] w-full max-w-[44rem] items-center justify-center overflow-hidden rounded-[28px] bg-[#E4FFFE] md:order-1 md:mx-0">
+          <Image
+            src={mentorGraphic}
+            alt="HackDavis mentor illustration"
+            className="relative h-full w-full object-contain"
+          />
+        </div>
+        <div className="order-2 flex flex-col gap-6 md:order-2">
+          <p className="text-[1rem] font-dm-mono uppercase text-[#00000066]">
+            Still Feel Stuck?
+          </p>
+          <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-[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
+                href="https://discord.gg/Ba5xAtf8"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline underline-offset-4"
+              >
+                director
+              </a>
+              .
+            </p>
+          </div>
+          <div className="pt-1">
+            <a
+              href={mentorDiscordLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              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
+            </a>
+          </div>
+        </div>
+      </div>
+    </IdeateSection>
+  );
+}

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

@@ -0,0 +1,57 @@
+import Image from 'next/image';
+import impactImage from '@public/hackers/starter-kit/ideate/Impact.svg';
+import audienceImage from '@public/hackers/starter-kit/ideate/Audience.svg';
+import apartImage from '@public/hackers/starter-kit/ideate/Apart.svg';
+import IdeateInfoCard from './IdeateInfoCard';
+import IdeateSection from './IdeateSection';
+
+const principles = [
+  {
+    title: 'Impact Level',
+    description:
+      'Does your product solve a real problem? Strong projects are rooted in something people actually need help with!',
+    visual: (
+      <Image
+        src={impactImage}
+        alt="Impact level illustration"
+        className="h-full w-full object-cover"
+      />
+    ),
+  },
+  {
+    title: 'Tailor for Audience',
+    description:
+      'Who are your users? What are their pain points? Know who you’re building for. The clearer your user is, the easier it is to make smart product decisions.',
+    visual: (
+      <Image
+        src={audienceImage}
+        alt="Audience illustration"
+        className="h-full w-full object-cover"
+      />
+    ),
+  },
+  {
+    title: 'Set Yourself Apart',
+    description:
+      'What makes your solution unique? Find your twist. Your project does not need to be huge, but it should have something that makes people remember it.',
+    visual: (
+      <Image
+        src={apartImage}
+        alt="Set yourself apart illustration"
+        className="h-full w-full object-cover"
+      />
+    ),
+  },
+];
+
+export default function IdeatePrinciples() {
+  return (
+    <IdeateSection eyebrow="While Brainstorming" title="Keep these in mind...">
+      <div className="grid gap-10 md:grid-cols-3 md:gap-6">
+        {principles.map((principle) => (
+          <IdeateInfoCard key={principle.title} {...principle} />
+        ))}
+      </div>
+    </IdeateSection>
+  );
+}

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

@@ -0,0 +1,41 @@
+interface IdeateSectionProps {
+  eyebrow: string;
+  title: string;
+  children: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+export default function IdeateSection({
+  eyebrow,
+  title,
+  children,
+  action,
+}: IdeateSectionProps) {
+  const normalizedEyebrow = eyebrow.trim();
+  const normalizedTitle = title.trim();
+  const hasHeaderContent =
+    Boolean(normalizedEyebrow) || Boolean(normalizedTitle) || Boolean(action);
+
+  return (
+    <section className="flex flex-col gap-4 md:gap-6">
+      {hasHeaderContent ? (
+        <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
+          <div className="max-w-2xl">
+            {normalizedEyebrow ? (
+              <p className="text-[1rem] font-dm-mono uppercase text-[#00000066]">
+                {normalizedEyebrow}
+              </p>
+            ) : null}
+            {normalizedTitle ? (
+              <h2 className="mt-1 font-jakarta text-[28px] font-semibold text-[#3F3F3F] md:text-[32px]">
+                {normalizedTitle}
+              </h2>
+            ) : null}
+          </div>
+          {action}
+        </div>
+      ) : null}
+      {children}
+    </section>
+  );
+}

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

@@ -0,0 +1,66 @@
+import patientSimImage from '@public/hackers/starter-kit/ideate/patient_sim_ai.png';
+import nomadImage from '@public/hackers/starter-kit/ideate/nomad.png';
+import skinScreenImage from '@public/hackers/starter-kit/ideate/SkinScreen.png';
+import { ArrowUpRight } from 'lucide-react';
+import { Button } from '@globals/components/ui/button';
+import IdeateSection from './IdeateSection';
+import WinningHackCard from './WinningHackCard';
+
+const devPostLink = 'https://hackdavis-2024.devpost.com/project-gallery';
+
+const winningHacks = [
+  {
+    award: 'Best Hack for Social Good',
+    year: '2024',
+    title: 'PatientSimAI',
+    description:
+      'PatientSimAI is a web app using AI and GPT-4 to simulate patient interactions, aiding clinical training, enhancing medical education, and building practical skills.',
+    link: 'https://devpost.com/software/patientsimai',
+    image: patientSimImage,
+  },
+  {
+    award: 'Best Hack for Social Good',
+    year: '2024',
+    title: 'nomad /\\',
+    description:
+      'Users can place pins for homeless individuals or lost animals, alerting organizations to assist. The app also encourages donations, volunteering, and offers local business rewards.',
+    link: 'https://devpost.com/software/nomad-xmlf65',
+    image: nomadImage,
+  },
+  {
+    award: 'Best Health Hack',
+    year: '2023',
+    title: 'SkinScreen',
+    description:
+      'SkinScreen is a mobile app that uses deep learning to analyze photos of skin lesions and identify potential skin conditions, helping users detect possible skin cancer early and access educational resources for better skin health.',
+    link: devPostLink,
+    image: skinScreenImage,
+  },
+];
+
+export default function IdeateWinningHacks() {
+  return (
+    <IdeateSection
+      eyebrow=""
+      title="Previous winning hacks"
+      action={
+        <Button
+          asChild
+          variant="default"
+          className="h-11 rounded-full border-0 bg-[#3c3b3a] px-5 text-sm font-semibold text-white shadow-none hover:bg-[#2f2e2d] md:px-6"
+        >
+          <a href={devPostLink} target="_blank" rel="noopener noreferrer">
+            <ArrowUpRight className="h-4 w-4" />
+            See All
+          </a>
+        </Button>
+      }
+    >
+      <div className="space-y-4 md:space-y-3">
+        {winningHacks.map((hack) => (
+          <WinningHackCard key={hack.title} {...hack} />
+        ))}
+      </div>
+    </IdeateSection>
+  );
+}

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

@@ -0,0 +1,57 @@
+import Image, { StaticImageData } from 'next/image';
+
+interface WinningHackCardProps {
+  award: string;
+  year: string;
+  title: string;
+  description: string;
+  link: string;
+  image?: StaticImageData;
+  visual?: React.ReactNode;
+}
+
+export default function WinningHackCard({
+  award,
+  year,
+  title,
+  description,
+  link,
+  image,
+  visual,
+}: WinningHackCardProps) {
+  return (
+    <a
+      href={link}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group block"
+    >
+      <article className="flex flex-col gap-4 rounded-[20px] bg-white px-4 py-4 shadow-[0_12px_35px_rgba(134,137,116,0.08)] md:flex-row md:items-center md:gap-6 md:px-4 md:py-3">
+        <div className="relative flex aspect-[1.5] w-full items-center justify-center overflow-hidden rounded-[14px] bg-[#f8f8fb] ring-1 ring-[#efefef] md:w-[240px] md:flex-shrink-0">
+          {image ? (
+            <Image
+              src={image}
+              alt={title}
+              fill
+              className="object-contain"
+              sizes="(max-width: 768px) 100vw, 240px"
+            />
+          ) : (
+            visual
+          )}
+        </div>
+        <div className="flex flex-1 flex-col gap-2 md:gap-3">
+          <p className="font-dm-mono text-[1rem] uppercase text-[#00000066]">
+            {award} {year}
+          </p>
+          <h3 className="font-metropolis text-[1.25rem] font-semibold text-[#1F1F1F]">
+            {title}
+          </h3>
+          <p className="max-w-[42rem] text-[1rem] text-[#000000a6]">
+            {description}
+          </p>
+        </div>
+      </article>
+    </a>
+  );
+}

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>

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

@@ -2,7 +2,7 @@
 
 import DesignResources from './DesignResources';
 import DevResources from './DevResources';
-import Ideate from './Ideate';
+import Ideate from './Ideate/Ideate';
 import Introduction from './Introduction';
 import MoreTips from './MoreTips';
 import TeamBuilding from './TeamBuilding';