|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>VEGO - The Future of Social Media</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: { |
|
|
vegoBlue: '#00f0ff', |
|
|
vegoPurple: '#7d00ff', |
|
|
vegoDark: '#0a0a1a', |
|
|
vegoLight: '#f0f4ff', |
|
|
}, |
|
|
fontFamily: { |
|
|
sans: ['Inter', 'sans-serif'], |
|
|
display: ['Poppins', 'sans-serif'], |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap'); |
|
|
|
|
|
body { |
|
|
background-color: #0a0a1a; |
|
|
color: #f0f4ff; |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
|
|
|
.vego-gradient-text { |
|
|
background: linear-gradient(90deg, #00f0ff 0%, #7d00ff 100%); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.vego-gradient-bg { |
|
|
background: linear-gradient(135deg, #00f0ff 0%, #7d00ff 100%); |
|
|
} |
|
|
|
|
|
.content-card { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.content-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 240, 255, 0.2); |
|
|
} |
|
|
|
|
|
.ai-assistant-bubble { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.7); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(0, 240, 255, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); } |
|
|
} |
|
|
|
|
|
.avatar-generator-preview { |
|
|
background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(125, 0, 255, 0.2) 100%); |
|
|
} |
|
|
|
|
|
.tab-active { |
|
|
border-bottom: 3px solid #00f0ff; |
|
|
color: #00f0ff; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: linear-gradient(#00f0ff, #7d00ff); |
|
|
border-radius: 10px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen"> |
|
|
|
|
|
<nav class="bg-vegoDark border-b border-gray-800 fixed w-full z-50"> |
|
|
<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"> |
|
|
<span class="text-2xl font-bold vego-gradient-text">VEGO</span> |
|
|
</div> |
|
|
<div class="hidden md:ml-6 md:flex md:space-x-8"> |
|
|
<a href="#" class="text-vegoBlue border-vegoBlue inline-flex items-center px-1 pt-1 text-sm font-medium">Home</a> |
|
|
<a href="#" class="text-gray-300 hover:text-vegoBlue inline-flex items-center px-1 pt-1 text-sm font-medium">Explore</a> |
|
|
<a href="#" class="text-gray-300 hover:text-vegoBlue inline-flex items-center px-1 pt-1 text-sm font-medium">Create</a> |
|
|
<a href="#" class="text-gray-300 hover:text-vegoBlue inline-flex items-center px-1 pt-1 text-sm font-medium">Communities</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<button class="relative inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-vegoDark bg-gradient-to-r from-vegoBlue to-vegoPurple hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-vegoBlue"> |
|
|
<i class="fas fa-plus mr-2"></i> New Post |
|
|
</button> |
|
|
</div> |
|
|
<div class="hidden md:ml-4 md:flex-shrink-0 md:flex md:items-center"> |
|
|
<button class="p-1 rounded-full text-gray-400 hover:text-vegoBlue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-vegoBlue"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
</button> |
|
|
<button class="ml-3 p-1 rounded-full text-gray-400 hover:text-vegoBlue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-vegoBlue"> |
|
|
<i class="fas fa-envelope text-xl"></i> |
|
|
</button> |
|
|
<div class="ml-3 relative"> |
|
|
<div> |
|
|
<button class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-vegoBlue" id="user-menu"> |
|
|
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<main class="pt-16 pb-20"> |
|
|
<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="w-full md:w-1/4 lg:w-1/5 pr-0 md:pr-6 mb-6 md:mb-0"> |
|
|
<div class="content-card rounded-xl p-4 mb-4"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facepad=2&w=256&h=256&q=80" alt=""> |
|
|
<div class="ml-3"> |
|
|
<h3 class="font-bold">Alex Johnson</h3> |
|
|
<p class="text-xs text-gray-400">@alexjohnson</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-400 mb-4"> |
|
|
<div class="text-center"> |
|
|
<div class="font-bold text-white">1.2K</div> |
|
|
<div>Following</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="font-bold text-white">5.7K</div> |
|
|
<div>Followers</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="font-bold text-white">24.3K</div> |
|
|
<div>Likes</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full py-2 px-4 border border-vegoBlue text-vegoBlue rounded-lg text-sm font-medium hover:bg-vegoBlue hover:text-vegoDark transition duration-300"> |
|
|
Edit Profile |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="content-card rounded-xl p-4 mb-4"> |
|
|
<h3 class="font-bold mb-3 flex items-center"> |
|
|
<i class="fas fa-compass mr-2 text-vegoBlue"></i> Discover |
|
|
</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="flex items-center text-gray-300 hover:text-vegoBlue"><i class="fas fa-fire mr-2"></i> Trending</a></li> |
|
|
<li><a href="#" class="flex items-center text-gray-300 hover:text-vegoBlue"><i class="fas fa-music mr-2"></i> Audio</a></li> |
|
|
<li><a href="#" class="flex items-center text-gray-300 hover:text-vegoBlue"><i class="fas fa-paint-brush mr-2"></i> AI Art</a></li> |
|
|
<li><a href="#" class="flex items-center text-gray-300 hover:text-vegoBlue"><i class="fas fa-video mr-2"></i> Short Films</a></li> |
|
|
<li><a href="#" class="flex items-center text-gray-300 hover:text-vegoBlue"><i class="fas fa-gamepad mr-2"></i> Gaming</a></li> |
|
|
<li><a href="#" class="flex items-center text-gray-300 hover:text-vegoBlue"><i class="fas fa-lightbulb mr-2"></i> Ideas</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="content-card rounded-xl p-4"> |
|
|
<h3 class="font-bold mb-3 flex items-center"> |
|
|
<i class="fas fa-users mr-2 text-vegoBlue"></i> Communities |
|
|
</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li> |
|
|
<a href="#" class="flex items-center"> |
|
|
<div class="h-8 w-8 rounded-full bg-gradient-to-r from-vegoBlue to-vegoPurple flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-atom text-white text-xs"></i> |
|
|
</div> |
|
|
<span class="text-gray-300 hover:text-vegoBlue">Tech Futurists</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center"> |
|
|
<div class="h-8 w-8 rounded-full bg-gradient-to-r from-vegoBlue to-vegoPurple flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-palette text-white text-xs"></i> |
|
|
</div> |
|
|
<span class="text-gray-300 hover:text-vegoBlue">Digital Artists</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center"> |
|
|
<div class="h-8 w-8 rounded-full bg-gradient-to-r from-vegoBlue to-vegoPurple flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-robot text-white text-xs"></i> |
|
|
</div> |
|
|
<span class="text-gray-300 hover:text-vegoBlue">AI Creators</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center"> |
|
|
<div class="h-8 w-8 rounded-full bg-gradient-to-r from-vegoBlue to-vegoPurple flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-video text-white text-xs"></i> |
|
|
</div> |
|
|
<span class="text-gray-300 hover:text-vegoBlue">Short Film Makers</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="mt-3 text-xs text-vegoBlue hover:underline">See all communities</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full md:w-2/4 lg:w-3/5 mb-6 md:mb-0"> |
|
|
|
|
|
<div class="content-card rounded-xl p-4 mb-4"> |
|
|
<div class="flex"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facepad=2&w=256&h=256&q=80" alt=""> |
|
|
<div class="ml-3 flex-1"> |
|
|
<textarea class="w-full bg-transparent border-0 focus:ring-0 resize-none text-white placeholder-gray-500" rows="2" placeholder="What's evolving today?"></textarea> |
|
|
<div class="flex justify-between items-center pt-2 border-t border-gray-800"> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-2 rounded-full hover:bg-gray-800 text-gray-400 hover:text-vegoBlue"> |
|
|
<i class="fas fa-image"></i> |
|
|
</button> |
|
|
<button class="p-2 rounded-full hover:bg-gray-800 text-gray-400 hover:text-vegoBlue"> |
|
|
<i class="fas fa-video"></i> |
|
|
</button> |
|
|
<button class="p-2 rounded-full hover:bg-gray-800 text-gray-400 hover:text-vegoBlue"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
</button> |
|
|
<button class="p-2 rounded-full hover:bg-gray-800 text-gray-400 hover:text-vegoBlue"> |
|
|
<i class="fas fa-magic"></i> |
|
|
</button> |
|
|
</div> |
|
|
<button class="px-4 py-1 bg-gradient-to-r from-vegoBlue to-vegoPurple text-white rounded-full text-sm font-medium hover:opacity-90"> |
|
|
Post |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="content-card rounded-xl p-4 mb-4 ai-assistant-bubble border border-vegoBlue"> |
|
|
<div class="flex items-start"> |
|
|
<div class="h-10 w-10 rounded-full bg-gradient-to-r from-vegoBlue to-vegoPurple flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-robot text-white"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-bold text-vegoBlue">VEGO AI Assistant</h3> |
|
|
<p class="text-sm text-gray-300 mb-2">Need help creating content? I can generate captions, suggest ideas, or even create AI art for your next post!</p> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-gray-800 text-white rounded-full text-xs font-medium hover:bg-gray-700"> |
|
|
<i class="fas fa-lightbulb mr-1"></i> Idea Generator |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-800 text-white rounded-full text-xs font-medium hover:bg-gray-700"> |
|
|
<i class="fas fa-font mr-1"></i> Write Caption |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-800 text-white rounded-full text-xs font-medium hover:bg-gray-700"> |
|
|
<i class="fas fa-palette mr-1"></i> Create Art |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex border-b border-gray-800 mb-4"> |
|
|
<button class="px-4 py-2 font-medium tab-active">For You</button> |
|
|
<button class="px-4 py-2 font-medium text-gray-400 hover:text-vegoBlue">Following</button> |
|
|
<button class="px-4 py-2 font-medium text-gray-400 hover:text-vegoBlue">Trending</button> |
|
|
<button class="px-4 py-2 font-medium text-gray-400 hover:text-vegoBlue">AI Generated</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="content-card rounded-xl overflow-hidden"> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-start"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> |
|
|
<div class="ml-3"> |
|
|
<h3 class="font-bold">Sarah Chen</h3> |
|
|
<p class="text-xs text-gray-400">@sarahchen · 2h ago · <span class="text-vegoBlue">#AIGenerated</span></p> |
|
|
</div> |
|
|
<button class="ml-auto text-gray-400 hover:text-vegoBlue"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</div> |
|
|
<p class="mt-3 mb-2">Just created this short film using VEGO's AI video generator! The script was AI-written and the visuals were generated from my text prompts. Mind blown! 🤯</p> |
|
|
<div class="flex space-x-2 mb-3"> |
|
|
<span class="px-2 py-1 bg-gray-800 text-xs rounded-full">#AI</span> |
|
|
<span class="px-2 py-1 bg-gray-800 text-xs rounded-full">#Filmmaking</span> |
|
|
<span class="px-2 py-1 bg-gray-800 text-xs rounded-full">#Future</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<img src="https://source.unsplash.com/random/800x450/?future,technology" alt="" class="w-full h-auto"> |
|
|
<div class="absolute bottom-4 left-4 bg-black bg-opacity-50 px-3 py-1 rounded-full text-sm"> |
|
|
<i class="fas fa-play mr-1"></i> 1:32 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 flex justify-between text-gray-400"> |
|
|
<button class="flex items-center hover:text-vegoBlue"> |
|
|
<i class="far fa-heart mr-1"></i> 1.2K |
|
|
</button> |
|
|
<button class="flex items-center hover:text-vegoBlue"> |
|
|
<i class="far fa-comment mr-1"></i> 243 |
|
|
</button> |
|
|
<button class="flex items-center hover:text-vegoBlue"> |
|
|
<i class="fas fa-retweet mr-1"></i> 87 |
|
|
</button> |
|
|
<button class="flex items-center hover:text-vegoBlue"> |
|
|
<i class="far fa-bookmark mr-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="content-card rounded-xl overflow-hidden"> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-start"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> |
|
|
<div class="ml-3"> |
|
|
<h3 class="font-bold">Marcus Wong</h3> |
|
|
<p class="text-xs text-gray-400">@marcusw · 4h ago · <span class="text-vegoBlue">#AIArt</span></p> |
|
|
</div> |
|
|
<button class="ml-auto text-gray-400 hover:text-vegoBlue"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</div> |
|
|
<p class="mt-3 mb-2">"Cyberpunk Samurai in Neon Tokyo" - generated with VEGO's AI art tool using just a text prompt. The details are incredible! What should I generate next?</p> |
|
|
<div class="flex space-x-2 mb-3"> |
|
|
<span class="px-2 py-1 bg-gray-800 text-xs rounded-full">#DigitalArt</span> |
|
|
<span class="px-2 py-1 bg-gray-800 text-xs rounded-full">#Cyberpunk</span> |
|
|
<span class="px-2 py-1 bg-gray-800 text-xs rounded-full">#AI</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<img src="https://source.unsplash.com/random/800x500/?cyberpunk,samurai" alt="" class="w-full h-auto rounded-lg"> |
|
|
</div> |
|
|
<div class="p-4 flex justify-between text-gray-400"> |
|
|
<button class="flex items-center hover:text-vegoBlue"> |
|
|
<i class="far fa-heart mr-1"></i> 3.4K |
|
|
</button> |
|
|
<button class="flex items-center hover:text-vegoBlue"> |
|
|
<i class="far fa-comment mr-1"></i> 512 |
|
|
</button> |
|
|
<button class="flex items-center hover:text-vegoBlue"> |
|
|
<i class="fas fa-retweet mr-1"></i> 231 |
|
|
</button> |
|
|
<button class="flex items-center hover:text-vegoBlue"> |
|
|
<i class="far fa-bookmark mr-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="content-card rounded-xl overflow-hidden"> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-start"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> |
|
|
<div class="ml-3"> |
|
|
<h3 class="font-bold">Dr. Elena Rodriguez</h3> |
|
|
<p class="text-xs text-gray-400">@elenarod · 6h ago · <span class="text-vegoBlue">#AIWritten</span></p> |
|
|
</div> |
|
|
<button class="ml-auto text-gray-400 hover:text-vegoBlue"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</div> |
|
|
<p class="mt-3 mb-2">How AI is transforming creative industries - a thread 🧵 (content co-created with VEGO AI)</p> |
|
|
<div class="flex space-x-2 mb-3"> |
|
|
<span class="px-2 py-1 bg-gray-800 text-xs rounded-full">#AI</span> |
|
|
<span class="px-2 py-1 bg-gray-800 text-xs rounded-full">#Creativity</span> |
|
|
<span class="px-2 py-1 bg-gray-800 text-xs rounded-full">#FutureOfWork</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-4 pb-4"> |
|
|
<div class="border-l-2 border-vegoBlue pl-4 py-2 mb-2"> |
|
|
<p class="font-medium">1/8 AI is not replacing human creativity, but augmenting it. Tools like VEGO allow creators to explore ideas faster, prototype concepts visually, and overcome creative blocks.</p> |
|
|
</div> |
|
|
<div class="border-l-2 border-vegoBlue pl-4 py-2 mb-2"> |
|
|
<p class="font-medium">2/8 The most powerful creative workflows will be human-AI collaborations. The AI generates possibilities based on your direction, you curate and refine. This is already happening in music, design, and writing.</p> |
|
|
</div> |
|
|
<div class="border-l-2 border-vegoBlue pl-4 py-2"> |
|
|
<p class="text-sm text-gray-400">5 more replies</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 flex justify-between text-gray-400 border-t border-gray-800"> |
|
|
<button class="flex items-center hover:text-vegoBlue"> |
|
|
<i class="far fa-heart mr-1"></i> 892 |
|
|
</button> |
|
|
<button class="flex items-center hover:text-vegoBlue"> |
|
|
<i class="far fa-comment mr-1"></i> 147 |
|
|
</button> |
|
|
<button class="flex items-center hover:text-vegoBlue"> |
|
|
<i class="fas fa-retweet mr-1"></i> 56 |
|
|
</button> |
|
|
<button class="flex items-center hover:text-vegoBlue"> |
|
|
<i class="far fa-bookmark mr-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full md:w-1/4 lg:w-1/5 pl-0 md:pl-6"> |
|
|
|
|
|
<div class="content-card rounded-xl p-4 mb-4"> |
|
|
<h3 class="font-bold mb-3 flex items-center"> |
|
|
<i class="fas fa-magic mr-2 text-vegoBlue"></i> VEGO AI Tools |
|
|
</h3> |
|
|
<div class="space-y-3"> |
|
|
<button class="w-full flex items-center p-3 bg-gray-800 rounded-lg hover:bg-gray-700"> |
|
|
<div class="h-8 w-8 rounded-full bg-gradient-to-r from-vegoBlue to-vegoPurple flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-font text-xs text-white"></i> |
|
|
</div> |
|
|
<span class="text-sm">Text to Image</span> |
|
|
</button> |
|
|
<button class="w-full flex items-center p-3 bg-gray-800 rounded-lg hover:bg-gray-700"> |
|
|
<div class="h-8 w-8 rounded-full bg-gradient-to-r from-vegoBlue to-vegoPurple flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-video text-xs text-white"></i> |
|
|
</div> |
|
|
<span class="text-sm">Text to Video</span> |
|
|
</button> |
|
|
<button class="w-full flex items-center p-3 bg-gray-800 rounded-lg hover:bg-gray-700"> |
|
|
<div class="h-8 w-8 rounded-full bg-gradient-to-r from-vegoBlue to-vegoPurple flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-microphone text-xs text-white"></i> |
|
|
</div> |
|
|
<span class="text-sm">Voice to Avatar</span> |
|
|
</button> |
|
|
<button class="w-full flex items-center p-3 bg-gray-800 rounded-lg hover:bg-gray-700"> |
|
|
<div class="h-8 w-8 rounded-full bg-gradient-to-r from-vegoBlue to-vegoPurple flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-robot text-xs text-white"></i> |
|
|
</div> |
|
|
<span class="text-sm">AI Content Writer</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="content-card rounded-xl p-4 mb-4"> |
|
|
<h3 class="font-bold mb-3 flex items-center"> |
|
|
<i class="fas fa-user-astronaut mr-2 text-vegoBlue"></i> Create Your AI Avatar |
|
|
</h3> |
|
|
<div class="avatar-generator-preview rounded-lg p-4 mb-3 flex flex-col items-center"> |
|
|
<div class="h-24 w-24 rounded-full bg-gray-700 mb-3 overflow-hidden"> |
|
|
<img src="https://source.unsplash.com/random/200x200/?portrait" alt="" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<p class="text-sm text-center mb-2">Your digital twin for VEGO</p> |
|
|
<button class="px-3 py-1 bg-gradient-to-r from-vegoBlue to-vegoPurple text-white rounded-full text-xs font-medium hover:opacity-90"> |
|
|
Generate Now |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-xs text-gray-400 text-center">Use AI to create a customizable avatar that can represent you across VEGO.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="content-card rounded-xl p-4"> |
|
|
<h3 class="font-bold mb-3 flex items-center"> |
|
|
<i class="fas fa-hashtag mr-2 text-vegoBlue"></i> Trending Now |
|
|
</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<a href="#" class="font-medium hover:text-vegoBlue">#AICreativity</a> |
|
|
<p class="text-xs text-gray-400">12.4K posts</p> |
|
|
</div> |
|
|
<div> |
|
|
<a href="#" class="font-medium hover:text-vegoBlue">#DigitalArtRevolution</a> |
|
|
<p class="text-xs text-gray-400">8.7K posts</p> |
|
|
</div> |
|
|
<div> |
|
|
<a href="#" class="font-medium hover:text-vegoBlue">#VEGOeffects</a> |
|
|
<p class="text-xs text-gray-400">5.3K posts</p> |
|
|
</div> |
|
|
<div> |
|
|
<a href="#" class="font-medium hover:text-vegoBlue">#FutureOfSocial</a> |
|
|
<p class="text-xs text-gray-400">4.9K posts</p> |
|
|
</div> |
|
|
<div> |
|
|
<a href="#" class="font-medium hover:text-vegoBlue">#AIVideo</a> |
|
|
<p class="text-xs text-gray-400">3.8K posts</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="mt-3 text-xs text-vegoBlue hover:underline">Show more</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div class="md:hidden fixed bottom-0 left-0 right-0 bg-vegoDark border-t border-gray-800"> |
|
|
<div class="flex justify-around"> |
|
|
<a href="#" class="p-4 text-vegoBlue"> |
|
|
<i class="fas fa-home text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="p-4 text-gray-400 hover:text-vegoBlue"> |
|
|
<i class="fas fa-search text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="p-4 text-gray-400 hover:text-vegoBlue relative"> |
|
|
<i class="fas fa-plus-circle text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="p-4 text-gray-400 hover:text-vegoBlue"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="p-4 text-gray-400 hover:text-vegoBlue"> |
|
|
<i class="fas fa-user text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const tabs = document.querySelectorAll('.flex.border-b button'); |
|
|
tabs.forEach(tab => { |
|
|
tab.addEventListener('click', () => { |
|
|
tabs.forEach(t => t.classList.remove('tab-active', 'text-vegoBlue')); |
|
|
tabs.forEach(t => t.classList.add('text-gray-400')); |
|
|
tab.classList.add('tab-active', 'text-vegoBlue'); |
|
|
tab.classList.remove('text-gray-400'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const aiButtons = document.querySelectorAll('.ai-assistant-bubble button'); |
|
|
aiButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
alert('VEGO AI is ready to assist you with this feature!'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const avatarBtn = document.querySelector('.avatar-generator-preview button'); |
|
|
if(avatarBtn) { |
|
|
avatarBtn.addEventListener('click', () => { |
|
|
alert('Launching VEGO Avatar Generator...'); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
</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=Erikartificial/social-app-vego" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
