From f9cea7af67397e47ffb306b7ad9c682059aff7ae Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 5 Apr 2026 14:54:08 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 403 ++++++++++++++---------------------------------
 1 file changed, 122 insertions(+), 281 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1cc5d23..df33bdf 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -26,293 +26,134 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "Work",
-          id: "portfolio",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Misbaah Studio"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Work", id: "portfolio" },
+              { name: "Services", id: "services" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="Misbaah Studio"
+            button={{ text: "Let's Talk", href: "#contact" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardCarousel
-      background={{
-        variant: "canvas-reveal",
-      }}
-      title="Misbaah Studio"
-      description="Creating immersive 3D web experiences."
-      buttons={[
-        {
-          text: "View Work",
-          href: "#portfolio",
-        },
-        {
-          text: "Contact Me",
-          href: "#contact",
-        },
-      ]}
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg?_wi=1",
-          imageAlt: "3D Hero Scene",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg?_wi=2",
-          imageAlt: "3D Hero Scene",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg?_wi=3",
-          imageAlt: "3D Hero Scene",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg?_wi=4",
-          imageAlt: "3D Hero Scene",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg?_wi=5",
-          imageAlt: "3D Hero Scene",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg?_wi=6",
-          imageAlt: "3D Hero Scene",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroBillboardCarousel
+            background={{ variant: "canvas-reveal" }}
+            title="Misbaah Studio"
+            description="Creating immersive 3D web experiences."
+            buttons={[
+              { text: "View Work", href: "#portfolio" },
+              { text: "Contact Me", href: "#contact" },
+            ]}
+            mediaItems={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg", imageAlt: "3D Hero Scene" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg", imageAlt: "3D Hero Scene" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg", imageAlt: "3D Hero Scene" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg", imageAlt: "3D Hero Scene" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg", imageAlt: "3D Hero Scene" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg", imageAlt: "3D Hero Scene" },
+            ]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <MediaAbout
-      useInvertedBackground={true}
-      title="About Studio"
-      description="I am a creative developer specializing in 3D websites, animations, and modern UI experiences. Blending technology with art to create digital masterpieces."
-      imageSrc="http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg?_wi=7"
-      imageAlt="Creative Developer Studio"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <MediaAbout
+            useInvertedBackground={true}
+            title="About Studio"
+            description="I am a creative developer specializing in 3D websites, animations, and modern UI experiences. Blending technology with art to create digital masterpieces."
+            imageSrc="http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg"
+            imageAlt="Creative Developer Studio"
+          />
+        </div>
 
-  <div id="services" data-section="services">
-      <FeatureCardTen
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "3D Website Development",
-          description: "Immersive environments built for performance.",
-          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/startup-plan-business-goals-diagram_53876-124321.jpg?_wi=1",
-            imageAlt: "3D Web Dev",
-          },
-          items: [
-            {
-              icon: Sparkles,
-              text: "Three.js Performance",
-            },
-            {
-              icon: Shield,
-              text: "Custom Shaders",
-            },
-          ],
-          reverse: false,
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-geometric_1048-13693.jpg?_wi=8",
-          imageAlt: "3d glowing orb dark background",
-        },
-        {
-          title: "UI/UX Design",
-          description: "High-end user interfaces that capture attention.",
-          media: {
-            imageSrc: "http://img.b2bpic.net/free-vector/realistic-set-glassmorphism-ui-icons-website-mobile-app-vector-location-chat-contact-socia_88138-1382.jpg?_wi=1",
-            imageAlt: "UI/UX Design",
-          },
-          items: [
-            {
-              icon: Award,
-              text: "Pixel Perfect",
-            },
-            {
-              icon: Zap,
-              text: "Mobile Optimized",
-            },
-          ],
-          reverse: true,
-          imageSrc: "http://img.b2bpic.net/free-photo/startup-plan-business-goals-diagram_53876-124321.jpg?_wi=2",
-          imageAlt: "abstract 3d wireframe shape",
-        },
-        {
-          title: "Animation Design",
-          description: "Bespoke animations that bring interfaces to life.",
-          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/startup-plan-business-goals-diagram_53876-124321.jpg?_wi=3",
-            imageAlt: "Animation Design",
-          },
-          items: [
-            {
-              icon: Star,
-              text: "GSAP Motion",
-            },
-            {
-              icon: CheckCircle,
-              text: "Dynamic Triggers",
-            },
-          ],
-          reverse: false,
-          imageSrc: "http://img.b2bpic.net/free-vector/realistic-set-glassmorphism-ui-icons-website-mobile-app-vector-location-chat-contact-socia_88138-1382.jpg?_wi=2",
-          imageAlt: "ui design 3d render",
-        },
-        {
-          title: "Portfolio Websites",
-          description: "Showcase your work with style and grace.",
-          media: {
-            imageSrc: "http://img.b2bpic.net/free-vector/realistic-set-glassmorphism-ui-icons-website-mobile-app-vector-location-chat-contact-socia_88138-1382.jpg?_wi=3",
-            imageAlt: "Portfolio Sites",
-          },
-          items: [
-            {
-              icon: Star,
-              text: "Fast Loading",
-            },
-            {
-              icon: Zap,
-              text: "SEO Optimized",
-            },
-          ],
-          reverse: true,
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg?_wi=1",
-          imageAlt: "portfolio project 3d preview",
-        },
-      ]}
-      title="My Services"
-      description="Premium digital solutions tailored for your unique vision."
-    />
-  </div>
+        <div id="services" data-section="services">
+          <FeatureCardTen
+            textboxLayout="split"
+            animationType="slide-up"
+            useInvertedBackground={false}
+            features={[
+              {
+                title: "3D Website Development",                description: "Immersive environments built for performance.",                media: { imageSrc: "http://img.b2bpic.net/free-photo/startup-plan-business-goals-diagram_53876-124321.jpg", imageAlt: "3D Web Dev" },
+                items: [
+                  { icon: Sparkles, text: "Three.js Performance" },
+                  { icon: Shield, text: "Custom Shaders" },
+                ],
+                reverse: false
+              },
+              {
+                title: "UI/UX Design",                description: "High-end user interfaces that capture attention.",                media: { imageSrc: "http://img.b2bpic.net/free-vector/realistic-set-glassmorphism-ui-icons-website-mobile-app-vector-location-chat-contact-socia_88138-1382.jpg", imageAlt: "UI/UX Design" },
+                items: [
+                  { icon: Award, text: "Pixel Perfect" },
+                  { icon: Zap, text: "Mobile Optimized" },
+                ],
+                reverse: true
+              },
+              {
+                title: "Animation Design",                description: "Bespoke animations that bring interfaces to life.",                media: { imageSrc: "http://img.b2bpic.net/free-photo/startup-plan-business-goals-diagram_53876-124321.jpg", imageAlt: "Animation Design" },
+                items: [
+                  { icon: Star, text: "GSAP Motion" },
+                  { icon: CheckCircle, text: "Dynamic Triggers" },
+                ],
+                reverse: false
+              },
+              {
+                title: "Portfolio Websites",                description: "Showcase your work with style and grace.",                media: { imageSrc: "http://img.b2bpic.net/free-vector/realistic-set-glassmorphism-ui-icons-website-mobile-app-vector-location-chat-contact-socia_88138-1382.jpg", imageAlt: "Portfolio Sites" },
+                items: [
+                  { icon: Star, text: "Fast Loading" },
+                  { icon: Zap, text: "SEO Optimized" },
+                ],
+                reverse: true
+              },
+            ]}
+            title="My Services"
+            description="Premium digital solutions tailored for your unique vision."
+          />
+        </div>
 
