Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #1.
This commit is contained in:
744
src/app/page.tsx
744
src/app/page.tsx
@@ -1,225 +1,541 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import { TrendingUp, Users, Globe, Shield, Code, Zap, MessageSquare, Lock } from 'lucide-react';
|
||||
import { ArrowRight, CheckCircle, Star, Users, Zap, Shield, Globe, Code, Sparkles } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function HomePage() {
|
||||
const [activeTestimonial, setActiveTestimonial] = useState(0);
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
name: "Sarah Johnson", role: "CTO at TechCorp", content: "The team delivered exceptional results. Their expertise in modern web technologies is unmatched.", rating: 5
|
||||
},
|
||||
{
|
||||
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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: 'Services', id: 'services' },
|
||||
{ name: 'About', id: 'about' },
|
||||
{ name: 'Features', id: 'features' },
|
||||
{ name: 'Pricing', id: 'pricing' },
|
||||
{ name: 'Contact', id: 'contact' }
|
||||
]}
|
||||
brandName="NestJS Enterprise"
|
||||
button={{
|
||||
text: 'Get Started',
|
||||
href: 'contact'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
|
||||
{/* Navigation */}
|
||||
<nav className="fixed top-0 w-full z-50 bg-black/20 backdrop-blur-md border-b border-white/10">
|
||||
<div className="max-w-7xl mx-auto px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<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>
|
||||
<div className="hidden md:flex items-center space-x-8">
|
||||
<a href="#services" className="text-gray-300 hover:text-white transition-colors">Services</a>
|
||||
<a href="#about" className="text-gray-300 hover:text-white transition-colors">About</a>
|
||||
<a href="#contact" className="text-gray-300 hover:text-white transition-colors">Contact</a>
|
||||
<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">
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
title="Enterprise-Grade NestJS Solutions"
|
||||
description="Build scalable, maintainable Node.js applications with our professional NestJS development services. Trusted by leading companies worldwide."
|
||||
tag="Professional Services"
|
||||
tagIcon={Shield}
|
||||
imagePosition="right"
|
||||
imageSrc="/images/header-2.50296714-1768998558849.jpg"
|
||||
imageAlt="NestJS Enterprise Development"
|
||||
buttons={[
|
||||
{ text: 'Start Your Project', href: 'contact' },
|
||||
{ text: 'View Services', href: 'services' }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
{/* Hero Section */}
|
||||
<section className="pt-32 pb-20 px-6">
|
||||
<div className="max-w-7xl mx-auto text-center">
|
||||
<div className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm rounded-full px-4 py-2 mb-8">
|
||||
<Sparkles className="w-4 h-4 text-yellow-400" />
|
||||
<span className="text-sm text-gray-300">Trusted by 500+ companies worldwide</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
|
||||
Build Amazing
|
||||
<span className="bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent block">
|
||||
Digital Products
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<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">
|
||||
<AboutMetric
|
||||
title="Trusted by industry leaders worldwide, we deliver enterprise-grade NestJS solutions that scale with your business needs"
|
||||
useInvertedBackground="invertDefault"
|
||||
metrics={[
|
||||
{ icon: TrendingUp, label: 'Projects Delivered', value: '500+' },
|
||||
{ icon: Users, label: 'Enterprise Clients', value: '150+' },
|
||||
{ icon: Globe, label: 'Countries Served', value: '25+' },
|
||||
{ icon: Shield, label: 'Years of Experience', value: '8+' }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
{/* Hero Image */}
|
||||
<div className="relative">
|
||||
<img
|
||||
src="/images/header-2.50296714-1768998558849.jpg"
|
||||
alt="Digital workspace"
|
||||
className="w-full max-w-4xl mx-auto rounded-2xl shadow-2xl"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-slate-900/50 to-transparent rounded-2xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardOne
|
||||
title="Why Choose Our NestJS Services"
|
||||
description="Comprehensive enterprise solutions built with industry best practices"
|
||||
tag="Key Features"
|
||||
tagIcon={Code}
|
||||
textboxLayout="default"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground="noInvert"
|
||||
features={[
|
||||
{
|
||||
title: 'Scalable Architecture", description: 'Enterprise-ready applications designed to handle millions of requests with optimal performance and reliability.',
|
||||
imageSrc: '/images/big-data.88454030-1768998558656.svg',
|
||||
imageAlt: 'Scalable Architecture'
|
||||
},
|
||||
{
|
||||
title: 'Security First", description: 'Implementation of industry-standard security practices including authentication, authorization, and data protection.',
|
||||
imageSrc: '/images/protect.5939735a-1768998558659.svg',
|
||||
imageAlt: 'Security Implementation'
|
||||
},
|
||||
{
|
||||
title: 'Rapid Development", description: 'Accelerate your time-to-market with our proven development methodologies and reusable components.',
|
||||
imageSrc: '/images/puzzle.a43aa4b7-1768998558663.svg',
|
||||
imageAlt: 'Rapid Development'
|
||||
},
|
||||
{
|
||||
title: 'Expert Consultation", description: 'Get guidance from NestJS experts with deep knowledge of enterprise patterns and best practices.',
|
||||
imageSrc: '/images/conversation.2689303c-1768998558664.svg',
|
||||
imageAlt: 'Expert Consultation'
|
||||
}
|
||||
]
|
||||
/>
|
||||
</div>
|
||||
{/* Features Section */}
|
||||
<section className="py-20 px-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-white mb-4">Why Choose Webild?</h2>
|
||||
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||
We combine cutting-edge technology with exceptional design to deliver solutions that exceed expectations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<Code className="w-6 h-6 text-white" />
|
||||
</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>
|
||||
</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-green-500 to-emerald-500 rounded-lg flex items-center justify-center mb-4">
|
||||
<Zap className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white mb-2">Lightning Fast</h3>
|
||||
<p className="text-gray-300">Optimized performance and blazing-fast loading times for better user experience.</p>
|
||||
</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-orange-500 to-red-500 rounded-lg flex items-center justify-center mb-4">
|
||||
<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 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">
|
||||
<TestimonialCardTwelve
|
||||
cardTitle="Trusted by 150+ enterprise clients worldwide who rely on our NestJS expertise for mission-critical applications"
|
||||
cardTag="Client Success"
|
||||
useInvertedBackground="invertDefault"
|
||||
testimonials={[
|
||||
{ id: '1', name: 'GitLab', imageSrc: '/images/gitlab.4f9d2995-1768998558580.png', imageAlt: 'GitLab' },
|
||||
{ id: '2', name: 'Adidas', imageSrc: '/images/adidas.718f26f2-1768998558589.svg', imageAlt: 'Adidas' },
|
||||
{ id: '3', name: 'BMW', imageSrc: '/images/bmw.0ce4c05c-1768998558637.svg', imageAlt: 'BMW' },
|
||||
{ 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' },
|
||||
{ id: '6', name: 'IBM', imageSrc: '/images/ibm.b8c76e06-1768998558659.svg', imageAlt: 'IBM' }
|
||||
]
|
||||
/>
|
||||
</div>
|
||||
{/* Services Section */}
|
||||
<section id="services" 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">Our Services</h2>
|
||||
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||
From concept to launch, we provide comprehensive digital solutions tailored to your business needs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<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/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">
|
||||
<PricingCardTwo
|
||||
title="Enterprise NestJS Packages"
|
||||
description="Choose the right solution for your business needs"
|
||||
tag="Pricing"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground="noInvert"
|
||||
plans={[
|
||||
{
|
||||
id: 'consulting',
|
||||
badge: 'Most Popular',
|
||||
badgeIcon: TrendingUp,
|
||||
price: '$5,000/mo',
|
||||
subtitle: 'Perfect for growing companies',
|
||||
buttons: [
|
||||
{ text: 'Get Started', href: 'contact' },
|
||||
{ text: 'Schedule Call', href: 'contact' }
|
||||
],
|
||||
features: [
|
||||
'Expert NestJS consultation',
|
||||
'Architecture review & optimization',
|
||||
'Code quality assessment',
|
||||
'Performance optimization',
|
||||
'Security audit & recommendations',
|
||||
'24/7 priority support'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'development',
|
||||
badge: 'Enterprise',
|
||||
badgeIcon: Shield,
|
||||
price: '$15,000/mo',
|
||||
subtitle: 'For large-scale enterprise projects',
|
||||
buttons: [
|
||||
{ text: 'Contact Sales', href: 'contact' },
|
||||
{ text: 'View Details', href: 'services' }
|
||||
],
|
||||
features: [
|
||||
'Full-stack development team',
|
||||
'Custom enterprise solutions',
|
||||
'Microservices architecture',
|
||||
'Cloud deployment & DevOps',
|
||||
'Quality assurance & testing',
|
||||
'Dedicated project manager',
|
||||
'SLA guarantee'
|
||||
]
|
||||
}
|
||||
]
|
||||
/>
|
||||
</div>
|
||||
{/* Process Section */}
|
||||
<section className="py-20 px-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-white mb-4">Our Approach</h2>
|
||||
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||
We follow a proven methodology to deliver exceptional results on time and within budget.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div className="text-center">
|
||||
<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">
|
||||
<span className="text-2xl font-bold text-white">1</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white mb-4">Discovery & Planning</h3>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
We analyze your requirements, understand your goals, and create a comprehensive project roadmap.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<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">
|
||||
<span className="text-2xl font-bold text-white">2</span>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<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">
|
||||
<span className="text-2xl font-bold text-white">3</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white mb-4">Launch & Support</h3>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
We deploy your solution and provide ongoing support to ensure optimal performance and continuous improvement.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Get Started"
|
||||
tagIcon={MessageSquare}
|
||||
title="Ready to Transform Your Backend?"
|
||||
description="Join 150+ enterprise clients who trust us with their NestJS development. Let's discuss your project requirements and build something amazing together."
|
||||
useInvertedBackground="invertDefault"
|
||||
buttonText="Start Your Project"
|
||||
inputPlaceholder="Enter your business email"
|
||||
termsText="By signing up, you agree to receive updates about our NestJS enterprise services."
|
||||
/>
|
||||
</div>
|
||||
{/* Trust Section */}
|
||||
<section className="py-20 px-6 bg-black/20">
|
||||
<div className="max-w-7xl mx-auto text-center">
|
||||
<h2 className="text-4xl font-bold text-white mb-4">Trusted by Industry Leaders</h2>
|
||||
<p className="text-xl text-gray-300 mb-12 max-w-2xl mx-auto">
|
||||
We've had the privilege of working with amazing companies around the world.
|
||||
</p>
|
||||
|
||||
<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">
|
||||
{logos.slice(0, 12).map((logo, index) => (
|
||||
<div key={index} className="flex items-center justify-center p-4">
|
||||
<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">
|
||||
<FooterBaseCard
|
||||
logoText="NestJS Enterprise"
|
||||
columns={[
|
||||
{
|
||||
title: 'Services',
|
||||
items: [
|
||||
{ label: 'Consultation', href: 'services' },
|
||||
{ label: 'Development', href: 'services' },
|
||||
{ label: 'Architecture Review', href: 'services' },
|
||||
{ label: 'Security Audit', href: 'services' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
items: [
|
||||
{ label: 'About Us', href: 'about' },
|
||||
{ label: 'Case Studies', href: 'about' },
|
||||
{ label: 'Careers', href: 'about' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Resources',
|
||||
items: [
|
||||
{ label: 'Documentation', href: 'https://nestjs.com' },
|
||||
{ label: 'Best Practices', href: 'https://nestjs.com' },
|
||||
{ label: 'Support', href: 'contact' }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 NestJS Enterprise. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
{/* Testimonials Section */}
|
||||
<section className="py-20 px-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-white mb-4">What Our Clients Say</h2>
|
||||
<p className="text-xl text-gray-300">
|
||||
Don't just take our word for it - hear from our satisfied clients.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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) => (
|
||||
<Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<blockquote className="text-xl text-gray-200 mb-6 leading-relaxed">
|
||||
"{testimonials[activeTestimonial].content}"
|
||||
</blockquote>
|
||||
|
||||
<div className="flex items-center justify-center space-x-3">
|
||||
<div className="w-12 h-12 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full flex items-center justify-center">
|
||||
<span className="text-white font-semibold">
|
||||
{testimonials[activeTestimonial].name.split(' ').map(n => n[0]).join('')}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white font-semibold">{testimonials[activeTestimonial].name}</p>
|
||||
<p className="text-gray-400 text-sm">{testimonials[activeTestimonial].role}</p>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user