From a82e816e3a8e567c06dd66b4dc38653522ffe78f Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 5 Mar 2026 08:16:32 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 500 ++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 433 insertions(+), 67 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index d713f39..3c1e846 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,6 +10,9 @@ import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCar
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { Sparkles, Zap, Rocket, Eye, Clock, Award, TrendingUp, Quote, Send } from 'lucide-react';
+import dynamic from 'next/dynamic';
+
+const GyroTiltComponent = dynamic(() => import('@/components/custom/GyroTilt'), { ssr: false });
 
 export default function LandingPage() {
   return (
@@ -19,11 +22,11 @@ export default function LandingPage() {
       borderRadius="soft"
       contentWidth="small"
       sizing="medium"
-      background="noise"
-      cardStyle="layered-gradient"
-      primaryButtonStyle="diagonal-gradient"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="light"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
@@ -40,57 +43,300 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogo
-          logoText="AAYUSH VISUALS"
-          description="Precision Video Editing. Viral Thumbnail Strategy. Elite Branding."
-          buttons={[
-            { text: "View Portfolio", href: "portfolio" },
-            { text: "Contact Now", href: "contact" }
-          ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/a-floating-minimalist-3d-glass-textured--1772694030676-9e5a284a.png?_wi=1"
-          imageAlt="Aayush Visuals - Premium Creative Studio"
-          showDimOverlay={true}
-          buttonAnimation="slide-up"
-        />
+        <div className="min-h-screen w-full bg-black relative overflow-hidden flex items-center justify-center">
+          <style>{`
+            @keyframes gyroSpin {
+              from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+              to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
+            }
+            @keyframes floatParticle {
+              0%, 100% { transform: translateY(0px) translateX(0px) scale(1); opacity: 1; }
+              50% { transform: translateY(-20px) translateX(10px) scale(0.8); opacity: 0.6; }
+            }
+            .gyro-centerpiece {
+              width: 400px;
+              height: 400px;
+              perspective: 1200px;
+              position: relative;
+            }
+            .gyro-inner {
+              width: 100%;
+              height: 100%;
+              background: linear-gradient(135deg, rgba(206, 231, 255, 0.1) 0%, rgba(206, 231, 255, 0.05) 100%);
+              border: 2px solid rgba(206, 231, 255, 0.3);
+              border-radius: 20px;
+              backdrop-filter: blur(20px);
+              animation: gyroSpin 8s linear infinite;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              box-shadow: 0 0 60px rgba(206, 231, 255, 0.2), inset 0 0 60px rgba(206, 231, 255, 0.05);
+              position: relative;
+              overflow: hidden;
+            }
+            .gyro-inner::before {
+              content: '';
+              position: absolute;
+              inset: 0;
+              background: radial-gradient(circle at 30% 30%, rgba(206, 231, 255, 0.15), transparent);
+              pointer-events: none;
+            }
+            .particle {
+              position: absolute;
+              width: 80px;
+              height: 80px;
+              background: linear-gradient(135deg, rgba(206, 231, 255, 0.4), rgba(206, 231, 255, 0.2));
+              border-radius: 50%;
+              backdrop-filter: blur(10px);
+              border: 1px solid rgba(206, 231, 255, 0.3);
+              animation: floatParticle 4s ease-in-out infinite;
+            }
+            .particle:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
+            .particle:nth-child(2) { top: 50%; right: 10%; animation-delay: 1s; }
+            .particle:nth-child(3) { bottom: 15%; left: 25%; animation-delay: 2s; }
+          `}</style>
+          <div className="absolute inset-0 bg-gradient-to-br from-black via-black to-transparent"></div>
+          <div className="relative z-10 text-center">
+            <h1 className="text-6xl md:text-7xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#cee7ff] via-[#cee7ff] to-[#a8cce8] mb-8 animate-pulse">
+              AAYUSH VISUALS
+            </h1>
+            <p className="text-lg md:text-xl text-[#cee7ff] mb-12 font-light tracking-wide">
+              Precision Video Editing. Viral Thumbnail Strategy. Elite Branding.
+            </p>
+            <div className="flex flex-col items-center gap-8 mb-16">
+              <div className="gyro-centerpiece">
+                <div className="gyro-inner">
+                  <div className="particle"></div>
+                  <div className="particle"></div>
+                  <div className="particle"></div>
+                  <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/a-floating-minimalist-3d-glass-textured--1772694030676-9e5a284a.png?_wi=1" alt="Gyro Centerpiece" className="w-48 h-48 object-cover rounded-full opacity-80" />
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-col md:flex-row gap-4 justify-center">
+              <button className="px-8 py-3 bg-gradient-to-r from-[#cee7ff] to-[#a8cce8] text-black font-semibold rounded-lg hover:shadow-lg hover:shadow-[#cee7ff]/50 transition-all duration-300">
+                View Portfolio
+              </button>
+              <button className="px-8 py-3 border-2 border-[#cee7ff] text-[#cee7ff] font-semibold rounded-lg hover:bg-[#cee7ff]/10 transition-all duration-300">
+                Contact Now
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
 
-      <div id="services" data-section="services">
-        <FeatureCardTwentyThree
-          title="Our Services"
-          description="Multidisciplinary creative excellence engineered for modern creators and ambitious brands."
-          tag="What We Do"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          features={[
-            {
-              id: "1",              title: "Video Editing",              tags: ["Cinematic", "High-Retention"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/cinematic-video-editing-interface-showca-1772694031298-cfc9d9a1.png",              imageAlt: "Video Editing Service"
-            },
-            {
-              id: "2",              title: "Thumbnail Design",              tags: ["Psychology-Driven", "High-CTR"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/eye-catching-youtube-thumbnail-designs-w-1772694033165-f22b28ad.jpg",              imageAlt: "Thumbnail Design Service"
-            },
-            {
-              id: "3",              title: "Content Writing",              tags: ["Strategic", "Conversion-Focused"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/strategic-script-writing-interface-with--1772694031273-3bbe5f6b.png",              imageAlt: "Content Writing Service"
-            },
-            {
-              id: "4",              title: "Social Media Creatives",              tags: ["Platform-Native", "Rapid Growth"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/platform-native-social-media-assets-show-1772694036896-e5deb2c2.png",              imageAlt: "Social Media Creatives"
-            },
-            {
-              id: "5",              title: "Elite Branding",              tags: ["Timeless", "Modern Identity"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/premium-brand-identity-components-logo-v-1772694033720-0ac1608c.png",              imageAlt: "Branding Service"
-            },
-            {
-              id: "6",              title: "Portfolio Design",              tags: ["Custom-Engineered", "Interactive"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/custom-engineered-digital-portfolio-show-1772694031455-292f1fbb.png",              imageAlt: "Portfolio Design Service"
-            }
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-        />
+      <div id="services" data-section="services" className="min-h-screen bg-black relative overflow-hidden py-20">
+        <style>{`
+          @keyframes liquidGlow {
+            0%, 100% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+          }
+          .bento-card {
+            background: linear-gradient(135deg, rgba(206, 231, 255, 0.08) 0%, rgba(206, 231, 255, 0.02) 100%);
+            backdrop-filter: blur(30px);
+            border: 1px solid rgba(206, 231, 255, 0.2);
+            border-radius: 24px;
+            padding: 2rem;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+            height: 100%;
+          }
+          .bento-card::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(circle at 0% 0%, rgba(206, 231, 255, 0.1), transparent 50%);
+            opacity: 0;
+            transition: opacity 0.4s ease;
+            pointer-events: none;
+          }
+          .bento-card:hover {
+            transform: translateY(-8px) scale(1.02);
+            border-color: rgba(206, 231, 255, 0.4);
+            box-shadow: 0 0 60px rgba(206, 231, 255, 0.15), inset 0 0 40px rgba(206, 231, 255, 0.05);
+          }
+          .bento-card:hover::before {
+            opacity: 1;
+          }
+          .bento-image {
+            width: 100%;
+            height: 200px;
+            border-radius: 16px;
+            object-fit: cover;
+            margin-bottom: 1.5rem;
+            opacity: 0.9;
+          }
+          .bento-title {
+            color: #cee7ff;
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+          }
+          .bento-tag {
+            display: inline-block;
+            background: rgba(206, 231, 255, 0.1);
+            border: 1px solid rgba(206, 231, 255, 0.2);
+            color: #cee7ff;
+            padding: 0.4rem 0.8rem;
+            border-radius: 20px;
+            font-size: 0.75rem;
+            margin-right: 0.5rem;
+            margin-bottom: 0.5rem;
+          }
+        `}</style>
+        <div className="max-w-6xl mx-auto px-4">
+          <div className="text-center mb-16">
+            <span className="text-[#cee7ff] text-sm font-semibold tracking-widest">WHAT WE DO</span>
+            <h2 className="text-5xl md:text-6xl font-bold text-[#cee7ff] mt-4 mb-6">
+              Our Services
+            </h2>
+            <p className="text-[#a8cce8] text-lg max-w-2xl mx-auto">
+              Multidisciplinary creative excellence engineered for modern creators and ambitious brands.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {[
+              {
+                id: "1",                title: "Video Editing",                tags: ["Cinematic", "High-Retention"],
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/cinematic-video-editing-interface-showca-1772694031298-cfc9d9a1.png"
+              },
+              {
+                id: "2",                title: "Thumbnail Design",                tags: ["Psychology-Driven", "High-CTR"],
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/eye-catching-youtube-thumbnail-designs-w-1772694033165-f22b28ad.jpg"
+              },
+              {
+                id: "3",                title: "Content Writing",                tags: ["Strategic", "Conversion-Focused"],
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/strategic-script-writing-interface-with--1772694031273-3bbe5f6b.png"
+              },
+              {
+                id: "4",                title: "Social Media Creatives",                tags: ["Platform-Native", "Rapid Growth"],
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/platform-native-social-media-assets-show-1772694036896-e5deb2c2.png"
+              },
+              {
+                id: "5",                title: "Elite Branding",                tags: ["Timeless", "Modern Identity"],
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/premium-brand-identity-components-logo-v-1772694033720-0ac1608c.png"
+              },
+              {
+                id: "6",                title: "Portfolio Design",                tags: ["Custom-Engineered", "Interactive"],
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/custom-engineered-digital-portfolio-show-1772694031455-292f1fbb.png"
+              }
+            ].map((service) => (
+              <div key={service.id} className="bento-card">
+                <img src={service.imageSrc} alt={service.title} className="bento-image" />
+                <h3 className="bento-title">{service.title}</h3>
+                <div className="flex flex-wrap">
+                  {service.tags.map((tag, idx) => (
+                    <span key={idx} className="bento-tag">{tag}</span>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div id="portfolio" data-section="portfolio" className="min-h-screen bg-black relative overflow-hidden py-20">
+        <style>{`
+          .portfolio-overlay {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 0;
+            background: rgba(0, 0, 0, 0.95);
+            backdrop-filter: blur(20px);
+            border-top: 2px solid rgba(206, 231, 255, 0.3);
+            overflow-y: auto;
+            transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+            z-index: 50;
+          }
+          .portfolio-overlay.active {
+            height: 100vh;
+          }
+          .portfolio-drawer {
+            padding: 4rem 2rem;
+            max-width: 1200px;
+            margin: 0 auto;
+          }
+          .portfolio-item {
+            display: flex;
+            align-items: center;
+            gap: 2rem;
+            margin-bottom: 3rem;
+            padding-bottom: 2rem;
+            border-bottom: 1px solid rgba(206, 231, 255, 0.1);
+          }
+          .portfolio-item-image {
+            width: 300px;
+            height: 200px;
+            border-radius: 12px;
+            object-fit: cover;
+            opacity: 0.9;
+          }
+          .portfolio-item-content h3 {
+            color: #cee7ff;
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+          }
+          .portfolio-item-content p {
+            color: #a8cce8;
+            font-size: 0.95rem;
+            line-height: 1.6;
+          }
+        `}</style>
+        <div className="max-w-6xl mx-auto px-4 text-center mb-16">
+          <span className="text-[#cee7ff] text-sm font-semibold tracking-widest">PORTFOLIO</span>
+          <h2 className="text-5xl md:text-6xl font-bold text-[#cee7ff] mt-4 mb-6">
+            Featured Work
+          </h2>
+          <p className="text-[#a8cce8] text-lg max-w-2xl mx-auto mb-8">
+            Slide up to explore our portfolio showcase
+          </p>
+          <button
+            onClick={() => {
+              const drawer = document.getElementById('portfolio-drawer');
+              if (drawer) drawer.classList.toggle('active');
+            }}
+            className="px-8 py-3 border-2 border-[#cee7ff] text-[#cee7ff] font-semibold rounded-lg hover:bg-[#cee7ff]/10 transition-all duration-300"
+          >
+            View Portfolio
+          </button>
+        </div>
+
+        <div id="portfolio-drawer" className="portfolio-overlay">
+          <div className="portfolio-drawer">
+            <button
+              onClick={() => {
+                const drawer = document.getElementById('portfolio-drawer');
+                if (drawer) drawer.classList.remove('active');
+              }}
+              className="mb-8 text-[#cee7ff] hover:text-[#a8cce8] transition-colors"
+            >
+              ← Close Portfolio
+            </button>
+            {[
+              {
+                title: "Viral Gaming Content Series",                description: "Edited 50+ videos achieving 2M+ views with 45% average retention rate. Specialized in jump cuts, transitions, and psychological hooks.",                image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/cinematic-video-editing-interface-showca-1772694031298-cfc9d9a1.png"
+              },
+              {
+                title: "E-Commerce Brand Transformation",                description: "Complete branding overhaul including logo, thumbnail strategy, and product video edits. Resulted in 3x CTR improvement.",                image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/eye-catching-youtube-thumbnail-designs-w-1772694033165-f22b28ad.jpg"
+              },
+              {
+                title: "Educational Channel Launch",                description: "Built entire video editing style from scratch. Implemented data-driven thumbnail psychology and narrative flow optimization.",                image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/strategic-script-writing-interface-with--1772694031273-3bbe5f6b.png"
+              }
+            ].map((item, idx) => (
+              <div key={idx} className="portfolio-item">
+                <img src={item.image} alt={item.title} className="portfolio-item-image" />
+                <div className="portfolio-item-content">
+                  <h3>{item.title}</h3>
+                  <p>{item.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
       </div>
 
       <div id="about" data-section="about">
@@ -168,19 +414,139 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
-        <ContactCenter
-          tag="Ready to Elevate?"
-          tagIcon={Send}
-          tagAnimation="slide-up"
-          title="Let's Transmit Your Vision"
-          description="Share your creative goals and project brief. Our team responds within 12 hours with strategic recommendations tailored to your brand."
-          background={{ variant: "rotated-rays-animated-grid" }}
-          useInvertedBackground={false}
-          inputPlaceholder="your@email.com"
-          buttonText="Transmit Vision"
-          termsText="We respect your vision. Unsubscribe anytime. Your data is secured."
-        />
+      <div id="contact" data-section="contact" className="min-h-screen bg-black relative overflow-hidden py-20">
+        <style>{`
+          .contact-form-container {
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 0 2rem;
+          }
+          .contact-input {
+            width: 100%;
+            background: transparent;
+            border: none;
+            border-bottom: 2px solid rgba(206, 231, 255, 0.3);
+            color: #cee7ff;
+            padding: 1rem 0;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            margin-bottom: 2rem;
+          }
+          .contact-input::placeholder {
+            color: rgba(206, 231, 255, 0.5);
+          }
+          .contact-input:focus {
+            outline: none;
+            border-bottom-color: #cee7ff;
+            box-shadow: 0 2px 0 #cee7ff;
+          }
+          .contact-textarea {
+            width: 100%;
+            background: transparent;
+            border: 2px solid rgba(206, 231, 255, 0.2);
+            border-radius: 8px;
+            color: #cee7ff;
+            padding: 1rem;
+            font-size: 1rem;
+            font-family: inherit;
+            transition: all 0.3s ease;
+            margin-bottom: 2rem;
+            min-height: 150px;
+            resize: vertical;
+          }
+          .contact-textarea:focus {
+            outline: none;
+            border-color: #cee7ff;
+            box-shadow: inset 0 0 20px rgba(206, 231, 255, 0.1);
+          }
+          .contact-submit {
+            width: 100%;
+            padding: 1rem;
+            background: linear-gradient(135deg, #cee7ff, #a8cce8);
+            color: #000;
+            border: none;
+            border-radius: 8px;
+            font-weight: 600;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+          }
+          .contact-submit:hover {
+            box-shadow: 0 0 30px rgba(206, 231, 255, 0.4);
+            transform: translateY(-2px);
+          }
+        `}</style>
+        <div className="contact-form-container">
+          <div className="text-center mb-12">
+            <span className="text-[#cee7ff] text-sm font-semibold tracking-widest">READY TO ELEVATE?</span>
+            <h2 className="text-5xl md:text-6xl font-bold text-[#cee7ff] mt-4 mb-6">
+              Let's Transmit Your Vision
+            </h2>
+            <p className="text-[#a8cce8] text-lg">
+              Share your creative goals and project brief. Our team responds within 12 hours with strategic recommendations tailored to your brand.
+            </p>
+          </div>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              const formData = new FormData(e.currentTarget);
+              const data = {
+                name: formData.get('name'),
+                email: formData.get('email'),
+                project: formData.get('project'),
+                message: formData.get('message')
+              };
+              
+              // Sheet Monkey API endpoint
+              fetch('https://api.sheetmonkey.io/form/YOUR_FORM_ID', {
+                method: 'POST',
+                body: JSON.stringify(data),
+                headers: {
+                  'Content-Type': 'application/json'
+                }
+              }).then(() => {
+                alert('Vision transmitted successfully!');
+                e.currentTarget.reset();
+              }).catch(() => {
+                alert('Error transmitting vision. Please try again.');
+              });
+            }}
+          >
+            <input
+              type="text"
+              name="name"
+              placeholder="Your Name"
+              className="contact-input"
+              required
+            />
+            <input
+              type="email"
+              name="email"
+              placeholder="your@email.com"
+              className="contact-input"
+              required
+            />
+            <input
+              type="text"
+              name="project"
+              placeholder="Project Type"
+              className="contact-input"
+              required
+            />
+            <textarea
+              name="message"
+              placeholder="Tell us about your vision and creative goals..."
+              className="contact-textarea"
+              required
+            ></textarea>
+            <button type="submit" className="contact-submit">
+              Transmit Vision
+            </button>
+            <p className="text-[#a8cce8] text-xs text-center mt-6">
+              We respect your vision. Unsubscribe anytime. Your data is secured.
+            </p>
+          </form>
+        </div>
       </div>
 
       <div id="footer" data-section="footer">
@@ -219,4 +585,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}