From f189647dbba7a73b7aca810f753b8a125b934045 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 24 May 2026 06:55:33 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 380 +++++++++++++++--------------------------------
 1 file changed, 123 insertions(+), 257 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index cb8caa0..471a2ad 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,273 +16,139 @@ import { Layout, Palette, Printer } from "lucide-react";
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="directional-hover"
-        defaultTextAnimation="background-highlight"
-        borderRadius="pill"
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Shakir Graphics"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "About", id: "about" },
+              { name: "Services", id: "features" },
+              { name: "Contact", id: "contact" }
+            ]}
+            brandName="Shakir Graphics"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogoBillboard
-      background={{
-        variant: "gradient-bars",
-      }}
-      logoText="Shakir Graphics"
-      description="Professional graphic design services located in the heart of Talagang. We bring your creative vision to life with precision and expertise."
-      buttons={[
-        {
-          text: "Get in Touch",
-          href: "#contact",
-        },
-        {
-          text: "Our Services",
-          href: "#features",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151273064.jpg?_wi=1"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroLogoBillboard
+            background={{ variant: "gradient-bars" }}
+            logoText="Shakir Graphics"
+            description="Professional graphic design services located in the heart of Talagang. We bring your creative vision to life with precision and expertise."
+            buttons={[
+              { text: "Get in Touch", href: "#contact" },
+              { text: "Our Services", href: "#features" }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151273064.jpg"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TextSplitAbout
-      useInvertedBackground={false}
-      title="About Shakir Graphics"
-      description={[
-        "Serving the Talagang community with top-tier graphic design solutions. We specialize in creative branding, professional print graphics, and customized designs to meet your business needs.",
-      ]}
-    />
-  </div>
+        <div id="about" data-section="about">
+          <TextSplitAbout
+            useInvertedBackground={false}
+            title="About Shakir Graphics"
+            description={[
+              "Serving the Talagang community with top-tier graphic design solutions. We specialize in creative branding, professional print graphics, and customized designs to meet your business needs."
+            ]}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureHoverPattern
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          icon: Palette,
-          title: "Custom Branding",
-          description: "Unique logos and brand identities created to stand out.",
-        },
-        {
-          icon: Printer,
-          title: "Print Design",
-          description: "High-quality business cards, brochures, and flyers.",
-        },
-        {
-          icon: Layout,
-          title: "Marketing Collateral",
-          description: "Social media graphics and marketing material layouts.",
-        },
-      ]}
-      title="Our Professional Services"
-      description="Expert design solutions tailored for local businesses and individuals."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureHoverPattern
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              { icon: Palette, title: "Custom Branding", description: "Unique logos and brand identities created to stand out." },
+              { icon: Printer, title: "Print Design", description: "High-quality business cards, brochures, and flyers." },
+              { icon: Layout, title: "Marketing Collateral", description: "Social media graphics and marketing material layouts." }
+            ]}
+            title="Our Professional Services"
+            description="Expert design solutions tailored for local businesses and individuals."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardSeven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          value: "500+",
-          title: "Projects Completed",
-          items: [
-            "Branding",
-            "Print",
-            "Digital",
-          ],
-        },
-        {
-          id: "m2",
-          value: "100%",
-          title: "Client Satisfaction",
-          items: [
-            "Reliable",
-            "Creative",
-            "Professional",
-          ],
-        },
-        {
-          id: "m3",
-          value: "24/7",
-          title: "Support Ready",
-          items: [
-            "Always",
-            "Available",
-            "Responsive",
-          ],
-        },
-      ]}
-      title="Trusted Experience"
-      description="Years of service delivering high-quality design solutions to Talagang."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardSeven
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "m1", value: "500+", title: "Projects Completed", items: ["Branding", "Print", "Digital"] },
+              { id: "m2", value: "100%", title: "Client Satisfaction", items: ["Reliable", "Creative", "Professional"] },
+              { id: "m3", value: "24/7", title: "Support Ready", items: ["Always", "Available", "Responsive"] }
+            ]}
+            title="Trusted Experience"
+            description="Years of service delivering high-quality design solutions to Talagang."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFive
-      textboxLayout="split"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Ali Hassan",
-          date: "Jan 2024",
-          title: "Business Owner",
-          quote: "Shakir Graphics delivered exactly what I needed for my brand identity. Very professional.",
-          tag: "Branding",
-          avatarSrc: "asset://avatar-1",
-          imageSrc: "http://img.b2bpic.net/free-photo/photographer-using-graphic-tablet-perform-editing-operations-correct-images-creative-agency_482257-82275.jpg",
-          imageAlt: "graphic designer working on computer",
-        },
-        {
-          id: "t2",
-          name: "Sara Khan",
-          date: "Feb 2024",
-          title: "Entrepreneur",
-          quote: "Excellent print quality and fast turnaround time in Talagang.",
-          tag: "Print",
-          avatarSrc: "asset://avatar-2",
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151273064.jpg?_wi=2",
-          imageAlt: "graphic designer working on computer",
-        },
-        {
-          id: "t3",
-          name: "Kamran Malik",
-          date: "Mar 2024",
-          title: "Local Store",
-          quote: "Professional, reliable, and very creative with design layouts.",
-          tag: "Marketing",
-          avatarSrc: "asset://avatar-3",
-          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-items-redecorating-house-with-copy-space_23-2148815771.jpg?_wi=1",
-          imageAlt: "graphic designer working on computer",
-        },
-        {
-          id: "t4",
-          name: "Fatima Noor",
-          date: "Apr 2024",
-          title: "Student",
-          quote: "Great service and very friendly staff. Highly recommended.",
-          tag: "Design",
-          avatarSrc: "asset://avatar-4",
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164872.jpg",
-          imageAlt: "graphic designer working on computer",
-        },
-        {
-          id: "t5",
-          name: "Zeeshan Ahmed",
-          date: "May 2024",
-          title: "Agency Lead",
-          quote: "Top-tier design services that truly capture the client's intent.",
-          tag: "Professional",
-          avatarSrc: "asset://avatar-5",
-          imageSrc: "http://img.b2bpic.net/free-photo/nobody-artwork-studio-with-creativity-equipment_482257-27218.jpg",
-          imageAlt: "graphic designer working on computer",
-        },
-      ]}
-      title="What Our Clients Say"
-      description="We take pride in building lasting relationships with our clients."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardFive
+            textboxLayout="split"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "t1", name: "Ali Hassan", date: "Jan 2024", title: "Business Owner", quote: "Shakir Graphics delivered exactly what I needed for my brand identity. Very professional.", tag: "Branding", avatarSrc: "asset://avatar-1", imageSrc: "http://img.b2bpic.net/free-photo/photographer-using-graphic-tablet-perform-editing-operations-correct-images-creative-agency_482257-82275.jpg", imageAlt: "graphic designer working on computer" },
+              { id: "t2", name: "Sara Khan", date: "Feb 2024", title: "Entrepreneur", quote: "Excellent print quality and fast turnaround time in Talagang.", tag: "Print", avatarSrc: "asset://avatar-2", imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151273064.jpg", imageAlt: "graphic designer working on computer" },
+              { id: "t3", name: "Kamran Malik", date: "Mar 2024", title: "Local Store", quote: "Professional, reliable, and very creative with design layouts.", tag: "Marketing", avatarSrc: "asset://avatar-3", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-items-redecorating-house-with-copy-space_23-2148815771.jpg", imageAlt: "graphic designer working on computer" },
+              { id: "t4", name: "Fatima Noor", date: "Apr 2024", title: "Student", quote: "Great service and very friendly staff. Highly recommended.", tag: "Design", avatarSrc: "asset://avatar-4", imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164872.jpg", imageAlt: "graphic designer working on computer" },
+              { id: "t5", name: "Zeeshan Ahmed", date: "May 2024", title: "Agency Lead", quote: "Top-tier design services that truly capture the client's intent.", tag: "Professional", avatarSrc: "asset://avatar-5", imageSrc: "http://img.b2bpic.net/free-photo/nobody-artwork-studio-with-creativity-equipment_482257-27218.jpg", imageAlt: "graphic designer working on computer" }
+            ]}
+            title="What Our Clients Say"
+            description="We take pride in building lasting relationships with our clients."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "q1",
-          title: "How do I start a project?",
-          content: "Just visit us or contact us via our form to start the process.",
-        },
-        {
-          id: "q2",
-          title: "What is the turnaround time?",
-          content: "Most projects are completed within 48-72 hours.",
-        },
-        {
-          id: "q3",
-          title: "Do you offer printing?",
-          content: "Yes, we specialize in high-quality professional printing.",
-        },
-      ]}
-      title="Frequently Asked Questions"
-      description="Common questions about our design services."
-      faqsAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/young-woman-digital-designer-working-tablet-computer_1303-32097.jpg"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            textboxLayout="split"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "q1", title: "How do I start a project?", content: "Just visit us or contact us via our form to start the process." },
+              { id: "q2", title: "What is the turnaround time?", content: "Most projects are completed within 48-72 hours." },
+              { id: "q3", title: "Do you offer printing?", content: "Yes, we specialize in high-quality professional printing." }
+            ]}
+            title="Frequently Asked Questions"
+            description="Common questions about our design services."
+            faqsAnimation="slide-up"
+            imageSrc="http://img.b2bpic.net/free-photo/young-woman-digital-designer-working-tablet-computer_1303-32097.jpg"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplitForm
-      useInvertedBackground={false}
-      title="Contact Us"
-      description="Visit Shakir Graphics in Talagang or reach out through our online form for any design inquiries."
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Your Email",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "Tell us about your project",
-        required: true,
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/flat-lay-items-redecorating-house-with-copy-space_23-2148815771.jpg?_wi=2"
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            useInvertedBackground={false}
+            title="Contact Us"
+            description="Visit Shakir Graphics in Talagang or reach out through our online form for any design inquiries."
+            inputs={[
+              { name: "name", type: "text", placeholder: "Your Name", required: true },
+              { name: "email", type: "email", placeholder: "Your Email", required: true }
+            ]}
+            textarea={{ name: "message", placeholder: "Tell us about your project", required: true }}
+            imageSrc="http://img.b2bpic.net/free-photo/flat-lay-items-redecorating-house-with-copy-space_23-2148815771.jpg"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterLogoReveal
-      logoText="Shakir Graphics"
-      leftLink={{
-        text: "© 2024 Shakir Graphics",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Location: Talagang, Pakistan",
-        href: "https://maps.app.goo.gl/6AxqEqipmkmhRJT6A",
-      }}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Shakir Graphics"
+            leftLink={{ text: "© 2024 Shakir Graphics", href: "#" }}
+            rightLink={{ text: "Location: Talagang, Pakistan", href: "https://maps.app.goo.gl/6AxqEqipmkmhRJT6A" }}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1