|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<meta name="description" content="VedaQ AI blends Vedic wisdom with advanced technology to build collaborative, ethical, and conscious artificial intelligence."> |
|
|
<meta name="keywords" content="AI, Vedic, Conscious Intelligence, Ethical AI, Dharma, Ahimsa, Mantra Encryption"> |
|
|
<title>VedaQ AI | Where Vedic Wisdom Meets Conscious Intelligence</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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary-blue: #1a237e; |
|
|
--secondary-blue: #283593; |
|
|
--gold: #ffd700; |
|
|
--light-gold: #fff9c4; |
|
|
--white: #f8f9fa; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: var(--white); |
|
|
color: #333; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4 { |
|
|
font-family: 'Playfair Display', serif; |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%); |
|
|
} |
|
|
|
|
|
.timeline-item { |
|
|
position: relative; |
|
|
padding-left: 3rem; |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.timeline-item:before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 0; |
|
|
width: 2px; |
|
|
height: 100%; |
|
|
background: var(--gold); |
|
|
} |
|
|
|
|
|
.timeline-dot { |
|
|
position: absolute; |
|
|
left: -0.5rem; |
|
|
top: 0; |
|
|
width: 1.5rem; |
|
|
height: 1.5rem; |
|
|
border-radius: 50%; |
|
|
background: var(--gold); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
color: var(--gold) !important; |
|
|
} |
|
|
|
|
|
.btn-gold { |
|
|
background-color: var(--gold); |
|
|
color: var(--primary-blue); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-gold:hover { |
|
|
background-color: var(--light-gold); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.btn-outline-gold { |
|
|
border: 2px solid var(--gold); |
|
|
color: var(--gold); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-outline-gold:hover { |
|
|
background-color: var(--gold); |
|
|
color: var(--primary-blue); |
|
|
} |
|
|
|
|
|
.feature-icon { |
|
|
font-size: 2.5rem; |
|
|
color: var(--gold); |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.hero-content { |
|
|
padding-top: 5rem; |
|
|
padding-bottom: 5rem; |
|
|
} |
|
|
|
|
|
.timeline-item { |
|
|
padding-left: 2rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav class="bg-white shadow-md sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-6 py-3"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<a href="#" class="flex items-center"> |
|
|
<span class="text-2xl font-bold text-indigo-900 mr-2">VedaQ</span> |
|
|
<span class="text-xs bg-yellow-500 text-indigo-900 px-2 py-1 rounded font-bold">AI</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#" class="nav-link text-indigo-900 font-medium">Home</a> |
|
|
<a href="#about" class="nav-link text-gray-600 hover:text-indigo-900 font-medium">About</a> |
|
|
<a href="#features" class="nav-link text-gray-600 hover:text-indigo-900 font-medium">Features</a> |
|
|
<a href="#vision" class="nav-link text-gray-600 hover:text-indigo-900 font-medium">Vision</a> |
|
|
<a href="#contact" class="nav-link text-gray-600 hover:text-indigo-900 font-medium">Contact</a> |
|
|
</div> |
|
|
|
|
|
<div class="md:hidden"> |
|
|
<button class="mobile-menu-button"> |
|
|
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mobile-menu hidden md:hidden bg-white py-4 px-6 shadow-lg"> |
|
|
<a href="#" class="block py-2 text-indigo-900 font-medium">Home</a> |
|
|
<a href="#about" class="block py-2 text-gray-600 hover:text-indigo-900 font-medium">About</a> |
|
|
<a href="#features" class="block py-2 text-gray-600 hover:text-indigo-900 font-medium">Features</a> |
|
|
<a href="#vision" class="block py-2 text-gray-600 hover:text-indigo-900 font-medium">Vision</a> |
|
|
<a href="#contact" class="block py-2 text-gray-600 hover:text-indigo-900 font-medium">Contact</a> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="hero-gradient text-white"> |
|
|
<div class="container mx-auto px-6 py-20 hero-content"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6">VedaQ AI: Where Vedic Wisdom Meets Conscious Intelligence</h1> |
|
|
<p class="text-xl md:text-2xl mb-10">Building AI that collaborates with humanity for a better future</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<a href="#signup" class="btn-gold px-8 py-3 rounded-full font-bold text-lg">Join the Revolution</a> |
|
|
<a href="#about" class="btn-outline-gold px-8 py-3 rounded-full font-bold text-lg">Learn More</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="vision" class="py-16 bg-white |
|
|
</html> |
