Merge version_2 into main

Merge version_2 into main

src/app/about/page.tsx

@@ -1,140 +1,58 @@
 "use client";
 
-import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
-import TeamCardFive from "@/components/sections/team/TeamCardFive";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import { Film, Users, Heart } from "lucide-react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
+import TeamCardTen from "@/components/sections/team/TeamCardTen";
 
 export default function AboutPage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Portfolio", id: "portfolio" },
-    { name: "Services", id: "/services" },
-    { name: "About", id: "/about" },
-    { name: "Contact", id: "contact" },
-  ];
-
-  const footerColumns = [
-    {
-      title: "Services",
-      items: [
-        { label: "Wedding Photography", href: "/services" },
-        { label: "Cinematography", href: "/services" },
-        { label: "Engagement Shoots", href: "/services" },
-        { label: "Drone Coverage", href: "/services" },
-      ],
-    },
-    {
-      title: "Company",
-      items: [
-        { label: "About Us", href: "/about" },
-        { label: "Portfolio", href: "/" },
-        { label: "Pricing", href: "/services" },
-        { label: "Contact", href: "/" },
-      ],
-    },
-    {
-      title: "Connect",
-      items: [
-        { label: "Instagram", href: "https://instagram.com/lunaartprod" },
-        { label: "Facebook", href: "https://facebook.com/lunaartprod" },
-        { label: "Email", href: "mailto:hello@lunaartprod.com" },
-        { label: "WhatsApp", href: "https://wa.me/21698123456" },
-      ],
-    },
-  ];
-
   return (
     <ThemeProvider
-      defaultButtonVariant="text-stagger"
-      defaultTextAnimation="background-highlight"
-      borderRadius="soft"
-      contentWidth="compact"
-      sizing="largeSmall"
-      background="fluid"
-      cardStyle="glass-depth"
-      primaryButtonStyle="diagonal-gradient"
-      secondaryButtonStyle="radial-glow"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
-          navItems={navItems}
-          brandName="Luna Art Prod"
-          bottomLeftText="Kairouan, Tunisia"
-          bottomRightText="hello@lunaartprod.com"
-        />
-      </div>
-
+      <NavbarStyleApple
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "About", id: "/about" },
+          { name: "Booking", id: "/booking" },
+        ]}
+        brandName="Webild"
+      />
       <div id="about" data-section="about">
-        <TestimonialAboutCard
-          tag="Our Story"
-          tagIcon={Film}
-          tagAnimation="slide-up"
-          title="Founded by John (Yahia Hamdi), a passionate cinematographer dedicated to capturing authentic emotions and timeless moments."
-          description="Meet the Artist"
-          subdescription="Cinematic Storyteller & Wedding Film Director"
-          icon={Heart}
-          imageSrc="http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-9486.jpg"
-          imageAlt="John Yahia Hamdi - Founder of Luna Art Prod"
-          mediaAnimation="slide-up"
+        <InlineImageSplitTextAbout
+          heading={[
+            { type: "text", content: "Our company story" },
+          ]}
           useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="team" data-section="team">
