Hugging Face's logo

Spaces:
dvchinx
/
something
Running

App Files Community
something / index.html
dvchinx's picture
dvchinx
Create a modern landing page (light theme) for a web application that allows users to customize app at their liking and uses various apps at once in the same web platform. It uses a easy figma style design or the users can just use templates. - Initial Deployment
8e4f26f verified
Raw History Blame Contribute Delete
20.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FusionHub - Customize Your Digital Workspace</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></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: '#6366f1',
secondary: '#8b5cf6',
accent: '#ec4899',
}
}
}
}
</script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
}
.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-gray-50 font-sans antialiased">
<!-- Navigation -->
<nav class="bg-white shadow-sm fixed w-full z-10">
<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">
<i data-feather="box" class="text-primary h-8 w-8"></i>
<span class="ml-2 text-xl font-bold text-gray-900">FusionHub</span>
</div>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#features" class="text-gray-700 hover:text-primary transition">Features</a>
<a href="#templates" class="text-gray-700 hover:text-primary transition">Templates</a>
<a href="#pricing" class="text-gray-700 hover:text-primary transition">Pricing</a>
<a href="#testimonials" class="text-gray-700 hover:text-primary transition">Testimonials</a>
</div>
<div class="flex items-center">
<button class="bg-primary text-white px-4 py-2 rounded-md font-medium hover:bg-indigo-600 transition">
Get Started
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div data-aos="fade-right">
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight">
Customize Your Perfect <span class="text-primary">Digital Workspace</span>
</h1>
<p class="mt-4 text-lg text-gray-600">
Drag, drop, and design your ideal app interface with our intuitive Figma-style editor or choose from beautiful templates.
</p>
<div class="mt-8 flex space-x-4">
<button class="bg-primary text-white px-6 py-3 rounded-md font-medium hover:bg-indigo-600 transition">
Start Building
</button>
<button class="border border-gray-300 text-gray-700 px-6 py-3 rounded-md font-medium hover:bg-gray-50 transition">
Watch Demo
</button>
</div>
</div>
<div data-aos="fade-left">
<div class="relative">
<div class="absolute -top-6 -right-6 w-64 h-64 rounded-full bg-purple-100 opacity-50"></div>
<div class="absolute -bottom-6 -left-6 w-64 h-64 rounded-full bg-pink-100 opacity-50"></div>
<img src="http://static.photos/technology/1024x576/5" alt="App Interface" class="relative rounded-xl shadow-xl border border-gray-100">
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl font-bold text-gray-900">Powerful Features</h2>
<p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
Everything you need to create, customize, and manage your perfect digital workspace
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-gray-50 p-8 rounded-xl card-hover transition" data-aos="fade-up" data-aos-delay="100">
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mb-6">
<i data-feather="edit-3" class="text-primary w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Figma-Style Editor</h3>
<p class="text-gray-600">
Intuitive drag-and-drop interface with real-time collaboration, just like your favorite design tools.
</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl card-hover transition" data-aos="fade-up" data-aos-delay="200">
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-6">
<i data-feather="layout" class="text-secondary w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Template Library</h3>
<p class="text-gray-600">
Hundreds of professionally designed templates for every use case, ready to customize.
</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl card-hover transition" data-aos="fade-up" data-aos-delay="300">
<div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center mb-6">
<i data-feather="zap" class="text-accent w-6 h-6"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">App Integration</h3>
<p class="text-gray-600">
Connect all your favorite apps in one place with our powerful integration system.
</p>
</div>
</div>
</div>
</section>
<!-- Templates Section -->
<section id="templates" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl font-bold text-gray-900">Beautiful Templates</h2>
<p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
Get started quickly with our professionally designed templates
</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover transition" data-aos="fade-up">
<img src="http://static.photos/workspace/640x360/1" alt="Dashboard Template" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-lg font-bold text-gray-900 mb-2">Modern Dashboard</h3>
<p class="text-gray-600 mb-4">Clean, organized workspace with analytics widgets</p>
<button class="text-primary font-medium">Use Template</button>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover transition" data-aos="fade-up" data-aos-delay="100">
<img src="http://static.photos/workspace/640x360/2" alt="Project Management Template" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-lg font-bold text-gray-900 mb-2">Project Hub</h3>
<p class="text-gray-600 mb-4">Complete solution for managing teams and projects</p>
<button class="text-primary font-medium">Use Template</button>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover transition" data-aos="fade-up" data-aos-delay="200">
<img src="http://static.photos/workspace/640x360/3" alt="Social Media Template" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-lg font-bold text-gray-900 mb-2">Social Dashboard</h3>
<p class="text-gray-600 mb-4">Manage all your social platforms in one place</p>
<button class="text-primary font-medium">Use Template</button>
</div>
</div>
</div>
<div class="mt-12 text-center" data-aos="fade-up">
<button class="border border-primary text-primary px-6 py-3 rounded-md font-medium hover:bg-indigo-50 transition">
Browse All Templates
</button>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl font-bold text-gray-900">Simple, Transparent Pricing</h2>
<p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
Choose the plan that's right for you
</p>
</div>
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="bg-gray-50 p-8 rounded-xl border border-gray-200" data-aos="fade-up">
<h3 class="text-xl font-bold text-gray-900 mb-2">Starter</h3>
<p class="text-gray-600 mb-6">Perfect for individuals</p>
<div class="mb-6">
<span class="text-4xl font-bold text-gray-900">$9</span>
<span class="text-gray-600">/month</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i data-feather="check" class="text-primary mr-2 w-5 h-5"></i>
<span class="text-gray-600">10 app integrations</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="text-primary mr-2 w-5 h-5"></i>
<span class="text-gray-600">50 templates</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="text-primary mr-2 w-5 h-5"></i>
<span class="text-gray-600">Basic customization</span>
</li>
</ul>
<button class="w-full border border-primary text-primary px-6 py-3 rounded-md font-medium hover:bg-indigo-50 transition">
Get Started
</button>
</div>
<div class="bg-white p-8 rounded-xl border-2 border-primary shadow-lg relative" data-aos="fade-up" data-aos-delay="100">
<div class="absolute top-0 right-0 bg-primary text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">
POPULAR
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2">Pro</h3>
<p class="text-gray-600 mb-6">For growing teams</p>
<div class="mb-6">
<span class="text-4xl font-bold text-gray-900">$29</span>
<span class="text-gray-600">/month</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i data-feather="check" class="text-primary mr-2 w-5 h-5"></i>
<span class="text-gray-600">Unlimited integrations</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="text-primary mr-2 w-5 h-5"></i>
<span class="text-gray-600">All templates</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="text-primary mr-2 w-5 h-5"></i>
<span class="text-gray-600">Advanced customization</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="text-primary mr-2 w-5 h-5"></i>
<span class="text-gray-600">Team collaboration</span>
</li>
</ul>
<button class="w-full bg-primary text-white px-6 py-3 rounded-md font-medium hover:bg-indigo-600 transition">
Get Started
</button>
</div>
<div class="bg-gray-50 p-8 rounded-xl border border-gray-200" data-aos="fade-up" data-aos-delay="200">
<h3 class="text-xl font-bold text-gray-900 mb-2">Enterprise</h3>
<p class="text-gray-600 mb-6">For large organizations</p>
<div class="mb-6">
<span class="text-4xl font-bold text-gray-900">$99</span>
<span class="text-gray-600">/month</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i data-feather="check" class="text-primary mr-2 w-5 h-5"></i>
<span class="text-gray-600">Everything in Pro</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="text-primary mr-2 w-5 h-5"></i>
<span class="text-gray-600">Priority support</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="text-primary mr-2 w-5 h-5"></i>
<span class="text-gray-600">Custom development</span>
</li>
<li class="flex items-center">
<i data-feather="check" class="text-primary mr-2 w-5 h-5"></i>
<span class="text-gray-600">Dedicated account manager</span>
</li>
</ul>
<button class="w-full border border-primary text-primary px-6 py-3 rounded-md font-medium hover:bg-indigo-50 transition">
Contact Sales
</button>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 gradient-bg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center text-white" data-aos="zoom-in">
<h2 class="text-3xl font-bold mb-4">Ready to Transform Your Digital Experience?</h2>
<p class="text-xl opacity-90 mb-8 max-w-3xl mx-auto">
Join thousands of users who have customized their perfect workspace with FusionHub.
</p>
<button class="bg-white text-primary px-8 py-4 rounded-md font-bold hover:bg-gray-100 transition">
Start Your Free Trial
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-4 gap-8">
<div>
<div class="flex items-center">
<i data-feather="box" class="text-primary h-8 w-8"></i>
<span class="ml-2 text-xl font-bold">FusionHub</span>
</div>
<p class="mt-4 text-gray-400">
The all-in-one platform to customize your perfect digital workspace.
</p>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Product</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Templates</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Integrations</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition">
<i data-feather="twitter" class="w-5 h-5"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i data-feather="facebook" class="w-5 h-5"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i data-feather="linkedin" class="w-5 h-5"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i data-feather="instagram" class="w-5 h-5"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400">
&copy; 2023 FusionHub. All rights reserved.
</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
</div>
</div>
</div>
</footer>
<script>AOS.init();</script>
<script>feather.replace();</script>
</body>
</html>