development/a7026d00-2da7-4bf1-98ab-0d49ab664c83
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
development
2026-01-21 12:33:06 +00:00
parent b1db062dc6
commit 06985d38cd
1 changed files with 530 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

744
src/app/page.tsx
View File

@@ -1,225 +1,541 @@
"use client" "use client";
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider'; import { ArrowRight, CheckCircle, Star, Users, Zap, Shield, Globe, Code, Sparkles } from 'lucide-react';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; import { useState } from 'react';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import AboutMetric from '@/components/sections/about/AboutMetric'; export default function HomePage() {
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne'; const [activeTestimonial, setActiveTestimonial] = useState(0);
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo'; const testimonials = [
import ContactCenter from '@/components/sections/contact/ContactCenter'; {
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard'; name: "Sarah Johnson", role: "CTO at TechCorp", content: "The team delivered exceptional results. Their expertise in modern web technologies is unmatched.", rating: 5
import { TrendingUp, Users, Globe, Shield, Code, Zap, MessageSquare, Lock } from 'lucide-react'; },
{
name: "Michael Chen", role: "Product Manager at StartupXYZ", content: "Outstanding communication and delivery. They turned our vision into reality with incredible attention to detail.", rating: 5
},
{
name: "Emily Rodriguez", role: "Founder at InnovateLab", content: "Professional, reliable, and innovative. They exceeded our expectations in every aspect of the project.", rating: 5
}
];
const logos = [
{ src: '/images/adidas.718f26f2-1768998558589.svg', alt: 'Adidas' },
{ src: '/images/bmw.0ce4c05c-1768998558637.svg', alt: 'BMW' },
{ src: '/images/gitlab.4f9d2995-1768998558580.png', alt: 'GitLab' },
{ src: '/images/totalenergies.5a993082-1768998558602.svg', alt: 'TotalEnergies' },
{ src: '/images/decathlon.1f3c4744-1768998558606.png', alt: 'Decathlon' },
{ src: '/images/sanofi.b18c1526-1768998558646.png', alt: 'Sanofi' },
{ src: '/images/roche-logo.979d9061-1768998558649.png', alt: 'Roche' },
{ src: '/images/autodesk.a7f2b58e-1768998558654.png', alt: 'Autodesk' },
{ src: '/images/societe-generale-logo.ec64d013-1768998558655.png', alt: 'Société Générale' },
{ src: '/images/jetbrains.536f2da5-1768998558655.svg', alt: 'JetBrains' },
{ src: '/images/rewe.1250e1e4-1768998558655.svg', alt: 'REWE' },
{ src: '/images/capgemini.a1d43b77-1768998558655.svg', alt: 'Capgemini' },
{ src: '/images/red-hat.c5e6e64a-1768998558658.svg', alt: 'Red Hat' },
{ src: '/images/ibm.b8c76e06-1768998558659.svg', alt: 'IBM' },
{ src: '/images/hired.123ab98d-1768998558664.svg', alt: 'Hired' },
{ src: '/images/mercedes.ee8047a9-1768998558857.png', alt: 'Mercedes' },
{ src: '/images/startup.b4dbf43d-1768998558638.svg', alt: 'Startup' }
];
export default function LandingPage() {
return ( return (
<ThemeProvider <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
defaultButtonVariant="hover-magnetic" {/* Navigation */}
defaultTextAnimation="entrance-slide" <nav className="fixed top-0 w-full z-50 bg-black/20 backdrop-blur-md border-b border-white/10">
borderRadius="rounded" <div className="max-w-7xl mx-auto px-6 py-4">
contentWidth="medium" <div className="flex items-center justify-between">
sizing="medium" <div className="flex items-center space-x-3">
background="circleGradient" <img
cardStyle="elevated" src="/images/logo-small-gradient.76616405-1768998558490.svg"
primaryButtonStyle="gradient" alt="Webild Logo"
secondaryButtonStyle="glass" className="w-8 h-8"
headingFontWeight="semibold" />
> <span className="text-white font-bold text-xl">Webild</span>
<div id="nav" data-section="nav"> </div>
<NavbarLayoutFloatingOverlay <div className="hidden md:flex items-center space-x-8">
navItems={[ <a href="#services" className="text-gray-300 hover:text-white transition-colors">Services</a>
{ name: 'Services', id: 'services' }, <a href="#about" className="text-gray-300 hover:text-white transition-colors">About</a>
{ name: 'About', id: 'about' }, <a href="#contact" className="text-gray-300 hover:text-white transition-colors">Contact</a>
{ name: 'Features', id: 'features' }, <button className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white px-6 py-2 rounded-lg transition-all duration-300 transform hover:scale-105">
{ name: 'Pricing', id: 'pricing' }, Get Started
{ name: 'Contact', id: 'contact' } </button>
]} </div>
brandName="NestJS Enterprise" </div>
button={{ </div>
text: 'Get Started', </nav>
href: 'contact'
}}
/>
</div>
<div id="hero" data-section="hero"> {/* Hero Section */}
<HeroSplit <section className="pt-32 pb-20 px-6">
title="Enterprise-Grade NestJS Solutions" <div className="max-w-7xl mx-auto text-center">
description="Build scalable, maintainable Node.js applications with our professional NestJS development services. Trusted by leading companies worldwide." <div className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm rounded-full px-4 py-2 mb-8">
tag="Professional Services" <Sparkles className="w-4 h-4 text-yellow-400" />
tagIcon={Shield} <span className="text-sm text-gray-300">Trusted by 500+ companies worldwide</span>
imagePosition="right" </div>
imageSrc="/images/header-2.50296714-1768998558849.jpg"
imageAlt="NestJS Enterprise Development" <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
buttons={[ Build Amazing
{ text: 'Start Your Project', href: 'contact' }, <span className="bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent block">
{ text: 'View Services', href: 'services' } Digital Products
]} </span>
/> </h1>
</div>
<p className="text-xl text-gray-300 mb-12 max-w-3xl mx-auto leading-relaxed">
We create exceptional web applications, mobile apps, and digital experiences that drive business growth and engage users.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
<button className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white px-8 py-4 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 flex items-center space-x-2">
<span>Start Your Project</span>
<ArrowRight className="w-5 h-5" />
</button>
<button className="border border-white/30 hover:border-white/50 text-white px-8 py-4 rounded-lg font-semibold transition-all duration-300 hover:bg-white/10">
View Our Work
</button>
</div>
<div id="about" data-section="about"> {/* Hero Image */}
<AboutMetric <div className="relative">
title="Trusted by industry leaders worldwide, we deliver enterprise-grade NestJS solutions that scale with your business needs" <img
useInvertedBackground="invertDefault" src="/images/header-2.50296714-1768998558849.jpg"
metrics={[ alt="Digital workspace"
{ icon: TrendingUp, label: 'Projects Delivered', value: '500+' }, className="w-full max-w-4xl mx-auto rounded-2xl shadow-2xl"
{ icon: Users, label: 'Enterprise Clients', value: '150+' }, />
{ icon: Globe, label: 'Countries Served', value: '25+' }, <div className="absolute inset-0 bg-gradient-to-t from-slate-900/50 to-transparent rounded-2xl"></div>
{ icon: Shield, label: 'Years of Experience', value: '8+' } </div>
]} </div>
/> </section>
</div>
<div id="features" data-section="features"> {/* Features Section */}
<FeatureCardOne <section className="py-20 px-6">
title="Why Choose Our NestJS Services" <div className="max-w-7xl mx-auto">
description="Comprehensive enterprise solutions built with industry best practices" <div className="text-center mb-16">
tag="Key Features" <h2 className="text-4xl font-bold text-white mb-4">Why Choose Webild?</h2>
tagIcon={Code} <p className="text-xl text-gray-300 max-w-2xl mx-auto">
textboxLayout="default" We combine cutting-edge technology with exceptional design to deliver solutions that exceed expectations.
gridVariant="two-columns-alternating-heights" </p>
animationType="slide-up" </div>
useInvertedBackground="noInvert"
features={[ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{ <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all duration-300">
title: 'Scalable Architecture", description: 'Enterprise-ready applications designed to handle millions of requests with optimal performance and reliability.', <div className="w-12 h-12 bg-gradient-to-r from-purple-500 to-blue-500 rounded-lg flex items-center justify-center mb-4">
imageSrc: '/images/big-data.88454030-1768998558656.svg', <Code className="w-6 h-6 text-white" />
imageAlt: 'Scalable Architecture' </div>
}, <h3 className="text-xl font-semibold text-white mb-2">Expert Development</h3>
{ <p className="text-gray-300">Our team of skilled developers uses the latest technologies and best practices.</p>
title: 'Security First", description: 'Implementation of industry-standard security practices including authentication, authorization, and data protection.', </div>
imageSrc: '/images/protect.5939735a-1768998558659.svg',
imageAlt: 'Security Implementation' <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all duration-300">
}, <div className="w-12 h-12 bg-gradient-to-r from-green-500 to-emerald-500 rounded-lg flex items-center justify-center mb-4">
{ <Zap className="w-6 h-6 text-white" />
title: 'Rapid Development", description: 'Accelerate your time-to-market with our proven development methodologies and reusable components.', </div>
imageSrc: '/images/puzzle.a43aa4b7-1768998558663.svg', <h3 className="text-xl font-semibold text-white mb-2">Lightning Fast</h3>
imageAlt: 'Rapid Development' <p className="text-gray-300">Optimized performance and blazing-fast loading times for better user experience.</p>
}, </div>
{
title: 'Expert Consultation", description: 'Get guidance from NestJS experts with deep knowledge of enterprise patterns and best practices.', <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all duration-300">
imageSrc: '/images/conversation.2689303c-1768998558664.svg', <div className="w-12 h-12 bg-gradient-to-r from-orange-500 to-red-500 rounded-lg flex items-center justify-center mb-4">
imageAlt: 'Expert Consultation' <Shield className="w-6 h-6 text-white" />
} </div>
] <h3 className="text-xl font-semibold text-white mb-2">Secure & Reliable</h3>
/> <p className="text-gray-300">Enterprise-grade security and reliability you can trust for your business.</p>
</div> </div>
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all duration-300">
<div className="w-12 h-12 bg-gradient-to-r from-pink-500 to-purple-500 rounded-lg flex items-center justify-center mb-4">
<Globe className="w-6 h-6 text-white" />
</div>
<h3 className="text-xl font-semibold text-white mb-2">Global Reach</h3>
<p className="text-gray-300">Scalable solutions designed to reach users worldwide with optimal performance.</p>
</div>
</div>
</div>
</section>
<div id="testimonials" data-section="testimonials"> {/* Services Section */}
<TestimonialCardTwelve <section id="services" className="py-20 px-6 bg-black/20">
cardTitle="Trusted by 150+ enterprise clients worldwide who rely on our NestJS expertise for mission-critical applications" <div className="max-w-7xl mx-auto">
cardTag="Client Success" <div className="text-center mb-16">
useInvertedBackground="invertDefault" <h2 className="text-4xl font-bold text-white mb-4">Our Services</h2>
testimonials={[ <p className="text-xl text-gray-300 max-w-2xl mx-auto">
{ id: '1', name: 'GitLab', imageSrc: '/images/gitlab.4f9d2995-1768998558580.png', imageAlt: 'GitLab' }, From concept to launch, we provide comprehensive digital solutions tailored to your business needs.
{ id: '2', name: 'Adidas', imageSrc: '/images/adidas.718f26f2-1768998558589.svg', imageAlt: 'Adidas' }, </p>
{ id: '3', name: 'BMW', imageSrc: '/images/bmw.0ce4c05c-1768998558637.svg', imageAlt: 'BMW' }, </div>
{ id: '4', name: 'TotalEnergies', imageSrc: '/images/totalenergies.5a993082-1768998558602.svg', imageAlt: 'TotalEnergies' },
{ id: '5', name: 'Roche', imageSrc: '/images/roche-logo.979d9061-1768998558649.png', imageAlt: 'Roche' }, <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{ id: '6', name: 'IBM', imageSrc: '/images/ibm.b8c76e06-1768998558659.svg', imageAlt: 'IBM' } <div className="group">
] <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-8 h-full hover:bg-white/10 transition-all duration-300 transform hover:scale-105">
/> <div className="flex items-center mb-6">
</div> <img
src="/images/puzzle.a43aa4b7-1768998558663.svg"
alt="Web Development"
className="w-12 h-12 mr-4"
/>
<h3 className="text-2xl font-semibold text-white">Web Development</h3>
</div>
<p className="text-gray-300 mb-6 leading-relaxed">
Custom web applications built with modern frameworks and technologies for optimal performance and user experience.
</p>
<ul className="space-y-2">
<li className="flex items-center text-gray-300">
<CheckCircle className="w-4 h-4 text-green-400 mr-2 flex-shrink-0" />
React & Next.js Applications
</li>
<li className="flex items-center text-gray-300">
<CheckCircle className="w-4 h-4 text-green-400 mr-2 flex-shrink-0" />
E-commerce Platforms
</li>
<li className="flex items-center text-gray-300">
<CheckCircle className="w-4 h-4 text-green-400 mr-2 flex-shrink-0" />
Progressive Web Apps
</li>
</ul>
</div>
</div>
<div className="group">
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-8 h-full hover:bg-white/10 transition-all duration-300 transform hover:scale-105">
<div className="flex items-center mb-6">
<img
src="/images/conversation.2689303c-1768998558664.svg"
alt="Mobile Development"
className="w-12 h-12 mr-4"
/>
<h3 className="text-2xl font-semibold text-white">Mobile Development</h3>
</div>
<p className="text-gray-300 mb-6 leading-relaxed">
Native and cross-platform mobile applications that deliver seamless experiences across all devices.
</p>
<ul className="space-y-2">
<li className="flex items-center text-gray-300">
<CheckCircle className="w-4 h-4 text-green-400 mr-2 flex-shrink-0" />
iOS & Android Apps
</li>
<li className="flex items-center text-gray-300">
<CheckCircle className="w-4 h-4 text-green-400 mr-2 flex-shrink-0" />
React Native Development
</li>
<li className="flex items-center text-gray-300">
<CheckCircle className="w-4 h-4 text-green-400 mr-2 flex-shrink-0" />
App Store Optimization
</li>
</ul>
</div>
</div>
<div className="group">
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-8 h-full hover:bg-white/10 transition-all duration-300 transform hover:scale-105">
<div className="flex items-center mb-6">
<img
src="/images/protect.5939735a-1768998558659.svg"
alt="Cloud Solutions"
className="w-12 h-12 mr-4"
/>
<h3 className="text-2xl font-semibold text-white">Cloud Solutions</h3>
</div>
<p className="text-gray-300 mb-6 leading-relaxed">
Scalable cloud infrastructure and DevOps solutions to ensure your applications perform at their best.
</p>
<ul className="space-y-2">
<li className="flex items-center text-gray-300">
<CheckCircle className="w-4 h-4 text-green-400 mr-2 flex-shrink-0" />
AWS & Azure Integration
</li>
<li className="flex items-center text-gray-300">
<CheckCircle className="w-4 h-4 text-green-400 mr-2 flex-shrink-0" />
CI/CD Pipeline Setup
</li>
<li className="flex items-center text-gray-300">
<CheckCircle className="w-4 h-4 text-green-400 mr-2 flex-shrink-0" />
Performance Monitoring
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<div id="pricing" data-section="pricing"> {/* Process Section */}
<PricingCardTwo <section className="py-20 px-6">
title="Enterprise NestJS Packages" <div className="max-w-7xl mx-auto">
description="Choose the right solution for your business needs" <div className="text-center mb-16">
tag="Pricing" <h2 className="text-4xl font-bold text-white mb-4">Our Approach</h2>
textboxLayout="default" <p className="text-xl text-gray-300 max-w-2xl mx-auto">
animationType="slide-up" We follow a proven methodology to deliver exceptional results on time and within budget.
useInvertedBackground="noInvert" </p>
plans={[ </div>
{
id: 'consulting', <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
badge: 'Most Popular', <div className="text-center">
badgeIcon: TrendingUp, <div className="w-16 h-16 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-6">
price: '$5,000/mo', <span className="text-2xl font-bold text-white">1</span>
subtitle: 'Perfect for growing companies', </div>
buttons: [ <h3 className="text-xl font-semibold text-white mb-4">Discovery & Planning</h3>
{ text: 'Get Started', href: 'contact' }, <p className="text-gray-300 leading-relaxed">
{ text: 'Schedule Call', href: 'contact' } We analyze your requirements, understand your goals, and create a comprehensive project roadmap.
], </p>
features: [ </div>
'Expert NestJS consultation',
'Architecture review & optimization', <div className="text-center">
'Code quality assessment', <div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-green-500 rounded-full flex items-center justify-center mx-auto mb-6">
'Performance optimization', <span className="text-2xl font-bold text-white">2</span>
'Security audit & recommendations', </div>
'24/7 priority support' <h3 className="text-xl font-semibold text-white mb-4">Design & Development</h3>
] <p className="text-gray-300 leading-relaxed">
}, Our expert team creates stunning designs and develops robust, scalable solutions using cutting-edge technologies.
{ </p>
id: 'development', </div>
badge: 'Enterprise',
badgeIcon: Shield, <div className="text-center">
price: '$15,000/mo', <div className="w-16 h-16 bg-gradient-to-r from-green-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-6">
subtitle: 'For large-scale enterprise projects', <span className="text-2xl font-bold text-white">3</span>
buttons: [ </div>
{ text: 'Contact Sales', href: 'contact' }, <h3 className="text-xl font-semibold text-white mb-4">Launch & Support</h3>
{ text: 'View Details', href: 'services' } <p className="text-gray-300 leading-relaxed">
], We deploy your solution and provide ongoing support to ensure optimal performance and continuous improvement.
features: [ </p>
'Full-stack development team', </div>
'Custom enterprise solutions', </div>
'Microservices architecture', </div>
'Cloud deployment & DevOps', </section>
'Quality assurance & testing',
'Dedicated project manager',
'SLA guarantee'
]
}
]
/>
</div>
<div id="contact" data-section="contact"> {/* Trust Section */}
<ContactCenter <section className="py-20 px-6 bg-black/20">
tag="Get Started" <div className="max-w-7xl mx-auto text-center">
tagIcon={MessageSquare} <h2 className="text-4xl font-bold text-white mb-4">Trusted by Industry Leaders</h2>
title="Ready to Transform Your Backend?" <p className="text-xl text-gray-300 mb-12 max-w-2xl mx-auto">
description="Join 150+ enterprise clients who trust us with their NestJS development. Let's discuss your project requirements and build something amazing together." We've had the privilege of working with amazing companies around the world.
useInvertedBackground="invertDefault" </p>
buttonText="Start Your Project"
inputPlaceholder="Enter your business email" <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center opacity-60 hover:opacity-100 transition-opacity duration-300">
termsText="By signing up, you agree to receive updates about our NestJS enterprise services." {logos.slice(0, 12).map((logo, index) => (
/> <div key={index} className="flex items-center justify-center p-4">
</div> <img
src={logo.src}
alt={logo.alt}
className="max-w-full h-8 object-contain filter brightness-0 invert"
/>
</div>
))}
</div>
</div>
</section>
<div id="footer" data-section="footer"> {/* Testimonials Section */}
<FooterBaseCard <section className="py-20 px-6">
logoText="NestJS Enterprise" <div className="max-w-4xl mx-auto">
columns={[ <div className="text-center mb-16">
{ <h2 className="text-4xl font-bold text-white mb-4">What Our Clients Say</h2>
title: 'Services', <p className="text-xl text-gray-300">
items: [ Don't just take our word for it - hear from our satisfied clients.
{ label: 'Consultation', href: 'services' }, </p>
{ label: 'Development', href: 'services' }, </div>
{ label: 'Architecture Review', href: 'services' },
{ label: 'Security Audit', href: 'services' } <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8">
] <div className="text-center">
}, <div className="flex items-center justify-center mb-4">
{ {[...Array(testimonials[activeTestimonial].rating)].map((_, i) => (
title: 'Company', <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
items: [ ))}
{ label: 'About Us', href: 'about' }, </div>
{ label: 'Case Studies', href: 'about' },
{ label: 'Careers', href: 'about' } <blockquote className="text-xl text-gray-200 mb-6 leading-relaxed">
] "{testimonials[activeTestimonial].content}"
}, </blockquote>
{
title: 'Resources', <div className="flex items-center justify-center space-x-3">
items: [ <div className="w-12 h-12 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full flex items-center justify-center">
{ label: 'Documentation', href: 'https://nestjs.com' }, <span className="text-white font-semibold">
{ label: 'Best Practices', href: 'https://nestjs.com' }, {testimonials[activeTestimonial].name.split(' ').map(n => n[0]).join('')}
{ label: 'Support', href: 'contact' } </span>
] </div>
} <div>
]} <p className="text-white font-semibold">{testimonials[activeTestimonial].name}</p>
copyrightText="© 2025 NestJS Enterprise. All rights reserved." <p className="text-gray-400 text-sm">{testimonials[activeTestimonial].role}</p>
/> </div>
</div> </div>
</ThemeProvider> </div>
<div className="flex justify-center space-x-2 mt-8">
{testimonials.map((_, index) => (
<button
key={index}
onClick={() => setActiveTestimonial(index)}
className={`w-3 h-3 rounded-full transition-all duration-300 ${
index === activeTestimonial
? 'bg-gradient-to-r from-purple-500 to-blue-500'
: 'bg-white/20 hover:bg-white/40'
}`}
/>
))}
</div>
</div>
</div>
</section>
{/* Features Grid */}
<section className="py-20 px-6 bg-black/20">
<div className="max-w-7xl mx-auto">
<div className="text-center mb-16">
<h2 className="text-4xl font-bold text-white mb-4">Built for Scale</h2>
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
Our solutions are designed to grow with your business and handle any challenge.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
<div className="space-y-8">
<div className="flex items-start space-x-4">
<div className="w-12 h-12 bg-gradient-to-r from-purple-500 to-blue-500 rounded-lg flex items-center justify-center flex-shrink-0">
<img
src="/images/big-data.88454030-1768998558656.svg"
alt="Scalable Architecture"
className="w-6 h-6"
/>
</div>
<div>
<h3 className="text-xl font-semibold text-white mb-2">Scalable Architecture</h3>
<p className="text-gray-300 leading-relaxed">
Enterprise-ready applications designed to handle millions of requests with optimal performance and reliability.
</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="w-12 h-12 bg-gradient-to-r from-green-500 to-emerald-500 rounded-lg flex items-center justify-center flex-shrink-0">
<Shield className="w-6 h-6 text-white" />
</div>
<div>
<h3 className="text-xl font-semibold text-white mb-2">Advanced Security</h3>
<p className="text-gray-300 leading-relaxed">
Multi-layered security measures including encryption, authentication, and regular security audits to protect your data.
</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="w-12 h-12 bg-gradient-to-r from-orange-500 to-red-500 rounded-lg flex items-center justify-center flex-shrink-0">
<Users className="w-6 h-6 text-white" />
</div>
<div>
<h3 className="text-xl font-semibold text-white mb-2">24/7 Support</h3>
<p className="text-gray-300 leading-relaxed">
Round-the-clock technical support and monitoring to ensure your applications run smoothly at all times.
</p>
</div>
</div>
</div>
<div className="flex items-center justify-center">
<img
src="/images/image-28-1768998558817.png"
alt="Development team"
className="w-full max-w-md rounded-2xl shadow-2xl"
/>
</div>
</div>
</div>
</section>
{/* CTA Section */}
<section className="py-20 px-6">
<div className="max-w-4xl mx-auto text-center">
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
Ready to Build Something Amazing?
</h2>
<p className="text-xl text-gray-300 mb-12 max-w-2xl mx-auto">
Let's discuss your project and turn your ideas into reality. Get in touch with our team today.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
<button className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white px-8 py-4 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 flex items-center space-x-2">
<span>Start Your Project</span>
<ArrowRight className="w-5 h-5" />
</button>
<button className="border border-white/30 hover:border-white/50 text-white px-8 py-4 rounded-lg font-semibold transition-all duration-300 hover:bg-white/10">
Schedule a Call
</button>
</div>
<div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="text-center">
<div className="text-3xl font-bold text-white mb-2">500+</div>
<div className="text-gray-400">Projects Completed</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-white mb-2">98%</div>
<div className="text-gray-400">Client Satisfaction</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-white mb-2">24/7</div>
<div className="text-gray-400">Support Available</div>
</div>
</div>
</div>
</section>
{/* Footer */}
<footer className="bg-black/40 border-t border-white/10 py-12 px-6">
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<div className="col-span-1 md:col-span-2">
<div className="flex items-center space-x-3 mb-4">
<img
src="/images/logo-small-gradient.76616405-1768998558490.svg"
alt="Webild Logo"
className="w-8 h-8"
/>
<span className="text-white font-bold text-xl">Webild</span>
</div>
<p className="text-gray-400 mb-6 max-w-md">
We create exceptional digital experiences that drive business growth and engage users worldwide.
</p>
<div className="flex space-x-4">
<div className="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition-colors cursor-pointer">
<span className="text-white font-semibold">f</span>
</div>
<div className="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition-colors cursor-pointer">
<span className="text-white font-semibold">t</span>
</div>
<div className="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition-colors cursor-pointer">
<span className="text-white font-semibold">in</span>
</div>
</div>
</div>
<div>
<h3 className="text-white font-semibold mb-4">Services</h3>
<ul className="space-y-2">
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Web Development</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Mobile Apps</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Cloud Solutions</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Consulting</a></li>
</ul>
</div>
<div>
<h3 className="text-white font-semibold mb-4">Company</h3>
<ul className="space-y-2">
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">About Us</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Careers</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Contact</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition-colors">Blog</a></li>
</ul>
</div>
</div>
<div className="border-t border-white/10 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p className="text-gray-400 text-sm mb-4 md:mb-0">
© 2024 Webild. All rights reserved.
</p>
<div className="flex space-x-6 text-sm">
<a href="#" className="text-gray-400 hover:text-white transition-colors">Privacy Policy</a>
<a href="#" className="text-gray-400 hover:text-white transition-colors">Terms of Service</a>
<a href="#" className="text-gray-400 hover:text-white transition-colors">Cookies</a>
</div>
</div>
</div>
</footer>
</div>
); );
} }