Update src/app/page.tsx
This commit is contained in:
324
src/app/page.tsx
324
src/app/page.tsx
@@ -26,240 +26,108 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
]}
|
||||
brandName="ZShop x Node.js"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="ZShop x Node.js"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Run JavaScript Everywhere"
|
||||
description="Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Node.js®",
|
||||
href: "https://nodejs.org",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/cyber-intelligence-secure-operations-center-with-usa-flag-big-screen_482257-105777.jpg"
|
||||
imageAlt="Developer infrastructure"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-binary-script-running-pc-monitors_482257-123753.jpg",
|
||||
alt: "Close up of binary script running on PC monitors",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/data-center-computer-systems-controlling-network-resources-closeup_482257-126065.jpg",
|
||||
alt: "Data center computer systems controlling network resources closeup",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/electronic-circuit-board-shallow-dof_1398-119.jpg",
|
||||
alt: "electronic circuit board. Shallow DOF",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/top-view-hard-drive-with-purple-light_23-2149413404.jpg",
|
||||
alt: "Top view hard drive with purple light",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18941.jpg",
|
||||
alt: "Double exposure of a caucasian man and Virtual reality VR headset",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 50,000+ developers"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Run JavaScript Everywhere"
|
||||
description="Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts."
|
||||
buttons={[{ text: "Get Node.js®", href: "https://nodejs.org" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/cyber-intelligence-secure-operations-center-with-usa-flag-big-screen_482257-105777.jpg"
|
||||
imageAlt="Developer infrastructure"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-binary-script-running-pc-monitors_482257-123753.jpg", alt: "Close up of binary script running on PC monitors" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/data-center-computer-systems-controlling-network-resources-closeup_482257-126065.jpg", alt: "Data center computer systems controlling network resources closeup" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/electronic-circuit-board-shallow-dof_1398-119.jpg", alt: "electronic circuit board. Shallow DOF" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/top-view-hard-drive-with-purple-light_23-2149413404.jpg", alt: "Top view hard drive with purple light" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18941.jpg", alt: "Double exposure of a caucasian man and Virtual reality VR headset" }
|
||||
]}
|
||||
avatarText="Trusted by 50,000+ developers"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Server,
|
||||
title: "Create HTTP Servers",
|
||||
description: "Write robust network applications with Node.js built-in modules.",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
title: "Write Automated Tests",
|
||||
description: "Ensure reliability with integrated testing capabilities.",
|
||||
},
|
||||
{
|
||||
icon: Hash,
|
||||
title: "Cryptographic Operations",
|
||||
description: "Read and hash files efficiently with stream-based pipelines.",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
title: "High Performance",
|
||||
description: "Non-blocking I/O operations for faster execution.",
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
title: "Cross Platform",
|
||||
description: "Build for Linux, macOS, and Windows seamlessly.",
|
||||
},
|
||||
]}
|
||||
title="Built for Developers"
|
||||
description="Powerful capabilities to help you scale your web applications with ease."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Server, title: "Create HTTP Servers", description: "Write robust network applications with Node.js built-in modules." },
|
||||
{ icon: Star, title: "Write Automated Tests", description: "Ensure reliability with integrated testing capabilities." },
|
||||
{ icon: Hash, title: "Cryptographic Operations", description: "Read and hash files efficiently with stream-based pipelines." },
|
||||
{ icon: Star, title: "High Performance", description: "Non-blocking I/O operations for faster execution." },
|
||||
{ icon: Globe, title: "Cross Platform", description: "Build for Linux, macOS, and Windows seamlessly." }
|
||||
]}
|
||||
title="Built for Developers"
|
||||
description="Powerful capabilities to help you scale your web applications with ease."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "iPhone 13",
|
||||
price: "₹51,000",
|
||||
variant: "128GB",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/workplace-with-smartphone-center_23-2147833251.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Samsung S21",
|
||||
price: "₹43,000",
|
||||
variant: "256GB",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smartphone-displayed-within-geometric-wireframe_187299-46683.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Google Pixel 6",
|
||||
price: "₹48,000",
|
||||
variant: "128GB",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671595.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "OnePlus 9",
|
||||
price: "₹38,000",
|
||||
variant: "128GB",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/green-screen-blue-screen-laptop-tablet-offshore-oil-rig-visualizing-predictive_482257-135948.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "iPhone 12",
|
||||
price: "₹42,000",
|
||||
variant: "64GB",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/new-cell-phone-colorful-background_58702-5221.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Samsung A52",
|
||||
price: "₹28,000",
|
||||
variant: "128GB",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smartphone-with-blank-screen-white-background_187299-46828.jpg",
|
||||
},
|
||||
]}
|
||||
title="Compare Your Tech"
|
||||
description="Find the best deals on the latest hardware."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "1", name: "iPhone 13", price: "₹51,000", variant: "128GB", imageSrc: "http://img.b2bpic.net/free-photo/workplace-with-smartphone-center_23-2147833251.jpg" },
|
||||
{ id: "2", name: "Samsung S21", price: "₹43,000", variant: "256GB", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-displayed-within-geometric-wireframe_187299-46683.jpg" },
|
||||
{ id: "3", name: "Google Pixel 6", price: "₹48,000", variant: "128GB", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671595.jpg" },
|
||||
{ id: "4", name: "OnePlus 9", price: "₹38,000", variant: "128GB", imageSrc: "http://img.b2bpic.net/free-photo/green-screen-blue-screen-laptop-tablet-offshore-oil-rig-visualizing-predictive_482257-135948.jpg" },
|
||||
{ id: "5", name: "iPhone 12", price: "₹42,000", variant: "64GB", imageSrc: "http://img.b2bpic.net/free-photo/new-cell-phone-colorful-background_58702-5221.jpg" },
|
||||
{ id: "6", name: "Samsung A52", price: "₹28,000", variant: "128GB", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-with-blank-screen-white-background_187299-46828.jpg" }
|
||||
]}
|
||||
title="Compare Your Tech"
|
||||
description="Find the best deals on the latest hardware."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Choose Your Plan"
|
||||
description="Get ahead with premium developer support."
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Basic",
|
||||
price: "Free",
|
||||
features: [
|
||||
"Standard support",
|
||||
"Community access",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Pro",
|
||||
price: "₹999/mo",
|
||||
features: [
|
||||
"Priority support",
|
||||
"Early access features",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Enterprise",
|
||||
price: "Custom",
|
||||
features: [
|
||||
"Dedicated manager",
|
||||
"SLA guarantees",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Choose Your Plan"
|
||||
description="Get ahead with premium developer support."
|
||||
plans={[
|
||||
{ id: "p1", name: "Basic", price: "Free", features: ["Standard support", "Community access"], buttons: [{ text: "Get Started", href: "#" }] },
|
||||
{ id: "p2", name: "Pro", price: "₹999/mo", features: ["Priority support", "Early access features"], buttons: [{ text: "Choose Pro", href: "#" }] },
|
||||
{ id: "p3", name: "Enterprise", price: "Custom", features: ["Dedicated manager", "SLA guarantees"], buttons: [{ text: "Contact Us", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "animated-grid",
|
||||
}}
|
||||
tag="Newsletter"
|
||||
title="Stay Updated"
|
||||
description="Join our developer community to receive the latest updates on ZShop price drops and Node.js developments."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "animated-grid" }}
|
||||
tag="Newsletter"
|
||||
title="Stay Updated"
|
||||
description="Join our developer community to receive the latest updates on ZShop price drops and Node.js developments."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Resource",
|
||||
items: [
|
||||
{
|
||||
label: "Documentation",
|
||||
href: "https://nodejs.org/en/docs",
|
||||
},
|
||||
{
|
||||
label: "Blog",
|
||||
href: "https://nodejs.org/en/blog",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Trademark Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="Copyright © OpenJS Foundation"
|
||||
bottomRightText="v25.9.0"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Resource", items: [{ label: "Documentation", href: "https://nodejs.org/en/docs" }, { label: "Blog", href: "https://nodejs.org/en/blog" }] },
|
||||
{ title: "Legal", items: [{ label: "Trademark Policy", href: "#" }, { label: "Privacy", href: "#" }] }
|
||||
]}
|
||||
bottomLeftText="Copyright © OpenJS Foundation"
|
||||
bottomRightText="v25.9.0"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user