Hugging Face's logo

Spaces:
LukasBe
/
collectiveshare-sv
Running

App Files Community
collectiveshare-sv / index.html
LukasBe's picture
LukasBe
Add 3 files
d521806 verified
raw
history blame contribute delete
71.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>CollectiveShare | Peer-to-Peer Benefits Network</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">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
 <style>
 :root {
 --primary: #4F46E5;
 --primary-light: #6366F1;
 --secondary: #10B981;
 --dark: #111827;
 --light: #F9FAFB;
 --surface: #FFFFFF;
 --gray-100: #F3F4F6;
 --gray-200: #E5E7EB;
 --gray-500: #6B7280;
 }
body {
 font-family: 'Inter', sans-serif;
 background-color: var(--light);
 color: var(--dark);
 scroll-behavior: smooth;
 }
.gradient-bg {
 background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
 }
.gradient-text {
 background: linear-gradient(90deg, var(--primary), var(--secondary));
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 }
.card-hover {
 transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
 }
.card-hover:hover {
 transform: translateY(-4px);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
.nav-link {
 position: relative;
 }
.nav-link::after {
 content: '';
 position: absolute;
 width: 0;
 height: 2px;
 bottom: -4px;
 left: 0;
 background-color: var(--primary);
 transition: width 0.3s ease;
 }
.nav-link:hover::after {
 width: 100%;
 }
.floating {
 animation: float 6s ease-in-out infinite;
 }
@keyframes float {
 0% { transform: translateY(0px); }
 50% { transform: translateY(-12px); }
 100% { transform: translateY(0px); }
 }
.pulse {
 animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
@keyframes pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.8; }
 }
.fade-in {
 animation: fadeIn 0.5s ease-in;
 }
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
.slide-up {
 animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
 }
@keyframes slideUp {
 from { transform: translateY(20px); opacity: 0; }
 to { transform: translateY(0); opacity: 1; }
 }
.btn-primary {
 background: linear-gradient(90deg, var(--primary), var(--primary-light));
 transition: all 0.3s ease;
 box-shadow: 0 4px 6px rgba(79, 70, 229, 0.3);
 }
.btn-primary:hover {
 transform: translateY(-2px);
 box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3);
 }
.btn-secondary {
 background: var(--surface);
 transition: all 0.3s ease;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
 }
