Add src/app/services/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -30,14 +30,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",          id: "hero"},
+        { name: "Services", id: "/services" },
-        {
+        { name: "About", id: "features" },
-          name: "Services",          id: "products"},
+        { name: "Contact", id: "contact" },
-        {
-          name: "About",          id: "features"},
-        {
-          name: "Contact",          id: "contact"},
       ]}
       brandName="ReserveElite"
     />
@@ -45,50 +41,18 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitKpi
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars"}}
       title="Your Next Experience, Seamlessly Reserved."
       description="Discover and book premium services instantly. Liquid design, effortless scheduling, and luxury at your fingertips."
       kpis={[
-        {
+        { value: "12k+", label: "Bookings Made" },
-          value: "12k+",          label: "Bookings Made"},
+        { value: "99%", label: "Client Satisfaction" },
-        {
+        { value: "24/7", label: "Instant Support" },
-          value: "99%",          label: "Client Satisfaction"},
-        {
-          value: "24/7",          label: "Instant Support"},
       ]}
       enableKpiAnimation={true}
-      buttons={[
+      buttons={[{ text: "Start Booking", href: "/services" }]}
-        {
-          text: "Start Booking",          href: "#products"},
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/young-woman-is-relaxing-spa-complex-using-smartphone_169016-59588.jpg"
       mediaAnimation="blur-reveal"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/smiling-man-white-t-shirt-looking-camera_23-2148113911.jpg",          alt: "Smiling man in white t-shirt looking at camera"},
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-blond-woman_618663-83.jpg",          alt: "Portrait of a beautiful blond woman"},
-        {
-          src: "http://img.b2bpic.net/free-photo/young-woman-looking-grey-t-shirt-looking-positive_176474-18303.jpg",          alt: "Young woman looking in grey t-shirt and looking positive"},
-        {
-          src: "http://img.b2bpic.net/free-photo/pleasent-girl-is-posing-camera-white-background_176474-115414.jpg",          alt: "Pleasent girl is posing to camera on white background"},
-        {
-          src: "http://img.b2bpic.net/free-photo/african-guy-wears-trendy-wristwatch-posing-with-smile-near-beige-wall-outdoor-portrait-black-man-good-mood-standing-with-arms-crossed_197531-21794.jpg",          alt: "African guy wears trendy wristwatch"},
-      ]}
-      avatarText="Join 10,000+ satisfied clients"
-      marqueeItems={[
-        {
-          type: "text",          text: "Premium Scheduling"},
-        {
-          type: "text",          text: "Secure Payments"},
-        {
-          type: "text",          text: "24/7 Support"},
-        {
-          type: "text",          text: "Real-time Availability"},
-        {
-          type: "text",          text: "Instant Confirmation"},
-      ]}
     />
   </div>
 
@@ -98,24 +62,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        {
+        { title: "Smart Scheduling", description: "Real-time availability tracking that fits your busy life instantly.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/floating-screen-clay-phone-16-pro-max_187299-46642.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/time-organization-concept-with-planner-flat-lay_23-2149046743.jpg" } },
-          title: "Smart Scheduling",          description: "Real-time availability tracking that fits your busy life instantly.",          phoneOne: {
+        { title: "Liquid Dashboard", description: "Manage all your upcoming and past bookings from one elegant screen.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/3d-character-emerging-from-smartphone_23-2151336540.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/task-management-application_23-2148628459.jpg" } },
-            imageSrc: "http://img.b2bpic.net/free-photo/floating-screen-clay-phone-16-pro-max_187299-46642.jpg",            imageAlt: "Scheduling UI"},
+        { title: "Secure Payments", description: "Enterprise-grade encryption protecting your bookings every step of the way.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-calendar-design_23-2149239449.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/smart-home-management_52683-43342.jpg" } },
-          phoneTwo: {
-            imageSrc: "http://img.b2bpic.net/free-photo/time-organization-concept-with-planner-flat-lay_23-2149046743.jpg",            imageAlt: "Calendar View"},
-        },
-        {
-          title: "Liquid Dashboard",          description: "Manage all your upcoming and past bookings from one elegant screen.",          phoneOne: {
-            imageSrc: "http://img.b2bpic.net/free-photo/3d-character-emerging-from-smartphone_23-2151336540.jpg",            imageAlt: "Dashboard"},
-          phoneTwo: {
-            imageSrc: "http://img.b2bpic.net/free-vector/task-management-application_23-2148628459.jpg",            imageAlt: "Dashboard Details"},
-        },
-        {
-          title: "Secure Payments",          description: "Enterprise-grade encryption protecting your bookings every step of the way.",          phoneOne: {
-            imageSrc: "http://img.b2bpic.net/free-photo/close-up-calendar-design_23-2149239449.jpg",            imageAlt: "Payment Screen"},
-          phoneTwo: {
-            imageSrc: "http://img.b2bpic.net/free-vector/smart-home-management_52683-43342.jpg",            imageAlt: "Success Screen"},
-        },
       ]}
       showStepNumbers={true}
       title="Designed for Flow"
