Update src/app/contact/page.tsx

Merge version_1 into main

src/app/about/page.tsx

@@ -2,9 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import MediaAbout from '@/components/sections/about/MediaAbout';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function AboutPage() {
   return (
@@ -23,26 +23,35 @@ export default function AboutPage() {
       <ReactLenis root>
         <div id="nav" data-section="nav">
           <NavbarLayoutFloatingInline
-            navItems={[ { name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Municipalities", id: "/municipalities" }, { name: "Gallery", id: "/gallery" }, { name: "Contact", id: "/contact" } ]}
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Municipalities", id: "/municipalities" },
+              { name: "Gallery", id: "/gallery" },
+              { name: "Contact", id: "/contact" },
+            ]}
             brandName="Jhapa District"
-            button={{ text: "Contact Us", href: "/contact" }}
+            button={{ text: "Get Started", href: "/contact" }}
           />
         </div>
 
         <div id="about" data-section="about">
-          <MediaAbout
+          <TextSplitAbout
+            title="About Jhapa District"
+            description={[
+              "Jhapa is the easternmost district of Nepal, known as the gateway to the country.",              "It is a vibrant region with fertile plains, extensive tea plantations, and a rich cultural mosaic.",              "Our district plays a pivotal role in Nepal's agricultural economy and serves as a major trade hub for the region."
+            ]}
             useInvertedBackground={false}
-            title="About Our District"
-            description="Jhapa is the easternmost district of Nepal, known for its extensive tea plantations, religious diversity, and strategic trade route location."
-            imageSrc="http://img.b2bpic.net/free-photo/asian-people-having-dinner-party_23-2149552629.jpg"
-            imageAlt="Jhapa district culture tradition"
           />
         </div>
 
         <div id="footer" data-section="footer">
           <FooterBaseReveal
             logoText="Jhapa District"
-            columns={[ { title: "Explore", items: [{ label: "About", href: "/about" }, { label: "Municipalities", href: "/municipalities" }] }, { title: "Information", items: [{ label: "Gallery", href: "/gallery" }, { label: "Contact", href: "/contact" }] } ]}
+            columns={[
+              { title: "Explore", items: [{ label: "About", href: "/about" }, { label: "Municipalities", href: "/municipalities" }] },
+              { title: "Information", items: [{ label: "Gallery", href: "/gallery" }, { label: "Contact", href: "/contact" }] },
+            ]}
             copyrightText="© 2024 Jhapa District Portal. All rights reserved."
           />
         </div>

src/app/contact/page.tsx

@@ -2,9 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function ContactPage() {
   return (
@@ -23,24 +23,39 @@ export default function ContactPage() {
       <ReactLenis root>
         <div id="nav" data-section="nav">
           <NavbarLayoutFloatingInline
-            navItems={[ { name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Municipalities", id: "/municipalities" }, { name: "Gallery", id: "/gallery" }, { name: "Contact", id: "/contact" } ]}
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Municipalities", id: "/municipalities" },
+              { name: "Gallery", id: "/gallery" },
+              { name: "Contact", id: "/contact" },
+            ]}
             brandName="Jhapa District"
             button={{ text: "Contact Us", href: "/contact" }}
           />
         </div>
 
         <div id="contact" data-section="contact">
-          <ContactText
+          <ContactSplitForm
+            title="Get in Touch"
+            description="Have questions or need assistance? Reach out to our team."
+            inputs={[
+                { name: "name", type: "text", placeholder: "Full Name", required: true },
+                { name: "email", type: "email", placeholder: "Email Address", required: true }
+            ]}
+            textarea={{ name: "message", placeholder: "How can we help?", required: true }}
+            imageSrc="http://img.b2bpic.net/free-photo/contact-us-customer-support-concept_1150-17979.jpg?_wi=1"
             useInvertedBackground={false}
-            background={{ variant: "gradient-bars" }}
-            text="Have questions or need information about Jhapa District? Reach out to our local office."
           />
         </div>
 
         <div id="footer" data-section="footer">
           <FooterBaseReveal
             logoText="Jhapa District"
-            columns={[ { title: "Explore", items: [{ label: "About", href: "/about" }, { label: "Municipalities", href: "/municipalities" }] }, { title: "Information", items: [{ label: "Gallery", href: "/gallery" }, { label: "Contact", href: "/contact" }] } ]}
+            columns={[
+              { title: "Explore", items: [{ label: "About", href: "/about" }, { label: "Municipalities", href: "/municipalities" }] },
+              { title: "Information", items: [{ label: "Gallery", href: "/gallery" }, { label: "Contact", href: "/contact" }] },
+            ]}
             copyrightText="© 2024 Jhapa District Portal. All rights reserved."
           />
         </div>

src/app/gallery/page.tsx

@@ -2,10 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 
 export default function GalleryPage() {
   return (
@@ -24,40 +23,42 @@ export default function GalleryPage() {
       <ReactLenis root>
         <div id="nav" data-section="nav">
           <NavbarLayoutFloatingInline
-            navItems={[ { name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Municipalities", id: "/municipalities" }, { name: "Gallery", id: "/gallery" }, { name: "Contact", id: "/contact" } ]}
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Municipalities", id: "/municipalities" },
+              { name: "Gallery", id: "/gallery" },
+              { name: "Contact", id: "/contact" },
+            ]}
             brandName="Jhapa District"
-            button={{ text: "Contact Us", href: "/contact" }}
+            button={{ text: "Get Started", href: "/contact" }}
           />
         </div>
 
         <div id="gallery" data-section="gallery">
           <ProductCardFour
+            title="Jhapa District Gallery"
+            description="Explore the breathtaking beauty and rich cultural heritage of Jhapa through our curated collection."
+            gridVariant="four-items-2x2-equal-grid"
             animationType="slide-up"
             textboxLayout="default"
-            gridVariant="three-columns-all-equal-width"
             useInvertedBackground={false}
-            products={[ { id: "g1", name: "Tea Gardens", price: "Nature", variant: "Landscape", imageSrc: "http://img.b2bpic.net/free-photo/tea-plantation-asia_1147-563.jpg" }, { id: "g2", name: "Kankai River", price: "Landmark", variant: "Riverside", imageSrc: "http://img.b2bpic.net/free-photo/tourists-walks-through-woods_72229-7.jpg" }, { id: "g3", name: "Local Temples", price: "Spiritual", variant: "Heritage", imageSrc: "http://img.b2bpic.net/free-photo/indian-hindu-temple-singapore_1203-7102.jpg" } ]}
+            products={[
-            title="District Gallery"
+              { id: "g1", name: "Kankai River Sunset", price: "", variant: "Landscape", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-scenery-green-trees-high-mountains-reflected-lake_181624-7823.jpg?_wi=1" },
-            description="Capturing the essence of Jhapa through its natural and cultural beauty."
+              { id: "g2", name: "Traditional Culture", price: "", variant: "Heritage", imageSrc: "http://img.b2bpic.net/free-photo/charming-young-girl-colored-embroidered-dress-poses-near-house_8353-9555.jpg?_wi=1" },
-          />
+              { id: "g3", name: "Tea Gardens", price: "", variant: "Agriculture", imageSrc: "http://img.b2bpic.net/free-photo/green-tea-bud-leaves-green-tea-plantations-morning-nature-background_335224-954.jpg" },
-        </div>
+              { id: "g4", name: "Scenic Waterways", price: "", variant: "Landscape", imageSrc: "http://img.b2bpic.net/free-photo/pitfour-lake_181624-2407.jpg" }
-
+            ]}
-        <div id="product" data-section="product">
-          <ProductCardTwo
-            animationType="slide-up"
-            textboxLayout="default"
-            gridVariant="uniform-all-items-equal"
-            useInvertedBackground={false}
-            title="Community Moments"
-            description="Daily life in the eastern gateway."
-            products={[ { id: "p1", brand: "Life", name: "Community Market", price: "Free", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/indigenous-person-doing-daily-chores-showcasing-lifestyle_23-2149711135.jpg" }, { id: "p2", brand: "Nature", name: "Tea Harvest", price: "Free", rating: 4, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-tea-plantation-south-east-asia_1147-562.jpg?_wi=1" }, { id: "p3", brand: "Nature", name: "Tea Harvest 2", price: "Free", rating: 4, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-tea-plantation-south-east-asia_1147-562.jpg?_wi=2" } ]}
           />
         </div>
 
         <div id="footer" data-section="footer">
           <FooterBaseReveal
             logoText="Jhapa District"
-            columns={[ { title: "Explore", items: [{ label: "About", href: "/about" }, { label: "Municipalities", href: "/municipalities" }] }, { title: "Information", items: [{ label: "Gallery", href: "/gallery" }, { label: "Contact", href: "/contact" }] } ]}
+            columns={[
+              { title: "Explore", items: [{ label: "About", href: "/about" }, { label: "Municipalities", href: "/municipalities" }] },
+              { title: "Information", items: [{ label: "Gallery", href: "/gallery" }, { label: "Contact", href: "/contact" }] },
+            ]}
             copyrightText="© 2024 Jhapa District Portal. All rights reserved."
           />
         </div>

src/app/municipalities/page.tsx

@@ -2,10 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
-import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function MunicipalitiesPage() {
   return (
@@ -24,36 +23,39 @@ export default function MunicipalitiesPage() {
       <ReactLenis root>
         <div id="nav" data-section="nav">
           <NavbarLayoutFloatingInline
-            navItems={[ { name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Municipalities", id: "/municipalities" }, { name: "Gallery", id: "/gallery" }, { name: "Contact", id: "/contact" } ]}
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Municipalities", id: "/municipalities" },
+              { name: "Gallery", id: "/gallery" },
+              { name: "Contact", id: "/contact" },
+            ]}
             brandName="Jhapa District"
-            button={{ text: "Contact Us", href: "/contact" }}
+            button={{ text: "Get Started", href: "/contact" }}
           />
         </div>
 
-        <div id="features" data-section="features">
+        <div id="municipalities" data-section="municipalities">
-          <FeatureCardNineteen
+          <MetricCardSeven
+            animationType="slide-up"
             textboxLayout="default"
             useInvertedBackground={false}
-            features={[ { tag: "City", title: "Birtamod", subtitle: "Commercial Hub", description: "The center of trade and commerce in Jhapa.", imageSrc: "http://img.b2bpic.net/free-photo/lake-mountain-thailand_1150-12912.jpg", imageAlt: "lake mountain thailand" }, { tag: "City", title: "Damak", subtitle: "Developing Metropolis", description: "Known for modern infrastructure and rapid growth.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-scenery-green-trees-high-mountains-reflected-lake_181624-7823.jpg?_wi=2", imageAlt: "lake mountain thailand" }, { tag: "City", title: "Mechinagar", subtitle: "Border Gate", description: "The eastern gateway to Nepal via Kakarvitta.", imageSrc: "http://img.b2bpic.net/free-photo/charming-young-girl-colored-embroidered-dress-poses-near-house_8353-9555.jpg?_wi=2", imageAlt: "lake mountain thailand" } ]}
+            title="Municipalities of Jhapa"
-            title="Our Municipalities"
+            description="Jhapa consists of 8 municipalities and 7 rural municipalities, contributing to the district's diverse administrative and cultural landscape."
-            description="Jhapa is home to several major cities and municipalities driving our economic development."
+            metrics={[
-          />
+              { id: "mun1", value: "8", title: "Municipalities", items: ["Birtamod", "Damak", "Mechinagar", "Arjundhara", "Shivasatakshi", "Kankai", "Gauradaha", "Bhadrapur"] },
-        </div>
+              { id: "mun2", value: "7", title: "Rural Municipalities", items: ["Barhadashi", "Buddhashanti", "Haldibari", "Jhapa", "Kamal", "Kachankawal", " Gaurigunj"] },
-
+            ]}
-        <div id="feature" data-section="feature">
-          <FeatureCardSix
-            textboxLayout="default"
-            useInvertedBackground={false}
-            title="Urban Development"
-            description="Growth focused infrastructure."
-            features={[ { title: "Education", description: "High-quality academic centers.", imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-boy-scouts-woods_52683-94218.jpg" }, { title: "Healthcare", description: "Modern health facilities.", imageSrc: "http://img.b2bpic.net/free-photo/traditional-house-architecture_23-2151050967.jpg" } ]}
           />
         </div>
 
         <div id="footer" data-section="footer">
           <FooterBaseReveal
             logoText="Jhapa District"
-            columns={[ { title: "Explore", items: [{ label: "About", href: "/about" }, { label: "Municipalities", href: "/municipalities" }] }, { title: "Information", items: [{ label: "Gallery", href: "/gallery" }, { label: "Contact", href: "/contact" }] } ]}
+            columns={[
+              { title: "Explore", items: [{ label: "About", href: "/about" }, { label: "Municipalities", href: "/municipalities" }] },
+              { title: "Information", items: [{ label: "Gallery", href: "/gallery" }, { label: "Contact", href: "/contact" }] },
+            ]}
             copyrightText="© 2024 Jhapa District Portal. All rights reserved."
           />
         </div>