-        <TeamCardFive
-          title="Meet Our Creative Team"
-          description="Talented professionals dedicated to capturing your wedding story with artistry and precision."
-          tag="Our Team"
-          tagIcon={Users}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          animationType="slide-up"
-          team={[
-            {
-              id: "1",
-              name: "John Yahia Hamdi",
-              role: "Cinematographer & Founder",
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-16435.jpg?_wi=2",
-              imageAlt: "John Yahia Hamdi",
-            },
-            {
-              id: "2",
-              name: "Sofia Martinez",
-              role: "Lead Photographer",
-              imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-holding-professional-dslr-camera-thinking_114579-64245.jpg?_wi=2",
-              imageAlt: "Sofia Martinez",
-            },
-            {
-              id: "3",
-              name: "Karim Jendoubi",
-              role: "Video Editor & Colorist",
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-1524.jpg?_wi=2",
-              imageAlt: "Karim Jendoubi",
-            },
-            {
-              id: "4",
-              name: "Amira Bouaziz",
-              role: "Creative Director",
-              imageSrc: "http://img.b2bpic.net/free-photo/brunette-female-traveler-with-backpack-holds-compact-photo-camera_613910-1402.jpg?_wi=2",
-              imageAlt: "Amira Bouaziz",
-            },
+          buttons={[
+            { text: "Learn More", href: "/" },
           ]}
         />
       </div>
-
-      <div id="footer" data-section="footer">
-        <FooterBase
-          columns={footerColumns}
-          logoText="Luna Art Prod"
-          copyrightText="© 2024 Luna Art Prod. All rights reserved. Wedding Photography & Cinematography in Tunisia."
+      <div id="team" data-section="team">
+        <TeamCardTen
+          title="Meet our talented team"
+          tag="Team"
+          members={[
+            {
+              id: "1",              name: "Team Member One",              imageSrc: "/placeholder.jpg?_wi=1",              imageAlt: "Team member"},
+            {
+              id: "2",              name: "Team Member Two",              imageSrc: "/placeholder.jpg?_wi=2",              imageAlt: "Team member"},
+          ]}
+          memberVariant="default"
+          useInvertedBackground={false}
+          membersAnimation="slide-up"
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/booking/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import Textarea from "@/components/form/Textarea";
+
+export default function BookingPage() {
+  const [formData, setFormData] = useState({
+    name: "",    email: "",    message: ""});
+
+  const handleSubmit = (email: string) => {
+    console.log("Form submitted with email:", email);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarStyleApple
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "About", id: "/about" },
+          { name: "Booking", id: "/booking" },
+        ]}
+        brandName="Webild"
+      />
+      <div id="booking-cta" data-section="booking-cta">
+        <ContactCenter
+          tag="Booking"
+          title="Schedule Your Booking"
+          description="Get in touch with us to schedule your appointment or booking. We'll be happy to assist you."
+          useInvertedBackground={false}
+          background={{ variant: "plain" }}
+          inputPlaceholder="Enter your email"
+          buttonText="Schedule Now"
+          onSubmit={handleSubmit}
+        />
+      </div>
+      <div id="booking-form" data-section="booking-form" className="py-16 px-4">
+        <div className="max-w-2xl mx-auto">
+          <h2 className="text-3xl font-bold mb-8">Booking Form</h2>
+          <form className="space-y-6">
+            <div>
+              <label className="block text-sm font-medium mb-2">Name</label>
+              <input
+                type="text"
+                value={formData.name}
+                onChange={(e) =>
+                  setFormData({ ...formData, name: e.target.value })
+                }
+                placeholder="Your name"
+                className="w-full px-4 py-2 border rounded-lg"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-2">Email</label>
+              <input
+                type="email"
+                value={formData.email}
+                onChange={(e) =>
+                  setFormData({ ...formData, email: e.target.value })
+                }
+                placeholder="your@email.com"
+                className="w-full px-4 py-2 border rounded-lg"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-2">Message</label>
+              <Textarea
+                value={formData.message}
+                onChange={(value) =>
+                  setFormData({ ...formData, message: value })
+                }
+                placeholder="Tell us about your booking request"
+                rows={5}
+              />
+            </div>
+            <button
+              type="submit"
+              className="w-full px-6 py-3 bg-primary-cta text-white rounded-lg font-medium hover:opacity-90"
+            >
+              Submit Booking
+            </button>
+          </form>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -1,343 +1,34 @@
 "use client";
 
-import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
-import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
-import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
-import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
-import TeamCardFive from "@/components/sections/team/TeamCardFive";
-import ContactSplit from "@/components/sections/contact/ContactSplit";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import { Sparkles, Heart, Camera, Award, TrendingUp, Users, Film, Calendar } from "lucide-react";
-
-export default function HomePage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Portfolio", id: "portfolio" },
-    { name: "Services", id: "/services" },
-    { name: "About", id: "/about" },
-    { name: "Contact", id: "contact" },
-  ];
-
-  const footerColumns = [
-    {
-      title: "Services",
-      items: [
-        { label: "Wedding Photography", href: "/services" },
-        { label: "Cinematography", href: "/services" },
-        { label: "Engagement Shoots", href: "/services" },
-        { label: "Drone Coverage", href: "/services" },
-      ],
-    },
-    {
-      title: "Company",
-      items: [
-        { label: "About Us", href: "/about" },
-        { label: "Portfolio", href: "/" },
-        { label: "Pricing", href: "/services" },
-        { label: "Contact", href: "/" },
-      ],
-    },
-    {
-      title: "Connect",
-      items: [
-        { label: "Instagram", href: "https://instagram.com/lunaartprod" },
-        { label: "Facebook", href: "https://facebook.com/lunaartprod" },
-        { label: "Email", href: "mailto:hello@lunaartprod.com" },
-        { label: "WhatsApp", href: "https://wa.me/21698123456" },
-      ],
-    },
-  ];
-
-  const handleNavClick = (id: string) => {
-    if (id.startsWith("/")) {
-      // This is handled by Link component
-      return;
-    }
-    const element = document.getElementById(id);
-    if (element) {
-      element.scrollIntoView({ behavior: "smooth" });
-    }
-  };
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 
+export default function Home() {
   return (
     <ThemeProvider
-      defaultButtonVariant="text-stagger"
-      defaultTextAnimation="background-highlight"
-      borderRadius="soft"
-      contentWidth="compact"
-      sizing="largeSmall"
-      background="fluid"
-      cardStyle="glass-depth"
-      primaryButtonStyle="diagonal-gradient"
-      secondaryButtonStyle="radial-glow"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
-          navItems={navItems}
-          brandName="Luna Art Prod"
-          bottomLeftText="Kairouan, Tunisia"
-          bottomRightText="hello@lunaartprod.com"
-        />
-      </div>
-
+      <NavbarStyleApple
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "About", id: "/about" },
+          { name: "Booking", id: "/booking" },
+        ]}
+        brandName="Webild"
+      />
       <div id="hero" data-section="hero">
