Refactor/t3 recweek

src/Pages/T3Apply/Footer.tsx

@@ -10,6 +10,8 @@ import instagram from "@/assets/icons/instagram-black.svg"
 import telegram from "@/assets/icons/telegram.svg"
 import tiktok from "@/assets/icons/tiktok.svg"
 import globe from "@/assets/icons/globe.svg"
+import footer from "@/assets/recweek/footer.avif"
+import grainTexture from "@/assets/textures/grain.avif"
 
 function Links() {
   return (
@@ -37,14 +39,17 @@ function Footer() {
     (logo) => logo.public_id === "Vertical_-_White_elepk2"
   ) || { public_id: "Vertical_-_White_elepk2", display_name: "Vertical - White" };
 
-
   return (
-    <section className="py-8 flex-col flex font-futura-bold justify-center items-center gap-[30px] bg-black">
-      <CloudinaryImage
-        publicId="Hero_tcg8tg"
-        alt="Hero Background"
-        className="absolute inset-0 w-full h-full object-cover z-0 filter brightness-[0.9]"
-        width={1000}
+    <section
+      className="relative px-6 md:px-12 py-16 md:py-24 flex-col flex font-futura-bold justify-center items-center gap-[30px] bg-cover bg-center bg-no-repeat"
+      style={{ backgroundImage: `linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)), url(${footer})` }}
+    >
+      {/* Grain overlay */}
+      <img
+        src={grainTexture}
+        aria-hidden="true"
+        alt=""
+        className="pointer-events-none select-none absolute inset-0 w-full h-full object-cover opacity-20 mix-blend-difference"
       />
 
       <div className="transition-transform duration-500">
@@ -61,26 +66,30 @@ function Footer() {
         <Links />
       </div>
       {/* Buttons */}
-      <div className="flex flex-row gap-4">
-        <div className="flex flex-col items-center p-4 bg-white hover:bg-app-green hover:text-app-white transition-colors ease-in-out text-app-green font-futura-extrabold text-xl">
-          main website
+      <div className="flex flex-row gap-4 z-2">
+        <div className="flex flex-col items-center px-2 py-4 bg-white hover:bg-app-green hover:text-app-white transition-colors ease-in-out text-app-green font-futura-extrabold text-xl">
+          {/* main website */}
+          {/* redirect to base route / */}
+          <RouterLink to="/">main website</RouterLink>
         </div>
-        <div className="flex flex-col items-center p-4 bg-white hover:bg-app-green hover:text-app-white transition-colors ease-in-out text-app-green font-futura-extrabold text-xl">
-          back to top
+        <div className="flex flex-col items-center px-2 py-4 bg-white hover:bg-app-green hover:text-app-white transition-colors ease-in-out text-app-green font-futura-extrabold text-xl">
+          {/* back to top */}
+          {/* scroll to top */}
+          <a href = "#hero">back to top</a>
         </div>
       </div>
 
       {/* credits */}
-      <div className="text-center text-white">
+      <div className="text-center text-white z-2">
         <div className='font-futura-bold'>
-          Website by: &nbsp;
+          Website by &nbsp;
           <span className='font-futura-extrabold'>
-            Ramon Enrico Martinez, Johan Marlo Cabili, Sean Alvin Cua, and Linus Carl Perdon
+            Ramon Enrico Martinez, Johan Marlo Cabili, Alvin Sean Cua, and Linus Carl Perdon
           </span>
         </div>
         {/* vis credits  */}
         <div className='font-futura-bold'>
-          Visuals by: &nbsp;
+          Visuals by&nbsp;
           <span className='font-futura-extrabold'>
             Ramon Enrico Martinez, Kim Balasabas, and Zoila Caga
           </span>

src/Pages/T3Apply/Sections/About.tsx

@@ -8,7 +8,7 @@ function About() {
   ) || { public_id: "About_Us_ke5fkt", display_name: "About Us" };
 
   return (
-    <section id="about" className="min-h-screen bg-app-white flex flex-col items-center justify-center text-app-red px-6 md:px-16 py-12 md:py-24 gap-4">
+    <section id="about" className="py-16 bg-app-white flex flex-col items-center justify-center text-app-red px-6 md:px-16 md:py-24 gap-4">
       <div className="font-micu text-[40px] md:text-[64px] leading-10 md:leading-20 text-center text-app-red">
         Green & White
       </div>
@@ -18,12 +18,12 @@ function About() {
         </div>
         <div className="font-futura-bold text-center max-w-[730px] text-2xl ">
           Celebrating its 101st year, the publication lives as the record-keeper of Lasallian memories.
-          From portraits to pages, <span className="font-futura-extrabold text-app-green">Green & White</span> brings the Lasallian community together and etches their place in time through the yearbook.
+          From portraits to pages, <span className="font-futura-bold text-app-green">Green & White</span> brings the Lasallian community together and etches their place in time through the yearbook.
         </div>
       </div>
 
       {/* About Us Image - full width container but max-w-[750px] on larger screens */}
-      <div className="w-full max-w-[750px] mt-2 flex justify-center transition-transform duration-500 hover:scale-[1.02]">
+      <div className="w-full max-w-[1000px] mt-2 flex justify-center transition-transform duration-500 hover:scale-[1.02]">
         <CloudinaryImage
           publicId={aboutImage.public_id}
           alt={aboutImage.display_name}
@@ -35,4 +35,8 @@ function About() {
   );
 }
 
-export default About;
+export default About;
+
+// The official.. -> extrabold 
+//Celebrating its.. -> bold
+//G&W mention -> extrabold

src/Pages/T3Apply/Sections/Committees.tsx

@@ -5,7 +5,7 @@ import pinkRisoImg from '../../../assets/textures/pink_riso.avif';
 
 function Committees() {
     return (
-        <section id="committees" className="min-h-screen py-16 flex flex-col items-center bg-app-white overflow-hidden gap-8 w-full">
+        <section id="committees" className="py-8 flex flex-col justify-start items-center bg-app-white overflow-hidden gap-8 w-full">
             {/* Title Div with Pink Riso Background */}
             <div className="relative w-full overflow-hidden py-8 px-6 md:py-16 flex flex-col justify-center items-center text-app-white">
                 {/* Absolute Background Texture Layer using local high-fidelity AVIF asset */}
@@ -27,8 +27,8 @@ function Committees() {
             </div>
 
             {/* Horizontal Free-Sliding Carousel Section */}
-            <div className="w-full pl-4 md:pl-8 max-w-7xl">
-                <div className="flex gap-6 overflow-x-auto pb-8 pt-4 scrollbar-hide scroll-smooth snap-x mr-4">
+            <div className="w-full px-6 md:px-12">
+                <div className="flex justify-between gap-6 overflow-x-auto pb-8 pt-4 scrollbar-hide scroll-smooth snap-x ">
                     {committeesData.committees.map((committee) => (
                         <div
                             key={committee.id}

src/Pages/T3Apply/Sections/Dates.tsx

@@ -2,7 +2,7 @@ import DateCard from "../../../components/t3-recweek/DateCard"
 
 function Dates() {
   return (
-    <section id="dates" className="min-h-screen flex flex-col justify-center items-center px-6 bg-[#E8E4DD] py-16">
+    <section id="dates" className="sm:min-h-fit px-6 md:px-12 py-16 md:py-24 flex flex-col justify-center items-center bg-[#E8E4DD]">
       <div className="w-full max-w-sm md:max-w-2xl lg:max-w-4xl xl:max-w-5xl">
         <h1 className="font-micu text-[#B34865] text-5xl md:text-6xl lg:text-7xl text-center mb-16 md:mb-20">
           important dates

src/Pages/T3Apply/Sections/FAQ.tsx

@@ -14,13 +14,13 @@ const faqs = [
       <div className="flex flex-col gap-1">
         <p>You may apply to any of the seven (7) committees:</p>
         <ul className="list-disc list-inside flex flex-col gap-1 mt-1">
-          <li><span className="font-futura-bold">Literary:</span> Pitch and write stories for the yearbook, proofread yearbook write-ups, and create captions for online platforms.</li>
-          <li><span className="font-futura-bold">Photo:</span> Handle operations behind photoshoots and provide visual-photo assets for the yearbook and campaign materials.</li>
-          <li><span className="font-futura-bold">Layout:</span> Creates publicity materials and designs the contents of the yearbook.</li>
-          <li><span className="font-futura-bold">Marketing:</span> Ideates and executes promotion strategies that encourage students to subscribe to the yearbook.</li>
-          <li><span className="font-futura-bold">Customer Care:</span> Accommodates subscriber concerns and guides subscribers throughout yearbook processes.</li>
-          <li><span className="font-futura-bold">Office:</span> Organizes the systems, logistics and data of the yearbook operations.</li>
-          <li><span className="font-futura-bold">Web:</span> Deploys and manages the digital solutions behind <GWAbbr/>'s systems.</li>
+          <li><span className="font-futura-extrabold">Literary:</span> Pitch and write stories for the yearbook, proofread yearbook write-ups, and create captions for online platforms.</li>
+          <li><span className="font-futura-extrabold">Photo:</span> Handle operations behind photoshoots and provide visual-photo assets for the yearbook and campaign materials.</li>
+          <li><span className="font-futura-extrabold">Layout:</span> Creates publicity materials and designs the contents of the yearbook.</li>
+          <li><span className="font-futura-extrabold">Marketing:</span> Ideates and executes promotion strategies that encourage students to subscribe to the yearbook.</li>
+          <li><span className="font-futura-extrabold">Customer Care:</span> Accommodates subscriber concerns and guides subscribers throughout yearbook processes.</li>
+          <li><span className="font-futura-extrabold">Office:</span> Organizes the systems, logistics and data of the yearbook operations.</li>
+          <li><span className="font-futura-extrabold">Web:</span> Deploys and manages the digital solutions behind <GWAbbr/>'s systems.</li>
         </ul>
       </div>
     )
@@ -80,7 +80,7 @@ const faqs = [
 
 function FAQ() {
   return (
-    <section className="min-h-screen flex flex-col justify-center items-center px-6 bg-[#E8E4DD] py-16">
+    <section className="sm:min-h-fit px-6 md:px-12 py-16 md:py-24 flex flex-col justify-center items-center bg-[#E8E4DD]">
       <div className="w-full max-w-sm md:max-w-2xl lg:max-w-4xl xl:max-w-5xl">
         <h1 className="font-micu text-[#B34865] text-5xl md:text-6xl lg:text-7xl text-center mb-16 md:mb-20">
           FAQS

src/Pages/T3Apply/Sections/Hero.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import grainTexture from "@/assets/textures/grain.avif"
 import { T3_ASSETS } from '../../../lib/t3Assets';
 import { CloudinaryImage } from '../../../components/t3-recweek/CloudinaryImage';
 
@@ -21,6 +22,13 @@ function Hero() {
         className="absolute inset-0 w-full h-full object-cover z-0 filter brightness-[0.9]"
         width={1000}
       />
+      {/* Grain overlay */}
+      <img
+        src={grainTexture}
+        aria-hidden="true"
+        alt=""
+        className="pointer-events-none select-none absolute inset-0 w-full h-full object-cover opacity-20 mix-blend-difference"
+      />
 
 
       {/* Vertically Oriented Content Container */}
@@ -46,7 +54,7 @@ function Hero() {
 
         {/* 3. Group Text 1 - Subtitle and Headline */}
         <div className="flex flex-col items-center gap-2.5">
-          <div className="flex flex-col items-center text-white font-micu text-2xl md:text-6xl">
+          <div className="flex flex-col items-center text-white font-micu text-3xl md:text-6xl">
             <p className="">
               Come as you are.
             </p>

src/Pages/T3Apply/Sections/Steps.tsx

@@ -17,14 +17,20 @@ function Steps() {
           >
             bit.ly/GW26-T3-Application
           </a>{' '}
-          by Saturday, May 23.
+          by Saturday, <span className=" text-app-green">May 23</span>.
         </>
       )
     },
     {
       number: "2",
       title: "EXAMINATION",
-      description: "Wait for the details of your committee exam and take-home exam to be sent to you by May 25. Submit your exam deliverables, resume, and portfolio within the given time period."
+      description: (
+        <>
+          Wait for the details of your committee exam and take-home exam to be sent to you by{' '}
+          <span className=" text-app-green">May 25</span>.{' '}
+          Submit your exam deliverables, resume, and portfolio within the given time period.
+        </>
+      )
     },
     {
       number: "3",
@@ -40,7 +46,7 @@ function Steps() {
 
 
   return (
-    <section id="steps" className="min-h-screen bg-app-white flex flex-col justify-center items-center px-6 md:px-12 py-16 md:py-24">
+    <section id="steps" className="sm:min-h-fit bg-app-white flex flex-col justify-center items-center px-6 md:px-12 py-16 md:py-24">
       <h1 className="font-micu text-app-red text-5xl md:text-[80px] text-center mb-12 w-full">
         application process
       </h1>

src/components/t3-recweek/CommitteeCard.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from 'react';
 import { CloudinaryImage } from './CloudinaryImage';
 import { buildCloudinaryUrl } from '../../lib/cloudinary';
 
@@ -17,9 +18,22 @@ export function CommitteeCard({
   name,
   description
 }: CommitteeCardProps) {
+  // Splits on "Green & White" and wraps each match in bold green text
+  const renderFormattedDescription = (text: string) => {
+    const parts = text.split("Green & White");
+    return parts.map((part, index) => (
+      <Fragment key={index}>
+        {part}
+        {index < parts.length - 1 && (
+          <span className="font-futura-extrabold text-app-green">Green & White</span>
+        )}
+      </Fragment>
+    ));
+  };
+
   return (
     <div
-      className={`group relative flex flex-col bg-app-white border max-w-[330px] h-[380px] px-8 py-6 border-app-red hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2`}
+      className={`group relative flex flex-col bg-app-white border max-w-[330px] h-[350px] px-2 py-4 border-app-red hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2`}
     >
       {/* Upper Image Section with micro-animation zoom */}
       {/* <CloudinaryImage
@@ -43,8 +57,8 @@ export function CommitteeCard({
           <h3 className="font-micu text-2xl text-app-red group-hover:text-app-red transition-colors duration-300">
             {name}
           </h3>
-          <p className="font-futura-bold text-base text-app-red leading-relaxed">
-            {description}
+          <p className="font-futura-bold text-base text-app-red">
+            {renderFormattedDescription(description)}
           </p>
         </div>
       </div>

src/components/t3-recweek/FaqDropdown.tsx

@@ -18,11 +18,11 @@ export default function FaqDropdown(
   return (
     <div className="flex flex-col border-b-2 border-b-[#B34865] px-2 py-4 cursor-pointer" onClick={() => setIsOpen(!isOpen)}>
       <div className="flex flex-row items-center justify-between">
-        <h3 className={`font-futura-bold transition-all duration-300 ${isOpen ? "text-[#48B39A] text-2xl md:text-xl lg:text-2xl" : "text-[#B34865] text-xl md:text-lg lg:text-xl"}`}>
+        <h3 className={`font-futura-extrabold transition-all duration-300 ${isOpen ? "text-[#48B39A] text-2xl md:text-2xl lg:text-3xl" : "text-[#B34865] text-xl md:text-xl lg:text-2xl"}`}>
           {question}
         </h3>
         <span
-          className="text-[#B34865] font-bold text-xl transition-transform duration-300"
+          className="text-[#B34865] font-futura-extrabold text-xl transition-transform duration-300"
           style={{ transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" }}
         >
           <ChevronUp />
@@ -33,7 +33,7 @@ export default function FaqDropdown(
         className="overflow-hidden transition-all duration-300 ease-in-out"
         style={{ height: `${height}px` }}
       >
-        <div className="font-futura-medium text-[#B34865] text-lg md:text-base lg:text-lg mt-2">
+        <div className="font-futura-bold text-[#B34865] text-lg lg:text-xl mt-2">
           {answer}
         </div>
       </div>

src/components/t3-recweek/Step.tsx

@@ -12,17 +12,17 @@ function Step({
     description,
 }: StepProps) {
     return (
-        <div className="flex flex-row lg:flex-col gap-6 bg-app-white p-6 items-start lg:items-start h-full">
+        <div className="flex flex-row lg:flex-col gap-6 bg-app-white p-6 h-full">
             {number && (
-                <div className="font-futura-extrabold text-app-white bg-app-red w-16 h-16 lg:w-20 lg:h-20 flex items-center justify-center text-4xl lg:text-5xl shrink-0">
+                <div className="font-futura-extrabold text-app-white bg-app-red w-16  lg:w-20 lg:h-20 flex justify-center items-center text-4xl lg:text-5xl shrink-0">
                     {number}
                 </div>
             )}
             <div className="flex flex-col gap-1">
-                <h3 className="font-futura-bold uppercase text-xl text-app-red tracking-wide">
+                <h3 className="font-futura-bold uppercase text-3xl text-app-red tracking-wide">
                     {title}
                 </h3>
-                <div className="font-futura-bold text-base text-app-red leading-relaxed">
+                <div className="font-futura-bold text-lg text-app-red leading-relaxed">
                     {description}
                 </div>
             </div>

src/index.css

@@ -49,6 +49,15 @@ html {
   overflow: hidden;
 }
 
+/* Utility: hide scrollbar while keeping scroll functionality */
+.scrollbar-hide {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;     /* Firefox */
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;             /* Chrome, Safari, Opera */
+}
+
 .clamp-3 {
   display: -webkit-box;
   -webkit-line-clamp: 3;