From d4fe6be88df4fb4b5ddb9a60b5cfe2feeec6a046 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 11 Apr 2026 10:45:32 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 324 ++++++++++++++---------------------------------
 1 file changed, 96 insertions(+), 228 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index bdce560..f5e6e99 100644
--- a/src/app/page.tsx
+++ b/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>
   );