-        <HeroSplitDualMedia
-          title="Cinematic Wedding Photography & Films in Tunisia"
-          description="Capturing your story with elegance and emotion. Transforming precious moments into timeless cinematic memories."
-          tag="Premium Wedding Services"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          background={{ variant: "plain" }}
-          buttons={[
-            { text: "Check Availability", href: "/services" },
-            { text: "Call Now", href: "tel:+21698123456" },
-          ]}
-          buttonAnimation="slide-up"
-          mediaItems={[
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-young-man-near-illuminated-street-lamp_23-2148012458.jpg",
-              imageAlt: "Wedding couple first dance cinematic moment",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/brunette-female-white-dress-with-sincere-smile_181624-30895.jpg",
-              imageAlt: "Bride and groom elegant wedding portrait",
-            },
-          ]}
-          mediaAnimation="slide-up"
-          rating={5}
-          ratingText="Rated by loving couples and families"
-        />
-      </div>
-
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardOne
-          title="What Our Couples Say"
-          description="Real stories from the couples we've had the privilege of capturing."
-          tag="Client Testimonials"
-          tagIcon={Heart}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          gridVariant="uniform-all-items-equal"
-          carouselMode="buttons"
-          animationType="slide-up"
-          testimonials={[
-            {
-              id: "1",
-              name: "Sarah & Ahmed",
-              role: "Bride & Groom",
-              company: "Kairouan Wedding 2024",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/romantic-wedding-couple-love-walks-mountains-forest_1328-4943.jpg?_wi=1",
-              imageAlt: "Sarah and Ahmed wedding portrait",
-            },
-            {
-              id: "2",
-              name: "Fatima & Hassan",
-              role: "Bride & Groom",
-              company: "Sousse Wedding 2024",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-romantic-couple-sensually-hugging-each-other-date-outdoor_574295-1058.jpg?_wi=1",
-              imageAlt: "Fatima and Hassan couple portrait",
-            },
-            {
-              id: "3",
-              name: "Leila Ben Amara",
-              role: "Event Coordinator",
-              company: "Tunis Events",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/attractive-girl-portrait-white-shirt_158595-1477.jpg?_wi=1",
-              imageAlt: "Leila Ben Amara headshot",
-            },
-            {
-              id: "4",
-              name: "Karim Mansouri",
-              role: "Wedding Planner",
-              company: "Sfax Premium Weddings",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-outdoors-portrait_158595-3552.jpg?_wi=1",
-              imageAlt: "Karim Mansouri headshot",
-            },
-            {
-              id: "5",
-              name: "Amina Khalifa",
-              role: "Mother of the Bride",
-              company: "Family Celebrations",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/elegant-young-woman-room-with-christmas-lights_23-2147724286.jpg",
-              imageAlt: "Amina Khalifa portrait",
-            },
-            {
-              id: "6",
-              name: "Mohamed Khadri",
-              role: "Family Representative",
-              company: "Heritage Weddings",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-modern-stylish-male-glance-grey-background_613910-1586.jpg",
-              imageAlt: "Mohamed Khadri portrait",
-            },
-          ]}
-        />
-      </div>
-
-      <div id="portfolio" data-section="portfolio">
-        <FeatureCardOne
-          title="Featured Portfolio Highlights"
-          description="Explore our selection of stunning wedding cinematography, photography, and visual storytelling projects."
-          tag="Visual Stories"
-          tagIcon={Camera}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          gridVariant="uniform-all-items-equal"
-          carouselMode="buttons"
-          animationType="slide-up"
-          features={[
-            {
-              title: "Wedding Ceremonies",
-              description: "Elegant and emotional ceremony coverage capturing every significant moment with cinematic precision.",
-              imageSrc: "http://img.b2bpic.net/free-photo/festive-table-restaurant-is-decorated-with-candles-flowers_8353-9968.jpg?_wi=1",
-              button: { text: "View Gallery" },
-            },
-            {
-              title: "Reception Moments",
-              description: "Celebration moments, dancing, family interactions, and pure joy captured in stunning detail.",
-              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-groom-having-their-wedding-with-guests-beach_23-2149043992.jpg?_wi=1",
-              button: { text: "View Gallery" },
-            },
-            {
-              title: "Couple Portraits",
-              description: "Intimate couple portraits and first dances filmed with cinematic lighting and professional cinematography.",
-              imageSrc: "http://img.b2bpic.net/free-photo/young-man-hugging-kissing-elegant-woman-sitting-steps_23-2148012523.jpg?_wi=1",
-              button: { text: "View Gallery" },
-            },
-            {
-              title: "Engagement Sessions",
-              description: "Professional engagement photoshoots in beautiful locations across Tunisia showcasing your love story.",
-              imageSrc: "http://img.b2bpic.net/free-photo/blonde-woman-brunette-man-hugging-farm-near-fence-woman-wearing-black-clothes-red-leather-coat-man-wearing-brown-coat-man-woman-hugging_1157-51296.jpg?_wi=1",
-              button: { text: "View Gallery" },
-            },
-          ]}
-        />
-      </div>
-
-      <div id="metrics" data-section="metrics">
-        <MetricCardTen
-          title="Why Couples Choose Luna Art Prod"
-          description="Our proven track record of delivering exceptional wedding photography and cinematography across Tunisia."
-          tag="Our Expertise"
-          tagIcon={TrendingUp}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          animationType="slide-up"
-          carouselMode="buttons"
-          metrics={[
-            {
-              id: "1",
-              title: "150+ Weddings Captured",
-              subtitle: "Professional coverage across Tunisia",
-              category: "Experience",
-              value: "10+ Years",
-            },
-            {
-              id: "2",
-              title: "4.9/5 Average Rating",
-              subtitle: "From 200+ verified client reviews",
-              category: "Reputation",
-              value: "Trusted",
-            },
-            {
-              id: "3",
-              title: "100% Digital Delivery",
-              subtitle: "Cloud storage, USB, and physical albums",
-              category: "Service",
-              value: "Complete",
-            },
-            {
-              id: "4",
-              title: "24-Hour Edit Available",
-              subtitle: "Same-day highlight reels for your guests",
-              category: "Speed",
-              value: "Fast Track",
-            },
-          ]}
-        />
-      </div>
-
-      <div id="team" data-section="team">
-        <TeamCardFive
-          title="Meet Our Creative Team"
-          description="Talented professionals dedicated to capturing your wedding story with artistry and precision."
-          tag="Our Team"
-          tagIcon={Users}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          animationType="slide-up"
-          team={[
-            {
-              id: "1",
-              name: "John Yahia Hamdi",
-              role: "Cinematographer & Founder",
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-16435.jpg?_wi=1",
-              imageAlt: "John Yahia Hamdi",
-            },
-            {
-              id: "2",
-              name: "Sofia Martinez",
-              role: "Lead Photographer",
-              imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-holding-professional-dslr-camera-thinking_114579-64245.jpg?_wi=1",
-              imageAlt: "Sofia Martinez",
-            },
-            {
-              id: "3",
-              name: "Karim Jendoubi",
-              role: "Video Editor & Colorist",
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-1524.jpg?_wi=1",
-              imageAlt: "Karim Jendoubi",
-            },
-            {
-              id: "4",
-              name: "Amira Bouaziz",
-              role: "Creative Director",
-              imageSrc: "http://img.b2bpic.net/free-photo/brunette-female-traveler-with-backpack-holds-compact-photo-camera_613910-1402.jpg?_wi=1",
-              imageAlt: "Amira Bouaziz",
-            },
-          ]}
-        />
-      </div>
-
-      <div id="contact" data-section="contact">
-        <ContactSplit
-          tag="Get Started"
-          tagIcon={Calendar}
-          tagAnimation="slide-up"
-          title="Check if Your Wedding Date is Available"
-          description="Fill out our quick form or call us directly to discuss your wedding vision and check availability. We typically respond within 24 hours."
-          background={{ variant: "sparkles-gradient" }}
-          useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/side-view-brides-couple-looking-each-other_8353-11994.jpg?_wi=1"
-          imageAlt="Wedding couple getting ready"
-          mediaAnimation="slide-up"
-          mediaPosition="right"
-          inputPlaceholder="your.email@example.com"
-          buttonText="Schedule Call"
-          termsText="We respect your privacy. We'll only use your information to contact you about your wedding."
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterBase
-          columns={footerColumns}
-          logoText="Luna Art Prod"
-          copyrightText="© 2024 Luna Art Prod. All rights reserved. Wedding Photography & Cinematography in Tunisia."
-        />
+        <h1 className="text-4xl font-bold">Welcome</h1>
+        <p>This is your home page</p>
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/portfolio/page.tsx

