|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>GoSoftware - Software Solutions for Businesses</title> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#3db4ae', |
|
|
secondary: '#2d8a85', |
|
|
dark: '#0a0a0a', |
|
|
'dark-light': '#1a1a1a' |
|
|
}, |
|
|
fontFamily: { |
|
|
'inter': ['Inter', 'sans-serif'] |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
html { |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #3db4ae 0%, #2d8a85 50%, #1d605c 100%); |
|
|
} |
|
|
.section-pattern { |
|
|
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%233db4ae' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E"); |
|
|
} |
|
|
.fade-in { |
|
|
opacity: 0; |
|
|
transform: translateY(30px); |
|
|
transition: all 0.6s ease-out; |
|
|
} |
|
|
.fade-in.visible { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-dark text-white font-inter"> |
|
|
|
|
|
<nav class="fixed w-full z-50 bg-dark/90 backdrop-blur-sm border-b border-gray-800"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-8 h-8 rounded-full gradient-bg"></div> |
|
|
<span class="text-xl font-bold">GoSoftware</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="text-gray-300 hover:text-primary transition-colors">Home</a> |
|
|
<a href="#about" class="text-gray-300 hover:text-primary transition-colors">About</a> |
|
|
<a href="#services" class="text-gray-300 hover:text-primary transition-colors">Services</a> |
|
|
<a href="#portfolio" class="text-gray-300 hover:text-primary transition-colors">Portfolio</a> |
|
|
<a href="#contact" class="text-gray-300 hover:text-primary transition-colors">Contact</a> |
|
|
</div> |
|
|
<button class="bg-primary hover:bg-secondary text-white px-6 py-2 rounded-lg font-medium transition-colors"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20"> |
|
|
<div class="absolute inset-0 section-pattern opacity-20"></div> |
|
|
<div class="container mx-auto px-6 text-center z-10"> |
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-6 fade-in"> |
|
|
We Build Software <br> |
|
|
<span class="gradient-text bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"> |
|
|
that Builds Businesses |
|
|
</span> |
|
|
</h1> |
|
|
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto fade-in" style="animation-delay: 0.2s"> |
|
|
Helping startups and businesses grow through innovative technology solutions |
|
|
</p> |
|
|
<div class="fade-in" style="animation-delay: 0.4s"> |
|
|
<button class="bg-primary hover:bg-secondary text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all transform hover:scale-105"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> |
|
|
<i data-feather="chevron-down" class="text-gray-400"></i> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-dark-light"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16 fade-in"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6">Driving Innovation Forward</h2> |
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
|
We believe in creating software solutions that not only meet today's needs but also scale for tomorrow's challenges. |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 gap-12 items-center fade-in"> |
|
|
<div> |
|
|
<h3 class="text-3xl font-bold mb-6">Our Mission</h3> |
|
|
<p class="text-gray-300 mb-8 text-lg"> |
|
|
At GoSoftware, we're committed to delivering innovative, reliable solutions that form lasting partnerships with our clients. We build technology that helps businesses grow faster and smarter. |
|
|
</p> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center"> |
|
|
<i data-feather="check" class="text-primary w-4 h-4"></i> |
|
|
</div> |
|
|
<span class="text-gray-300">Affordable</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center"> |
|
|
<i data-feather="check" class="text-primary w-4 h-4"></i> |
|
|
</div> |
|
|
<span class="text-gray-300">Fast Delivery</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center"> |
|
|
<i data-feather="check" class="text-primary w-4 h-4"></i> |
|
|
</div> |
|
|
<span class="text-gray-300">Scalable</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center"> |
|
|
<i data-feather="check" class="text-primary w-4 h-4"></i> |
|
|
</div> |
|
|
<span class="text-gray-300">Dedicated Support</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="bg-gradient-to-br from-primary/20 to-secondary/20 rounded-2xl p-8 h-80 flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<i data-feather="target" class="w-16 h-16 text-primary mx-auto mb-4"></i> |
|
|
<h4 class="text-2xl font-bold mb-2">Growth-Focused</h4> |
|
|
<p class="text-gray-300">Building solutions that drive real business growth</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-20 bg-dark"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16 fade-in"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6">Our Services</h2> |
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
|
Comprehensive software solutions designed to meet your business needs |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="bg-dark-light rounded-2xl p-8 card-hover fade-in"> |
|
|
<div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center mb-6"> |
|
|
<i data-feather="globe" class="text-white w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">Web Development</h3> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Custom websites that perfectly reflect your brand identity and business goals |
|
|
</p> |
|
|
<button class="text-primary hover:text-secondary font-medium flex items-center space-x-2"> |
|
|
<span>Learn More</span> |
|
|
<i data-feather="arrow-right" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-dark-light rounded-2xl p-8 card-hover fade-in" style="animation-delay: 0.1s"> |
|
|
<div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center mb-6"> |
|
|
<i data-feather="code" class="text-white w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">Software Systems</h3> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Tailored business tools and applications designed for your specific workflow |
|
|
</p> |
|
|
<button class="text-primary hover:text-secondary font-medium flex items-center space-x-2"> |
|
|
<span>Learn More</span> |
|
|
<i data-feather="arrow-right" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-dark-light rounded-2xl p-8 card-hover fade-in" style="animation-delay: 0.2s"> |
|
|
<div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center mb-6"> |
|
|
<i data-feather="shopping-cart" class="text-white w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">POS & Accounting</h3> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Simplified management systems for retail, inventory, and financial operations |
|
|
</p> |
|
|
<button class="text-primary hover:text-secondary font-medium flex items-center space-x-2"> |
|
|
<span>Learn More</span> |
|
|
<i data-feather="arrow-right" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-dark-light rounded-2xl p-8 card-hover fade-in" style="animation-delay: 0.3s"> |
|
|
<div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center mb-6"> |
|
|
<i data-feather="server" class="text-white w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-4">Hosting & Maintenance</h3> |
|
|
<p class="text-gray-300 mb-6"> |
|
|
Fast, secure, and reliable hosting solutions with ongoing maintenance support |
|
|
</p> |
|
|
<button class="text-primary hover:text-secondary font-medium flex items-center space-x-2"> |
|
|
<span>Learn More</span> |
|
|
<i data-feather="arrow-right" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="portfolio" class="py-20 bg-dark-light"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16 fade-in"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6">Our Work</h2> |
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
|
See how we've helped businesses transform with our software solutions |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-dark rounded-2xl overflow-hidden card-hover fade-in"> |
|
|
<div class="h-48 bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center"> |
|
|
<i data-feather="briefcase" class="w-12 h-12 text-white"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">Didam Software</h3> |
|
|
<p class="text-gray-300 mb-4">Custom business management platform</p> |
|
|
<button class="text-primary hover:text-secondary font-medium">View Project →</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-dark rounded-2xl overflow-hidden card-hover fade-in" style="animation-delay: 0.1s"> |
|
|
<div class="h-48 bg-gradient-to-br from-secondary/30 to-primary/30 flex items-center justify-center"> |
|
|
<i data-feather="globe" class="w-12 h-12 text-white"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">Climax Company Website</h3> |
|
|
<p class="text-gray-300 mb-4">Modern corporate website with e-commerce</p> |
|
|
<button class="text-primary hover:text-secondary font-medium">View Project →</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-dark rounded-2xl overflow-hidden card-hover fade-in" style="animation-delay: 0.2s"> |
|
|
<div class="h-48 bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center"> |
|
|
<i data-feather="book-open" class="w-12 h-12 text-white"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">Folivya Academy</h3> |
|
|
<p class="text-gray-300 mb-4">Learning management system for education</p> |
|
|
<button class="text-primary hover:text-secondary font-medium">View Project →</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-dark"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="text-center mb-16 fade-in"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6">Let's Talk About Your Project</h2> |
|
|
<p class="text-xl text-gray-300 max-w-2xl mx-auto"> |
|
|
Ready to bring your ideas to life? We'd love to hear about your project and discuss how we can help you achieve your goals. |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-dark-light rounded-2xl p-8 md:p-12 fade-in"> |
|
|
<form class="space-y-6"> |
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-300 mb-2">Name</label> |
|
|
<input type="text" id="name" class="w-full bg-dark border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary transition-colors" placeholder="Your name"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-300 mb-2">Email</label> |
|
|
<input type="email" id="email" class="w-full bg-dark border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary transition-colors" placeholder="your.email@example.com"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-300 mb-2">Message</label> |
|
|
<textarea id="message" rows="6" class="w-full bg-dark border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary transition-colors" placeholder="Tell us about your project..."></textarea> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-primary hover:bg-secondary text-white py-4 rounded-lg font-semibold text-lg transition-colors"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
<div class="mt-8 text-center"> |
|
|
<p class="text-gray-400">Or email us directly at</p> |
|
|
<a href="mailto:hello@gosoftware.co" class="text-primary hover:text-secondary font-medium">hello@gosoftware.co</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-dark-light py-12 border-t border-gray-800"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center space-x-2 mb-4 md:mb-0"> |
|
|
<div class="w-8 h-8 rounded-full gradient-bg"></div> |
|
|
<span class="text-xl font-bold">GoSoftware</span> |
|
|
</div> |
|
|
<div class="flex space-x-6 mb-4 md:mb-0"> |
|
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors"> |
|
|
<i data-feather="linkedin"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors"> |
|
|
<i data-feather="github"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="text-gray-400"> |
|
|
© 2024 GoSoftware. All rights reserved. |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
feather.replace(); |
|
|
|
|
|
const observerOptions = { |
|
|
threshold: 0.1, |
|
|
rootMargin: '0px 0px -50px 0px' |
|
|
}; |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('visible'); |
|
|
} |
|
|
}); |
|
|
}, observerOptions); |
|
|
|
|
|
document.querySelectorAll('.fade-in').forEach((el) => { |
|
|
observer.observe(el); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
const target = document.querySelector(this.getAttribute('href')); |
|
|
if (target) { |
|
|
target.scrollIntoView({ |
|
|
behavior: 'smooth', |
|
|
block: 'start' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
