Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 78bfb8e6ec | |||
| e8ee8c43b0 | |||
| 49d2564c51 | |||
| 068fd3d8b1 |
190
src/app/services/web-development/page.tsx
Normal file
190
src/app/services/web-development/page.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
"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" }]}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user