@@ -1,156 +1,121 @@
 "use client";
 
-import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
-import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
-import ContactSplit from "@/components/sections/contact/ContactSplit";
+import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Heart, Camera, Calendar } from "lucide-react";
+import { Quote } from "lucide-react";
 
-export default function PortfolioPage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Portfolio", id: "/portfolio" },
-    { name: "Services", id: "services" },
-    { name: "About", id: "about" },
-    { name: "Contact", id: "contact" },
-  ];
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "Portfolio", id: "/portfolio" },
+  { name: "About", id: "#about" },
+  { name: "Contact", id: "#contact" },
+];
 
-  const footerColumns = [
-    {
-      title: "Services",      items: [
-        { label: "Wedding Photography", href: "/services" },
-        { label: "Cinematography", href: "/services" },
-        { label: "Engagement Shoots", href: "/services" },
-        { label: "Drone Coverage", href: "/services" },
-      ],
-    },
-    {
-      title: "Company",      items: [
-        { label: "About Us", href: "/about" },
-        { label: "Portfolio", href: "/portfolio" },
-        { label: "Pricing", href: "/services" },
-        { label: "Contact", href: "/contact" },
-      ],
-    },
-    {
-      title: "Connect",      items: [
-        { label: "Instagram", href: "https://instagram.com/lunaartprod" },
-        { label: "Facebook", href: "https://facebook.com/lunaartprod" },
-        { label: "Email", href: "mailto:hello@lunaartprod.com" },
-        { label: "WhatsApp", href: "https://wa.me/21698123456" },
-      ],
-    },
-  ];
+const portfolioProjects = [
+  {
+    id: "1",    name: "E-commerce Platform",    price: "$15,000",    imageSrc: "/placeholders/placeholder-16-9.svg?_wi=1",    imageAlt: "E-commerce Platform Project"},
+  {
+    id: "2",    name: "Mobile App Design",    price: "$12,000",    imageSrc: "/placeholders/placeholder-16-9.svg?_wi=2",    imageAlt: "Mobile App Design Project"},
+  {
+    id: "3",    name: "Brand Identity",    price: "$8,000",    imageSrc: "/placeholders/placeholder-16-9.svg?_wi=3",    imageAlt: "Brand Identity Project"},
+  {
+    id: "4",    name: "Web Redesign",    price: "$10,000",    imageSrc: "/placeholders/placeholder-16-9.svg?_wi=4",    imageAlt: "Web Redesign Project"},
+];
 
