|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Nexus | Creative Agency</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#6366f1', |
|
|
secondary: '#8b5cf6', |
|
|
dark: '#0f172a', |
|
|
light: '#f8fafc' |
|
|
}, |
|
|
animation: { |
|
|
'float': 'float 6s ease-in-out infinite', |
|
|
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite' |
|
|
}, |
|
|
keyframes: { |
|
|
float: { |
|
|
'0%, 100%': { transform: 'translateY(0)' }, |
|
|
'50%': { transform: 'translateY(-20px)' } |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); |
|
|
color: #f8fafc; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); |
|
|
} |
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25); |
|
|
} |
|
|
|
|
|
.text-gradient { |
|
|
background: linear-gradient(to right, #8b5cf6, #6366f1); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
.blob { |
|
|
position: absolute; |
|
|
border-radius: 50%; |
|
|
filter: blur(80px); |
|
|
opacity: 0.5; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.blob-1 { |
|
|
width: 500px; |
|
|
height: 500px; |
|
|
background: #8b5cf6; |
|
|
top: -100px; |
|
|
left: -100px; |
|
|
} |
|
|
|
|
|
.blob-2 { |
|
|
width: 400px; |
|
|
height: 400px; |
|
|
background: #6366f1; |
|
|
bottom: -100px; |
|
|
right: -100px; |
|
|
} |
|
|
|
|
|
.hero-pattern { |
|
|
background-image: radial-gradient(#4f46e5 1px, transparent 1px); |
|
|
background-size: 30px 30px; |
|
|
} |
|
|
|
|
|
.service-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.service-card:hover .service-icon { |
|
|
transform: scale(1.1); |
|
|
color: #8b5cf6; |
|
|
} |
|
|
|
|
|
.portfolio-item { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
border-radius: 12px; |
|
|
} |
|
|
|
|
|
.portfolio-overlay { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(99, 102, 241, 0.85); |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
opacity: 0; |
|
|
transition: all 0.4s ease; |
|
|
padding: 20px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.portfolio-item:hover .portfolio-overlay { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.testimonial-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.testimonial-card:hover { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
.animate-on-scroll { |
|
|
opacity: 0; |
|
|
transform: translateY(30px); |
|
|
transition: opacity 0.6s ease-out, transform 0.6s ease-out; |
|
|
} |
|
|
|
|
|
.animate-on-scroll.visible { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen"> |
|
|
|
|
|
<div class="blob blob-1"></div> |
|
|
<div class="blob blob-2"></div> |
|
|
|
|
|
|
|
|
<nav class="fixed w-full z-50 py-4 px-6 backdrop-blur-md bg-dark/80"> |
|
|
<div class="max-w-7xl mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center"> |
|
|
<i class="fas fa-infinity text-white text-xl"></i> |
|
|
</div> |
|
|
<span class="text-2xl font-bold">Nexus</span> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:flex space-x-10"> |
|
|
<a href="#" class="hover:text-primary transition-colors">Home</a> |
|
|
<a href="#" class="hover:text-primary transition-colors">Services</a> |
|
|
<a href="#" class="hover:text-primary transition-colors">Portfolio</a> |
|
|
<a href="#" class="hover:text-primary transition-colors">About</a> |
|
|
<a href="#" class="hover:text-primary transition-colors">Contact</a> |
|
|
</div> |
|
|
|
|
|
<button class="hidden md:block px-6 py-2 rounded-full gradient-bg text-white font-medium hover:opacity-90 transition-opacity"> |
|
|
Get Started |
|
|
</button> |
|
|
|
|
|
<button class="md:hidden text-2xl"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="min-h-screen flex items-center pt-16 pb-20 px-6"> |
|
|
<div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div class="animate-on-scroll"> |
|
|
<h1 class="text-5xl md:text-7xl font-bold leading-tight"> |
|
|
Transform Your <span class="text-gradient">Digital</span> Presence |
|
|
</h1> |
|
|
<p class="mt-6 text-xl text-gray-300 max-w-lg"> |
|
|
We create stunning digital experiences that help your business stand out in the crowded marketplace. |
|
|
</p> |
|
|
<div class="mt-10 flex flex-wrap gap-4"> |
|
|
<button class="px-8 py-4 rounded-full gradient-bg text-white font-medium text-lg hover:opacity-90 transition-opacity shadow-lg shadow-indigo-500/30"> |
|
|
Start Your Project |
|
|
</button> |
|
|
<button class="px-8 py-4 rounded-full border-2 border-gray-700 text-white font-medium text-lg hover:border-primary transition-colors"> |
|
|
View Our Work |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative animate-on-scroll"> |
|
|
<div class="relative z-10"> |
|
|
<div class="bg-dark/30 backdrop-blur-sm border border-gray-800 rounded-2xl p-6 transform rotate-3"> |
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden"> |
|
|
<div class="p-4 bg-gray-900 flex items-center space-x-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="h-4 bg-gray-700 rounded w-3/4 mb-4"></div> |
|
|
<div class="h-4 bg-gray-700 rounded w-full mb-4"></div> |
|
|
<div class="h-4 bg-gray-700 rounded w-5/6 mb-6"></div> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center"> |
|
|
<i class="fas fa-lightbulb text-white"></i> |
|
|
</div> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center"> |
|
|
<i class="fas fa-paint-brush text-white"></i> |
|
|
</div> |
|
|
<div class="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center"> |
|
|
<i class="fas fa-code text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute -top-6 -right-6 w-32 h-32 rounded-full bg-purple-500/20 blur-2xl animate-pulse"></div> |
|
|
<div class="absolute -bottom-6 -left-6 w-40 h-40 rounded-full bg-indigo-500/20 blur-2xl animate-pulse-slow"></div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-6"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center max-w-3xl mx-auto animate-on-scroll"> |
|
|
<h2 class="text-4xl font-bold">Our <span class="text-gradient">Services</span></h2> |
|
|
<p class="mt-4 text-xl text-gray-300"> |
|
|
We offer a comprehensive suite of digital services to help your business thrive online. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16"> |
|
|
|
|
|
<div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 card-hover animate-on-scroll"> |
|
|
<div class="w-16 h-16 rounded-xl gradient-bg flex items-center justify-center service-icon"> |
|
|
<i class="fas fa-laptop-code text-2xl text-white"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mt-6">Web Development</h3> |
|
|
<p class="mt-4 text-gray-300"> |
|
|
Custom websites and web applications built with the latest technologies for optimal performance. |
|
|
</p> |
|
|
<a href="#" class="mt-6 inline-flex items-center text-primary hover:text-indigo-400 transition-colors"> |
|
|
Learn more |
|
|
<i class="fas fa-arrow-right ml-2 text-sm"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 card-hover animate-on-scroll"> |
|
|
<div class="w-16 h-16 rounded-xl gradient-bg flex items-center justify-center service-icon"> |
|
|
<i class="fas fa-paint-brush text-2xl text-white"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mt-6">UI/UX Design</h3> |
|
|
<p class="mt-4 text-gray-300"> |
|
|
Beautiful, intuitive interfaces that provide exceptional user experiences across all devices. |
|
|
</p> |
|
|
<a href="#" class="mt-6 inline-flex items-center text-primary hover:text-indigo-400 transition-colors"> |
|
|
Learn more |
|
|
<i class="fas fa-arrow-right ml-2 text-sm"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 card-hover animate-on-scroll"> |
|
|
<div class="w-16 h-16 rounded-xl gradient-bg flex items-center justify-center service-icon"> |
|
|
<i class="fas fa-mobile-alt text-2xl text-white"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mt-6">App Development</h3> |
|
|
<p class="mt-4 text-gray-300"> |
|
|
Native and cross-platform mobile applications that engage users and deliver results. |
|
|
</p> |
|
|
<a href="#" class="mt-6 inline-flex items-center text-primary hover:text-indigo-400 transition-colors"> |
|
|
Learn more |
|
|
<i class="fas fa-arrow-right ml-2 text-sm"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 card-hover animate-on-scroll"> |
|
|
<div class="w-16 h-16 rounded-xl gradient-bg flex items-center justify-center service-icon"> |
|
|
<i class="fas fa-chart-line text-2xl text-white"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mt-6">Digital Marketing</h3> |
|
|
<p class="mt-4 text-gray-300"> |
|
|
Data-driven marketing strategies to increase your online visibility and drive conversions. |
|
|
</p> |
|
|
<a href="#" class="mt-6 inline-flex items-center text-primary hover:text-indigo-400 transition-colors"> |
|
|
Learn more |
|
|
<i class="fas fa-arrow-right ml-2 text-sm"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 card-hover animate-on-scroll"> |
|
|
<div class="w-16 h-16 rounded-xl gradient-bg flex items-center justify-center service-icon"> |
|
|
<i class="fas fa-search text-2xl text-white"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mt-6">SEO Optimization</h3> |
|
|
<p class="mt-4 text-gray-300"> |
|
|
Improve your search engine rankings and attract more organic traffic to your website. |
|
|
</p> |
|
|
<a href="#" class="mt-6 inline-flex items-center text-primary hover:text-indigo-400 transition-colors"> |
|
|
Learn more |
|
|
<i class="fas fa-arrow-right ml-2 text-sm"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 card-hover animate-on-scroll"> |
|
|
<div class="w-16 h-16 rounded-xl gradient-bg flex items-center justify-center service-icon"> |
|
|
<i class="fas fa-cloud text-2xl text-white"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mt-6">Cloud Solutions</h3> |
|
|
<p class="mt-4 text-gray-300"> |
|
|
Scalable cloud infrastructure and services to power your business operations. |
|
|
</p> |
|
|
<a href="#" class="mt-6 inline-flex items-center text-primary hover:text-indigo-400 transition-colors"> |
|
|
Learn more |
|
|
<i class="fas fa-arrow-right ml-2 text-sm"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-6"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center max-w-3xl mx-auto animate-on-scroll"> |
|
|
<h2 class="text-4xl font-bold">Our <span class="text-gradient">Portfolio</span></h2> |
|
|
<p class="mt-4 text-xl text-gray-300"> |
|
|
Explore our recent projects and see how we've helped businesses achieve their goals. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16"> |
|
|
|
|
|
<div class="portfolio-item animate-on-scroll"> |
|
|
<div class="bg-gray-800 rounded-2xl overflow-hidden aspect-video"> |
|
|
<div class="w-full h-full bg-gradient-to-r from-indigo-500 to-purple-600"></div> |
|
|
</div> |
|
|
<div class="portfolio-overlay"> |
|
|
<h3 class="text-2xl font-bold text-white">E-commerce Platform</h3> |
|
|
<p class="mt-2 text-indigo-100">Web Development, UI/UX Design</p> |
|
|
<button class="mt-6 px-6 py-2 rounded-full border border-white text-white hover:bg-white hover:text-dark transition-colors"> |
|
|
View Case Study |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="portfolio-item animate-on-scroll"> |
|
|
<div class="bg-gray-800 rounded-2xl overflow-hidden aspect-video"> |
|
|
<div class="w-full h-full bg-gradient-to-r from-purple-500 to-pink-600"></div> |
|
|
</div> |
|
|
<div class="portfolio-overlay"> |
|
|
<h3 class="text-2xl font-bold text-white">Finance Dashboard</h3> |
|
|
<p class="mt-2 text-indigo-100">Web Application, Data Visualization</p> |
|
|
<button class="mt-6 px-6 py-2 rounded-full border border-white text-white hover:bg-white hover:text-dark transition-colors"> |
|
|
View Case Study |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="portfolio-item animate-on-scroll"> |
|
|
<div class="bg-gray-800 rounded-2xl overflow-hidden aspect-video"> |
|
|
<div class="w-full h-full bg-gradient-to-r from-teal-500 to-blue-600"></div> |
|
|
</div> |
|
|
<div class="portfolio-overlay"> |
|
|
<h3 class="text-2xl font-bold text-white">Travel App</h3> |
|
|
<p class="mt-2 text-indigo-100">Mobile App, UI/UX Design</p> |
|
|
<button class="mt-6 px-6 py-2 rounded-full border border-white text-white hover:bg-white hover:text-dark transition-colors"> |
|
|
View Case Study |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="portfolio-item animate-on-scroll"> |
|
|
<div class="bg-gray-800 rounded-2xl overflow-hidden aspect-video"> |
|
|
<div class="w-full h-full bg-gradient-to-r from-amber-500 to-orange-600"></div> |
|
|
</div> |
|
|
<div class="portfolio-overlay"> |
|
|
<h3 class="text-2xl font-bold text-white">Restaurant Booking</h3> |
|
|
<p class="mt-2 text-indigo-100">Web Application, E-commerce</p> |
|
|
<button class="mt-6 px-6 py-2 rounded-full border border-white text-white hover:bg-white hover:text-dark transition-colors"> |
|
|
View Case Study |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="portfolio-item animate-on-scroll"> |
|
|
<div class="bg-gray-800 rounded-2xl overflow-hidden aspect-video"> |
|
|
<div class="w-full h-full bg-gradient-to-r from-emerald-500 to-green-600"></div> |
|
|
</div> |
|
|
<div class="portfolio-overlay"> |
|
|
<h3 class="text-2xl font-bold text-white">Fitness Tracker</h3> |
|
|
<p class="mt-2 text-indigo-100">Mobile App, Wearable Integration</p> |
|
|
<button class="mt-6 px-6 py-2 rounded-full border border-white text-white hover:bg-white hover:text-dark transition-colors"> |
|
|
View Case Study |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="portfolio-item animate-on-scroll"> |
|
|
<div class="bg-gray-800 rounded-2xl overflow-hidden aspect-video"> |
|
|
<div class="w-full h-full bg-gradient-to-r from-rose-500 to-pink-600"></div> |
|
|
</div> |
|
|
<div class="portfolio-overlay"> |
|
|
<h3 class="text-2xl font-bold text-white">Social Media Platform</h3> |
|
|
<p class="mt-2 text-indigo-100">Web Development, Real-time Features</p> |
|
|
<button class="mt-6 px-6 py-2 rounded-full border border-white text-white hover:bg-white hover:text-dark transition-colors"> |
|
|
View Case Study |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12 animate-on-scroll"> |
|
|
<button class="px-8 py-4 rounded-full border-2 border-gray-700 text-white font-medium text-lg hover:border-primary transition-colors"> |
|
|
View All Projects |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-6"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center max-w-3xl mx-auto animate-on-scroll"> |
|
|
<h2 class="text-4xl font-bold">What Our <span class="text-gradient">Clients Say</span></h2> |
|
|
<p class="mt-4 text-xl text-gray-300"> |
|
|
Don't just take our word for it. Here's what our clients have to say about working with us. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 mt-16"> |
|
|
|
|
|
<div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 testimonial-card animate-on-scroll"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-16 h-16 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center"> |
|
|
<span class="text-2xl font-bold">JD</span> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-xl font-bold">John Doe</h4> |
|
|
<p class="text-gray-400">CEO, TechCorp</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-6 text-gray-300 italic"> |
|
|
"The team at Nexus transformed our online presence. Our conversion rates increased by 150% after the redesign. Their attention to detail and creative approach exceeded our expectations." |
|
|
</p> |
|
|
<div class="mt-6 flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 testimonial-card animate-on-scroll"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-16 h-16 rounded-full bg-gradient-to-r from-purple-500 to-pink-600 flex items-center justify-center"> |
|
|
<span class="text-2xl font-bold">AS</span> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-xl font-bold">Alice Smith</h4> |
|
|
<p class="text-gray-400">Marketing Director, GrowthCo</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-6 text-gray-300 italic"> |
|
|
"Working with Nexus was a game-changer for our business. They delivered our mobile app ahead of schedule and it's been a huge success with our users. Highly recommended!" |
|
|
</p> |
|
|
<div class="mt-6 flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 testimonial-card animate-on-scroll"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-16 h-16 rounded-full bg-gradient-to-r from-teal-500 to-blue-600 flex items-center justify-center"> |
|
|
<span class="text-2xl font-bold">MR</span> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-xl font-bold">Michael Roberts</h4> |
|
|
<p class="text-gray-400">Founder, StartupX</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-6 text-gray-300 italic"> |
|
|
"The Nexus team brought our vision to life with an incredible website that perfectly captures our brand. Their technical expertise and creative solutions helped us stand out in our industry." |
|
|
</p> |
|
|
<div class="mt-6 flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-6"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-3xl overflow-hidden"> |
|
|
<div class="grid lg:grid-cols-2"> |
|
|
<div class="p-12"> |
|
|
<h2 class="text-4xl font-bold">Let's <span class="text-gradient">Work Together</span></h2> |
|
|
<p class="mt-4 text-xl text-gray-300"> |
|
|
Have a project in mind? Get in touch with us and let's create something amazing together. |
|
|
</p> |
|
|
|
|
|
<div class="mt-10 space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-12 h-12 rounded-xl gradient-bg flex items-center justify-center flex-shrink-0"> |
|
|
<i class="fas fa-envelope text-white"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-xl font-bold">Email Us</h3> |
|
|
<p class="mt-1 text-gray-300">[email protected]</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-12 h-12 rounded-xl gradient-bg flex items-center justify-center flex-shrink-0"> |
|
|
<i class="fas fa-phone-alt text-white"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-xl font-bold">Call Us</h3> |
|
|
<p class="mt-1 text-gray-300">+1 (555) 123-4567</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-12 h-12 rounded-xl gradient-bg flex items-center justify-center flex-shrink-0"> |
|
|
<i class="fas fa-map-marker-alt text-white"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-xl font-bold">Visit Us</h3> |
|
|
<p class="mt-1 text-gray-300">123 Innovation Street, Tech City</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-br from-indigo-900/50 to-purple-900/50 p-12"> |
|
|
<form class="space-y-6"> |
|
|
<div> |
|
|
<label class="block text-gray-300 mb-2">Your Name</label> |
|
|
<input type="text" class="w-full bg-dark/50 border border-gray-700 rounded-xl px-4 py-3 focus:outline-none focus:border-primary transition-colors" placeholder="John Doe"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-300 mb-2">Email Address</label> |
|
|
<input type="email" class="w-full bg-dark/50 border border-gray-700 rounded-xl px-4 py-3 focus:outline-none focus:border-primary transition-colors" placeholder="[email protected]"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-300 mb-2">Project Details</label> |
|
|
<textarea rows="4" class="w-full bg-dark/50 border border-gray-700 rounded-xl px-4 py-3 focus:outline-none focus:border-primary transition-colors" placeholder="Tell us about your project..."></textarea> |
|
|
</div> |
|
|
|
|
|
<button class="w-full px-6 py-4 rounded-xl gradient-bg text-white font-medium text-lg hover:opacity-90 transition-opacity"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-12 px-6 border-t border-gray-800"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center"> |
|
|
<i class="fas fa-infinity text-white text-xl"></i> |
|
|
</div> |
|
|
<span class="text-2xl font-bold">Nexus</span> |
|
|
</div> |
|
|
<p class="mt-4 text-gray-400"> |
|
|
Creating digital experiences that inspire and engage audiences worldwide. |
|
|
</p> |
|
|
<div class="flex space-x-4 mt-6"> |
|
|
<a href="#" class="w-10 h-10 rounded-full border border-gray-700 flex items-center justify-center hover:border-primary transition-colors"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full border border-gray-700 flex items-center justify-center hover:border-primary transition-colors"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full border border-gray-700 flex items-center justify-center hover:border-primary transition-colors"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full border border-gray-700 flex items-center justify-center hover:border-primary transition-colors"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold">Services</h3> |
|
|
<ul class="mt-6 space-y-3"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Web Development</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">UI/UX Design</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">App Development</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Digital Marketing</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">SEO Optimization</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold">Company</h3> |
|
|
<ul class="mt-6 space-y-3"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">About Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Our Team</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-xl font-bold">Newsletter</h3> |
|
|
<p class="mt-6 text-gray-400"> |
|
|
Subscribe to our newsletter for the latest updates and offers. |
|
|
</p> |
|
|
<div class="mt-4 flex"> |
|
|
<input type="email" class="bg-dark/50 border border-gray-700 rounded-l-xl px-4 py-3 w-full focus:outline-none" placeholder="Your email"> |
|
|
<button class="px-4 rounded-r-xl gradient-bg"> |
|
|
<i class="fas fa-paper-plane text-white"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500"> |
|
|
<p>© 2023 Nexus. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('visible'); |
|
|
} |
|
|
}); |
|
|
}, { |
|
|
threshold: 0.1 |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.animate-on-scroll').forEach(el => { |
|
|
observer.observe(el); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=gokul9/deepseek-v3-react-19-dont-works" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
