Update src/app/page.tsx

src/app/page.tsx

@@ -39,6 +39,7 @@ export default function LandingPage() {
             text: "Order Now",            href: "#contact"
           }}
           animateOnLoad={true}
+          className="responsive-navbar"
         />
       </div>
 
@@ -56,6 +57,14 @@ export default function LandingPage() {
           imageAlt="Refreshing cold beverage with ice and mint"
           mediaAnimation="opacity"
           frameStyle="card"
+          className="responsive-hero"
+          containerClassName="w-full px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-16"
+          logoClassName="text-3xl sm:text-4xl md:text-5xl lg:text-6xl"
+          descriptionClassName="text-base sm:text-lg md:text-xl mt-4 sm:mt-6"
+          buttonContainerClassName="flex flex-col sm:flex-row gap-3 sm:gap-4 mt-6 sm:mt-8 w-full sm:w-auto"
+          buttonClassName="w-full sm:w-auto px-6 sm:px-8 py-2.5 sm:py-3"
+          mediaWrapperClassName="mt-8 sm:mt-12 md:mt-16 w-full h-64 sm:h-80 md:h-96 lg:h-full"
+          imageClassName="w-full h-full object-cover"
         />
       </div>
 
@@ -87,6 +96,14 @@ export default function LandingPage() {
           imagePosition="right"
           textboxLayout="default"
           useInvertedBackground={false}
+          className="responsive-about"
+          containerClassName="w-full px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-16"
+          textBoxClassName="w-full lg:w-1/2 flex flex-col justify-center"
+          titleClassName="text-2xl sm:text-3xl md:text-4xl lg:text-5xl"
+          descriptionClassName="text-sm sm:text-base md:text-lg mt-4 sm:mt-6 leading-relaxed"
+          bulletPointClassName="mb-4 sm:mb-6 md:mb-8"
+          mediaWrapperClassName="w-full lg:w-1/2 h-64 sm:h-80 md:h-96 lg:h-auto mt-8 lg:mt-0"
+          imageClassName="w-full h-full object-cover rounded-lg"
         />
       </div>
 
@@ -123,6 +140,14 @@ export default function LandingPage() {
           ]}
           gridVariant="two-columns-alternating-heights"
           animationType="slide-up"
+          className="responsive-menu"
+          containerClassName="w-full px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-16"
+          textBoxClassName="mb-8 sm:mb-12 lg:mb-16"
+          textBoxTitleClassName="text-2xl sm:text-3xl md:text-4xl lg:text-5xl"
+          textBoxDescriptionClassName="text-sm sm:text-base md:text-lg mt-4 sm:mt-6 leading-relaxed"
+          gridClassName="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 md:gap-8"
+          cardClassName="h-auto sm:h-64 md:h-72 lg:h-80 rounded-lg overflow-hidden"
+          imageClassName="w-full h-full object-cover"
         />
       </div>
 
@@ -173,6 +198,15 @@ export default function LandingPage() {
           ]}
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
+          className="responsive-features"
+          containerClassName="w-full px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-16"
+          textBoxClassName="mb-8 sm:mb-12 lg:mb-16"
+          textBoxTitleClassName="text-2xl sm:text-3xl md:text-4xl lg:text-5xl"
+          textBoxDescriptionClassName="text-sm sm:text-base md:text-lg mt-4 sm:mt-6 leading-relaxed"
+          gridClassName="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 md:gap-8"
+          cardClassName="h-auto rounded-lg overflow-hidden"
+          cardTitleClassName="text-lg sm:text-xl md:text-2xl font-semibold mt-4"
+          cardDescriptionClassName="text-xs sm:text-sm md:text-base mt-2 leading-relaxed"
         />
       </div>
 
@@ -197,6 +231,13 @@ export default function LandingPage() {
               id: "4",              name: "Amina Ali",              imageSrc: "http://img.b2bpic.net/free-photo/person-looking-football-game-sunny-day_23-2149015493.jpg",              imageAlt: "customer enjoying beverage happy expression"
             }
           ]}
