src/app/page.tsx

@@ -10,7 +10,7 @@ import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { Droplets, Heart, Phone, Shield, Sparkles, Zap } from 'lucide-react';
+import { Droplets, Heart, Phone, Shield, Sparkles, Zap, Gift } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -182,6 +182,37 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="referral" data-section="referral">
+        <FeatureCardSix
+          title="Referral Program"
+          description="Earn rewards by referring PureSip Water to your friends and colleagues. Share the gift of pure water and get exclusive benefits."
+          tag="Earn & Share"
+          tagIcon={Gift}
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: 1,
+              title: "Share Your Referral Link",              description: "Get your unique referral code and share it with friends, family, and business colleagues. It's easy and rewarding!",              imageSrc: "http://img.b2bpic.net/free-photo/friends-cooking-together-barbecue_23-2149071391.jpg",              imageAlt: "Friends sharing and enjoying together"
+            },
+            {
+              id: 2,
+              title: "Your Friend Gets Discount",              description: "When your referral makes their first order, they receive 10% off. Everyone wins with our referral program!",              imageSrc: "http://img.b2bpic.net/free-vector/glowing-blue-water-droplet-backdrop-design_1017-53530.jpg?_wi=1",              imageAlt: "Special discount offer visual"
+            },
+            {
+              id: 3,
+              title: "You Get Rewards",              description: "For every successful referral, earn cashback or credits that you can use for future orders. More referrals, more rewards!",              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-working-interior-design-project_23-2150346550.jpg",              imageAlt: "Rewards and benefits visualization"
+            }
+          ]}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          buttons={[
+            { text: "Join Referral Program", href: "https://docs.google.com/forms/d/1example/viewform" }
+          ]}
+          buttonAnimation="slide-up"
+          ariaLabel="Referral program section"
+        />
+      </div>
+
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardThirteen
           title="What Our Clients Say"
@@ -244,6 +275,9 @@ export default function LandingPage() {
             },
             {
               id: "6",              title: "Do you offer bulk discounts?",              content: "Yes! We offer competitive bulk pricing for offices, gyms, coaching centers, and event organizers. Contact our sales team for customized quotes."
+            },
+            {
+              id: "7",              title: "How do I participate in the referral program?",              content: "Simply fill out our referral form to get your unique referral code. Share it with friends and earn rewards when they place their first order. It's that simple!"
             }
           ]}
           ariaLabel="Contact and FAQ section"
@@ -267,7 +301,7 @@ export default function LandingPage() {
                 { label: "About Us", href: "#about" },
                 { label: "How It Works", href: "#how-it-works" },
                 { label: "Why Choose Us", href: "#why-us" },
-                { label: "Contact", href: "#contact" }
+                { label: "Referral Program", href: "#referral" }
               ]
             },
             {
@@ -285,4 +319,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
+  --background: #e8f4f8;
   --card: #ffffff;
-  --foreground: #250c0d;
-  --primary-cta: #b82b40;
+  --foreground: #003d54;
+  --primary-cta: #0077be;
   --primary-cta-text: #f7f6f7;
   --secondary-cta: #ffffff;
   --secondary-cta-text: #250c0d;
-  --accent: #b90941;
-  --background-accent: #e8a8b6;
+  --accent: #00a8e8;
+  --background-accent: #00c9ff;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);