From e21499774381e9c5fe672b2b042e6f9b2d652187 Mon Sep 17 00:00:00 2001 From: Jana Marie Bantolino Date: Fri, 3 Apr 2026 14:55:28 +0800 Subject: [PATCH 01/39] chore: fresh new hero section --- .../paraluman/overview-refresh/page.tsx | 177 ++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 app/student/super-listing/paraluman/overview-refresh/page.tsx diff --git a/app/student/super-listing/paraluman/overview-refresh/page.tsx b/app/student/super-listing/paraluman/overview-refresh/page.tsx new file mode 100644 index 00000000..f9d9aea9 --- /dev/null +++ b/app/student/super-listing/paraluman/overview-refresh/page.tsx @@ -0,0 +1,177 @@ +"use client"; + +import Image from "next/image"; +import Link from "next/link"; +import { useRouter } from "next/navigation"; +import { ArrowRight } from "lucide-react"; +import { JetBrains_Mono, Space_Grotesk } from "next/font/google"; +import { Button } from "@/components/ui/button"; +import { cn } from "@/lib/utils"; +import { OverviewPanel } from "../components/OverviewPanel"; +import paralumanLogo from "../logo.png"; +import type { CEOProfile } from "../components/types"; + +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 CEO_PROFILE: CEOProfile = { + name: "Anna Mae Yu Lamentillo", + role: "Paraluman CEO, \nFormer Undersecretary of DICT,\nFormer Chairperson of Build, Build, Build program", + imageSrc: + "https://images.gmanews.tv/webpics/2024/10/Untitled_design_(28)_2024_10_03_15_20_56.jpg", + profileUrl: "https://www.annamaeyulamentillo.com/", +}; + +const CHALLENGE_VIDEO_URL = ""; + +export default function ParalumanOverviewRefreshPage() { + const router = useRouter(); + const hasChallengeVideo = CHALLENGE_VIDEO_URL.trim().length > 0; + + const goToMainListing = () => { + router.push("/student/super-listing/paraluman"); + }; + + return ( +
+
+
+ +
+
+ + BetterInternship + + + + x + + + + Paraluman + +
+
+ +
+
+
+ + Paraluman + + +

+ Shape + Filipino + Stories +

+ +
+ + Looking for: Web Development Interns + +
+ +

+ + Build real tools for a real newsroom + + + Paraluman is a + youth-led Philippine news platform making every story accessible + in both English and Filipino. + + + Join our team to build and{" "} + + improvehow articles are created, processed, and published + {" "} + to reach thousands of readers. + +

+ +
+ +
+
+ {"\u2022"} + + No resume required + +
+
+ {"\u2022"} + + 24h response + +
+
+
+
+
+
+ +
+
+ +
+
+
+ ); +} From 6667da7c132adf734b77264d1bcf13eedefd78d8 Mon Sep 17 00:00:00 2001 From: anaj00 Date: Fri, 3 Apr 2026 15:09:21 +0800 Subject: [PATCH 02/39] chore: put the new hero section in the paraluman page --- .../paraluman/components/HeroPanel.tsx | 185 +++++++----------- .../paraluman/overview-refresh/page.tsx | 177 ----------------- app/student/super-listing/paraluman/page.tsx | 27 +-- 3 files changed, 74 insertions(+), 315 deletions(-) delete mode 100644 app/student/super-listing/paraluman/overview-refresh/page.tsx diff --git a/app/student/super-listing/paraluman/components/HeroPanel.tsx b/app/student/super-listing/paraluman/components/HeroPanel.tsx index a29d46c5..fb657994 100644 --- a/app/student/super-listing/paraluman/components/HeroPanel.tsx +++ b/app/student/super-listing/paraluman/components/HeroPanel.tsx @@ -1,145 +1,92 @@ "use client"; -import { useRef, useState } from "react"; import Image from "next/image"; import Link from "next/link"; -import { ArrowUpRight, Zap } from "lucide-react"; -import { motion, useReducedMotion } from "framer-motion"; +import { ArrowRight } from "lucide-react"; import paralumanLogo from "../logo.png"; import { Button } from "@/components/ui/button"; type HeroPanelProps = { - hiringBadgeText: string; onHowToApply: () => void; showHowToApplyButton?: boolean; }; export function HeroPanel({ - hiringBadgeText, onHowToApply, showHowToApplyButton = true, }: HeroPanelProps) { - const prefersReduce = useReducedMotion(); - const magnetRef = useRef(null); - const [tx, setTx] = useState(0); - const [ty, setTy] = useState(0); - - const magneticRange = 10; - - const handleMove = (event: React.MouseEvent) => { - if (prefersReduce) return; - const element = magnetRef.current; - if (!element) return; - - const rect = element.getBoundingClientRect(); - const x = (event.clientX - rect.left) / rect.width - 0.5; - const y = (event.clientY - rect.top) / rect.height - 0.5; - - setTx(x * magneticRange * 2); - setTy(y * magneticRange * 2); - }; - - const resetMagnet = () => { - setTx(0); - setTy(0); - }; - return ( -
-
-
-
- - {hiringBadgeText} - -
-
+
+
+
+ + Paraluman + -
-
- - Paraluman - -
-

- looking for: web dev interns -

-
+

+ Shape + Filipino + Stories +

+ +
+ + Looking for: Web Development Interns +
- {showHowToApplyButton && ( -

- - Paraluman - {" "} - is a youth-led Philippine news platform making every story - accessible in both English and Filipino. - - Join our team to build and{" "} - - improve how articles are created, processed, and published - {" "} - to reach thousands of readers. - - - To learn more about us, check out{" "} - - paraluman.com - - {" "} - -

- )} +

+ + Build real tools for a real newsroom + + + Paraluman is a + youth-led Philippine news platform making every story accessible + in both English and Filipino. + + + Join our team to build and{" "} + + improvehow articles are created, processed, and published + {" "} + to reach thousands of readers. + +

{showHowToApplyButton && ( -
- + - -

- No resume needed. Response in 24 hours -

+ Apply now + + +
+
+ {"\u2022"} + + No resume required + +
+
+ {"\u2022"} + + 24h response + +
+
)}
diff --git a/app/student/super-listing/paraluman/overview-refresh/page.tsx b/app/student/super-listing/paraluman/overview-refresh/page.tsx deleted file mode 100644 index f9d9aea9..00000000 --- a/app/student/super-listing/paraluman/overview-refresh/page.tsx +++ /dev/null @@ -1,177 +0,0 @@ -"use client"; - -import Image from "next/image"; -import Link from "next/link"; -import { useRouter } from "next/navigation"; -import { ArrowRight } from "lucide-react"; -import { JetBrains_Mono, Space_Grotesk } from "next/font/google"; -import { Button } from "@/components/ui/button"; -import { cn } from "@/lib/utils"; -import { OverviewPanel } from "../components/OverviewPanel"; -import paralumanLogo from "../logo.png"; -import type { CEOProfile } from "../components/types"; - -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 CEO_PROFILE: CEOProfile = { - name: "Anna Mae Yu Lamentillo", - role: "Paraluman CEO, \nFormer Undersecretary of DICT,\nFormer Chairperson of Build, Build, Build program", - imageSrc: - "https://images.gmanews.tv/webpics/2024/10/Untitled_design_(28)_2024_10_03_15_20_56.jpg", - profileUrl: "https://www.annamaeyulamentillo.com/", -}; - -const CHALLENGE_VIDEO_URL = ""; - -export default function ParalumanOverviewRefreshPage() { - const router = useRouter(); - const hasChallengeVideo = CHALLENGE_VIDEO_URL.trim().length > 0; - - const goToMainListing = () => { - router.push("/student/super-listing/paraluman"); - }; - - return ( -
-
-
- -
-
- - BetterInternship - - - - x - - - - Paraluman - -
-
- -
-
-
- - Paraluman - - -

- Shape - Filipino - Stories -

- -
- - Looking for: Web Development Interns - -
- -

- - Build real tools for a real newsroom - - - Paraluman is a - youth-led Philippine news platform making every story accessible - in both English and Filipino. - - - Join our team to build and{" "} - - improvehow articles are created, processed, and published - {" "} - to reach thousands of readers. - -

- -
- -
-
- {"\u2022"} - - No resume required - -
-
- {"\u2022"} - - 24h response - -
-
-
-
-
-
- -
-
- -
-
-
- ); -} diff --git a/app/student/super-listing/paraluman/page.tsx b/app/student/super-listing/paraluman/page.tsx index ddfdaa31..3f78ca81 100644 --- a/app/student/super-listing/paraluman/page.tsx +++ b/app/student/super-listing/paraluman/page.tsx @@ -42,7 +42,6 @@ const CEO_PROFILE: CEOProfile = { const CHALLENGE_PDF_URL = "https://drive.google.com/file/d/1Tdbc4EdhBkY3lOInAvE3YSaKhSQyWPwx/view?usp=sharing"; const CHALLENGE_VIDEO_URL = ""; -const HIRING_BADGE_TEXT = "No resume needed. Response in 24 hours"; type ParalumanSubmissionResponse = { success: boolean; @@ -285,13 +284,13 @@ export default function ParalumanPage() { return (
-
-
+
+
-
+
{renderPanel === "overview" && ( <> -
- -
+ Date: Fri, 3 Apr 2026 15:31:54 +0800 Subject: [PATCH 03/39] feat: cool new typing hero section --- .../paraluman/components/HeroPanel.tsx | 159 +++++++++++++----- 1 file changed, 121 insertions(+), 38 deletions(-) diff --git a/app/student/super-listing/paraluman/components/HeroPanel.tsx b/app/student/super-listing/paraluman/components/HeroPanel.tsx index fb657994..454a8f90 100644 --- a/app/student/super-listing/paraluman/components/HeroPanel.tsx +++ b/app/student/super-listing/paraluman/components/HeroPanel.tsx @@ -1,5 +1,6 @@ "use client"; +import { useEffect, useState } from "react"; import Image from "next/image"; import Link from "next/link"; import { ArrowRight } from "lucide-react"; @@ -11,14 +12,73 @@ type HeroPanelProps = { showHowToApplyButton?: boolean; }; +const HERO_TYPED_PHRASES = [ + "Filipino journalism", + "Filipino voices", + "real stories", + "stories that matter", +]; + export function HeroPanel({ onHowToApply, showHowToApplyButton = true, }: HeroPanelProps) { + const [phraseIndex, setPhraseIndex] = useState(0); + const [typedText, setTypedText] = useState(""); + const [isDeleting, setIsDeleting] = useState(false); + const [isPhrasePopping, setIsPhrasePopping] = useState(true); + + useEffect(() => { + setIsPhrasePopping(true); + const popTimer = window.setTimeout(() => setIsPhrasePopping(false), 340); + return () => window.clearTimeout(popTimer); + }, [phraseIndex]); + + useEffect(() => { + const currentPhrase = HERO_TYPED_PHRASES[phraseIndex]; + + const delay = (() => { + if (!isDeleting && typedText === currentPhrase) return 1700; + if (isDeleting && typedText.length === 0) return 350; + return isDeleting ? 38 : 72; + })(); + + const timer = window.setTimeout(() => { + if (!isDeleting) { + if (typedText.length < currentPhrase.length) { + setTypedText(currentPhrase.slice(0, typedText.length + 1)); + return; + } + + setIsDeleting(true); + return; + } + + if (typedText.length > 0) { + setTypedText(currentPhrase.slice(0, typedText.length - 1)); + return; + } + + setIsDeleting(false); + setPhraseIndex((previous) => (previous + 1) % HERO_TYPED_PHRASES.length); + }, delay); + + return () => window.clearTimeout(timer); + }, [phraseIndex, typedText, isDeleting]); + return ( -
-
-
+
+
); From b337a9a2913df4ca331c3995b014a522606fc1f5 Mon Sep 17 00:00:00 2001 From: anaj00 Date: Fri, 3 Apr 2026 16:05:52 +0800 Subject: [PATCH 04/39] feat: added what you will get and what youll work on --- .../paraluman/components/OverviewPanel.tsx | 217 +++++++++++++----- app/student/super-listing/paraluman/page.tsx | 5 - 2 files changed, 160 insertions(+), 62 deletions(-) diff --git a/app/student/super-listing/paraluman/components/OverviewPanel.tsx b/app/student/super-listing/paraluman/components/OverviewPanel.tsx index 49423b92..ee68d1c9 100644 --- a/app/student/super-listing/paraluman/components/OverviewPanel.tsx +++ b/app/student/super-listing/paraluman/components/OverviewPanel.tsx @@ -13,12 +13,43 @@ import { import type { CEOProfile } from "./types"; type OverviewPanelProps = { - hasChallengeVideo: boolean; - challengeVideoUrl: string; ceoProfile: CEOProfile; onGoToApply: () => void; }; +const WORK_STREAMS = [ + { + title: "Build Real Features", + description: + "Create product features that are used by a real newsroom, not practice tasks.", + }, + { + title: "Improve Story Flow", + description: + "Help the team draft, review, and publish stories faster in English and Filipino.", + }, + { + title: "Make It Easy To Use", + description: + "Turn rough ideas into clear, simple tools that people can use right away.", + }, +]; + +const BENEFITS = [ + { + title: "Do Work That Matters", + description: "Your output reaches real readers, not just internal demos.", + }, + { + title: "Get Fast Feedback", + description: "You get direct and quick feedback from the team and leaders.", + }, + { + title: "Strengthen Your Portfolio", + description: "Leave with a strong real-world project you can proudly show.", + }, +]; + const FAQ_ITEMS = [ { question: "Who can apply for this internship?", @@ -43,87 +74,159 @@ const FAQ_ITEMS = [ ]; export function OverviewPanel({ - hasChallengeVideo, - challengeVideoUrl, ceoProfile, onGoToApply: onGoToHowToApply, }: OverviewPanelProps) { return (
-
-
-
-

- Work With +

+
+

+ What you'll work on +

+
+
+
+

+ You will build real tools used by a real newsroom team

-
-
-
- {ceoProfile.name} +
+
+ {WORK_STREAMS.map((item) => ( +
+
+
+

+ {item.title} +

+
+

+ {item.description} +

+
+ ))} +
+
+
-
- - - {ceoProfile.name} - - - -

- {ceoProfile.role} -

+
+
+

+ What you'll get +

+
+
+

+ Real experience, fast feedback, and proof of impact. +

+ +
+
    + {BENEFITS.map((item, index) => ( +
  • + + {String(index + 1).padStart(2, "0")} + +
    +

    + {item.title} +

    +

    + {item.description} +

    +
    +
    • + ))} +
-
+
-
+

- The Opportunity + Work with

+
+
+
+ {ceoProfile.name} +
- {hasChallengeVideo && ( -
-