+const testimonials = [
+  {
+    id: "1",    name: "Sarah Johnson",    role: "CEO at Tech Startup",    testimonial:
+      "Outstanding work! The team delivered exactly what we envisioned. Their attention to detail and professionalism was exceptional.",    icon: Quote,
+  },
+  {
+    id: "2",    name: "Michael Chen",    role: "Marketing Director",    testimonial:
+      "Fantastic collaboration from start to finish. The project exceeded our expectations and delivered measurable results.",    icon: Quote,
+  },
+  {
+    id: "3",    name: "Emily Rodriguez",    role: "Product Manager",    testimonial:
+      "Incredible attention to user experience. The designs are not only beautiful but highly functional and intuitive.",    icon: Quote,
+  },
+];
+
+export default function Portfolio() {
   return (
     <ThemeProvider
-      defaultButtonVariant="text-stagger"
-      defaultTextAnimation="background-highlight"
-      borderRadius="soft"
-      contentWidth="compact"
-      sizing="largeSmall"
-      background="fluid"
-      cardStyle="glass-depth"
-      primaryButtonStyle="diagonal-gradient"
-      secondaryButtonStyle="radial-glow"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
-          navItems={navItems}
-          brandName="Luna Art Prod"
-          bottomLeftText="Kairouan, Tunisia"
-          bottomRightText="hello@lunaartprod.com"
-        />
-      </div>
-
-      <div id="portfolio-full" data-section="portfolio-full">
-        <FeatureCardOne
-          title="Our Complete Portfolio"
-          description="Explore the full collection of weddings we've captured. Each project tells a unique love story through cinematic photography and videography."
-          tag="Visual Stories"
-          tagIcon={Camera}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          gridVariant="uniform-all-items-equal"
-          carouselMode="buttons"
-          animationType="slide-up"
-          features={[
-            {
-              title: "Ceremony Moments",              description: "Capturing the most emotional moments - the walk down the aisle, first kiss, and wedding vows with cinematic precision and intimate detail.",              imageSrc: "http://img.b2bpic.net/free-photo/festive-table-restaurant-is-decorated-with-candles-flowers_8353-9968.jpg",              imageAlt: "Wedding ceremony with elegant decoration",              button: { text: "View More" },
-            },
-            {
-              title: "Reception Celebrations",              description: "From first dances to family moments, we capture the joy, energy, and celebration of your reception with multiple camera angles.",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-groom-having-their-wedding-with-guests-beach_23-2149043992.jpg",              imageAlt: "Wedding reception party celebration",              button: { text: "View More" },
-            },
-            {
-              title: "Couple & Portrait Sessions",              description: "Timeless couple portraits with professional lighting, emotional connection, and cinematic color grading. Perfect for albums and framing.",              imageSrc: "http://img.b2bpic.net/free-photo/young-man-hugging-kissing-elegant-woman-sitting-steps_23-2148012523.jpg",              imageAlt: "Bride and groom couple portrait",              button: { text: "View More" },
-            },
-            {
-              title: "Pre-Wedding & Engagement",              description: "Beautiful engagement shoots in scenic Tunisian locations. These sessions celebrate your relationship before the big day.",              imageSrc: "http://img.b2bpic.net/free-photo/blonde-woman-brunette-man-hugging-farm-near-fence-woman-wearing-black-clothes-red-leather-coat-man-wearing-brown-coat-man-woman-hugging_1157-51296.jpg",              imageAlt: "Engagement photoshoot couple outdoor",              button: { text: "View More" },
-            },
+      <NavbarStyleFullscreen
+        navItems={navItems}
+        brandName="Webild"
+        bottomLeftText="Global Community"
+        bottomRightText="hello@example.com"
+      />
+      <div id="hero" data-section="hero">
+        <HeroBillboardScroll
+          title="Our Portfolio"
+          description="Showcase of our best work and successful projects"
+          tag="Gallery"
+          background={{ variant: "plain" }}
+          imageSrc="/placeholders/placeholder-16-9.svg?_wi=5"
+          imageAlt="Portfolio showcase"
+          buttons={[
+            { text: "View All Work", href: "#portfolio-gallery" },
+            { text: "Get Started", href: "#contact" },
           ]}
         />
       </div>
-
-      <div id="portfolio-testimonials" data-section="portfolio-testimonials">
-        <TestimonialCardOne
-          title="Featured Client Stories"
-          description="Real couples who trusted us to capture their most important day."
-          tag="Client Testimonials"
-          tagIcon={Heart}
-          tagAnimation="slide-up"
+      <div id="portfolio-gallery" data-section="portfolio-gallery" className="py-24">
+        <ProductCardOne
+          title="Portfolio Gallery"
+          description="Explore our collection of completed projects and creative work"
+          tag="Featured Projects"
+          products={portfolioProjects}
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          gridVariant="uniform-all-items-equal"
-          carouselMode="buttons"
+        />
+      </div>
+      <div id="testimonials" data-section="testimonials" className="py-24">
+        <TestimonialCardTwo
+          title="What Our Clients Say"
+          description="Real feedback from satisfied clients and partners"
+          tag="Testimonials"
+          testimonials={testimonials}
           animationType="slide-up"
-          testimonials={[
-            {
-              id: "1",              name: "Sarah & Ahmed",              role: "Bride & Groom",              company: "Kairouan Wedding 2024",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/romantic-wedding-couple-love-walks-mountains-forest_1328-4943.jpg",              imageAlt: "Sarah and Ahmed wedding day"},
-            {
-              id: "2",              name: "Fatima & Hassan",              role: "Bride & Groom",              company: "Sousse Wedding 2024",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-romantic-couple-sensually-hugging-each-other-date-outdoor_574295-1058.jpg",              imageAlt: "Fatima and Hassan couple moment"},
-            {
-              id: "3",              name: "Leila Ben Amara",              role: "Event Coordinator",              company: "Tunis Events",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/attractive-girl-portrait-white-shirt_158595-1477.jpg",              imageAlt: "Leila Ben Amara professional"},
-            {
-              id: "4",              name: "Karim Mansouri",              role: "Wedding Planner",              company: "Sfax Premium Weddings",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-outdoors-portrait_158595-3552.jpg",              imageAlt: "Karim Mansouri professional"},
-          ]}
-        />
-      </div>
-
-      <div id="portfolio-contact" data-section="portfolio-contact">
-        <ContactSplit
-          tag="Get Started"
-          tagIcon={Calendar}
-          tagAnimation="slide-up"
-          title="Your Wedding Awaits"
-          description="Inspired by our portfolio? Let's discuss how we can capture your unique wedding story with the same artistry and emotion. Check availability and book a consultation."
-          background={{ variant: "sparkles-gradient" }}
+          textboxLayout="default"
           useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/side-view-brides-couple-looking-each-other_8353-11994.jpg"
-          imageAlt="Bride and groom beautiful moment"
-          mediaAnimation="slide-up"
-          mediaPosition="right"
-          inputPlaceholder="your.email@example.com"
-          buttonText="Schedule Consultation"
-          termsText="We respect your privacy. We'll contact you within 24 hours to discuss your wedding vision."
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterBase
-          logoText="Luna Art Prod"
-          copyrightText="© 2024 Luna Art Prod. All rights reserved. Wedding Photography & Cinematography in Tunisia."
-          columns={footerColumns}
         />
       </div>
+      <FooterBase
+        logoText="Webild"
+        columns={[
+          {
+            title: "Product",            items: [
+              { label: "Features", href: "#features" },
+              { label: "Pricing", href: "#pricing" },
+            ],
+          },
+          {
+            title: "Company",            items: [
+              { label: "About", href: "#about" },
+              { label: "Contact", href: "#contact" },
+            ],
+          },
+        ]}
+        copyrightText="© 2025 | Webild"
+      />
     </ThemeProvider>
   );
-}
+}

src/app/services/page.tsx

@@ -1,210 +1,79 @@
 "use client";
 
-import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
-import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import { Award, Zap, Star, Sparkles, Crown } from "lucide-react";
+import AboutMetric from "@/components/sections/about/AboutMetric";
+import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
+import { TrendingUp, Zap, Globe, CheckCircle } from "lucide-react";
 
 export default function ServicesPage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Portfolio", id: "portfolio" },
-    { name: "Services", id: "/services" },
-    { name: "About", id: "/about" },
-    { name: "Contact", id: "contact" },
-  ];
-
-  const footerColumns = [
-    {
-      title: "Services",
-      items: [
-        { label: "Wedding Photography", href: "/services" },
-        { label: "Cinematography", href: "/services" },
-        { label: "Engagement Shoots", href: "/services" },
-        { label: "Drone Coverage", href: "/services" },
-      ],
-    },
-    {
-      title: "Company",
-      items: [
-        { label: "About Us", href: "/about" },
-        { label: "Portfolio", href: "/" },
-        { label: "Pricing", href: "/services" },
-        { label: "Contact", href: "/" },
-      ],
-    },
-    {
-      title: "Connect",
-      items: [
-        { label: "Instagram", href: "https://instagram.com/lunaartprod" },
-        { label: "Facebook", href: "https://facebook.com/lunaartprod" },
-        { label: "Email", href: "mailto:hello@lunaartprod.com" },
-        { label: "WhatsApp", href: "https://wa.me/21698123456" },
-      ],
-    },
-  ];
-
   return (
     <ThemeProvider
-      defaultButtonVariant="text-stagger"
-      defaultTextAnimation="background-highlight"
-      borderRadius="soft"
-      contentWidth="compact"
-      sizing="largeSmall"
-      background="fluid"
-      cardStyle="glass-depth"
-      primaryButtonStyle="diagonal-gradient"
-      secondaryButtonStyle="radial-glow"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
-          navItems={navItems}
-          brandName="Luna Art Prod"
-          bottomLeftText="Kairouan, Tunisia"
-          bottomRightText="hello@lunaartprod.com"
+      <NavbarStyleFullscreen
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Services", id: "/services" },
+        ]}
+        brandName="Webild"
+        bottomLeftText="Global Community"
+        bottomRightText="hello@example.com"
+      />
+
+      {/* Services Overview Section */}
+      <div id="services-overview" data-section="services-overview" className="py-20">
+        <AboutMetric
+          title="Our Comprehensive Service Offerings"
+          metrics={[
+            { icon: TrendingUp, label: "Growth Solutions", value: "500+" },
+            { icon: Zap, label: "Performance", value: "99.9%" },
+            { icon: Globe, label: "Global Reach", value: "150+" },
+            { icon: CheckCircle, label: "Client Satisfaction", value: "100%" },
+          ]}
+          metricsAnimation="slide-up"
+          useInvertedBackground={false}
         />
       </div>
 
-      <div id="services" data-section="services">
-        <FeatureCardOne
-          title="Our Services"
-          description="Complete wedding photography and cinematography solutions tailored to your vision and budget."
-          tag="What We Offer"
-          tagIcon={Award}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          gridVariant="two-columns-alternating-heights"
-          carouselMode="buttons"
-          animationType="slide-up"
+      {/* Service Offerings Details */}
+      <div id="service-offerings" data-section="service-offerings" className="py-20">
+        <FeatureCardSeven
           features={[
             {
-              title: "Wedding Photography",
-              description: "Professional coverage with candid and posed shots, detailed attention to emotions, and multiple photographers for comprehensive documentation.",
-              imageSrc: "http://img.b2bpic.net/free-photo/happy-middle-aged-best-friends-spending-time-together-city_23-2148979138.jpg",
-              button: { text: "Learn More" },
-            },
+              id: 1,
+              title: "Digital Strategy",              description:
+                "Develop a comprehensive digital transformation strategy tailored to your business goals and market positioning.",              imageSrc: "/images/service-1.jpg",              imageAlt: "Digital Strategy"},
             {
-              title: "Wedding Cinematography",
-              description: "Cinematic wedding films with professional color grading, audio design, and emotional storytelling. Full ceremony to reception coverage.",
-              imageSrc: "http://img.b2bpic.net/free-photo/bike-shop-with-shop-assistant_23-2148138575.jpg",
-              button: { text: "Learn More" },
-            },
+              id: 2,
+              title: "Design & Development",              description:
+                "Create stunning, user-centric digital experiences with cutting-edge design and robust development practices.",              imageSrc: "/images/service-2.jpg",              imageAlt: "Design & Development"},
             {
-              title: "Engagement Shoots",
-              description: "Beautiful pre-wedding photoshoots in scenic locations. Perfect for save-the-dates, invitations, and capturing your relationship journey.",
-              imageSrc: "http://img.b2bpic.net/free-photo/man-woman-lake-spend-time-each-other-s-arms_1153-5661.jpg",
-              button: { text: "Learn More" },
-            },
+              id: 3,
+              title: "Marketing & Growth",              description:
+                "Amplify your brand presence with targeted marketing campaigns and growth-hacking strategies.",              imageSrc: "/images/service-3.jpg",              imageAlt: "Marketing & Growth"},
             {
-              title: "Drone Coverage",
-              description: "Aerial cinematic shots of venue, landscape, and crowd moments. Adds stunning depth and scale to your wedding film.",
-              imageSrc: "http://img.b2bpic.net/free-photo/famous-preveli-beach_268835-17471.jpg",
-              button: { text: "Learn More" },
-            },
-            {
-              title: "Social Media Reels",
-              description: "Professional short-form videos optimized for Instagram, TikTok, and social platforms. Perfect for sharing highlights instantly.",
-              imageSrc: "http://img.b2bpic.net/free-psd/video-editing-banner-template_23-2148914781.jpg",
-              button: { text: "Learn More" },
-            },
-            {
-              title: "Photo & Video Editing",
-              description: "Professional color grading, retouching, and cinematic post-production. All media delivered in multiple formats and resolutions.",
-              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-uses-ai-powered-assistant-game-development_482257-125167.jpg",
-              button: { text: "Learn More" },
-            },
+              id: 4,
+              title: "Analytics & Optimization",              description:
+                "Harness data-driven insights to continuously optimize performance and drive measurable results.",              imageSrc: "/images/service-4.jpg",              imageAlt: "Analytics & Optimization"},
           ]}
