File size: 6,683 Bytes
00abbfd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 |
<!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>
<!-- Navigation -->
<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>
<!-- Mobile menu -->
<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>
<!-- Hero Section -->
<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>
<!-- Vision Snapshot -->
<section id="vision" class="py-16 bg-white
</html> |