|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Siolabs Inc. | Technology Solutions & 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"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
DEFAULT: '#2563EB', |
|
|
light: '#3B82F6', |
|
|
dark: '#1D4ED8', |
|
|
subtle: '#EBF2FE' |
|
|
}, |
|
|
secondary: { |
|
|
DEFAULT: '#10B981', |
|
|
dark: '#059669' |
|
|
} |
|
|
}, |
|
|
fontFamily: { |
|
|
sans: ['Inter', 'system-ui', 'sans-serif'], |
|
|
display: ['"Source Sans Pro"', 'sans-serif'] |
|
|
}, |
|
|
animation: { |
|
|
'pulse-slow': 'pulse 6s infinite', |
|
|
'float': 'float 3s ease-in-out infinite' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Source+Sans+Pro:wght@600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
|
|
color: #1a1a1a; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #2563EB 0%, #10B981 100%); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 1s ease-in; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.shadow-soft { |
|
|
box-shadow: 0 10px 40px -10px rgba(59, 130, 246, 0.15); |
|
|
} |
|
|
|
|
|
.hover-scale { |
|
|
transition: transform 0.2s ease; |
|
|
} |
|
|
|
|
|
.hover-scale:hover { |
|
|
transform: scale(1.03); |
|
|
} |
|
|
|
|
|
.service-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.ai-card { |
|
|
background: linear-gradient(135deg, rgba(37, 99, 235, 0.03) 0%, rgba(37, 99, 235, 0.08) 100%); |
|
|
} |
|
|
|
|
|
.training-card { |
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, rgba(16, 185, 129, 0.08) 100%); |
|
|
} |
|
|
|
|
|
.app-screen { |
|
|
border-radius: 20px; |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="antialiased"> |
|
|
|
|
|
<nav class="max-w-7xl mx-auto px-6 py-6 flex justify-between items-center sticky top-0 bg-white z-50"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-primary rounded-lg mr-3 flex items-center justify-center"> |
|
|
<i class="fas fa-code text-white text-lg"></i> |
|
|
</div> |
|
|
<div class="text-xl font-display font-bold text-gray-800">Sio<span class="text-primary">labs</span></div> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:flex space-x-8 items-center"> |
|
|
<a href="#services" class="text-sm font-medium text-gray-600 hover:text-primary transition">Services</a> |
|
|
<a href="#products" class="text-sm font-medium text-gray-600 hover:text-primary transition">Products</a> |
|
|
<a href="#about" class="text-sm font-medium text-gray-600 hover:text-primary transition">About Us</a> |
|
|
<a href="#contact" class="text-sm font-medium text-gray-600 hover:text-primary transition">Contact</a> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<a href="#contact" class="text-sm font-medium bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-md transition shadow-sm"> |
|
|
Get Started |
|
|
</a> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="py-20 px-6 bg-gradient-to-b from-white to-blue-50"> |
|
|
<div class="max-w-4xl mx-auto text-center fade-in"> |
|
|
<div class="inline-flex items-center bg-primary/10 px-3 py-1 rounded-full text-xs font-medium text-primary mb-6"> |
|
|
<i class="fas fa-lightbulb mr-2"></i> Innovating Technology Solutions |
|
|
</div> |
|
|
|
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-display font-bold mb-6 leading-tight"> |
|
|
Transforming Ideas Into <span class="gradient-text">Digital Reality</span> |
|
|
</h1> |
|
|
|
|
|
<p class="text-xl text-gray-600 mb-10 max-w-2xl mx-auto"> |
|
|
Siolabs Inc. delivers cutting-edge technology solutions, from custom software development to specialized corporate training. |
|
|
</p> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center"> |
|
|
<a href="#services" class="bg-primary hover:bg-primary-dark text-white px-8 py-4 rounded-md text-lg font-medium transition flex items-center justify-center shadow-md hover-scale"> |
|
|
<i class="fas fa-laptop-code mr-3"></i> Explore Services |
|
|
</a> |
|
|
<a href="#contact" class="border-2 border-primary text-primary px-8 py-4 rounded-md text-lg font-medium hover:bg-blue-50 transition flex items-center justify-center hover-scale"> |
|
|
<i class="fas fa-envelope mr-3"></i> Contact Us |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-20 px-6 bg-white"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-display font-bold mb-4">Our Technology Services</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto text-lg"> |
|
|
Comprehensive solutions tailored to your business needs |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-8 rounded-xl service-card shadow-sm border border-gray-100"> |
|
|
<div class="w-16 h-16 bg-primary/10 text-primary rounded-full flex items-center justify-center mx-auto mb-6"> |
|
|
<i class="fas fa-cogs text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="font-display font-semibold text-xl mb-3">Custom Product Development</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Bespoke software solutions designed to solve your unique business challenges with AI-powered capabilities. |
|
|
</p> |
|
|
<ul class="text-sm text-gray-600 space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-primary mr-2 mt-1"></i> |
|
|
<span>End-to-end development lifecycle</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-primary mr-2 mt-1"></i> |
|
|
<span>AI/ML integration</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-primary mr-2 mt-1"></i> |
|
|
<span>Scalable architecture</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl service-card shadow-sm border border-gray-100"> |
|
|
<div class="w-16 h-16 bg-secondary/10 text-secondary rounded-full flex items-center justify-center mx-auto mb-6"> |
|
|
<i class="fas fa-chalkboard-teacher text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="font-display font-semibold text-xl mb-3">Corporate AI Training</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Specialized training programs to upskill your workforce in artificial intelligence and modern technologies. |
|
|
</p> |
|
|
<ul class="text-sm text-gray-600 space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-secondary mr-2 mt-1"></i> |
|
|
<span>Customized curriculum</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-secondary mr-2 mt-1"></i> |
|
|
<span>Hands-on workshops</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-secondary mr-2 mt-1"></i> |
|
|
<span>Executive education</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl service-card shadow-sm border border-gray-100"> |
|
|
<div class="w-16 h-16 bg-primary/10 text-primary rounded-full flex items-center justify-center mx-auto mb-6"> |
|
|
<i class="fas fa-headset text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="font-display font-semibold text-xl mb-3">Technology Consulting</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Strategic guidance to help you navigate digital transformation and technology adoption. |
|
|
</p> |
|
|
<ul class="text-sm text-gray-600 space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-primary mr-2 mt-1"></i> |
|
|
<span>Digital strategy</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-primary mr-2 mt-1"></i> |
|
|
<span>Technology roadmap</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-primary mr-2 mt-1"></i> |
|
|
<span>Implementation support</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-6 bg-gray-50"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<h2 class="text-3xl md:text-4xl font-display font-bold mb-6"> |
|
|
Our <span class="text-primary">Development</span> Approach |
|
|
</h2> |
|
|
<p class="text-gray-600 mb-8"> |
|
|
We follow a structured yet flexible process to deliver high-quality software solutions that drive business value. |
|
|
</p> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-primary/10 p-3 rounded-lg"> |
|
|
<div class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center"> |
|
|
<span class="font-bold">1</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-semibold">Discovery & Planning</h4> |
|
|
<p class="text-gray-600 text-sm"> |
|
|
We start by understanding your business objectives and defining project requirements. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-primary/10 p-3 rounded-lg"> |
|
|
<div class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center"> |
|
|
<span class="font-bold">2</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-semibold">Design & Architecture</h4> |
|
|
<p class="text-gray-600 text-sm"> |
|
|
Our team creates technical specifications and user experience designs. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-primary/10 p-3 rounded-lg"> |
|
|
<div class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center"> |
|
|
<span class="font-bold">3</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-semibold">Development & Testing</h4> |
|
|
<p class="text-gray-600 text-sm"> |
|
|
We build your solution with agile methodologies and rigorous quality assurance. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-primary/10 p-3 rounded-lg"> |
|
|
<div class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center"> |
|
|
<span class="font-bold">4</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-semibold">Deployment & Support</h4> |
|
|
<p class="text-gray-600 text-sm"> |
|
|
We ensure smooth launch and provide ongoing maintenance and enhancements. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="ai-card p-8 rounded-xl"> |
|
|
<div class="bg-white rounded-xl shadow-md p-8 relative"> |
|
|
<div class="absolute -top-4 -left-4 bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-display font-bold mb-4 text-primary">AI Integration Expertise</h3> |
|
|
<p class="text-gray-700 mb-4"> |
|
|
We specialize in integrating artificial intelligence capabilities into custom solutions: |
|
|
</p> |
|
|
<ul class="text-sm text-gray-600 space-y-2 mb-6"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-primary mr-2 mt-1"></i> |
|
|
<span>Machine learning models</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-primary mr-2 mt-1"></i> |
|
|
<span>Natural language processing</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-primary mr-2 mt-1"></i> |
|
|
<span>Computer vision</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-primary mr-2 mt-1"></i> |
|
|
<span>Predictive analytics</span> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="text-xs text-gray-500"> |
|
|
<i class="fas fa-info-circle mr-1"></i> Our AI solutions are tailored to your specific business needs |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-6 bg-white"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center"> |
|
|
<div class="order-last lg:order-first"> |
|
|
<div class="training-card p-8 rounded-xl"> |
|
|
<div class="bg-white rounded-xl shadow-md p-8 relative"> |
|
|
<div class="absolute -top-4 -left-4 bg-secondary text-white rounded-full w-10 h-10 flex items-center justify-center"> |
|
|
<i class="fas fa-graduation-cap"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-display font-bold mb-4 text-secondary">Training Programs</h3> |
|
|
<p class="text-gray-700 mb-4"> |
|
|
Our corporate training covers essential AI and technology topics: |
|
|
</p> |
|
|
<ul class="text-sm text-gray-600 space-y-2 mb-6"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-secondary mr-2 mt-1"></i> |
|
|
<span>AI Fundamentals for Business Leaders</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-secondary mr-2 mt-1"></i> |
|
|
<span>Machine Learning for Developers</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-secondary mr-2 mt-1"></i> |
|
|
<span>Data Science Bootcamp</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-secondary mr-2 mt-1"></i> |
|
|
<span>AI Strategy Workshops</span> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="text-xs text-gray-500"> |
|
|
<i class="fas fa-info-circle mr-1"></i> Custom programs available for your organization |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h2 class="text-3xl md:text-4xl font-display font-bold mb-6"> |
|
|
Corporate <span class="text-secondary">AI Training</span> |
|
|
</h2> |
|
|
<p class="text-gray-600 mb-8"> |
|
|
Equip your team with the knowledge and skills to leverage artificial intelligence in your business. |
|
|
</p> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-secondary/10 p-3 rounded-lg"> |
|
|
<i class="fas fa-users text-secondary text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-semibold">For All Levels</h4> |
|
|
<p class="text-gray-600 text-sm"> |
|
|
From executive overviews to technical deep dives, we cater to all experience levels. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-secondary/10 p-3 rounded-lg"> |
|
|
<i class="fas fa-briefcase text-secondary text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-semibold">Industry-Specific</h4> |
|
|
<p class="text-gray-600 text-sm"> |
|
|
Our training incorporates real-world examples from your industry. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-secondary/10 p-3 rounded-lg"> |
|
|
<i class="fas fa-laptop-code text-secondary text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-semibold">Hands-On Learning</h4> |
|
|
<p class="text-gray-600 text-sm"> |
|
|
Practical exercises and case studies reinforce theoretical concepts. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="products" class="py-20 px-6 bg-gray-50"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-display font-bold mb-4">Our Flagship Product</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto text-lg"> |
|
|
Innovative solutions developed by our team |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center"> |
|
|
<div class="flex justify-center"> |
|
|
<div class="relative"> |
|
|
<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="11UP Fantasy Cricket App" |
|
|
class="app-screen w-full max-w-md"> |
|
|
<div class="absolute -bottom-6 -right-6 bg-primary text-white px-4 py-2 rounded-lg shadow-lg"> |
|
|
<div class="text-xs">Available on</div> |
|
|
<div class="font-bold">App Store & Play Store</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="inline-flex items-center bg-secondary/10 px-3 py-1 rounded-full text-xs font-medium text-secondary mb-6"> |
|
|
<i class="fas fa-star mr-2"></i> Flagship Product |
|
|
</div> |
|
|
<h2 class="text-3xl md:text-4xl font-display font-bold mb-6"> |
|
|
11UP <span class="text-primary">Fantasy Cricket</span> |
|
|
</h2> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Our premier fantasy sports application that brings cricket enthusiasts together for an immersive gaming experience. |
|
|
</p> |
|
|
|
|
|
<div class="grid sm:grid-cols-2 gap-4 mb-8"> |
|
|
<div class="bg-white p-4 rounded-lg border border-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-primary/10 text-primary rounded-full flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-trophy"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-semibold">Real-time</div> |
|
|
<div class="text-xs text-gray-500">Live matches</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-4 rounded-lg border border-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-primary/10 text-primary rounded-full flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-semibold">Advanced</div> |
|
|
<div class="text-xs text-gray-500">Player stats</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-4 rounded-lg border border-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-primary/10 text-primary rounded-full flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-users"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-semibold">Social</div> |
|
|
<div class="text-xs text-gray-500">Leaderboards</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-4 rounded-lg border border-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-primary/10 text-primary rounded-full flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-semibold">Instant</div> |
|
|
<div class="text-xs text-gray-500">Notifications</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<a href="#" class="bg-gray-900 hover:bg-black text-white px-6 py-3 rounded-lg font-medium transition flex items-center hover-scale"> |
|
|
<i class="fab fa-apple mr-2"></i> App Store |
|
|
</a> |
|
|
<a href="#" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition flex items-center hover-scale"> |
|
|
<i class="fab fa-google-play mr-2"></i> Play Store |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 px-6 bg-white"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<h2 class="text-3xl md:text-4xl font-display font-bold mb-6"> |
|
|
About <span class="text-primary">Siolabs Inc.</span> |
|
|
</h2> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Founded with a vision to bridge the gap between cutting-edge technology and business needs, Siolabs Inc. has grown into a trusted partner for organizations seeking innovative solutions. |
|
|
</p> |
|
|
<p class="text-gray-600 mb-8"> |
|
|
Our team of experienced developers, data scientists, and technology experts combine technical excellence with deep business understanding to deliver measurable results. |
|
|
</p> |
|
|
|
|
|
<div class="grid sm:grid-cols-2 gap-6"> |
|
|
<div class="bg-gray-50 p-6 rounded-lg"> |
|
|
<div class="text-3xl font-bold text-primary mb-2">50+</div> |
|
|
<div class="text-sm text-gray-600">Successful Projects</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-lg"> |
|
|
<div class="text-3xl font-bold text-primary mb-2">100%</div> |
|
|
<div class="text-sm text-gray-600">Client Satisfaction</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="bg-gray-50 rounded-xl overflow-hidden"> |
|
|
<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="Siolabs team" |
|
|
class="w-full h-full object-cover"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 px-6 bg-primary/5"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-display font-bold mb-4">Ready to Transform Your Business?</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto text-lg"> |
|
|
Get in touch to discuss how we can help with your technology needs |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-8 md:p-12"> |
|
|
<form class="grid md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="company" class="block text-sm font-medium text-gray-700 mb-1">Company</label> |
|
|
<input type="text" id="company" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label> |
|
|
<input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary"> |
|
|
</div> |
|
|
|
|
|
<div class="md:col-span-2"> |
|
|
<label for="interest" class="block text-sm font-medium text-gray-700 mb-1">I'm interested in</label> |
|
|
<select id="interest" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary"> |
|
|
<option>Custom Product Development</option> |
|
|
<option>Corporate AI Training</option> |
|
|
<option>11UP Fantasy Cricket</option> |
|
|
<option>Technology Consulting</option> |
|
|
<option>Other</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="md:col-span-2"> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> |
|
|
<textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="md:col-span-2"> |
|
|
<button type="submit" class="w-full bg-primary hover:bg-primary-dark text-white px-6 py-4 rounded-lg text-lg font-medium transition shadow-md hover-scale"> |
|
|
Send Message |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-16 px-6 bg-gray-900 text-white/80"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-10 mb-12"> |
|
|
<div class="col-span-2"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="-ml-2"> |
|
|
<div class="w-10 h-10 bg-primary rounded-lg mr-3 flex items-center justify-center"> |
|
|
<i class="fas fa-code text-white text-lg"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-xl font-display font-bold text-white">Sio<span class="text-primary">labs</span></div> |
|
|
</div> |
|
|
<p class="text-sm mb-6 opacity-70 max-w-md"> |
|
|
Technology solutions provider specializing in custom software development, AI integration, and corporate training. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="hover:text-white transition opacity-70 hover:opacity-100"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#" class="hover:text-white transition opacity-70 hover:opacity-100"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="hover:text-white transition opacity-70 hover:opacity-100"><i class="fab fa-facebook-f"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-sm font-medium text-white mb-4">Services</h3> |
|
|
<ul class="space-y-3 text-sm opacity-70"> |
|
|
<li><a href="#" class="hover:text-white transition">Custom Development</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">AI Training</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Technology Consulting</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-sm font-medium text-white mb-4">Company</h3> |
|
|
<ul class="space-y-3 text-sm opacity-70"> |
|
|
<li><a href="#" class="hover:text-white transition">About Us</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Careers</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-8 border-t border-gray-800 text-sm opacity-70 text-center md:text-left"> |
|
|
© 2023 Siolabs Inc. All rights reserved. |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const fadeElements = document.querySelectorAll('.fade-in'); |
|
|
|
|
|
const fadeInOnScroll = () => { |
|
|
fadeElements.forEach(element => { |
|
|
const elementTop = element.getBoundingClientRect().top; |
|
|
const windowHeight = window.innerHeight; |
|
|
|
|
|
if (elementTop < windowHeight - 100) { |
|
|
element.style.opacity = '1'; |
|
|
element.style.transform = 'translateY(0)'; |
|
|
} |
|
|
}); |
|
|
}; |
|
|
|
|
|
window.addEventListener('scroll', fadeInOnScroll); |
|
|
window.addEventListener('load', fadeInOnScroll); |
|
|
</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=t0mkaka/mywebsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
