Merge version_3 into main

Merge version_3 into main

src/app/computer-types/page.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+
+export default function ComputerTypesPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="compact"
+        sizing="largeSizeMediumTitles"
+        background="circleGradient"
+        cardStyle="outline"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <NavbarLayoutFloatingInline
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Computers", id: "/computer-types" },
+            { name: "Pricing", id: "/pricing" },
+          ]}
+          brandName="TechLaptops"
+          button={{ text: "Contact Us", href: "/contact" }}
+        />
+        <ProductCardOne
+          title="Our Computer Range"
+          description="Explore our curated selection of professional-grade machines."
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          products={[
+            { id: "p1", name: "Pro Laptop 15", price: "$1,299", imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994381.jpg?_wi=1" },
+            { id: "p2", name: "Workstation Pro", price: "$2,499", imageSrc: "http://img.b2bpic.net/free-photo/laptop-marble-table_53876-63465.jpg?_wi=1" },
+          ]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/introduction/page.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import { CheckCircle } from 'lucide-react';
+
+export default function IntroductionPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="compact"
+        sizing="largeSizeMediumTitles"
+        background="circleGradient"
+        cardStyle="outline"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Introduction", id: "/introduction" },
+              { name: "Laptops", id: "/laptops" },
+              { name: "Pricing", id: "/pricing" },
+            ]}
+            brandName="TechLaptops"
+            button={{ text: "Contact Us", href: "/contact" }}
+          />
+        </div>
+
+        <div id="hero" data-section="hero">
+            <HeroSplitTestimonial
+            background={{ variant: "gradient-bars" }}
+            title="The Future of Performance"
+            description="Welcome to TechLaptops. We bridge the gap between innovation and power with our curated selection of professional-grade machines."
+            imageSrc="http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994381.jpg?_wi=2"
+            mediaAnimation="slide-up"
+            testimonials={[
+              { name: "Alice Johnson", handle: "@alicej", testimonial: "The best laptop I've ever owned. Incredible power and design.", rating: 5 },
+              { name: "Bob Smith", handle: "@bobsmith", testimonial: "A game-changer for my professional workflow.", rating: 5 }
+            ]}
+          />
+        </div>
+
+        <div id="about" data-section="about">
+            <SplitAbout
+            useInvertedBackground={false}
+            title="About Our Mission"
+            description="We are dedicated to providing cutting-edge technology that empowers professionals to achieve their goals with ease and efficiency."
+            buttons={[
+              { text: "View Laptops", href: "/laptops" },
+            ]}
+            bulletPoints={[
+              { title: "High Performance", description: "Experience lightning-fast speeds for any professional task." },
+              { title: "Elegant Design", description: "Crafted with premium materials for a sleek, modern look." },
+              { title: "Reliability", description: "Built to last and perform under the toughest conditions." }
+            ]}
+            textboxLayout="default"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -28,165 +28,34 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
+        { name: "Home", id: "/" },
-          name: "Home",          id: "/"},
+        { name: "Computers", id: "/computer-types" },
-        {
+        { name: "Pricing", id: "/pricing" },
-          name: "Laptops",          id: "/laptops"},
-        {
-          name: "Pricing",          id: "/pricing"},
       ]}
       brandName="TechLaptops"
