Merge version_2 into main #1
341
src/app/page.tsx
341
src/app/page.tsx
@@ -3,15 +3,15 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { Award, CheckCircle, Star } from "lucide-react";
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import { Zap, Target, BarChart3, Star } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -32,21 +32,13 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Products",
|
||||
id: "#products",
|
||||
},
|
||||
name: "Products", id: "#products"},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "#testimonials",
|
||||
},
|
||||
name: "Testimonials", id: "#testimonials"},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "#faq",
|
||||
},
|
||||
name: "FAQ", id: "#faq"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
brandName="TechGrid"
|
||||
/>
|
||||
@@ -56,99 +48,15 @@ export default function LandingPage() {
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Future of Computing"
|
||||
description="Discover our collection of premium electronics, powered by leading brands and engineered for peak performance."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex R.",
|
||||
handle: "@techfan",
|
||||
testimonial: "The best selection of premium workstations I've found online.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/data-center-programmer-writing-disaster-recovery-plans_482257-123449.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jordan P.",
|
||||
handle: "@devlife",
|
||||
testimonial: "Stellar customer service and fast shipping on my new laptop.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-programmer-coding-laptop_482257-87912.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah K.",
|
||||
handle: "@bizlead",
|
||||
testimonial: "We upgraded our entire office with their help. Truly excellent.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/african-american-ai-technician-analyzes-infrastructure-performance-outputs-tablet-while-he-stands_482257-135620.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mike V.",
|
||||
handle: "@artist",
|
||||
testimonial: "My new monitor is perfect for my creative workflow.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-working-interior-design-project_23-2150346494.jpg",
|
||||
},
|
||||
{
|
||||
name: "Chris D.",
|
||||
handle: "@itpro",
|
||||
testimonial: "The gear selection is unmatched in the industry right now.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/team-leader-reads-inspection-data-files-solar-plant-machinery-parameters_482257-117853.jpg",
|
||||
},
|
||||
]}
|
||||
testimonials={[]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now",
|
||||
href: "#products",
|
||||
},
|
||||
text: "Shop Now", href: "#products"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/futuristic-hi-tech-neon-background-generative-ai_91128-2310.jpg"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/person-indian-origin-having-fun_23-2150285308.jpg",
|
||||
alt: "User 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/positive-guy-glasses-holding-tablet-looking_74855-3039.jpg",
|
||||
alt: "User 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-stylish-man-flannel-suit-glasses-listening-music_613910-12191.jpg",
|
||||
alt: "User 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg",
|
||||
alt: "User 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/black-boy-posing_23-2148171529.jpg",
|
||||
alt: "User 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 10,000+ Professionals"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Apple Authorized Partner",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Dell Precision Certified",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Fast Nationwide Delivery",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "24/7 Expert Support",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "30-Day Money Back",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -159,26 +67,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Peak Performance",
|
||||
subtitle: "Optimized Hardware",
|
||||
category: "Performance",
|
||||
value: "Elite",
|
||||
},
|
||||
id: "f1", title: "Peak Performance", subtitle: "Optimized Hardware", category: "Performance", value: "Elite"},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Connectivity",
|
||||
subtitle: "Seamless Integration",
|
||||
category: "Hardware",
|
||||
value: "Fast",
|
||||
},
|
||||
id: "f2", title: "Connectivity", subtitle: "Seamless Integration", category: "Hardware", value: "Fast"},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Reliability",
|
||||
subtitle: "Durability Guaranteed",
|
||||
category: "Support",
|
||||
value: "Solid",
|
||||
},
|
||||
id: "f3", title: "Reliability", subtitle: "Durability Guaranteed", category: "Support", value: "Solid"},
|
||||
]}
|
||||
title="Why Choose TechGrid"
|
||||
description="We offer more than just hardware; we provide complete performance solutions."
|
||||
@@ -193,183 +86,83 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Apple MacBook Pro",
|
||||
price: "$2,499",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smartphone-tablet-mockup-with-cute-sheep_187299-48092.jpg",
|
||||
},
|
||||
id: "p1", name: "Apple MacBook Pro", price: "$2,499", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-tablet-mockup-with-cute-sheep_187299-48092.jpg"},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Dell Workstation",
|
||||
price: "$1,899",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-high-tech-car-engine-part_482257-76592.jpg",
|
||||
},
|
||||
id: "p2", name: "Dell Workstation", price: "$1,899", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-high-tech-car-engine-part_482257-76592.jpg"},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Mechanical Keyboard",
|
||||
price: "$199",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-hand-typing-keyboard_23-2149680251.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Ergonomic Mouse",
|
||||
price: "$99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150062907.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "UltraWide Monitor",
|
||||
price: "$599",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/green-screen-computer-display-modern-startup-office-displaying-code-snippets-various_482257-136168.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Noise Cancelling Headphones",
|
||||
price: "$349",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/red-gold-headphones-digital-device_53876-97303.jpg",
|
||||
},
|
||||
id: "p3", name: "Mechanical Keyboard", price: "$199", imageSrc: "http://img.b2bpic.net/free-photo/side-view-hand-typing-keyboard_23-2149680251.jpg"}
|
||||
]}
|
||||
title="Featured Electronics"
|
||||
description="Cutting-edge devices from industry-leading manufacturers."
|
||||
description="Cutting-edge devices with interactive 3D viewing capabilities."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
<MetricCardSeven
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
title="Performance Metrics"
|
||||
description="Real-world data on our hardware capabilities."
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "10k+",
|
||||
title: "Products Delivered",
|
||||
description: "Happy tech enthusiasts served.",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "500+",
|
||||
title: "Brand Partners",
|
||||
description: "Only top tier electronics.",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "99%",
|
||||
title: "Customer Satisfaction",
|
||||
description: "Feedback rating across board.",
|
||||
icon: Star,
|
||||
},
|
||||
{ id: "m1", value: "98%", title: "Visual Fidelity", items: ["High-res 3D assets", "Real-time rendering", "Color accuracy"] },
|
||||
{ id: "m2", value: "45ms", title: "Interaction Latency", items: ["Swift 3D rotation", "Responsive gestures", "Smooth zooming"] },
|
||||
{ id: "m3", value: "100%", title: "3D Coverage", items: ["Complete product line", "Interactive exploded views", "Texture detail"] }
|
||||
]}
|
||||
title="Market Impact"
|
||||
description="Our numbers speak to the satisfaction of our growing technology community."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
<TestimonialCardThirteen
|
||||
showRating={true}
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
title="Customer 3D Experience"
|
||||
description="See what professionals say about interacting with our models."
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "Great Laptop",
|
||||
quote: "The performance is simply incredible for my video editing needs.",
|
||||
name: "Alex R.",
|
||||
role: "Creative Director",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/system-administrator-walking-data-center-used-managing-gear-energy_482257-116015.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Professional Gear",
|
||||
quote: "Solid workstation for heavy software development and compiling.",
|
||||
name: "Jordan P.",
|
||||
role: "Senior Dev",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-63253.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Trusted Partner",
|
||||
quote: "Very reliable service and products. Highly recommended.",
|
||||
name: "Sarah K.",
|
||||
role: "Procurement",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/data-center-management-executives-reading-paperwork-files_482257-120053.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
title: "Perfect Setup",
|
||||
quote: "Love the monitor quality. My design work is sharp now.",
|
||||
name: "Mike V.",
|
||||
role: "Graphic Artist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-wearing-glasses_23-2149005467.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
title: "Tech Haven",
|
||||
quote: "Everything I need in one place. Great variety.",
|
||||
name: "Chris D.",
|
||||
role: "System Admin",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/computer-scientist-server-farm-using-laptop-patch-network-issues_482257-121958.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Alex R.", handle: "@creative", testimonial: "The 3D model interaction is game-changing. I can inspect every detail before buying.", rating: 5 },
|
||||
{ id: "t2", name: "Jordan P.", handle: "@engineer", testimonial: "Crystal clear rendering. The interactive 3D view made my hardware selection so much easier.", rating: 5 },
|
||||
{ id: "t3", name: "Sarah K.", handle: "@procurement", testimonial: "Finally, a store where you can see the product from every angle. Very impressed.", rating: 5 }
|
||||
]}
|
||||
title="Customer Stories"
|
||||
description="See why professionals choose us for their hardware needs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="3D Interaction Help"
|
||||
description="Answers to your questions about our interactive 3D features."
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Shipping Options",
|
||||
content: "We offer fast 2-day nationwide shipping on all electronics.",
|
||||
},
|
||||
id: "q1", title: "How to rotate 3D models?", content: "Simply click and drag your mouse or use touch gestures to rotate any 3D model."},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Return Policy",
|
||||
content: "Returns are accepted within 30 days for unused products.",
|
||||
},
|
||||
id: "q2", title: "Can I zoom in for detail?", content: "Yes, use your mouse wheel or pinch-to-zoom to view intricate hardware details."},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Technical Support",
|
||||
content: "Our support team is available 24/7 for hardware setup assistance.",
|
||||
},
|
||||
id: "q3", title: "Do I need special software?", content: "No, our 3D viewer is browser-based and works on all modern devices."},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about purchasing and shipping."
|
||||
faqsAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/system-administrator-walking-data-center-used-managing-gear-energy_482257-116015.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Get In Touch"
|
||||
description="Have questions about our hardware? Reach out to our expert team today."
|
||||
title="Sales Inquiries"
|
||||
description="Request a custom quote or discuss bulk orders for your organization."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
name: "name", type: "text", placeholder: "Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email Address",
|
||||
required: true,
|
||||
name: "email", type: "email", placeholder: "Corporate Email", required: true,
|
||||
},
|
||||
{
|
||||
name: "company", type: "text", placeholder: "Company Name"}
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us how we can help",
|
||||
rows: 4,
|
||||
name: "message", placeholder: "Your specific requirements or inquiry", rows: 4,
|
||||
}}
|
||||
buttonText="Submit Inquiry"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/system-administrator-data-center-uses-automation-tools-tablet_482257-117824.jpg"
|
||||
/>
|
||||
</div>
|
||||
@@ -378,37 +171,17 @@ export default function LandingPage() {
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "Laptops",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Desktops",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Peripherals",
|
||||
href: "#",
|
||||
},
|
||||
title: "Shop", items: [
|
||||
{ label: "Laptops", href: "#" },
|
||||
{ label: "Desktops", href: "#" },
|
||||
{ label: "Peripherals", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Returns",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
title: "Support", items: [
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "Returns", href: "#" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -418,4 +191,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #000000;
|
||||
--card: #0c0c0c;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #106EFB;
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #1c1c1c;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #000000;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #535353;
|
||||
--background-accent: #106EFB;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #f5f5f5;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user