+          className="responsive-testimonials"
+          containerClassName="w-full px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-16"
+          cardClassName="h-auto sm:h-48 md:h-56 rounded-lg"
+          avatarGroupClassName="flex flex-wrap gap-2 sm:gap-3 md:gap-4"
+          avatarClassName="w-10 sm:w-12 md:w-14 h-10 sm:h-12 md:h-14 rounded-full"
+          cardTitleClassName="text-2xl sm:text-3xl md:text-4xl font-bold"
+          cardTagClassName="text-xs sm:text-sm md:text-base"
         />
       </div>
 
@@ -217,6 +258,14 @@ export default function LandingPage() {
           ]}
           speed={40}
           showCard={true}
+          className="responsive-socialproof"
+          containerClassName="w-full px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-16"
+          textBoxClassName="mb-8 sm:mb-12 lg:mb-16"
+          textBoxTitleClassName="text-2xl sm:text-3xl md:text-4xl lg:text-5xl"
+          textBoxDescriptionClassName="text-sm sm:text-base md:text-lg mt-4 sm:mt-6 leading-relaxed"
+          contentClassName="w-full overflow-x-auto"
+          logoItemClassName="h-16 sm:h-20 md:h-24 flex-shrink-0"
+          logoImageClassName="w-full h-full object-contain px-2"
         />
       </div>
 
@@ -232,6 +281,16 @@ export default function LandingPage() {
           inputPlaceholder="Enter your email for updates"
           buttonText="Order Now"
           termsText="By ordering, you agree to our service terms and privacy policy."
+          className="responsive-contact"
+          containerClassName="w-full px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-16"
+          contentClassName="max-w-2xl mx-auto"
+          titleClassName="text-2xl sm:text-3xl md:text-4xl lg:text-5xl"
+          descriptionClassName="text-sm sm:text-base md:text-lg mt-4 sm:mt-6 leading-relaxed"
+          formWrapperClassName="mt-8 sm:mt-12"
+          formClassName="flex flex-col sm:flex-row gap-3 sm:gap-4 w-full"
+          inputClassName="flex-1 px-4 sm:px-6 py-2.5 sm:py-3 text-sm sm:text-base rounded-lg"
+          buttonClassName="w-full sm:w-auto px-6 sm:px-8 py-2.5 sm:py-3 whitespace-nowrap"
+          termsClassName="text-xs sm:text-sm mt-4 sm:mt-6 leading-relaxed"
         />
       </div>
 
@@ -265,6 +324,15 @@ export default function LandingPage() {
             }
           ]}
           copyrightText="© 2025 ZAM ZAM REFRESHMENT. All rights reserved."
+          className="responsive-footer"
+          containerClassName="w-full px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-16"
+          cardClassName="rounded-lg"
+          columnsClassName="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 md:gap-12 mt-8 sm:mt-12"
+          columnClassName="flex flex-col"
+          columnTitleClassName="text-base sm:text-lg font-semibold mb-3 sm:mb-4"
+          columnItemClassName="text-sm sm:text-base mb-2 sm:mb-3"
+          copyrightContainerClassName="mt-8 sm:mt-12 pt-6 sm:pt-8 border-t text-center"
+          copyrightTextClassName="text-xs sm:text-sm"
         />
       </div>
     </ThemeProvider>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fbfaff;
-  --card: #f7f5ff;
-  --foreground: #0f0022;
-  --primary-cta: #0a7039;
+  --background: #0f0f1a;
+  --card: #1a1a2e;
+  --foreground: #e8e8f0;
+  --primary-cta: #00d9ff;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #b026ff;
   --secondary-cta-text: #0f0022;
-  --accent: #80da9b;
-  --background-accent: #80da9b;
+  --accent: #00f5ff;
+  --background-accent: #2a2a45;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);