@@ -123,125 +72,41 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="products" data-section="products">
-      <ProductCardFour
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "1",          name: "Personal Wellness",          price: "$120",          variant: "Premium",          imageSrc: "http://img.b2bpic.net/free-vector/elegant-style-business-card-template_23-2148248078.jpg"},
-        {
-          id: "2",          name: "Strategy Session",          price: "$250",          variant: "Elite",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-asian-girl-barista-working-cafe-counter-processing-orders-using-pos-terminal-receiving_1258-199483.jpg"},
-        {
-          id: "3",          name: "Digital Coaching",          price: "$180",          variant: "Pro",          imageSrc: "http://img.b2bpic.net/free-photo/woman-hands-injecting-liquid-into-credit-card-with-syringe-cash-injection-concept_1301-3462.jpg"},
-        {
-          id: "4",          name: "Creative Studio",          price: "$300",          variant: "Master",          imageSrc: "http://img.b2bpic.net/free-photo/vintage-stationery-with-warm-light-shadows_24972-3068.jpg"},
-        {
-          id: "5",          name: "Health Coaching",          price: "$150",          variant: "Pro",          imageSrc: "http://img.b2bpic.net/free-vector/multicolor-business-card-collection_1043-485.jpg"},
-        {
-          id: "6",          name: "Spa Therapy",          price: "$200",          variant: "Relaxation",          imageSrc: "http://img.b2bpic.net/free-vector/minimalist-abstract-massage-wellness-gift-certificate_23-2148971950.jpg"},
-      ]}
-      title="Featured Services"
-      description="Curated premium experiences waiting to be unlocked."
-    />
-  </div>
-
-  <div id="metrics" data-section="metrics">
-      <MetricCardTwo
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="bento-grid"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",          value: "150+",          description: "Global partners"},
-        {
-          id: "m2",          value: "4.9/5",          description: "Customer average"},
-        {
-          id: "m3",          value: "5ms",          description: "Average response"},
-      ]}
-      title="Unmatched Performance"
-      description="Data-driven results for your peace of mind."
-    />
-  </div>
-
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardSixteen
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
+        { id: "t1", name: "Alice Wang", role: "CEO", company: "TechInnovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-working-nurse_23-2150829777.jpg" },
-          id: "t1",          name: "Alice Wang",          role: "CEO",          company: "TechInnovate",          rating: 5,
+        { id: "t2", name: "David Smith", role: "Founder", company: "CreativeLab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705918.jpg" },
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-working-nurse_23-2150829777.jpg"},
-        {
-          id: "t2",          name: "David Smith",          role: "Founder",          company: "CreativeLab",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705918.jpg"},
-        {
-          id: "t3",          name: "Elena Ross",          role: "Manager",          company: "GrowthX",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/technician-optimizing-data-center-equipment-maximum-efficiency_482257-117650.jpg"},
-        {
-          id: "t4",          name: "Mark Jones",          role: "Developer",          company: "SoftSolutions",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg"},
-        {
-          id: "t5",          name: "Sarah Lee",          role: "Lead",          company: "DesignCo",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/middle-age-businessman-smiling-happy-standing-city_839833-25759.jpg"},
       ]}
       kpiItems={[
-        {
+        { value: "98%", label: "Retention Rate" },
-          value: "98%",          label: "Retention Rate"},
+        { value: "10k+", label: "Happy Clients" },
-        {
+        { value: "5.0", label: "App Store Score" },
-          value: "10k+",          label: "Happy Clients"},
-        {
-          value: "5.0",          label: "App Store Score"},
       ]}
       title="Loved by Thousands"
       description="See why professionals choose ReserveElite for their booking needs."
     />
   </div>
 
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",          title: "How do I cancel?",          content: "You can easily cancel in your dashboard with one click."},
-        {
-          id: "f2",          title: "Is payment secure?",          content: "Yes, we use industry-standard encryption for all transactions."},
-        {
-          id: "f3",          title: "Do you have support?",          content: "We offer 24/7 priority support to all our members."},
-      ]}
-      title="Frequently Asked"
-      description="Your questions, answered clearly."
-      faqsAnimation="slide-up"
-    />
-  </div>
-
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={false}
-      background={{
+      background={{ variant: "radial-gradient" }}
-        variant: "radial-gradient"}}
       tag="Get Started"
       title="Ready to Transform Your Workflow?"
       description="Book your first session today and experience the future of management."