-  <div id="portfolio" data-section="portfolio">
-      <ProductCardThree
-      animationType="scale-rotate"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "1",
-          name: "Digital Aura",
-          price: "Studio Project",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg?_wi=2",
-        },
-        {
-          id: "2",
-          name: "Abstract Flow",
-          price: "Concept UI",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg?_wi=3",
-        },
-        {
-          id: "3",
-          name: "Neon Horizon",
-          price: "WebGL Art",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg?_wi=4",
-        },
-        {
-          id: "4",
-          name: "Golden Matrix",
-          price: "Experience",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg?_wi=5",
-        },
-        {
-          id: "5",
-          name: "Void Render",
-          price: "3D Product",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg?_wi=6",
-        },
-        {
-          id: "6",
-          name: "Studio Case",
-          price: "Interactive",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg?_wi=7",
-        },
-      ]}
-      title="Selected Projects"
-      description="Recent creative ventures into 3D digital reality."
-    />
-  </div>
+        <div id="portfolio" data-section="portfolio">
+          <ProductCardThree
+            animationType="scale-rotate"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={true}
+            products={[
+              { id: "1", name: "Digital Aura", price: "Studio Project", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg" },
+              { id: "2", name: "Abstract Flow", price: "Concept UI", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg" },
+              { id: "3", name: "Neon Horizon", price: "WebGL Art", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg" },
+              { id: "4", name: "Golden Matrix", price: "Experience", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg" },
+              { id: "5", name: "Void Render", price: "3D Product", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg" },
+              { id: "6", name: "Studio Case", price: "Interactive", imageSrc: "http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884874.jpg" },
+            ]}
+            title="Selected Projects"
+            description="Recent creative ventures into 3D digital reality."
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "rotated-rays-animated",
-      }}
-      text="Let's build something extraordinary together. Reach out via WhatsApp +91 9479427424 or email at hello@misbaah.studio"
-      buttons={[
-        {
-          text: "WhatsApp Now",
-          href: "https://wa.me/919479427424",
-        },
-        {
-          text: "Email Me",
-          href: "mailto:hello@misbaah.studio",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactText
+            useInvertedBackground={false}
+            background={{ variant: "rotated-rays-animated" }}
+            text="Let's build something extraordinary together. Reach out via WhatsApp +91 9479427424 or email at hello@misbaah.studio"
+            buttons={[
+              { text: "WhatsApp Now", href: "https://wa.me/919479427424" },
+              { text: "Email Me", href: "mailto:hello@misbaah.studio" },
+            ]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseReveal
-      logoText="Misbaah Studio"
-      columns={[
-        {
-          title: "Connect",
-          items: [
-            {
-              label: "LinkedIn",
-              href: "#",
-            },
-            {
-              label: "Instagram",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Studio",
-          items: [
-            {
-              label: "Work",
-              href: "#portfolio",
-            },
-            {
-              label: "Services",
-              href: "#services",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy",
-              href: "#",
-            },
-            {
-              label: "Terms",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      copyrightText="© Misbaah Studio. All rights reserved."
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Misbaah Studio"
+            columns={[
+              { title: "Connect", items: [{ label: "LinkedIn", href: "#" }, { label: "Instagram", href: "#" }] },
+              { title: "Studio", items: [{ label: "Work", href: "#portfolio" }, { label: "Services", href: "#services" }] },
+              { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
+            ]}
+            copyrightText="© Misbaah Studio. All rights reserved."
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1