From 11ad1cf483d14cb6564be3592365d9ab119b96f3 Mon Sep 17 00:00:00 2001 From: Jana Marie Bantolino Date: Wed, 20 May 2026 03:09:46 +0800 Subject: [PATCH 01/33] feat: super listing page --- app/student/super-listing/page.tsx | 1328 +++++++++++++--------------- next.config.mjs | 2 +- public/super-listing/bg.png | Bin 0 -> 1886260 bytes public/super-listing/bg2.png | Bin 0 -> 1686947 bytes public/super-listing/bg3.png | Bin 0 -> 1926853 bytes public/super-listings/bg2.png | Bin 0 -> 1686947 bytes public/super-listings/bg3.png | Bin 0 -> 1926853 bytes 7 files changed, 634 insertions(+), 696 deletions(-) create mode 100644 public/super-listing/bg.png create mode 100644 public/super-listing/bg2.png create mode 100644 public/super-listing/bg3.png create mode 100644 public/super-listings/bg2.png create mode 100644 public/super-listings/bg3.png diff --git a/app/student/super-listing/page.tsx b/app/student/super-listing/page.tsx index df93011b..e31e4b84 100644 --- a/app/student/super-listing/page.tsx +++ b/app/student/super-listing/page.tsx @@ -1,750 +1,688 @@ "use client"; -import Link from "next/link"; +import { useEffect, useState, type ReactNode } from "react"; import Image from "next/image"; -import { ArrowRight, Zap, Target } from "lucide-react"; -import { useRef, useState, useEffect } from "react"; +import Link from "next/link"; +import { JetBrains_Mono, Open_Sans, Space_Grotesk } from "next/font/google"; import { - motion, - useScroll, - useTransform, - useReducedMotion, -} from "framer-motion"; -import { InteractiveGridPattern } from "@/components/landingStudent/sections/1stSection/interactive-grid-pattern"; + ArrowRight, + BriefcaseBusiness, + Building2, + CheckCircle2, + Code2, + FileSearch, + PenLine, + Rocket, + Sparkles, + Trophy, + UserCheck, +} from "lucide-react"; + import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; -import { SuperListingBadge } from "@/components/shared/jobs"; import { cn } from "@/lib/utils"; - -function SectionReveal({ - children, - className, -}: { - children: React.ReactNode; +import doodlePack from "../companies/sofi-ai/doodle-pack.png"; + +const headingFont = Space_Grotesk({ + subsets: ["latin"], + weight: ["500", "700"], + variable: "--font-paraluman-heading", +}); + +const monoFont = JetBrains_Mono({ + subsets: ["latin"], + weight: ["400", "600"], + variable: "--font-paraluman-mono", +}); + +const bodyFont = Open_Sans({ + subsets: ["latin"], + weight: ["400", "600", "700"], + variable: "--font-paraluman-body", +}); + +type HeroStickyNoteData = { + company: string; + headline: string; + role: string; + tone: "cream" | "blue" | "mint" | "lavender" | "yellow"; + pinTone: "blue" | "gold"; + spotlight: string; className?: string; -}) { - return ( - - {children} - - ); -} +}; -type SuperListingBadgeSize = "body" | "heading" | "button"; +type SuperListingData = { + company: string; + title: string; + tags: string[]; + href: string; + logo: ReactNode; +}; -const superListingBadgeSizeClasses: Record = { - body: "mx-1 align-middle", - heading: "mx-2 align-middle text-[0.38em] px-[0.72em] py-[0.38em]", - button: "mx-2 align-middle text-[0.75em] px-[0.72em] py-[0.32em] text-black", +type StepData = { + step: string; + title: string; + description: string; + icon: ReactNode; }; -function renderTextWithSuperListingBadge( - text: string, - size: SuperListingBadgeSize = "body", -): React.ReactNode { - const parts = text.split(/(Super Listings|Super Listing)/g); - - return parts.map((part, index) => { - if (part === "Super Listings" || part === "Super Listing") { - return ( - - ); - } - - return {part}; - }); -} +type StatData = { + value: string; + label: string; + icon: ReactNode; +}; -/* ---------- Magnetic CTA Button ---------- */ -function MagneticButton({ - children, - className = "", -}: { - children: React.ReactNode; - className?: string; -}) { - const prefersReduce = useReducedMotion(); - const ref = useRef(null); - const [tx, setTx] = useState(0); - const [ty, setTy] = useState(0); - - const max = 6; // px - function onMove(e: React.MouseEvent) { - if (prefersReduce) return; - const el = ref.current; - if (!el) return; - const r = el.getBoundingClientRect(); - const x = (e.clientX - r.left) / r.width - 0.5; - const y = (e.clientY - r.top) / r.height - 0.5; - setTx(x * max * 2); - setTy(y * max * 2); - } - function onLeave() { - setTx(0); - setTy(0); - } +const heroStickyNotes: HeroStickyNoteData[] = [ + { + company: "Anteriore", + headline: "Build what the future needs", + role: "Product & Engineering", + tone: "cream", + pinTone: "blue", + spotlight: "10% 27%", + className: "left-[2%] top-[19%]", + }, + { + company: "Cebu Pacific", + headline: "Redesign journeys for millions", + role: "Digital Travel Experience", + tone: "blue", + pinTone: "gold", + spotlight: "31% 18%", + className: "left-[24%] top-[8%] hidden lg:block", + }, + { + company: "Founders For Founders", + headline: "Help the next great founder rise", + role: "Accelerator Intern", + tone: "lavender", + pinTone: "blue", + spotlight: "88% 23%", + className: "right-[4%] top-[15%]", + }, + { + company: "Miro", + headline: "Turn messy ideas into momentum", + role: "Internship Challenge", + tone: "mint", + pinTone: "blue", + spotlight: "11% 64%", + className: "left-[3%] top-[56%] hidden sm:block", + }, + { + company: "Paraluman News", + headline: "Bring stories across languages", + role: "News Delivery", + tone: "yellow", + pinTone: "gold", + spotlight: "88% 64%", + className: "right-[3%] top-[56%] hidden sm:block", + }, + { + company: "Philippine Chamber of Commerce", + headline: "Shape ideas that move business", + role: "Innovation Challenge", + tone: "cream", + pinTone: "blue", + spotlight: "17% 86%", + className: "left-[9%] bottom-[6%] hidden lg:block", + }, + { + company: "Sofi AI", + headline: "Design AI people actually trust", + role: "Frontend / UI/UX", + tone: "blue", + pinTone: "gold", + spotlight: "70% 87%", + className: "right-[30%] bottom-[4%] hidden lg:block", + }, + { + company: "Sofi AI", + headline: "Make AI feel worth talking about", + role: "Marketing Intern", + tone: "lavender", + pinTone: "blue", + spotlight: "88% 85%", + className: "right-[4%] bottom-[8%] hidden lg:block", + }, +]; + +const previewListings: SuperListingData[] = [ + { + company: "Anteriore", + title: "Startup Product and Engineering Challenge", + tags: ["Product", "Engineering"], + href: "/student/super-listing/anteriore", + logo: , + }, + { + company: "Cebu Pacific", + title: "Digital Travel Experience Challenge", + tags: ["UX", "Travel"], + href: "/student/super-listing/cebu-pacific", + logo: , + }, + { + company: "Founders For Founders", + title: "Startup Accelerator Intern", + tags: ["Startups", "Growth"], + href: "/student/super-listing/fff", + logo: , + }, + { + company: "Sofi AI", + title: "Frontend AI Product Challenge", + tags: ["Frontend", "UI/UX"], + href: "/student/super-listing/sofi-ai", + logo: , + }, + { + company: "Paraluman News", + title: "Multilingual News Delivery Challenge", + tags: ["Web", "News"], + href: "/student/super-listing/paraluman", + logo: , + }, +]; + +const howItWorksSteps: StepData[] = [ + { + step: "1", + title: "Pick a challenge", + description: "Choose a challenge that matches your skills and interests.", + icon: , + }, + { + step: "2", + title: "Do real work", + description: "Complete the task and submit your best work.", + icon: , + }, + { + step: "3", + title: "Get noticed", + description: "Stand out to top companies and get hired.", + icon: , + }, +]; + +const stats: StatData[] = [ + { + value: "5,000+", + label: "Challenges completed", + icon: , + }, + { + value: "1,200+", + label: "Students hired", + icon: , + }, + { + value: "500+", + label: "Partner companies", + icon: , + }, + { + value: "Real impact", + label: "On real projects", + icon: , + }, +]; + +const stickyNoteToneClasses: Record = { + cream: "bg-[#FFF9EC]", + blue: "bg-[#F3F8FF]", + mint: "bg-[#F2FFFA]", + lavender: "bg-[#F8F4FF]", + yellow: "bg-[#FFFBEA]", +}; +const stickyNotePinClasses: Record = { + blue: "bg-blue-600", + gold: "bg-amber-400", +}; + +function HeroStickyNote({ + headline, + company, + role, + tone, + pinTone, + className, + isActive = false, +}: HeroStickyNoteData & { isActive?: boolean }) { return ( - - {children} - +