541 lines
28 KiB
TypeScript
541 lines
28 KiB
TypeScript
"use client";
|
|
|
|
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' }
|
|
];
|
|
|
|
return (
|
|
<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>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
);
|
|
} |