Update src/app/contact/page.tsx

Merge version_2 into main

src/app/about/page.tsx

@@ -2,13 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterCard from '@/components/sections/footer/FooterCard';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import SplitAbout from '@/components/sections/about/SplitAbout';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import FooterCard from '@/components/sections/footer/FooterCard';
 
-export default function LandingPage() {
+export default function AboutPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="bounce-effect"
@@ -23,104 +21,28 @@ export default function LandingPage() {
         headingFontWeight="light"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Gallery",
-          id: "/gallery",
-        },
-        {
-          name: "Booking",
-          id: "/booking",
-        },
-        {
-          name: "Donate",
-          id: "/donate",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      brandName="Wildlife Cenhori"
-    />
-  </div>
-
-  <div id="about-section" data-section="about-section">
-      <SplitAbout
-      textboxLayout="split"
-      useInvertedBackground={false}
-      title="Conservation at our core"
-      description="We are dedicated to the wildlife of Maharashtra."
-      bulletPoints={[
-        {
-          title: "Habitat Restoration",
-          description: "Restoring native trees in Tadoba.",
-        },
-        {
-          title: "Anti-Poaching Patrols",
-          description: "Constant monitoring of zones.",
-        },
-        {
-          title: "Community Outreach",
-          description: "Empowering local villages.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/view-young-deer-forest-by-grand-canyon_181624-50321.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <TextSplitAbout
-      useInvertedBackground={false}
-      title="Our Journey"
-      description={[
-        "Started as a small local initiative.",
-        "Now a regional hub for biodiversity.",
-      ]}
-    />
-  </div>
-
-  <div id="metric" data-section="metric">
-      <MetricCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      title="Reach"
-      description="The scale of our efforts."
-      metrics={[
-        {
-          id: "s1",
-          value: "12",
-          description: "States Impacted",
-        },
-        {
-          id: "s2",
-          value: "100+",
-          description: "Local Staff",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterCard
-      logoText="Wildlife Cenhori"
-      copyrightText="© 2025 Wildlife Cenhori. Protecting the Wild."
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Gallery", id: "/gallery" },
+              { name: "Booking", id: "/booking" },
+              { name: "Donate", id: "/donate" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="Wildlife Cenhori"
+          />
+        </div>
+        <div id="about-section" data-section="about-section">
+          <TextSplitAbout
+            title="Dedicated to Conserving Maharashtra's Wild"
+            description={["Founded in 2010, our sanctuary aims to protect endangered species and educate the public on wildlife preservation through interactive technology and direct conservation efforts."]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <FooterCard logoText="Wildlife Cenhori" copyrightText="© 2025 Wildlife Cenhori. Protecting the Wild." />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/animals/page.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+export default function AnimalsPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Animals", id: "/animals" },
+              { name: "Carbon Footprint", id: "/carbon-footprint" },
+              { name: "About", id: "/about" }
+            ]}
+            brandName="Wildlife Cenhori"
+          />
+        </div>
+        <main className="min-h-screen pt-32 px-6">
+          <h1 className="text-4xl font-bold mb-8">3D Animal Viewer</h1>
+          <p>Interactive 3D wildlife exploration module coming soon.</p>
+        </main>
+        <FooterCard logoText="Wildlife Cenhori" />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/carbon-footprint/page.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+export default function CarbonFootprintPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Animals", id: "/animals" },
+              { name: "Carbon Footprint", id: "/carbon-footprint" },
+              { name: "About", id: "/about" }
+            ]}
+            brandName="Wildlife Cenhori"
+          />
+        </div>
+        <main className="min-h-screen pt-32 px-6">
+          <h1 className="text-4xl font-bold mb-8">Carbon Footprint Calculator</h1>
+          <p>Calculate your environmental impact with our interactive tools.</p>
+        </main>
+        <FooterCard logoText="Wildlife Cenhori" />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -2,10 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterCard from '@/components/sections/footer/FooterCard';
-import LegalSection from '@/components/legal/LegalSection';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterCard from '@/components/sections/footer/FooterCard';
 
 export default function ContactPage() {
   return (
@@ -22,52 +21,30 @@ export default function ContactPage() {
         headingFontWeight="light"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        { name: "Home", id: "/" },
-        { name: "About", id: "/about" },
-        { name: "Gallery", id: "/gallery" },
-        { name: "Booking", id: "/booking" },
-        { name: "Donate", id: "/donate" },
-        { name: "Contact", id: "/contact" }
-      ]}
-      brandName="Wildlife Cenhori"
-    />
-  </div>
-
-  <div id="legal" data-section="legal">
-      <LegalSection
-      layout="section"
-      title="Head Office"
-      sections={[
-        { heading: "Address", content: [{ type: "paragraph", text: "Tadoba-Andhari Tiger Reserve, Maharashtra." }] }
-      ]}
-    />
-  </div>
-
-  <div id="metric" data-section="metric">
-      <MetricCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      title="Quick Facts"
-      description="Contact info at a glance."
-      metrics={[
-        { id: "c1", value: "24/7", description: "Help Desk" },
-        { id: "c2", value: "10", description: "Support Nodes" }
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterCard
-      logoText="Wildlife Cenhori"
-      copyrightText="© 2025 Wildlife Cenhori. Protecting the Wild."
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Gallery", id: "/gallery" },
+              { name: "Booking", id: "/booking" },
+              { name: "Donate", id: "/donate" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="Wildlife Cenhori"
+          />
+        </div>
+        <div id="contact-section" data-section="contact-section">
+          <ContactCenter
+            tag="Support"
+            title="Get in Touch"
+            description="Have questions about our conservation programs or want to partner with us? We'd love to hear from you."
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
+          />
+        </div>
+        <FooterCard logoText="Wildlife Cenhori" copyrightText="© 2025 Wildlife Cenhori. Protecting the Wild." />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/itinerary/page.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+export default function ItineraryPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="largeSmallSizeMediumTitles"
+        background="fluid"
+        cardStyle="glass-depth"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Sanctuary", id: "/sanctuary" },
+            { name: "Itinerary", id: "/itinerary" },
+            { name: "Gallery", id: "/gallery" },
+            { name: "Booking", id: "/booking" },
+            { name: "Donate", id: "/donate" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          brandName="Wildlife Cenhori"
+        />
+        <main className="pt-32 pb-20 px-6">
+          <h1 className="text-5xl font-bold mb-8">AI Itinerary Builder</h1>
+          <div className="bg-white/50 p-12 rounded-2xl border border-white/20">
+            <p className="text-lg">Customize your perfect sanctuary visit with our AI-powered itinerary builder.</p>
+          </div>
+        </main>
+        <FooterCard logoText="Wildlife Cenhori" copyrightText="© 2025 Wildlife Cenhori. Protecting the Wild." />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -9,6 +9,7 @@ import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductCatalogItem from '@/components/ecommerce/productCatalog/ProductCatalogItem';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import TimelineCardStack from '@/components/cardStack/layouts/timelines/TimelineCardStack';
 
 export default function LandingPage() {
   return (
@@ -52,6 +53,23 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="biodiversity" data-section="biodiversity">
+    <TimelineCardStack
+      title="Maharashtra's Biodiversity"
+      description="Deep dive into the incredible ecosystems of Tadoba-Andhari and Pench Tiger Reserves."
+      textboxLayout="split"
+    >
+      <div className="space-y-6">
+        <h3 className="text-2xl font-semibold">Tadoba-Andhari Tiger Reserve</h3>
+        <p>Known as the 'Jewel of Vidarbha', Tadoba is Maharashtra's oldest and largest national park. It boasts a thriving population of tigers, leopards, and sloth bears amidst its dry deciduous forests.</p>
+      </div>
+      <div className="space-y-6">
+        <h3 className="text-2xl font-semibold">Pench Tiger Reserve</h3>
+        <p>Straddling the border of Maharashtra and Madhya Pradesh, Pench is famous for its open canopy forests and high density of herbivores, providing a classic safari experience of the Indian wild.</p>
+      </div>
+    </TimelineCardStack>
+  </div>
+
   <div id="features" data-section="features">
       <FeatureCardTwentyThree
       animationType="slide-up"
@@ -98,4 +116,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/sanctuary/page.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+export default function SanctuaryPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="largeSmallSizeMediumTitles"
+        background="fluid"
+        cardStyle="glass-depth"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Sanctuary", id: "/sanctuary" },
+            { name: "Itinerary", id: "/itinerary" },
+            { name: "Gallery", id: "/gallery" },
+            { name: "Booking", id: "/booking" },
+            { name: "Donate", id: "/donate" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          brandName="Wildlife Cenhori"
+        />
+        <main className="pt-32 pb-20 px-6">
+          <h1 className="text-5xl font-bold mb-8">3D Sanctuary Map</h1>
+          <div className="aspect-video bg-slate-900 rounded-2xl flex items-center justify-center">
+            <p className="text-white">3D Sanctuary Map Feature Placeholder</p>
+          </div>
+        </main>
+        <FooterCard logoText="Wildlife Cenhori" copyrightText="© 2025 Wildlife Cenhori. Protecting the Wild." />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f0e8;
-  --card: #ffffff;
-  --foreground: #544236;
-  --primary-cta: #FF8C00;
+  --background: #fdfaf6;
+  --card: #efebe5;
+  --foreground: #2b180a;
+  --primary-cta: #0a7039;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #006400;
+  --secondary-cta: #ff7b05;
   --secondary-cta-text: #ffffff;
-  --accent: #A1A17F;
-  --background-accent: #006400;
+  --accent: #8b5a2b;
+  --background-accent: #efebe5;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);