From e8ee8c43b05c3f8ec3e3ecfddb9073be8c6cce00 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 8 Jun 2026 08:17:58 +0000
Subject: [PATCH] Add src/app/services/web-development/page.tsx

---
 src/app/services/web-development/page.tsx | 191 ++++++++++++++++++++++
 1 file changed, 191 insertions(+)
 create mode 100644 src/app/services/web-development/page.tsx

diff --git a/src/app/services/web-development/page.tsx b/src/app/services/web-development/page.tsx
new file mode 100644
index 0000000..edc9a63
--- /dev/null
+++ b/src/app/services/web-development/page.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import ContactText from '@/components/sections/contact/ContactText';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Monitor, Code, Globe, Layers, Workflow, Rocket, TrendingUp, Shield, Lightbulb, CheckCircle, ArrowUpRight, Award } from "lucide-react";
+
+export default function WebDevelopmentPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Web Development", id: "/services/web-development" },
+    { name: "App Development", id: "/services/app-development" },
+    { name: "Our Services", id: "/#ai-services-overview" },
+    { name: "Case Studies", id: "/#case-studies" },
+    { name: "Testimonials", id: "/#testimonials" },
+    { name: "Why Us", id: "/#why-choose-us" },
+    { name: "Team", id: "/#team" },
+    { name: "FAQ", id: "/#faq" },
+    { name: "Blog", id: "/blog" },
+    { name: "Contact", id: "/contact" },
+    { name: "Documentation", id: "/resources/documentation" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="metallic"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <NavbarLayoutFloatingOverlay
+          brandName="Echo"
+          navItems={navItems}
+          button={{ text: "Get Started", href: "/contact" }}
+        />
+
+        <div id="hero" data-section="hero">
+          <MediaAbout
+            title="Expert Web Development Services"
+            description="We craft dynamic, high-performance websites and web applications tailored to your business needs. From custom e-commerce platforms to sophisticated content management systems, our solutions are built for scalability, security, and an unparalleled user experience."
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp?_wi=1"
+            imageAlt="Modern Web Development Interface"
+            tag="Building Digital Foundations"
+            useInvertedBackground={false}
+            buttons={[{ text: "Book a Discovery Call", href: "/contact" }]}
+            buttonAnimation="slide-up"
+          />
+        </div>
+
+        <div id="web-portfolio" data-section="web-portfolio">
+          <FeatureCardTwentySix
+            title="Our Web Development Portfolio"
+            description="Explore some of our recent web projects that deliver exceptional results and user satisfaction."
+            textboxLayout="default"
+            useInvertedBackground={true}
+            buttons={[{ text: "View All Projects", href: "/#case-studies" }]}
+            buttonAnimation="slide-up"
+            cardClassName="!h-auto aspect-video"
+            features={[
+              {
+                title: "Custom E-commerce Platform",                description: "Developed a scalable e-commerce solution with integrated payment gateways and inventory management.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp",                imageAlt: "E-commerce Website Screenshot",                buttonIcon: ArrowUpRight,
+                buttonHref: "#"
+              },
+              {
+                title: "Interactive Corporate Website",                description: "Designed and built a responsive corporate website with dynamic content and advanced analytics.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp",                imageAlt: "Corporate Website Design",                buttonIcon: ArrowUpRight,
+                buttonHref: "#"
+              },
+              {
+                title: "Membership Portal Development",                description: "Created a secure member portal with personalized dashboards and exclusive content access.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp",                imageAlt: "Membership Portal Screenshot",                buttonIcon: ArrowUpRight,
+                buttonHref: "#"
+              },
+              {
+                title: "Booking System Integration",                description: "Integrated a robust online booking system for a service business, enhancing customer experience.",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-4.webp",                imageAlt: "Online Booking System",                buttonIcon: ArrowUpRight,
+                buttonHref: "#"
+              }
+            ]}
+          />
+        </div>
+
+        <div id="web-benefits" data-section="web-benefits">
+          <FeatureCardTwelve
+            title="Why Choose Echo for Your Web Project?"
+            description="Partner with us for unparalleled expertise, innovative solutions, and a commitment to your digital success."
+            textboxLayout="default"
+            useInvertedBackground={false}
+            animationType="slide-up"
+            features={[
+              {
+                id: "1",                label: "Performance Optimized",                title: "Blazing Fast & Responsive",                items: ["Lightning-fast load times", "Seamless experience on any device", "Optimized for search engines"]
+              },
+              {
+              "id": "2",                label: "Custom Solutions",                title: "Tailored to Your Vision",                items: ["Bespoke design and functionality", "Scalable architecture for growth", "Integration with existing systems"]
+              },
+              {
+                id: "3",                label: "Security & Reliability",                title: "Robust & Secure Foundations",                items: ["Enterprise-grade security protocols", "Regular updates and maintenance", "99.9% uptime guarantee"]
+              },
+              {
+                id: "4",                label: "Future-Proof Technology",                title: "Built with Latest Stacks",                items: ["Modern frameworks and libraries", "Easy to update and expand", "Sustainable and long-term solutions"]
+              }
+            ]}
+          />
+        </div>
+
+        <div id="web-metrics" data-section="web-metrics">
+          <MetricCardOne
+            title="Web Success by the Numbers"
+            description="Our proven approach leads to tangible results for businesses across various sectors."
+            textboxLayout="default"
+            useInvertedBackground={true}
+            gridVariant="uniform-all-items-equal"
+            animationType="slide-up"
+            metrics={[
+              { id: "traffic", value: "+45%", title: "Website Traffic", description: "Average increase in organic traffic for clients", icon: Globe },
+              { id: "conversions", value: "+20%", title: "Conversion Rates", description: "Boost in goal completion rates", icon: TrendingUp },
+              { id: "satisfaction", value: "99%", title: "Client Satisfaction", description: "Our commitment to excellence", icon: Award }
+            ]}
+          />
+        </div>
+
+        <div id="web-cta-intro" data-section="web-cta-intro">
+          <ContactText
+            text="Ready to build your digital masterpiece? Let's discuss your vision and bring it to life with cutting-edge web development."
+            background={{ variant: "radial-gradient" }}
+            useInvertedBackground={false}
+            buttons={[{ text: "Get a Free Quote", href: "/contact" }]}
+            buttonAnimation="slide-up"
+          />
+        </div>
+
+        <div id="web-cta-final" data-section="web-cta-final">
+          <ContactCTA
+            tag="Next Step"
+            title="Launch Your Next Web Project"
+            description="Schedule a free consultation to explore how we can elevate your online presence with a stunning, high-performing website."
+            background={{ variant: "rotated-rays-animated" }}
+            buttons={[{ text: "Book a Discovery Call", href: "/contact" }]}
+            buttonAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <FooterBase
+          logoText="Echo"
+          copyrightText="© 2026 | Echo"
+          columns={[
+            {
+              title: "Company",              items: [
+                { label: "Why Us", href: "/#why-choose-us" },
+                { label: "Team", href: "/#team" },
+                { label: "Case Studies", href: "/#case-studies" },
+                { label: "Contact", href: "/contact" },
+                { label: "Blog", href: "/blog" },
+                { label: "Documentation", href: "/resources/documentation" }
+              ]
+            },
+            {
+              title: "Our Services",              items: [
+                { label: "Web Development", href: "/services/web-development" },
+                { label: "App Development", href: "/services/app-development" },
+                { label: "AI Automations", href: "/#ai-services-overview" },
+                { label: "Marketing & Growth", href: "/#ai-services-overview" }
+              ]
+            },
+            {
+              title: "Connect",              items: [
+                { label: "Twitter", href: "#" },
+                { label: "LinkedIn", href: "#" },
+                { label: "Instagram", href: "#" },
+                { label: "Dribbble", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
-- 
2.49.1