-      button={{
+      button={{ text: "Contact Us", href: "/contact" }}
-        text: "Contact Us",        href: "/contact"}}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroSplitTestimonial
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars"}}
       title="Unleash Your Productivity"
       description="Premium laptops designed for modern professionals and creators. Find your perfect machine today."
       testimonials={[
-        {
+        { name: "Alice J.", handle: "@alice", testimonial: "The best laptop I ever bought.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994381.jpg?_wi=1", imageAlt: "laptop on desk modern" },
-          name: "Alice J.",          handle: "@alice",          testimonial: "The best laptop I ever bought.",          rating: 5,
+        { name: "Bob S.", handle: "@bob", testimonial: "Incredible performance and speed.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/business-graphs-performance-metrics-monitors-office_482257-126569.jpg", imageAlt: "laptop on desk modern" },
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994381.jpg?_wi=1",          imageAlt: "laptop on desk modern"},
-        {
-          name: "Bob S.",          handle: "@bob",          testimonial: "Incredible performance and speed.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/business-graphs-performance-metrics-monitors-office_482257-126569.jpg",          imageAlt: "laptop on desk modern"},
-        {
-          name: "Charlie M.",          handle: "@charlie",          testimonial: "Excellent service and products.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-businesswoman-with-glasses-meeting-with-laptop_23-2148824809.jpg?_wi=1",          imageAlt: "laptop on desk modern"},
-        {
-          name: "Diana K.",          handle: "@diana",          testimonial: "Sleek and very powerful.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/party-space-ready-online-celebration_23-2149347285.jpg?_wi=1",          imageAlt: "laptop on desk modern"},
-        {
-          name: "Evan R.",          handle: "@evan",          testimonial: "A game changer for my work.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/laptop-marble-table_53876-63465.jpg?_wi=1",          imageAlt: "laptop on desk modern"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994381.jpg?_wi=2"
       mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman_74855-1573.jpg",          alt: "Portrait 1"},
-        {
-          src: "http://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg",          alt: "Portrait 2"},
-        {
-          src: "http://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",          alt: "Portrait 3"},
-        {
-          src: "http://img.b2bpic.net/free-photo/confident-entrepreneur-satisfied-with-own-success_1163-5474.jpg",          alt: "Portrait 4"},
-        {
-          src: "http://img.b2bpic.net/free-photo/young-stylish-smiling-man-co-working-office-startup-freelancer-holding-using-tablet_285396-9048.jpg",          alt: "Portrait 5"},
-      ]}
-      avatarText="Trusted by 5,000+ professionals"
-      marqueeItems={[
-        {
-          type: "text",          text: "Intel Core i9"},
-        {
-          type: "text",          text: "NVIDIA RTX 4080"},
-        {
-          type: "text",          text: "32GB RAM"},
-        {
-          type: "text",          text: "4K OLED Display"},
-        {
-          type: "text",          text: "1TB SSD"},
-      ]}
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <TextAbout
-      useInvertedBackground={false}
-      title="Empowering Your Tech Experience"
-      buttons={[
-        {
-          text: "Learn More",          href: "/laptops"},
-      ]}
-    />
-  </div>
-
-  <div id="testimonial-section" data-section="testimonial-section">
-      <TestimonialCardTen
-      textboxLayout="split"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",          title: "Great support",          quote: "Excellent team.",          name: "A. J.",          role: "CEO",          imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg"},
-        {
-          id: "t2",          title: "Solid laptop",          quote: "Reliable gear.",          name: "B. S.",          role: "CTO",          imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-smiling-man-sitting-co-working-open-office-holding-laptop_285396-9047.jpg"},
-        {
-          id: "t3",          title: "Fast delivery",          quote: "Very prompt.",          name: "C. M.",          role: "Dev",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-businessman_23-2147839983.jpg"},
-        {
-          id: "t4",          title: "Perfect fit",          quote: "Ideal size.",          name: "D. K.",          role: "Mgr",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg"},
-        {
-          id: "t5",          title: "Great value",          quote: "Worth it.",          name: "E. R.",          role: "Des",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-business-man-standing-outside_1262-3488.jpg"},
-      ]}
-      title="What Our Customers Say"
-      description="Join thousands of professionals choosing us."
-    />
-  </div>
-
-  <div id="team" data-section="team">
-      <TeamCardTen
-      useInvertedBackground={false}
-      title="Meet Our Experts"
-      tag="Our Team"
-      membersAnimation="slide-up"
-      memberVariant="card"
-      members={[
-        {
-          id: "m1",          name: "John Doe",          imageSrc: "http://img.b2bpic.net/free-photo/people-working-as-team-company_23-2149136890.jpg"},
-        {
-          id: "m2",          name: "Jane Smith",          imageSrc: "http://img.b2bpic.net/free-photo/male-graphic-designer-talking-mobile-phone-while-coworker-looking-computer_1170-967.jpg"},
-        {
-          id: "m3",          name: "Alex Riv",          imageSrc: "http://img.b2bpic.net/free-photo/man-typing-computer-keyboard-home-office_329181-17546.jpg"},
-        {
-          id: "m4",          name: "Sam K",          imageSrc: "http://img.b2bpic.net/free-photo/young-man-with-laptop-headphones_23-2148205659.jpg"},
-        {
-          id: "m5",          name: "Pat L",          imageSrc: "http://img.b2bpic.net/free-photo/man-using-laptop-urban-environment_23-2147961499.jpg"},
-      ]}
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={false}
-      sideTitle="Frequently Asked Questions"
-      faqsAnimation="slide-up"
-      faqs={[
-        {
-          id: "f1",          title: "How do I ship my order?",          content: "We ship globally via trusted partners."},
-        {
-          id: "f2",          title: "Warranty coverage?",          content: "All laptops come with 2-year manufacturer warranty."},
-        {
-          id: "f3",          title: "Return policy?",          content: "You can return within 30 days of purchase."},
-        {
-          id: "f4",          title: "Payment methods?",          content: "We accept major credit cards and PayPal."},
-        {
-          id: "f5",          title: "Support hours?",          content: "Our support is available 24/7."},
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterSimple
       columns={[
-        {
+        { title: "Product", items: [{ label: "Computers", href: "/computer-types" }, { label: "Support", href: "#" }] },
-          title: "Product",          items: [
+        { title: "Company", items: [{ label: "About", href: "#" }, { label: "Pricing", href: "/pricing" }] },
-            {
-              label: "Laptops",              href: "/laptops"},
-            {
-              label: "Support",              href: "#"},
-          ],
-        },
-        {
-          title: "Company",          items: [
-            {
-              label: "About",              href: "#"},
-            {
-              label: "Pricing",              href: "/pricing"},
-          ],
-        },
       ]}
       bottomLeftText="© 2024 TechLaptops"
       bottomRightText="All rights reserved."

src/app/pricing/page.tsx

@@ -4,7 +4,6 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 export default function PricingPage() {
   return (
@@ -21,52 +20,26 @@ export default function PricingPage() {
         headingFontWeight="semibold"
     >
       <ReactLenis root>
-        <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
-            <NavbarLayoutFloatingInline
+          navItems={[
-              navItems={[
+            { name: "Home", id: "/" },
-                { name: "Home", id: "/" },
+            { name: "Computers", id: "/computer-types" },
-                { name: "Laptops", id: "/laptops" },
+            { name: "Pricing", id: "/pricing" },
-                { name: "Pricing", id: "/pricing" },
+          ]}
-              ]}
+          brandName="TechLaptops"
-              brandName="TechLaptops"
+          button={{ text: "Contact Us", href: "/contact" }}
-              button={{ text: "Contact Us", href: "/contact" }}
+        />
-            />
+        <PricingCardEight
-        </div>
+          title="Choose Your Plan"
-
+          description="Find the perfect solution for your needs."
-        <div id="pricing" data-section="pricing">
+          animationType="slide-up"
-            <PricingCardEight
+          useInvertedBackground={false}
-              title="Choose Your Laptop Plan"
+          textboxLayout="default"
-              description="Select the perfect performance tier for your needs."
+          plans={[
-              animationType="slide-up"
+            { id: "basic", badge: "Starter", price: "$999", subtitle: "Essential performance", buttons: [{ text: "Buy Now", href: "#" }], features: ["Core i5", "8GB RAM", "256GB SSD"] },
-              textboxLayout="default"
+            { id: "pro", badge: "Professional", price: "$1,599", subtitle: "Maximum productivity", buttons: [{ text: "Buy Now", href: "#" }], features: ["Core i7", "16GB RAM", "512GB SSD"] },
-              useInvertedBackground={false}
+          ]}
-              plans={[
+        />
-                {
-                  id: "p1",                  badge: "Starter",                  price: "$999",                  subtitle: "Perfect for daily productivity",                  features: ["Intel Core i5", "8GB RAM", "256GB SSD", "13\" Display"],
-                  buttons: [{ text: "Choose Plan", href: "#" }]
-                },
-                {
-                  id: "p2",                  badge: "Pro",                  price: "$1499",                  subtitle: "For creative professionals",                  features: ["Intel Core i7", "16GB RAM", "512GB SSD", "15\" Display"],
-                  buttons: [{ text: "Choose Plan", href: "#" }]
-                },
-                {
-                  id: "p3",                  badge: "Ultra",                  price: "$1999",                  subtitle: "Maximum performance",                  features: ["Intel Core i9", "32GB RAM", "1TB SSD", "17\" OLED Display"],
-                  buttons: [{ text: "Choose Plan", href: "#" }]
-                }
-              ]}
-            />
-        </div>
-
-        <div id="footer" data-section="footer">
-            <FooterSimple
-              columns={[
-                { title: "Product", items: [{ label: "Laptops", href: "/laptops" }, { label: "Support", href: "#" }] },
-                { title: "Company", items: [{ label: "About", href: "#" }, { label: "Pricing", href: "/pricing" }] },
-              ]}
-              bottomLeftText="© 2024 TechLaptops"
-              bottomRightText="All rights reserved."
-            />
-        </div>
       </ReactLenis>
     </ThemeProvider>
   );