-        />
-      </div>
-
-      <div id="pricing" data-section="pricing">
-        <PricingCardFive
-          title="Simple, Transparent Pricing"
-          description="Choose the package that fits your wedding vision and budget. All packages include professional editing and digital delivery."
-          tag="Pricing Plans"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
+          animationType="blur-reveal"
+          title="Our Service Offerings"
+          description="We provide comprehensive digital solutions designed to elevate your business"
+          tag="Services"
           textboxLayout="default"
           useInvertedBackground={false}
-          animationType="slide-up"
-          plans={[
-            {
-              id: "essential",
-              tag: "Essential Package",
-              tagIcon: Star,
-              price: "1,500",
-              period: "DT",
-              description: "Perfect for intimate weddings and focused photography coverage. Ideal for smaller celebrations.",
-              button: { text: "Request Quote", href: "/" },
-              featuresTitle: "What's Included:",
-              features: [
-                "8-hour wedding day coverage",
-                "2 professional photographers",
-                "500+ edited photos delivered",
-                "Digital gallery with download",
-                "Soft-bound album included",
-              ],
-            },
-            {
-              id: "premium",
-              tag: "Premium Package",
-              tagIcon: Sparkles,
-              price: "3,500",
-              period: "DT",
-              description: "Our most popular choice. Combines exceptional photography with professional cinematography for complete coverage.",
-              button: { text: "Book Now", href: "/" },
-              featuresTitle: "What's Included:",
-              features: [
-                "10-hour ceremony + reception",
-                "2 photographers + 1 videographer",
-                "700+ edited photos + 4K film",
-                "Cinematic highlight reel (3-5 min)",
-                "Full ceremony & reception video",
-                "Digital gallery + USB delivery",
-                "Premium photo album + video USB",
-                "Instagram reels compilation",
-              ],
-            },
-            {
-              id: "luxury",
-              tag: "Luxury Package",
-              tagIcon: Crown,
-              price: "6,500",
-              period: "DT",
-              description: "The ultimate wedding experience. Complete documentation with multiple angles, drone coverage, and premium cinematography.",
-              button: { text: "Contact for Details", href: "/" },
-              featuresTitle: "What's Included:",
-              features: [
-                "Full-day coverage (prep to reception)",
-                "3 photographers + 2 videographers",
-                "1,000+ professionally edited photos",
-                "4K cinematic wedding film (20+ min)",
-                "Aerial drone footage included",
-                "Multiple highlight reels for sharing",
-                "Custom color grading & audio design",
-                "Premium leather-bound album",
-                "USB + cloud storage backup",
-                "Engagement session pre-wedding",
-                "Same-day edit highlights",
-                "Luxury packaging & presentation",
-              ],
-            },
-          ]}
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterBase
-          columns={footerColumns}
-          logoText="Luna Art Prod"
-          copyrightText="© 2024 Luna Art Prod. All rights reserved. Wedding Photography & Cinematography in Tunisia."
         />
       </div>
     </ThemeProvider>
   );
-}
+}