Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -24,7 +24,7 @@ export default function LandingPage() {
         headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+  <div id="nav" data-section="nav" className="py-[48px] lg:py-[80px]">
       <NavbarLayoutFloatingInline
       navItems={[
         {
@@ -43,8 +43,9 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="hero" data-section="hero">
+  <div id="hero" data-section="hero" className="py-[48px] lg:py-[80px] bg-background">
       <HeroOverlayTestimonial
+      containerClassName="max-w-[1200px] mx-auto"
       title="Low-Key Sophisticated"
       description="Non-Alcoholic Pairings for Perfect Vibes"
       testimonials={[
@@ -86,8 +87,9 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="products" data-section="products">
+  <div id="products" data-section="products" className="py-[48px] lg:py-[80px] bg-background">
       <ProductCardFour
+      containerClassName="max-w-[1200px] mx-auto"
       animationType="none"
       textboxLayout="default"
       gridVariant="bento-grid"
@@ -103,15 +105,17 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="gradient-break" data-section="gradient-break">
+  <div id="gradient-break" data-section="gradient-break" className="py-[48px] lg:py-[80px] bg-card">
       <TextAbout
-      useInvertedBackground={false}
+      containerClassName="max-w-[1200px] mx-auto"
+      useInvertedBackground={true}
       title="Altitude"
     />
   </div>
 
-  <div id="product-row-two" data-section="product-row-two">
+  <div id="product-row-two" data-section="product-row-two" className="py-[48px] lg:py-[80px] bg-background">
       <ProductCardFour
+      containerClassName="max-w-[1200px] mx-auto"
       animationType="none"
       textboxLayout="default"
       gridVariant="uniform-all-items-equal"
@@ -127,15 +131,17 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="about" data-section="about">
+  <div id="about" data-section="about" className="py-[48px] lg:py-[80px] bg-card">
       <TextAbout
-      useInvertedBackground={false}
+      containerClassName="max-w-[1200px] mx-auto"
+      useInvertedBackground={true}
       title="Our Philosophy"
     />
   </div>
 
-  <div id="faq" data-section="faq">
+  <div id="faq" data-section="faq" className="py-[48px] lg:py-[80px] bg-background">
       <FaqSplitText
+      containerClassName="max-w-[1200px] mx-auto"
       useInvertedBackground={false}
       faqs={[
         {
@@ -150,8 +156,9 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="footer" data-section="footer">
+  <div id="footer" data-section="footer" className="py-[48px] lg:py-[80px] bg-card">
       <FooterSimple
+      containerClassName="max-w-[1200px] mx-auto"
       columns={[
         {
           title: "SHOP",          items: [
@@ -180,9 +187,11 @@ export default function LandingPage() {
       ]}
       bottomLeftText="© 2024 Altitude Beverages"
       bottomRightText="Privacy Policy | Terms of Service"
+      columnItemClassName="font-mono text-[11px] uppercase"
+      dividerClassName="border-t border-t-[var(--accent)]"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}