-      buttons={[
+      buttons={[{ text: "Contact Us", href: "#contact" }]}
-        {
-          text: "Contact Us",          href: "#contact"},
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="ReserveElite"
-      leftLink={{
+      leftLink={{ text: "Privacy", href: "#" }}
-        text: "Privacy",        href: "#"}}
+      rightLink={{ text: "Terms", href: "#" }}
-      rightLink={{
-        text: "Terms",        href: "#"}}
     />
   </div>
       </ReactLenis>

src/app/services/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSizeMediumTitles"
+        background="fluid"
+        cardStyle="glass-depth"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "#products" },
+            { name: "About", id: "/" },
+            { name: "Contact", id: "/" },
+          ]}
+          brandName="ReserveElite"
+        />
+
+        <div id="products" data-section="products" style={{ marginTop: "100px" }}>
+          <ProductCardFour
+            animationType="blur-reveal"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            title="Our Premium Services"
+            description="Experience the liquid glass design language with our curated selection of elite services."
+            products={[
+              { id: "1", name: "Personal Wellness", price: "$120", variant: "Premium", imageSrc: "http://img.b2bpic.net/free-vector/elegant-style-business-card-template_23-2148248078.jpg" },
+              { id: "2", name: "Strategy Session", price: "$250", variant: "Elite", imageSrc: "http://img.b2bpic.net/free-photo/smiling-asian-girl-barista-working-cafe-counter-processing-orders-using-pos-terminal-receiving_1258-199483.jpg" },
+              { id: "3", name: "Digital Coaching", price: "$180", variant: "Pro", imageSrc: "http://img.b2bpic.net/free-photo/woman-hands-injecting-liquid-into-credit-card-with-syringe-cash-injection-concept_1301-3462.jpg" },
+              { id: "4", name: "Creative Studio", price: "$300", variant: "Master", imageSrc: "http://img.b2bpic.net/free-photo/vintage-stationery-with-warm-light-shadows_24972-3068.jpg" },
+              { id: "5", name: "Health Coaching", price: "$150", variant: "Pro", imageSrc: "http://img.b2bpic.net/free-vector/multicolor-business-card-collection_1043-485.jpg" },
+              { id: "6", name: "Spa Therapy", price: "$200", variant: "Relaxation", imageSrc: "http://img.b2bpic.net/free-vector/minimalist-abstract-massage-wellness-gift-certificate_23-2148971950.jpg" },
+            ]}
+          />
+        </div>
+
+        <FooterLogoReveal
+          logoText="ReserveElite"
+          leftLink={{ text: "Privacy", href: "#" }}
+          rightLink={{ text: "Terms", href: "#" }}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}