.btn-secondary:hover {
 transform: translateY(-2px);
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
.input-focus:focus {
 border-color: var(--primary-light);
 box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
 }
.toggle-checkbox:checked {
 @apply right-0 border-green-400;
 right: 0;
 border-color: var(--secondary);
 }
.toggle-checkbox:checked + .toggle-label {
 @apply bg-green-400;
 background-color: var(--secondary);
 }
.testimonial-card {
 transition: all 0.3s ease;
 background: var(--surface);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }
.testimonial-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
.progress-bar {
 height: 4px;
 background: linear-gradient(90deg, var(--primary), var(--secondary));
 animation: progress 2s ease-in-out infinite;
 }
@keyframes progress {
 0% { width: 0%; left: 0; }
 50% { width: 100%; left: 0; }
 100% { width: 0%; left: 100%; }
 }
/* Custom scrollbar */
 ::-webkit-scrollbar {
 width: 8px;
 height: 8px;
 }
::-webkit-scrollbar-track {
 background: var(--gray-100);
 }
::-webkit-scrollbar-thumb {
 background: var(--primary);
 border-radius: 4px;
 }
::-webkit-scrollbar-thumb:hover {
 background: var(--primary-light);
 }
 </style>
</head>
<body class="antialiased">
 <!-- Loading bar -->
 <div class="progress-bar fixed top-0 left-0 w-full z-50"></div>
<!-- Navigation -->
 <nav class="bg-white/90 backdrop-blur-md shadow-sm sticky top-0 z-40 border-b border-gray-100">
 <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">
 <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
 <i class="fas fa-users text-white text-sm"></i>
 </div>
 <span class="ml-2 text-xl font-bold text-gray-900">CollectiveShare</span>
 </div>
 <div class="hidden lg:ml-8 lg:flex lg:space-x-6">
 <a href="#" class="nav-link text-gray-900 px-1 pt-1 text-sm font-medium flex items-center">
 <span>Home</span>
 </a>
 <a href="#how-it-works" class="nav-link text-gray-500 hover:text-gray-900 px-1 pt-1 text-sm font-medium flex items-center">
 <span>How It Works</span>
 </a>
 <a href="#benefits" class="nav-link text-gray-500 hover:text-gray-900 px-1 pt-1 text-sm font-medium flex items-center">
 <span>Benefits</span>
 </a>
 <a href="#testimonials" class="nav-link text-gray-500 hover:text-gray-900 px-1 pt-1 text-sm font-medium flex items-center">
 <span>Stories</span>
 </a>
 <a href="#pricing" class="nav-link text-gray-500 hover:text-gray-900 px-1 pt-1 text-sm font-medium flex items-center">
 <span>Pricing</span>
 </a>
 </div>
 </div>
 <div class="hidden lg:ml-6 lg:flex lg:items-center">
 <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
 Sign In
 </a>
 <button class="ml-4 btn-primary text-white px-4 py-2 rounded-lg text-sm font-medium">
 Join Now
 </button>
 </div>
 <div class="-mr-2 flex items-center lg:hidden">
 <button id="mobile-menu-button" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
 <span class="sr-only">Open main menu</span>
 <i class="fas fa-bars"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Mobile menu -->
 <div id="mobile-menu" class="lg:hidden hidden">
 <div class="pt-2 pb-3 space-y-1 px-4">
 <a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium rounded-md">Home</a>
 <a href="#how-it-works" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium rounded-md">How It Works</a>
 <a href="#benefits" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium rounded-md">Benefits</a>
 <a href="#testimonials" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium rounded-md">Stories</a>
 <a href="#pricing" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium rounded-md">Pricing</a>
 <div class="mt-4 pt-4 border-t border-gray-200">
 <button class="w-full btn-primary text-white px-4 py-2 rounded-lg text-base font-medium">
 Join Now
 </button>
 <div class="mt-3 text-center">
 <a href="#" class="text-indigo-600 hover:text-indigo-500 text-base font-medium">
 Sign In
 </a>
 </div>
 </div>
 </div>
 </div>
 </nav>
<!-- Hero Section -->
 <div class="gradient-bg text-white relative overflow-hidden">
 <div class="absolute top-0 left-0 w-full h-full opacity-10">
 <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-white opacity-20 mix-blend-overlay"></div>
 <div class="absolute top-2/3 left-2/3 w-96 h-96 rounded-full bg-white opacity-20 mix-blend-overlay"></div>
 </div>
<div class="max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8 relative">
 <div class="text-center fade-in">
 <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
 <span class="block">Power in Numbers for</span>
 <span class="block">Independent Workers</span>
 </h1>
 <p class="mt-6 max-w-2xl mx-auto text-xl text-indigo-100">
 Access affordable benefits through peer-to-peer sharing and group pooling. Health insurance, childcare, transportation and more - all at lower costs.
 </p>
 <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
 <a href="#" class="btn-secondary text-indigo-600 px-6 py-3 rounded-lg shadow-sm text-base font-medium">
 Join Collective
 </a>
 <a href="#how-it-works" class="bg-white/10 hover:bg-white/20 text-white px-6 py-3 border border-transparent rounded-lg shadow-sm text-base font-medium transition-all duration-300">
 <div class="flex items-center justify-center">
 <span>How It Works</span>
 <i class="fas fa-chevron-down ml-2 text-sm"></i>
 </div>
 </a>
 </div>
 </div>
<div class="mt-16 max-w-4xl mx-auto slide-up">
 <div class="bg-white/10 backdrop-blur-md rounded-xl shadow-xl overflow-hidden border border-white/20">
 <div class="p-6">
 <div class="flex items-center">
 <div class="flex-shrink-0 bg-white/20 rounded-lg p-3">
 <i class="fas fa-users text-white text-xl"></i>
 </div>
 <div class="ml-4">
 <h3 class="text-lg font-medium text-white">Start a Collective</h3>
 <p class="mt-1 text-sm text-indigo-100">Create or join a group to access better rates on essential benefits.</p>
 </div>
 </div>
 <div class="mt-6 grid grid-cols-1 gap-y-4 gap-x-4 sm:grid-cols-3">
 <div>
 <label for="benefit-type" class="block text-sm font-medium text-indigo-100">Benefit Type</label>
 <div class="mt-1 relative">
 <select id="benefit-type" name="benefit-type" class="input-focus bg-white/10 border border-white/20 text-white rounded-lg focus:ring-2 focus:ring-white focus:border-white block w-full p-2.5 text-sm">
 <option class="text-gray-800">Health Insurance</option>
 <option class="text-gray-800">Childcare</option>
 <option class="text-gray-800">Transportation</option>
 <option class="text-gray-800">Retirement</option>
 <option class="text-gray-800">Education</option>
 </select>
 <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
 <i class="fas fa-chevron-down text-white/70 text-sm"></i>
 </div>
 </div>
 </div>
 <div>
 <label for="group-size" class="block text-sm font-medium text-indigo-100">Group Size</label>
 <div class="mt-1 relative">
 <select id="group-size" name="group-size" class="input-focus bg-white/10 border border-white/20 text-white rounded-lg focus:ring-2 focus:ring-white focus:border-white block w-full p-2.5 text-sm">
 <option class="text-gray-800">5-10 members</option>
 <option class="text-gray-800">11-25 members</option>
 <option class="text-gray-800">26-50 members</option>
 <option class="text-gray-800">50+ members</option>
 </select>
 <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
 <i class="fas fa-chevron-down text-white/70 text-sm"></i>
 </div>
 </div>
 </div>
 <div>
 <label for="location" class="block text-sm font-medium text-indigo-100">Location</label>
 <div class="mt-1 relative">
 <select id="location" name="location" class="input-focus bg-white/10 border border-white/20 text-white rounded-lg focus:ring-2 focus:ring-white focus:border-white block w-full p-2.5 text-sm">
 <option class="text-gray-800">San Francisco</option>
 <option class="text-gray-800">New York</option>
 <option class="text-gray-800">Los Angeles</option>
 <option class="text-gray-800">Chicago</option>
 <option class="text-gray-800">Austin</option>
 </select>
 <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
 <i class="fas fa-chevron-down text-white/70 text-sm"></i>
 </div>
 </div>
 </div>
 </div>
 <div class="mt-6">
 <button type="submit" class="w-full flex justify-center items-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-indigo-600 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white transition-all duration-300">
 <span>Find Collectives</span>
 <i class="fas fa-arrow-right ml-2"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
<div class="mt-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex flex-wrap justify-center gap-8">
 <div class="flex items-center">
 <img src="https://via.placeholder.com/120x40?text=TechCrunch" alt="TechCrunch" class="h-8 opacity-80 hover:opacity-100 transition-opacity">
 </div>
 <div class="flex items-center">
 <img src="https://via.placeholder.com/120x40?text=Forbes" alt="Forbes" class="h-8 opacity-80 hover:opacity-100 transition-opacity">
 </div>
 <div class="flex items-center">
 <img src="https://via.placeholder.com/120x40?text=WSJ" alt="Wall Street Journal" class="h-8 opacity-80 hover:opacity-100 transition-opacity">
 </div>
 <div class="flex items-center">
 <img src="https://via.placeholder.com/120x40?text=NYT" alt="New York Times" class="h-8 opacity-80 hover:opacity-100 transition-opacity">
 </div>
 <div class="flex items-center">
 <img src="https://via.placeholder.com/120x40?text=FastCompany" alt="Fast Company" class="h-8 opacity-80 hover:opacity-100 transition-opacity">
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Stats Section -->
 <div class="bg-white py-16 sm:py-24">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="lg:text-center fade-in">
 <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">By The Numbers</h2>
 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 Collective Power in Action
 </p>
 <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
 Join thousands of independent workers who are already benefiting from collective power
 </p>
 </div>
<div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 border border-gray-100">
 <div class="flex items-center">
 <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
 <i class="fas fa-dollar-sign text-indigo-600 text-xl"></i>
 </div>
 <div class="ml-4">
 <h3 class="text-3xl font-bold text-gray-900">42%</h3>
 <p class="mt-1 text-sm text-gray-500">Average savings on benefits</p>
 </div>
 </div>
 </div>
 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 border border-gray-100">
 <div class="flex items-center">
 <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
 <i class="fas fa-users text-indigo-600 text-xl"></i>
 </div>
 <div class="ml-4">
 <h3 class="text-3xl font-bold text-gray-900">15K+</h3>
 <p class="mt-1 text-sm text-gray-500">Active members in our network</p>
 </div>
 </div>
 </div>
 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 border border-gray-100">
 <div class="flex items-center">
 <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
 <i class="fas fa-handshake text-indigo-600 text-xl"></i>
 </div>
 <div class="ml-4">
 <h3 class="text-3xl font-bold text-gray-900">1,200+</h3>
 <p class="mt-1 text-sm text-gray-500">Active collectives formed</p>
 </div>
 </div>
 </div>
 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 border border-gray-100">
 <div class="flex items-center">
 <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
 <i class="fas fa-heart text-indigo-600 text-xl"></i>
 </div>
 <div class="ml-4">
 <h3 class="text-3xl font-bold text-gray-900">98%</h3>
 <p class="mt-1 text-sm text-gray-500">Member satisfaction rate</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- How It Works Section -->
 <div id="how-it-works" class="bg-gray-50 py-16 sm:py-24">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="lg:text-center fade-in">
 <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Process</h2>
 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 How CollectiveShare Works
 </p>
 <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
 A simple three-step process to access better benefits through collective power.
 </p>
 </div>
<div class="mt-16">
 <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
 <div class="relative">
 <div class="absolute flex items-center justify-center h-12 w-12 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 text-white -left-4 -top-4 shadow-lg">
 <span class="text-xl font-bold">1</span>
 </div>
 <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 h-full border border-gray-100">
 <h3 class="text-lg font-medium text-gray-900 mb-4">Join or Create a Collective</h3>
 <p class="mt-2 text-base text-gray-500">
 Find existing groups in your area or start your own. Our platform helps match you with like-minded professionals.
 </p>
 <div class="mt-6">
 <div class="flex items-center text-indigo-600 hover:text-indigo-500 cursor-pointer transition-colors">
 <i class="fas fa-search mr-2"></i>
 <span class="text-sm font-medium">Browse Collectives</span>
 </div>
 </div>
 </div>
 </div>
 <div class="relative">
 <div class="absolute flex items-center justify-center h-12 w-12 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 text-white -left-4 -top-4 shadow-lg">
 <span class="text-xl font-bold">2</span>
 </div>
 <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 h-full border border-gray-100">
 <h3 class="text-lg font-medium text-gray-900 mb-4">Pool Your Needs</h3>
 <p class="mt-2 text-base text-gray-500">
 Combine your requirements with the group to access bulk rates and better terms from providers.
 </p>
 <div class="mt-6">
 <div class="flex items-center text-indigo-600 hover:text-indigo-500 cursor-pointer transition-colors">
 <i class="fas fa-chart-pie mr-2"></i>
 <span class="text-sm font-medium">View Pooling Options</span>
 </div>
 </div>
 </div>
 </div>
 <div class="relative">
 <div class="absolute flex items-center justify-center h-12 w-12 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 text-white -left-4 -top-4 shadow-lg">
 <span class="text-xl font-bold">3</span>
 </div>
 <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 h-full border border-gray-100">
 <h3 class="text-lg font-medium text-gray-900 mb-4">Access Better Benefits</h3>
 <p class="mt-2 text-base text-gray-500">
 Enjoy premium benefits at affordable rates, with the security of group purchasing power.
 </p>
 <div class="mt-6">
 <div class="flex items-center text-indigo-600 hover:text-indigo-500 cursor-pointer transition-colors">
 <i class="fas fa-check-circle mr-2"></i>
 <span class="text-sm font-medium">See Success Stories</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Benefits Section -->
 <div id="benefits" class="bg-white py-16 sm:py-24">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="lg:text-center fade-in">
 <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Offerings</h2>
 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 Benefits You Can Share
 </p>
 <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
 Access these essential services at rates normally reserved for large corporations.
 </p>
 </div>
<div class="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
 <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
 <div class="p-6">
 <div class="flex items-center">
 <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
 <i class="fas fa-heartbeat text-indigo-600 text-xl"></i>
 </div>
 <div class="ml-4">
 <h3 class="text-lg font-medium text-gray-900">Health Insurance</h3>
 <p class="mt-1 text-sm text-gray-500">Group rates on comprehensive medical coverage</p>
 </div>
 </div>
 <div class="mt-6">
 <ul class="space-y-3">
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Dental, vision, and medical plans</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Pre-negotiated group rates</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Flexible payment options</p>
 </li>
 </ul>
 </div>
 <div class="mt-6">
 <button class="w-full btn-primary text-white px-4 py-2.5 rounded-lg text-sm font-medium">
 Explore Plans
 </button>
 </div>
 </div>
 </div>
 <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
 <div class="p-6">
 <div class="flex items-center">
 <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
 <i class="fas fa-baby text-indigo-600 text-xl"></i>
 </div>
 <div class="ml-4">
 <h3 class="text-lg font-medium text-gray-900">Childcare</h3>
 <p class="mt-1 text-sm text-gray-500">Shared nannies and daycare solutions</p>
 </div>
 </div>
 <div class="mt-6">
 <ul class="space-y-3">
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Vetted childcare providers</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Flexible scheduling</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Neighborhood collectives</p>
 </li>
 </ul>
 </div>
 <div class="mt-6">
 <button class="w-full btn-primary text-white px-4 py-2.5 rounded-lg text-sm font-medium">
 Find Childcare
 </button>
 </div>
 </div>
 </div>
 <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
 <div class="p-6">
 <div class="flex items-center">
 <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
 <i class="fas fa-car text-indigo-600 text-xl"></i>
 </div>
 <div class="ml-4">
 <h3 class="text-lg font-medium text-gray-900">Transportation</h3>
 <p class="mt-1 text-sm text-gray-500">Carpooling and vehicle sharing</p>
 </div>
 </div>
 <div class="mt-6">
 <ul class="space-y-3">
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Commuter benefits</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Vehicle co-ownership</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Parking space sharing</p>
 </li>
 </ul>
 </div>
 <div class="mt-6">
 <button class="w-full btn-primary text-white px-4 py-2.5 rounded-lg text-sm font-medium">
 View Options
 </button>
 </div>
 </div>
 </div>
 <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
 <div class="p-6">
 <div class="flex items-center">
 <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
 <i class="fas fa-graduation-cap text-indigo-600 text-xl"></i>
 </div>
 <div class="ml-4">
 <h3 class="text-lg font-medium text-gray-900">Education</h3>
 <p class="mt-1 text-sm text-gray-500">Group learning and skill sharing</p>
 </div>
 </div>
 <div class="mt-6">
 <ul class="space-y-3">
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Professional development</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Workshop collectives</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Online course sharing</p>
 </li>
 </ul>
 </div>
 <div class="mt-6">
 <button class="w-full btn-primary text-white px-4 py-2.5 rounded-lg text-sm font-medium">
 Learn More
 </button>
 </div>
 </div>
 </div>
 <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
 <div class="p-6">
 <div class="flex items-center">
 <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
 <i class="fas fa-home text-indigo-600 text-xl"></i>
 </div>
 <div class="ml-4">
 <h3 class="text-lg font-medium text-gray-900">Housing</h3>
 <p class="mt-1 text-sm text-gray-500">Co-living and housing collectives</p>
 </div>
 </div>
 <div class="mt-6">
 <ul class="space-y-3">
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Shared living spaces</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Rent negotiation groups</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Furniture sharing</p>
 </li>
 </ul>
 </div>
 <div class="mt-6">
 <button class="w-full btn-primary text-white px-4 py-2.5 rounded-lg text-sm font-medium">
 Find Housing
 </button>
 </div>
 </div>
 </div>
 <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
 <div class="p-6">
 <div class="flex items-center">
 <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
 <i class="fas fa-piggy-bank text-indigo-600 text-xl"></i>
 </div>
 <div class="ml-4">
 <h3 class="text-lg font-medium text-gray-900">Retirement</h3>
 <p class="mt-1 text-sm text-gray-500">Group retirement planning</p>
 </div>
 </div>
 <div class="mt-6">
 <ul class="space-y-3">
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">401(k) alternatives</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Investment collectives</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Financial planning</p>
 </li>
 </ul>
 </div>
 <div class="mt-6">
 <button class="w-full btn-primary text-white px-4 py-2.5 rounded-lg text-sm font-medium">
 Plan Your Future
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Testimonials Section -->
 <div id="testimonials" class="bg-indigo-50 py-16 sm:py-24">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="lg:text-center fade-in">
 <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Success Stories</h2>
 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 What Our Members Say
 </p>
 </div>
<div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
 <div class="testimonial-card rounded-xl p-6 border border-gray-200">
 <div class="flex items-center">
 <div class="flex-shrink-0">
 <img class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
 </div>
 <div class="ml-4">
 <h4 class="text-sm font-medium text-gray-900">Sarah Johnson</h4>
 <p class="text-sm text-gray-500">Freelance Designer</p>
 </div>
 </div>
 <div class="mt-4">
 <p class="text-gray-600 italic">"Through CollectiveShare, I found a health insurance plan that costs 40% less than what I was paying as an individual. The group purchasing power is real!"</p>
 </div>
 <div class="mt-4 flex">
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 </div>
 </div>
 <div class="testimonial-card rounded-xl p-6 border border-gray-200">
 <div class="flex items-center">
 <div class="flex-shrink-0">
 <img class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
 </div>
 <div class="ml-4">
 <h4 class="text-sm font-medium text-gray-900">Michael Chen</h4>
 <p class="text-sm text-gray-500">Gig Economy Worker</p>
 </div>
 </div>
 <div class="mt-4">
 <p class="text-gray-600 italic">"The childcare collective saved my family $800/month. We share a nanny with two other families in our building - it's been life-changing."</p>
 </div>
 <div class="mt-4 flex">
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 </div>
 </div>
 <div class="testimonial-card rounded-xl p-6 border border-gray-200">
 <div class="flex items-center">
 <div class="flex-shrink-0">
 <img class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
 </div>
 <div class="ml-4">
 <h4 class="text-sm font-medium text-gray-900">David Rodriguez</h4>
 <p class="text-sm text-gray-500">Startup Employee</p>
 </div>
 </div>
 <div class="mt-4">
 <p class="text-gray-600 italic">"Our 12-person startup couldn't afford benefits until we joined a larger collective. Now we offer competitive packages to attract talent."</p>
 </div>
 <div class="mt-4 flex">
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 <i class="fas fa-star text-yellow-400"></i>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Pricing Section -->
 <div id="pricing" class="bg-white py-16 sm:py-24">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="lg:text-center fade-in">
 <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Pricing</h2>
 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 Simple, Transparent Pricing
 </p>
 <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
 Pay only for what you need. No hidden fees, no surprises.
 </p>
 </div>
<div class="mt-16 space-y-8 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
 <div class="card-hover bg-white p-8 rounded-xl shadow-md border border-gray-200 relative">
 <div class="absolute top-0 right-0 -mt-4 -mr-4 bg-indigo-600 text-white text-xs font-semibold px-3 py-1 rounded-full">
 Most Popular
 </div>
 <h3 class="text-lg font-medium text-gray-900">Collective Member</h3>
 <p class="mt-4 text-sm text-gray-500">For individuals joining existing collectives</p>
 <div class="mt-6">
 <span class="text-4xl font-bold text-gray-900">$9</span>
 <span class="text-base font-medium text-gray-500">/month</span>
 </div>
 <ul class="mt-6 space-y-4">
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Access to all collectives</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Group rates on benefits</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Basic support</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">2% transaction fee</p>
 </li>
 </ul>
 <div class="mt-8">
 <button class="w-full btn-primary text-white px-4 py-2.5 rounded-lg text-sm font-medium">
 Get Started
 </button>
 </div>
 </div>
 <div class="card-hover bg-white p-8 rounded-xl shadow-md border border-gray-200">
 <h3 class="text-lg font-medium text-gray-900">Collective Starter</h3>
 <p class="mt-4 text-sm text-gray-500">For those starting new collectives</p>
 <div class="mt-6">
 <span class="text-4xl font-bold text-gray-900">$29</span>
 <span class="text-base font-medium text-gray-500">/month</span>
 </div>
 <ul class="mt-6 space-y-4">
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">All Member features</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Create unlimited collectives</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Priority support</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">1% transaction fee</p>
 </li>
 </ul>
 <div class="mt-8">
 <button class="w-full btn-secondary text-gray-900 px-4 py-2.5 rounded-lg text-sm font-medium">
 Get Started
 </button>
 </div>
 </div>
 <div class="card-hover bg-white p-8 rounded-xl shadow-md border border-gray-200">
 <h3 class="text-lg font-medium text-gray-900">Enterprise</h3>
 <p class="mt-4 text-sm text-gray-500">For companies & large groups</p>
 <div class="mt-6">
 <span class="text-4xl font-bold text-gray-900">Custom</span>
 </div>
 <ul class="mt-6 space-y-4">
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">All Starter features</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Dedicated account manager</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Custom integrations</p>
 </li>
 <li class="flex items-start">
 <div class="flex-shrink-0">
 <i class="fas fa-check text-green-500"></i>
 </div>
 <p class="ml-2 text-sm text-gray-600">Volume discounts</p>
 </li>
 </ul>
 <div class="mt-8">
 <button class="w-full btn-secondary text-gray-900 px-4 py-2.5 rounded-lg text-sm font-medium">
 Contact Sales
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- CTA Section -->
 <div class="gradient-bg">
 <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
 <div class="bg-white/10 backdrop-blur-md rounded-2xl px-6 py-16 sm:p-16">
 <div class="max-w-xl mx-auto lg:max-w-none lg:flex lg:items-center lg:justify-between">
 <div>
 <h2 class="text-3xl font-extrabold tracking-tight text-white">
 <span class="block">Ready to join the collective?</span>
 <span class="block text-indigo-200">Start saving on benefits today.</span>
 </h2>
 <p class="mt-4 max-w-2xl text-lg text-indigo-100">
 Join thousands of independent workers who are already benefiting from collective power.
 </p>
 </div>
 <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
 <div class="inline-flex rounded-md shadow">
 <a href="#" class="btn-secondary text-indigo-600 px-6 py-3 rounded-lg text-base font-medium">
 Get Started
 </a>
 </div>
 <div class="ml-3 inline-flex rounded-md shadow">
 <a href="#" class="bg-white/10 hover:bg-white/20 text-white px-6 py-3 border border-transparent rounded-lg text-base font-medium transition-all duration-300">
 Learn More
 </a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- FAQ Section -->
 <div class="bg-gray-50 py-16 sm:py-24">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="lg:text-center fade-in">
 <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Questions</h2>
 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 Frequently Asked Questions
 </p>
 </div>
<div class="mt-12 max-w-3xl mx-auto">
 <div class="space-y-4">
 <div class="bg-white border border-gray-200 rounded-xl overflow-hidden">
 <button class="faq-toggle w-full px-6 py-4 text-left focus:outline-none flex justify-between items-center">
 <h3 class="text-lg font-medium text-gray-900">How does the collective bargaining work?</h3>
 <i class="fas fa-chevron-down text-indigo-600 transition-transform duration-200"></i>
 </button>
 <div class="faq-content px-6 pb-4 hidden">
 <p class="text-gray-600">
 We combine the purchasing power of multiple individuals and small businesses to negotiate with providers.
The larger the collective, the better rates we can secure. Our platform handles all negotiations, contracts,
and compliance so you can focus on your work.
 </p>
 </div>
 </div>
 <div class="bg-white border border-gray-200 rounded-xl overflow-hidden">
 <button class="faq-toggle w-full px-6 py-4 text-left focus:outline-none flex justify-between items-center">
 <h3 class="text-lg font-medium text-gray-900">Is this legal for health insurance?</h3>
 <i class="fas fa-chevron-down text-indigo-600 transition-transform duration-200"></i>
 </button>
 <div class="faq-content px-6 pb-4 hidden">
 <p class="text-gray-600">
 Absolutely. We work with licensed brokers and comply with all state and federal regulations.
Our health insurance collectives are structured as Association Health Plans (AHPs) where permitted,
and we offer fully compliant solutions in all markets.
 </p>
 </div>
 </div>
 <div class="bg-white border border-gray-200 rounded-xl overflow-hidden">
 <button class="faq-toggle w-full px-6 py-4 text-left focus:outline-none flex justify-between items-center">
 <h3 class="text-lg font-medium text-gray-900">How are collectives formed?</h3>
 <i class="fas fa-chevron-down text-indigo-600 transition-transform duration-200"></i>
 </button>
 <div class="faq-content px-6 pb-4 hidden">
 <p class="text-gray-600">
 Collectives can form based on location, profession, or shared needs. You can join an existing collective
or start your own with as few as 5 members. Our matching algorithm helps connect you with the right group.
 </p>
 </div>
 </div>
 <div class="bg-white border border-gray-200 rounded-xl overflow-hidden">
 <button class="faq-toggle w-full px-6 py-4 text-left focus:outline-none flex justify-between items-center">
 <h3 class="text-lg font-medium text-gray-900">What are the costs?</h3>
 <i class="fas fa-chevron-down text-indigo-600 transition-transform duration-200"></i>
 </button>
 <div class="faq-content px-6 pb-4 hidden">
 <p class="text-gray-600">
 Basic membership is free. We charge a small facilitation fee (typically 2-5%) on transactions
and offer premium features through subscription plans. The savings from group rates far outweigh
our fees in most cases.
 </p>
 </div>
 </div>
 <div class="bg-white border border-gray-200 rounded-xl overflow-hidden">
 <button class="faq-toggle w-full px-6 py-4 text-left focus:outline-none flex justify-between items-center">
 <h3 class="text-lg font-medium text-gray-900">How do you ensure trust and safety?</h3>
 <i class="fas fa-chevron-down text-indigo-600 transition-transform duration-200"></i>
 </button>
 <div class="faq-content px-6 pb-4 hidden">
 <p class="text-gray-600">
 All members undergo identity verification. We provide standardized contracts, escrow services for payments,
and dispute resolution. Our review system helps maintain accountability within collectives.
 </p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Footer -->
 <footer class="bg-gray-900 text-gray-300">
 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
 <div class="grid grid-cols-2 md:grid-cols-5 gap-8">
 <div class="col-span-2">
 <div class="flex items-center">
 <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
 <i class="fas fa-users text-white text-sm"></i>
 </div>
 <span class="ml-2 text-xl font-bold text-white">CollectiveShare</span>
 </div>
 <p class="mt-4 text-sm text-gray-400">
 Revolutionizing how Silicon Valley's precarious workforce accesses essential benefits through peer-to-peer sharing and group pooling.
 </p>
 <div class="mt-6 flex space-x-6">
 <a href="#" class="text-gray-400 hover:text-white">
 <i class="fab fa-facebook-f"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-white">
 <i class="fab fa-twitter"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-white">
 <i class="fab fa-instagram"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-white">
 <i class="fab fa-linkedin-in"></i>
 </a>
 </div>
 </div>
 <div>
 <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Solutions</h3>
 <ul class="mt-4 space-y-3">
 <li><a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">Health Insurance</a></li>
 <li><a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">Childcare</a></li>
 <li><a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">Transportation</a></li>
 <li><a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">Retirement</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Support</h3>
 <ul class="mt-4 space-y-3">
 <li><a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">Help Center</a></li>
 <li><a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">Community</a></li>
 <li><a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">Guides</a></li>
 <li><a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">Contact</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-sm font-semibold text-white tracking-wider uppercase">Company</h3>
 <ul class="mt-4 space-y-3">
 <li><a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">About</a></li>
 <li><a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">Blog</a></li>
 <li><a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">Careers</a></li>
 <li><a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">Press</a></li>
 </ul>
 </div>
 </div>
 <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
 <p class="text-sm text-gray-400">
 &copy; 2023 CollectiveShare. All rights reserved.
 </p>
 <div class="mt-4 md:mt-0 flex space-x-6">
 <a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">Privacy</a>
 <a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">Terms</a>
 <a href="#" class="text-sm text-gray-400 hover:text-white transition-colors">Compliance</a>
 </div>
 </div>
 </div>
 </footer>
<script>
 // Mobile menu toggle
 document.getElementById('mobile-menu-button').addEventListener('click', function() {
 const mobileMenu = document.getElementById('mobile-menu');
 mobileMenu.classList.toggle('hidden');
// Change icon
 const icon = this.querySelector('i');
 if (mobileMenu.classList.contains('hidden')) {
 icon.classList.remove('fa-times');
 icon.classList.add('fa-bars');
 } else {
 icon.classList.remove('fa-bars');
 icon.classList.add('fa-times');
 }
 });
 // FAQ toggle functionality
 const faqToggles = document.querySelectorAll('.faq-toggle');
 faqToggles.forEach(toggle => {
 toggle.addEventListener('click', function() {
 const content = this.nextElementSibling;
 const icon = this.querySelector('i');
// Toggle content
 content.classList.toggle('hidden');
// Rotate icon
 if (content.classList.contains('hidden')) {
 icon.style.transform = 'rotate(0deg)';
 } else {
 icon.style.transform = 'rotate(180deg)';
 }
 });
 });
 // Smooth scrolling for anchor links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function (e) {
 e.preventDefault();
const targetId = this.getAttribute('href');
 if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
 if (targetElement) {
 // Close mobile menu if open
 const mobileMenu = document.getElementById('mobile-menu');
 if (!mobileMenu.classList.contains('hidden')) {
 mobileMenu.classList.add('hidden');
 document.getElementById('mobile-menu-button').querySelector('i').classList.remove('fa-times');
 document.getElementById('mobile-menu-button').querySelector('i').classList.add('fa-bars');
 }
// Scroll to target
 targetElement.scrollIntoView({
 behavior: 'smooth'
 });
 }
 });
 });
 // Add fade-in animation to elements when they come into view
 const fadeElements = document.querySelectorAll('.fade-in');
 const slideElements = document.querySelectorAll('.slide-up');
const observerOptions = {
 threshold: 0.1,
 rootMargin: '0px 0px -50px 0px'
 };
const fadeObserver = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 entry.target.classList.add('animate-fadeIn');
 }
 });
 }, observerOptions);
const slideObserver = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 entry.target.classList.add('animate-slideUp');
 }
 });
 }, observerOptions);
fadeElements.forEach(element => {
 fadeObserver.observe(element);
 });
slideElements.forEach(element => {
 slideObserver.observe(element);
 });
 // Loading bar animation
 setTimeout(() => {
 document.querySelector('.progress-bar').style.display = 'none';
 }, 2000);
 </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=LukasBe/collectiveshare-sv" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>