Merge version_2 into main #2
@@ -2,12 +2,11 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
|
||||
export default function LandingPage() {
|
||||
export default function ProductsPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
@@ -25,98 +24,29 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "/",
|
||||
},
|
||||
{
|
||||
name: "Laptops",
|
||||
id: "/laptops",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "/pricing",
|
||||
},
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Laptops", id: "/laptops" },
|
||||
{ name: "Pricing", id: "/pricing" },
|
||||
]}
|
||||
brandName="TechLaptops"
|
||||
button={{
|
||||
text: "Contact Us",
|
||||
href: "/contact",
|
||||
}}
|
||||
text: "Contact Us", href: "/contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product-list" data-section="product-list">
|
||||
<ProductCardOne
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
title="Computers & Laptops"
|
||||
description="Browse our comprehensive collection of computing devices for every need."
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Pro Workstation",
|
||||
price: "$1299",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-businesswoman-with-glasses-meeting-with-laptop_23-2148824809.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Gaming Beast",
|
||||
price: "$1599",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/party-space-ready-online-celebration_23-2149347285.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Slim Ultrabook",
|
||||
price: "$999",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-marble-table_53876-63465.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Hybrid 360",
|
||||
price: "$1199",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-freelancer-using-tablet-laptop-computer-check-his-business-cafe_342744-45.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Office Pro",
|
||||
price: "$899",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-digital-tablet-with-coffee-earphone-pen-holders-gray-desk_23-2148052597.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Student Basic",
|
||||
price: "$599",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-scrolling-laptop-check-social-media-feed_482257-111833.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Collection"
|
||||
description="From workstations to thin ultrabooks."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="feature" data-section="feature">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Advanced Features"
|
||||
description="Cutting edge technology built in."
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Thermal Control",
|
||||
subtitle: "Quiet fans",
|
||||
category: "Hardware",
|
||||
value: "High",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Battery Life",
|
||||
subtitle: "12+ hours",
|
||||
category: "Energy",
|
||||
value: "Max",
|
||||
},
|
||||
{ id: "p1", name: "Pro Workstation", price: "$1299", variant: "High Performance", imageSrc: "http://img.b2bpic.net/free-photo/professional-businesswoman-with-glasses-meeting-with-laptop_23-2148824809.jpg?_wi=2" },
|
||||
{ id: "p2", name: "Gaming Beast", price: "$1599", variant: "Gaming", imageSrc: "http://img.b2bpic.net/free-photo/party-space-ready-online-celebration_23-2149347285.jpg?_wi=2" },
|
||||
{ id: "p3", name: "Slim Ultrabook", price: "$999", variant: "Portable", imageSrc: "http://img.b2bpic.net/free-photo/laptop-marble-table_53876-63465.jpg?_wi=2" },
|
||||
{ id: "p4", name: "Hybrid 360", price: "$1199", variant: "2-in-1", imageSrc: "http://img.b2bpic.net/free-photo/handsome-freelancer-using-tablet-laptop-computer-check-his-business-cafe_342744-45.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -124,32 +54,8 @@ export default function LandingPage() {
|
||||
<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",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ 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."
|
||||
@@ -158,4 +64,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
222
src/app/page.tsx
222
src/app/page.tsx
@@ -29,121 +29,67 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "/",
|
||||
},
|
||||
name: "Home", id: "/"},
|
||||
{
|
||||
name: "Laptops",
|
||||
id: "/laptops",
|
||||
},
|
||||
name: "Laptops", id: "/laptops"},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "/pricing",
|
||||
},
|
||||
name: "Pricing", id: "/pricing"},
|
||||
]}
|
||||
brandName="TechLaptops"
|
||||
button={{
|
||||
text: "Contact Us",
|
||||
href: "/contact",
|
||||
}}
|
||||
text: "Contact Us", href: "/contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
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,
|
||||
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: "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: "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: "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",
|
||||
},
|
||||
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/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/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/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/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",
|
||||
},
|
||||
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: "Intel Core i9"},
|
||||
{
|
||||
type: "text",
|
||||
text: "NVIDIA RTX 4080",
|
||||
},
|
||||
type: "text", text: "NVIDIA RTX 4080"},
|
||||
{
|
||||
type: "text",
|
||||
text: "32GB RAM",
|
||||
},
|
||||
type: "text", text: "32GB RAM"},
|
||||
{
|
||||
type: "text",
|
||||
text: "4K OLED Display",
|
||||
},
|
||||
type: "text", text: "4K OLED Display"},
|
||||
{
|
||||
type: "text",
|
||||
text: "1TB SSD",
|
||||
},
|
||||
type: "text", text: "1TB SSD"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -154,9 +100,7 @@ export default function LandingPage() {
|
||||
title="Empowering Your Tech Experience"
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "/laptops",
|
||||
},
|
||||
text: "Learn More", href: "/laptops"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -167,45 +111,15 @@ export default function LandingPage() {
|
||||
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: "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: "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: "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: "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",
|
||||
},
|
||||
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."
|
||||
@@ -221,30 +135,15 @@ export default function LandingPage() {
|
||||
memberVariant="card"
|
||||
members={[
|
||||
{
|
||||
id: "m1",
|
||||
name: "John Doe",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-working-as-team-company_23-2149136890.jpg",
|
||||
},
|
||||
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: "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: "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: "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",
|
||||
},
|
||||
id: "m5", name: "Pat L", imageSrc: "http://img.b2bpic.net/free-photo/man-using-laptop-urban-environment_23-2147961499.jpg"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -256,30 +155,15 @@ export default function LandingPage() {
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How do I ship my order?",
|
||||
content: "We ship globally via trusted partners.",
|
||||
},
|
||||
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: "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: "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: "f4", title: "Payment methods?", content: "We accept major credit cards and PayPal."},
|
||||
{
|
||||
id: "f5",
|
||||
title: "Support hours?",
|
||||
content: "Our support is available 24/7.",
|
||||
},
|
||||
id: "f5", title: "Support hours?", content: "Our support is available 24/7."},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -288,29 +172,19 @@ export default function LandingPage() {
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
title: "Product", items: [
|
||||
{
|
||||
label: "Laptops",
|
||||
href: "/laptops",
|
||||
},
|
||||
label: "Laptops", href: "/laptops"},
|
||||
{
|
||||
label: "Support",
|
||||
href: "#",
|
||||
},
|
||||
label: "Support", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
label: "About", href: "#"},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "/pricing",
|
||||
},
|
||||
label: "Pricing", href: "/pricing"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -321,4 +195,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -2,12 +2,11 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
||||
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
|
||||
export default function LandingPage() {
|
||||
export default function PricingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
@@ -22,164 +21,53 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "/",
|
||||
},
|
||||
{
|
||||
name: "Laptops",
|
||||
id: "/laptops",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "/pricing",
|
||||
},
|
||||
]}
|
||||
brandName="TechLaptops"
|
||||
button={{
|
||||
text: "Contact Us",
|
||||
href: "/contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Laptops", id: "/laptops" },
|
||||
{ name: "Pricing", id: "/pricing" },
|
||||
]}
|
||||
brandName="TechLaptops"
|
||||
button={{ text: "Contact Us", href: "/contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing-list" data-section="pricing-list">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
price: "$599",
|
||||
name: "Basic",
|
||||
buttons: [
|
||||
{
|
||||
text: "Buy Now",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Core i3",
|
||||
"8GB RAM",
|
||||
"256GB SSD",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
price: "$1099",
|
||||
name: "Professional",
|
||||
buttons: [
|
||||
{
|
||||
text: "Buy Now",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Core i7",
|
||||
"16GB RAM",
|
||||
"512GB SSD",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "ultra",
|
||||
price: "$1699",
|
||||
name: "Ultra Performance",
|
||||
buttons: [
|
||||
{
|
||||
text: "Buy Now",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Core i9",
|
||||
"32GB RAM",
|
||||
"1TB SSD",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Simple Pricing"
|
||||
description="Tailored plans for all needs."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
title="Choose Your Laptop Plan"
|
||||
description="Select the perfect performance tier for your needs."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
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="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Plan Customization"
|
||||
description="Choose the perfect hardware for your specific requirements."
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
badge: "Popular",
|
||||
price: "$899",
|
||||
subtitle: "Work ready",
|
||||
buttons: [
|
||||
{
|
||||
text: "Select",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"SSD Storage",
|
||||
"HD Screen",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
badge: "Advanced",
|
||||
price: "$1299",
|
||||
subtitle: "Professional",
|
||||
buttons: [
|
||||
{
|
||||
text: "Select",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Advanced Cooling",
|
||||
"Dedicated GPU",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user