Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -6,6 +6,8 @@ import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import MediaAbout from "@/components/sections/about/MediaAbout";
 import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
+import ProductCardThree from "@/components/sections/product/ProductCardThree";
 
 export default function LandingPage() {
   return (
@@ -13,10 +15,10 @@ export default function LandingPage() {
       defaultButtonVariant="text-shift"
       defaultTextAnimation="entrance-slide"
       borderRadius="pill"
-      contentWidth="medium"
+      contentWidth="mediumLarge"
       sizing="largeSizeMediumTitles"
-      background="floatingGradient"
-      cardStyle="gradient-bordered"
+      background="none"
+      cardStyle="solid"
       primaryButtonStyle="flat"
       secondaryButtonStyle="layered"
       headingFontWeight="extrabold"
@@ -25,24 +27,80 @@ export default function LandingPage() {
         <div id="nav" data-section="nav">
           <NavbarStyleCentered
             navItems={[
-              {
-                name: "Meet Bill",                id: "#meet-bill"},
-              {
-                name: "Donate & Support",                id: "#donate-support"},
+              { name: "Home", id: "#hero" },
+              { name: "Meet Bill", id: "#bio" },
+              { name: "Gallery", id: "#gallery" },
+              { name: "Donate", id: "#donate" }
             ]}
             button={{
-              text: "Volunteer",              href: "#meet-bill"}}
+              text: "Volunteer",              href: "#signup"
+            }}
             brandName="Bill Chuan for Milpitas City Council 2026"
           />
         </div>
 
-        <div id="meet-bill" data-section="meet-bill">
+        <div id="hero" data-section="hero">
+          <HeroCarouselLogo
+            logoText="Bill Will — For Milpitas."
+            description="Bill Will listen. Bill Will lead. Bill Will deliver for every resident of Milpitas."
+            buttons={[]}
+            slides={[
+              { imageSrc: "https://via.placeholder.com/1920x1080/0A1F3B/FFFFFF?text=Bill+Chuan+for+Milpitas", imageAlt: "Bill Chuan for Milpitas City Council" }
+            ]}
+            showDimOverlay={true}
+            className="min-h-[calc(100vh-var(--height-navbar-mobile))] md:min-h-[calc(100vh-var(--height-navbar-desktop))]"
+          />
+        </div>
+
+        <div id="bio" data-section="bio">
+          <MediaAbout
+            title="Meet Bill Chuan"
+            description="Bill Chuan is a familiar face in Milpitas — a community member, a neighbor, and a dedicated public servant. After running in 2024, and with the continued encouragement of his family, his wife, and the people of Milpitas, Bill is back and more determined than ever. He believes in transparent leadership, inclusive growth, and real results for every neighborhood."
+            imageSrc="https://via.placeholder.com/800x600/F5F5DC/333333?text=Bill+Chuan+Bio+Photo"
+            imageAlt="Bill Chuan, community member"
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="gallery" data-section="gallery">
+          <ProductCardThree
+            title="Bill in the Community"
+            description="See Bill engaging with residents and working for Milpitas."
+            gridVariant="bento-grid"
+            animationType="slide-up"
+            products={[
+              { id: '1', name: 'Community Event', price: '', imageSrc: 'https://via.placeholder.com/600x400/FFD700/0A1F3B?text=Bill+Engaging+1' },
+              { id: '2', name: 'Meeting Neighbors', price: '', imageSrc: 'https://via.placeholder.com/600x400/0A1F3B/FFD700?text=Bill+Engaging+2' },
+              { id: '3', name: 'Public Engagement', price: '', imageSrc: 'https://via.placeholder.com/600x400/FFFFFF/0A1F3B?text=Bill+Engaging+3' },
+              { id: '4', name: 'Listening to Residents', price: '', imageSrc: 'https://via.placeholder.com/600x400/0A1F3B/FFFFFF?text=Bill+Engaging+4' }
+            ]}
+            useInvertedBackground={true}
+            textboxLayout="default"
+          />
+        </div>
+
+        <div id="donate" data-section="donate">
+          <MediaAbout
+            title="Bill Will fight for Milpitas — will you fight for Bill?"
+            description="Your support fuels this campaign. Every dollar helps Bill reach more neighbors, share his vision, and bring honest leadership to City Hall."
+            buttons={[
+              {
+                text: "Donate Now",                href: "https://donate.stripe.com/28E9AT6u43dz6ccgUn7kc00"
+              },
+            ]}
+            imageSrc="https://via.placeholder.com/800x600/0A1F3B/FFFFFF?text=Fight+for+Bill"
+            imageAlt="Bill Chuan campaign donation"
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="signup" data-section="signup">
           <ContactSplitForm
-            title="Bill Chuan for Milpitas City Council 2026 - 'BILL WILL'"
-            description="Dedicated Leadership for Our Community. Bill Chuan is committed to serving Milpitas residents with integrity and transparency. With deep roots in the community and experience in local governance, Bill is ready to listen, lead, and deliver results for every neighborhood in Milpitas. Join the Campaign below by signing up or Get Involved – Volunteer!"
-            imageSrc="https://d2yxra32j7ym0e.cloudfront.net/images/man-suit-standing-front-us-flag_23-2150821550.webp?_wi=1"
-            imageAlt="Bill Chuan, candidate for Milpitas City Council"
-            mediaPosition="left"
+            title="Join the Campaign"
+            description="Volunteer your time and make a difference. Sign up below to get involved!"
+            imageSrc="https://via.placeholder.com/800x600/FFD700/0A1F3B?text=Volunteer+for+Bill"
+            imageAlt="Volunteers working on Bill Chuan campaign"
+            mediaPosition="right"
             inputs={[
               { name: "firstName", type: "text", placeholder: "First Name", required: true },
               { name: "lastName", type: "text", placeholder: "Last Name", required: true },
@@ -53,29 +111,15 @@ export default function LandingPage() {
               name: "message",              placeholder: "Message (optional)",              rows: 4,
               required: false,
             }}
-            buttonText="Submit to Join the Campaign"
+            buttonText="Volunteer"
             onSubmit={(data) => console.log(data)}
-            useInvertedBackground={false}
-          />
-        </div>
-
-        <div id="donate-support" data-section="donate-support">
-          <MediaAbout
-            title="Support Bill's Campaign"
-            description="Thank you to all who supported Bill in 2024. After reflection, prayer, and encouragement from family and the Milpitas community, Bill is proud to run again in 2026. Your support makes this possible. Join the conversation on social media!"
-            imageSrc="https://d2yxra32j7ym0e.cloudfront.net/images/happy-volunteers-helping-each-other_23-2150390159.webp?_wi=1"
-            imageAlt="Bill Chuan engaging with the Milpitas community"
-            buttons={[
-              {
-                text: "Donate Now",                href: "https://donate.stripe.com/28E9AT6u43dz6ccgUn7kc00"},
-            ]}
             useInvertedBackground={true}
           />
         </div>
 
         <div id="footer" data-section="footer">
           <FooterLogoEmphasis
-            logoText="© 2026 Bill Chuan for Milpitas City Council 2026, FPPC #1488016"
+            logoText="© 2026 Bill Chuan for Milpitas City Council 2026, FPPC #1488016. Join the Conversation [Social Icons Placeholder]"
             columns={[
               {
                 items: [

src/app/styles/variables.css

@@ -10,12 +10,12 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
-  --card: #ffffff;
-  --foreground: #1c1c1c;
-  --primary-cta: #1f3251;
+  --background: #FFFFFF;
+  --card: #F9F9F9;
+  --foreground: #0A1F3B;
+  --primary-cta: #0A1F3B;
   --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #FFFFFF;
   --secondary-cta-text: #1c1c1c;
   --accent: #FFD700;
   --background-accent: #DAA520;