|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>NexusWeb | Digital Innovation</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"> |
|
|
<style> |
|
|
|
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-20px); } |
|
|
} |
|
|
.floating { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 4px; |
|
|
} |
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #555; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans bg-gray-50 text-gray-800"> |
|
|
|
|
|
<nav class="fixed w-full bg-white shadow-md z-50 transition-all duration-300"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-bolt text-blue-500 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold gradient-text">NexusWeb</span> |
|
|
</div> |
|
|
<div class="hidden md:block ml-10"> |
|
|
<div class="flex space-x-8"> |
|
|
<a href="#home" class="text-blue-600 hover:text-blue-800 px-3 py-2 font-medium">Home</a> |
|
|
<a href="#services" class="text-gray-600 hover:text-blue-600 px-3 py-2 font-medium">Services</a> |
|
|
<a href="#about" class="text-gray-600 hover:text-blue-600 px-3 py-2 font-medium">About</a> |
|
|
<a href="#portfolio" class="text-gray-600 hover:text-blue-600 px-3 py-2 font-medium">Portfolio</a> |
|
|
<a href="#contact" class="text-gray-600 hover:text-blue-600 px-3 py-2 font-medium">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center"> |
|
|
<button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-2 rounded-full font-medium hover:shadow-lg transition-all duration-300 transform hover:scale-105"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
<div class="md:hidden flex items-center"> |
|
|
<button id="mobile-menu-button" class="text-gray-600 hover:text-blue-600 focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#home" class="block px-3 py-2 text-blue-600 font-medium">Home</a> |
|
|
<a href="#services" class="block px-3 py-2 text-gray-600 hover:text-blue-600">Services</a> |
|
|
<a href="#about" class="block px-3 py-2 text-gray-600 hover:text-blue-600">About</a> |
|
|
<a href="#portfolio" class="block px-3 py-2 text-gray-600 hover:text-blue-600">Portfolio</a> |
|
|
<a href="#contact" class="block px-3 py-2 text-gray-600 hover:text-blue-600">Contact</a> |
|
|
<button class="w-full mt-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-2 rounded-full font-medium"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-blue-50 to-purple-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6"> |
|
|
Building <span class="gradient-text">Digital</span> Experiences That Matter |
|
|
</h1> |
|
|
<p class="text-lg text-gray-600 mb-8"> |
|
|
We help businesses transform their digital presence with cutting-edge web solutions, mobile apps, and cloud technologies. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-3 rounded-full font-medium hover:shadow-lg transition-all duration-300 transform hover:scale-105"> |
|
|
Explore Services |
|
|
</button> |
|
|
<button class="border-2 border-blue-500 text-blue-600 px-8 py-3 rounded-full font-medium hover:bg-blue-50 transition-all duration-300"> |
|
|
<i class="fas fa-play-circle mr-2"></i> Watch Demo |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-8 flex items-center"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Client"> |
|
|
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client"> |
|
|
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Client"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<p class="text-sm font-medium text-gray-600">Trusted by 500+ clients worldwide</p> |
|
|
<div class="flex"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<span class="ml-2 text-sm font-medium">5.0 (120 reviews)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 relative"> |
|
|
<div class="relative floating"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Digital Solutions" |
|
|
class="rounded-xl shadow-2xl w-full max-w-lg mx-auto"> |
|
|
<div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-lg w-48"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-green-100 p-2 rounded-full mr-2"> |
|
|
<i class="fas fa-check text-green-500"></i> |
|
|
</div> |
|
|
<p class="font-medium">Project Completed</p> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold gradient-text">250+</h3> |
|
|
</div> |
|
|
<div class="absolute -top-6 -right-6 bg-white p-4 rounded-xl shadow-lg w-48"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-2"> |
|
|
<i class="fas fa-users text-blue-500"></i> |
|
|
</div> |
|
|
<p class="font-medium">Happy Clients</p> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold gradient-text">98%</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<p class="text-center text-gray-500 mb-8">TRUSTED BY INNOVATIVE COMPANIES</p> |
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center"> |
|
|
<img src="https://via.placeholder.com/150x60?text=TechCorp" alt="TechCorp" class="h-12 opacity-70 hover:opacity-100 transition-opacity"> |
|
|
<img src="https://via.placeholder.com/150x60?text=Digital+" alt="Digital+" class="h-12 opacity-70 hover:opacity-100 transition-opacity"> |
|
|
<img src="https://via.placeholder.com/150x60?text=WebSolutions" alt="WebSolutions" class="h-12 opacity-70 hover:opacity-100 transition-opacity"> |
|
|
<img src="https://via.placeholder.com/150x60?text=CloudNine" alt="CloudNine" class="h-12 opacity-70 hover:opacity-100 transition-opacity"> |
|
|
<img src="https://via.placeholder.com/150x60?text=AppWorks" alt="AppWorks" class="h-12 opacity-70 hover:opacity-100 transition-opacity"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="inline-block px-3 py-1 text-sm font-medium bg-blue-100 text-blue-600 rounded-full mb-4">OUR SERVICES</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Solutions We Provide</h2> |
|
|
<p class="max-w-2xl mx-auto text-gray-600">We offer comprehensive digital solutions to help your business grow and thrive in the online world.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300"> |
|
|
<div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-globe text-blue-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Web Development</h3> |
|
|
<p class="text-gray-600 mb-4">Custom websites built with modern technologies to ensure performance, security, and scalability.</p> |
|
|
<a href="#" class="text-blue-500 font-medium flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300"> |
|
|
<div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-mobile-alt text-purple-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Mobile Apps</h3> |
|
|
<p class="text-gray-600 mb-4">Native and cross-platform mobile applications for iOS and Android with beautiful UI/UX.</p> |
|
|
<a href="#" class="text-blue-500 font-medium flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300"> |
|
|
<div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-cloud text-green-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Cloud Solutions</h3> |
|
|
<p class="text-gray-600 mb-4">Secure and reliable cloud infrastructure and services to power your digital transformation.</p> |
|
|
<a href="#" class="text-blue-500 font-medium flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300"> |
|
|
<div class="w-16 h-16 bg-yellow-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-search-dollar text-yellow-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">SEO & Marketing</h3> |
|
|
<p class="text-gray-600 mb-4">Comprehensive digital marketing strategies to increase your online visibility and conversions.</p> |
|
|
<a href="#" class="text-blue-500 font-medium flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300"> |
|
|
<div class="w-16 h-16 bg-red-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-paint-brush text-red-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">UI/UX Design</h3> |
|
|
<p class="text-gray-600 mb-4">Beautiful and intuitive user interfaces designed to enhance user experience and engagement.</p> |
|
|
<a href="#" class="text-blue-500 font-medium flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300"> |
|
|
<div class="w-16 h-16 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-chart-line text-indigo-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Data Analytics</h3> |
|
|
<p class="text-gray-600 mb-4">Powerful data analysis and visualization to drive informed business decisions and strategies.</p> |
|
|
<a href="#" class="text-blue-500 font-medium flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> |
|
|
<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Our Team" |
|
|
class="rounded-xl shadow-lg w-full"> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<span class="inline-block px-3 py-1 text-sm font-medium bg-blue-100 text-blue-600 rounded-full mb-4">ABOUT US</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Innovative Digital Agency</h2> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Founded in 2015, NexusWeb has grown from a small startup to a leading digital solutions provider with a team of 50+ experts. We combine creativity, technology, and business acumen to deliver exceptional results for our clients. |
|
|
</p> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-6 mb-8"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 p-2 rounded-full mr-4"> |
|
|
<i class="fas fa-lightbulb text-blue-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-1">Creative Solutions</h4> |
|
|
<p class="text-gray-600 text-sm">Unique approaches to complex problems</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-100 p-2 rounded-full mr-4"> |
|
|
<i class="fas fa-headset text-purple-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-1">24/7 Support</h4> |
|
|
<p class="text-gray-600 text-sm">Always available for our clients</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-100 p-2 rounded-full mr-4"> |
|
|
<i class="fas fa-rocket text-green-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-1">Fast Delivery</h4> |
|
|
<p class="text-gray-600 text-sm">Projects completed on time</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-yellow-100 p-2 rounded-full mr-4"> |
|
|
<i class="fas fa-medal text-yellow-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-1">Award Winning</h4> |
|
|
<p class="text-gray-600 text-sm">Recognized industry excellence</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-3 rounded-full font-medium hover:shadow-lg transition-all duration-300"> |
|
|
Learn More About Us |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-4xl md:text-5xl font-bold mb-2">250+</h3> |
|
|
<p class="text-blue-100">Projects Completed</p> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-4xl md:text-5xl font-bold mb-2">120+</h3> |
|
|
<p class="text-blue-100">Happy Clients</p> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-4xl md:text-5xl font-bold mb-2">50+</h3> |
|
|
<p class="text-blue-100">Expert Team</p> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-4xl md:text-5xl font-bold mb-2">15+</h3> |
|
|
<p class="text-blue-100">Awards Won</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="portfolio" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="inline-block px-3 py-1 text-sm font-medium bg-blue-100 text-blue-600 rounded-full mb-4">OUR WORK</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Featured Projects</h2> |
|
|
<p class="max-w-2xl mx-auto text-gray-600">Explore some of our recent work that showcases our expertise and creativity.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"> |
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300"> |
|
|
<div class="relative overflow-hidden h-60"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="E-commerce Platform" |
|
|
class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6"> |
|
|
<div> |
|
|
<span class="inline-block px-2 py-1 text-xs font-medium bg-blue-500 text-white rounded mb-2">Web Development</span> |
|
|
<h3 class="text-xl font-bold text-white">E-commerce Platform</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<p class="text-gray-600 mb-4">A fully customized e-commerce solution with advanced features and seamless user experience.</p> |
|
|
<a href="#" class="text-blue-500 font-medium flex items-center"> |
|
|
View Case Study <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300"> |
|
|
<div class="relative overflow-hidden h-60"> |
|
|
<img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Mobile Banking App" |
|
|
class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6"> |
|
|
<div> |
|
|
<span class="inline-block px-2 py-1 text-xs font-medium bg-purple-500 text-white rounded mb-2">Mobile App</span> |
|
|
<h3 class="text-xl font-bold text-white">Mobile Banking App</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<p class="text-gray-600 mb-4">A secure and user-friendly banking application with biometric authentication and budgeting tools.</p> |
|
|
<a href="#" class="text-blue-500 font-medium flex items-center"> |
|
|
View Case Study <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300"> |
|
|
<div class="relative overflow-hidden h-60"> |
|
|
<img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" |
|
|
alt="Corporate Website" |
|
|
class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6"> |
|
|
<div> |
|
|
<span class="inline-block px-2 py-1 text-xs font-medium bg-green-500 text-white rounded mb-2">Web Design</span> |
|
|
<h3 class="text-xl font-bold text-white">Corporate Website</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<p class="text-gray-600 mb-4">A modern and responsive corporate website with CMS integration and multilingual support.</p> |
|
|
<a href="#" class="text-blue-500 font-medium flex items-center"> |
|
|
View Case Study <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<button class="border-2 border-blue-500 text-blue-600 px-8 py-3 rounded-full font-medium hover:bg-blue-50 transition-all duration-300"> |
|
|
View All Projects |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="inline-block px-3 py-1 text-sm font-medium bg-blue-100 text-blue-600 rounded-full mb-4">TESTIMONIALS</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Clients Say</h2> |
|
|
<p class="max-w-2xl mx-auto text-gray-600">Hear from businesses that have transformed their digital presence with our solutions.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Sarah Johnson</h4> |
|
|
<p class="text-gray-600 text-sm">CEO, TechStart Inc.</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
"NexusWeb transformed our outdated website into a modern, high-performing platform that has significantly increased our lead generation and customer engagement." |
|
|
</p> |
|
|
<div class="flex"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img src="https://randomuser.me/api/portraits/men/54.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Michael Chen</h4> |
|
|
<p class="text-gray-600 text-sm">Marketing Director, GlobalRetail</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
"The mobile app developed by NexusWeb has been a game-changer for our business. User engagement has doubled, and the feedback from our customers has been overwhelmingly positive." |
|
|
</p> |
|
|
<div class="flex"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily Rodriguez" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Emily Rodriguez</h4> |
|
|
<p class="text-gray-600 text-sm">Founder, GreenLife</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
"Working with NexusWeb was a seamless experience. Their team understood our vision and delivered a website that perfectly represents our brand while exceeding our performance expectations." |
|
|
</p> |
|
|
<div class="flex"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Digital Presence?</h2> |
|
|
<p class="max-w-2xl mx-auto text-blue-100 mb-8">Let's discuss how we can help your business achieve its digital goals. Get in touch with our team today.</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-white text-blue-600 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition-all duration-300"> |
|
|
Get a Free Consultation |
|
|
</button> |
|
|
<button class="border-2 border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white/10 transition-all duration-300"> |
|
|
<i class="fas fa-phone-alt mr-2"></i> Call Us Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex flex-col md:flex-row"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> |
|
|
<span class="inline-block px-3 py-1 text-sm font-medium bg-blue-100 text-blue-600 rounded-full mb-4">CONTACT US</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Get In Touch</h2> |
|
|
<p class="text-gray-600 mb-8"> |
|
|
Have a project in mind or want to learn more about our services? Fill out the form or contact us directly. Our team will get back to you within 24 hours. |
|
|
</p> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-map-marker-alt text-blue-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-1">Our Office</h4> |
|
|
<p class="text-gray-600">123 Tech Street, Silicon Valley, CA 94025</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-envelope text-purple-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-1">Email Us</h4> |
|
|
<p class="text-gray-600">info@nexusweb.com<br>support@nexusweb.com</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-phone-alt text-green-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-1">Call Us |
|
|
</html> |
