755 lines
55 KiB
HTML
755 lines
55 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>VFP Media | Managed Hosting for Artists</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
warm: {
|
|
50: '#fafaf9',
|
|
100: '#f5f5f4',
|
|
200: '#e7e5e4',
|
|
300: '#d6d3d1',
|
|
400: '#a8a29e',
|
|
500: '#78716c',
|
|
600: '#57534e',
|
|
700: '#44403c',
|
|
800: '#292524',
|
|
900: '#1c1917',
|
|
950: '#0c0a09',
|
|
}
|
|
},
|
|
animation: {
|
|
'float': 'float 6s ease-in-out infinite',
|
|
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
},
|
|
keyframes: {
|
|
float: {
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
'50%': { transform: 'translateY(-15px)' },
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
|
|
}
|
|
.reveal.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.reveal-left {
|
|
opacity: 0;
|
|
transform: translateX(-40px);
|
|
transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
|
|
}
|
|
.reveal-left.active {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.reveal-right {
|
|
opacity: 0;
|
|
transform: translateX(40px);
|
|
transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
|
|
}
|
|
.reveal-right.active {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #a8a29e;
|
|
border-radius: 4px;
|
|
}
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: #57534e;
|
|
}
|
|
|
|
/* FAQ Accordion */
|
|
.faq-answer {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease-out;
|
|
}
|
|
.faq-item.active .faq-answer {
|
|
max-height: 200px;
|
|
}
|
|
.faq-item.active .faq-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* Roadmap Timeline */
|
|
.timeline-line::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 24px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: linear-gradient(to bottom, #78716c, #a8a29e, #78716c);
|
|
}
|
|
.dark .timeline-line::before {
|
|
background: linear-gradient(to bottom, #57534e, #78716c, #57534e);
|
|
}
|
|
|
|
/* Mobile Menu */
|
|
#mobile-menu {
|
|
transition: max-height 0.3s ease-out;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
#mobile-menu.open {
|
|
max-height: 300px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-warm-50 text-warm-900 dark:bg-warm-950 dark:text-warm-100 transition-colors duration-300 antialiased overflow-x-hidden">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="fixed w-full z-50 top-0 start-0 border-b border-warm-200 dark:border-warm-800 bg-warm-50/80 dark:bg-warm-950/80 backdrop-blur-md transition-colors duration-300">
|
|
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
|
<a href="#" class="flex items-center space-x-3 rtl:space-x-reverse">
|
|
<div class="w-10 h-10 bg-warm-900 dark:bg-warm-100 rounded-lg flex items-center justify-center">
|
|
<span class="text-warm-100 dark:text-warm-900 font-bold text-lg">V</span>
|
|
</div>
|
|
<span class="self-center text-xl font-bold whitespace-nowrap tracking-tight">VFP<span class="text-warm-500">MEDIA</span></span>
|
|
</a>
|
|
|
|
<div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
|
|
<button id="theme-toggle" type="button" class="text-warm-500 dark:text-warm-400 hover:bg-warm-100 dark:hover:bg-warm-800 focus:outline-none focus:ring-4 focus:ring-warm-200 dark:focus:ring-warm-700 rounded-lg text-sm p-2.5 transition-colors mr-2">
|
|
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
|
|
<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
|
|
</button>
|
|
<button type="button" class="text-white bg-warm-900 hover:bg-warm-700 dark:bg-warm-100 dark:text-warm-900 dark:hover:bg-warm-200 focus:ring-4 focus:outline-none focus:ring-warm-300 font-medium rounded-lg text-sm px-4 py-2 text-center transition-all transform hover:scale-105 hidden md:block">Get Started</button>
|
|
<button id="mobile-menu-btn" type="button" class="md:hidden text-warm-500 hover:text-warm-900 dark:text-warm-400 dark:hover:text-warm-100 focus:outline-none p-2">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="hidden md:block" id="navbar-menu">
|
|
<ul class="flex flex-row space-x-8 mt-0 font-medium">
|
|
<li><a href="#home" class="text-warm-600 dark:text-warm-300 hover:text-warm-900 dark:hover:text-white transition-colors">Home</a></li>
|
|
<li><a href="#features" class="text-warm-600 dark:text-warm-300 hover:text-warm-900 dark:hover:text-white transition-colors">Features</a></li>
|
|
<li><a href="#pricing" class="text-warm-600 dark:text-warm-300 hover:text-warm-900 dark:hover:text-white transition-colors">Pricing</a></li>
|
|
<li><a href="#roadmap" class="text-warm-600 dark:text-warm-300 hover:text-warm-900 dark:hover:text-white transition-colors">Roadmap</a></li>
|
|
<li><a href="#faq" class="text-warm-600 dark:text-warm-300 hover:text-warm-900 dark:hover:text-white transition-colors">FAQ</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div id="mobile-menu" class="md:hidden border-t border-warm-200 dark:border-warm-800">
|
|
<ul class="flex flex-col p-4 space-y-3">
|
|
<li><a href="#home" class="text-warm-600 dark:text-warm-300 hover:text-warm-900 dark:hover:text-white transition-colors block py-2">Home</a></li>
|
|
<li><a href="#features" class="text-warm-600 dark:text-warm-300 hover:text-warm-900 dark:hover:text-white transition-colors block py-2">Features</a></li>
|
|
<li><a href="#pricing" class="text-warm-600 dark:text-warm-300 hover:text-warm-900 dark:hover:text-white transition-colors block py-2">Pricing</a></li>
|
|
<li><a href="#roadmap" class="text-warm-600 dark:text-warm-300 hover:text-warm-900 dark:hover:text-white transition-colors block py-2">Roadmap</a></li>
|
|
<li><a href="#faq" class="text-warm-600 dark:text-warm-300 hover:text-warm-900 dark:hover:text-white transition-colors block py-2">FAQ</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section id="home" class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
|
|
<div class="absolute inset-0 bg-gradient-to-b from-warm-100/50 to-transparent dark:from-warm-900/50 pointer-events-none"></div>
|
|
|
|
<div class="max-w-screen-xl mx-auto px-4 grid lg:grid-cols-2 gap-12 items-center relative z-10">
|
|
<div class="reveal-left order-2 lg:order-1">
|
|
<div class="inline-block px-3 py-1 mb-4 text-xs font-semibold tracking-wider text-warm-500 uppercase bg-warm-100 dark:bg-warm-800 rounded-full">
|
|
Managed Hosting for Artists
|
|
</div>
|
|
<h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight leading-none mb-6">
|
|
Where Art Meets <br>
|
|
<span class="text-transparent bg-clip-text bg-gradient-to-r from-warm-500 to-warm-400">Infrastructure</span>
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-warm-600 dark:text-warm-400 mb-8 max-w-lg leading-relaxed">
|
|
VFP Media provides premium managed hosting designed specifically for artists, designers, and digital creators. Focus on your craft, we'll handle the rest.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<a href="#pricing" class="inline-flex justify-center items-center py-4 px-8 text-base font-medium text-center text-white rounded-lg bg-warm-900 hover:bg-warm-700 dark:bg-warm-100 dark:text-warm-900 dark:hover:bg-warm-200 transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1">
|
|
View Plans
|
|
<svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#features" class="inline-flex justify-center items-center py-4 px-8 text-base font-medium text-center text-warm-900 rounded-lg border border-warm-300 hover:bg-warm-100 dark:text-white dark:border-warm-700 dark:hover:bg-warm-800 transition-colors">
|
|
Learn More
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="grid grid-cols-3 gap-6 mt-12 pt-8 border-t border-warm-200 dark:border-warm-800">
|
|
<div>
|
|
<div class="text-3xl font-bold text-warm-900 dark:text-white">99.9%</div>
|
|
<div class="text-sm text-warm-500">Uptime</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-3xl font-bold text-warm-900 dark:text-white">500+</div>
|
|
<div class="text-sm text-warm-500">Artists</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-3xl font-bold text-warm-900 dark:text-white">24/7</div>
|
|
<div class="text-sm text-warm-500">Support</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative reveal-right order-1 lg:order-2 flex justify-center lg:justify-end">
|
|
<!-- Decorative elements around the logo -->
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[140%] h-[140%] bg-gradient-to-br from-warm-200/40 to-warm-300/20 dark:from-warm-800/40 dark:to-warm-700/20 rounded-full blur-3xl -z-10 animate-pulse-slow"></div>
|
|
|
|
<!-- Logo Container - designed around the cat USB cable -->
|
|
<div class="relative">
|
|
<div class="absolute inset-0 bg-warm-900/5 dark:bg-warm-100/5 rounded-3xl transform rotate-3 scale-105"></div>
|
|
<div class="absolute inset-0 bg-warm-900/5 dark:bg-warm-100/5 rounded-3xl transform -rotate-3 scale-105"></div>
|
|
<div class="relative bg-white dark:bg-warm-900 rounded-3xl p-8 shadow-2xl border border-warm-200 dark:border-warm-800">
|
|
<img src="https://image.qwenlm.ai/public_source/13ef2235-127f-4709-8543-6ed00a2665f3/17f0635c6-dc4c-4718-94b0-b04e43666dc7.png" alt="VFP Media Logo - Cat USB Cable" class="w-full max-w-sm mx-auto object-contain animate-float">
|
|
<div class="text-center mt-6">
|
|
<p class="text-sm text-warm-500 dark:text-warm-400">Connected to your creativity</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section id="features" class="py-24 bg-white dark:bg-warm-900 transition-colors duration-300">
|
|
<div class="max-w-screen-xl mx-auto px-4">
|
|
<div class="text-center mb-16 reveal">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Built for Creative Workflows</h2>
|
|
<p class="text-warm-600 dark:text-warm-400 max-w-2xl mx-auto">Every feature is designed with artists in mind. From portfolio hosting to client galleries, we've got you covered.</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<!-- Feature 1 -->
|
|
<div class="group p-8 rounded-2xl bg-warm-50 dark:bg-warm-800/50 border border-warm-100 dark:border-warm-700 reveal hover:shadow-lg transition-all duration-300 hover:border-warm-300 dark:hover:border-warm-600">
|
|
<div class="w-14 h-14 bg-warm-200 dark:bg-warm-700 rounded-xl flex items-center justify-center mb-6 text-warm-700 dark:text-warm-200 group-hover:scale-110 transition-transform">
|
|
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-3">Blazing Fast CDN</h3>
|
|
<p class="text-warm-600 dark:text-warm-400 leading-relaxed">Global edge network ensures your portfolio loads instantly anywhere in the world. Perfect for high-resolution images and videos.</p>
|
|
</div>
|
|
|
|
<!-- Feature 2 -->
|
|
<div class="group p-8 rounded-2xl bg-warm-50 dark:bg-warm-800/50 border border-warm-100 dark:border-warm-700 reveal delay-100 hover:shadow-lg transition-all duration-300 hover:border-warm-300 dark:hover:border-warm-600">
|
|
<div class="w-14 h-14 bg-warm-200 dark:bg-warm-700 rounded-xl flex items-center justify-center mb-6 text-warm-700 dark:text-warm-200 group-hover:scale-110 transition-transform">
|
|
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-3">Gallery Hosting</h3>
|
|
<p class="text-warm-600 dark:text-warm-400 leading-relaxed">Beautiful, customizable galleries that showcase your work in the best light. Password protection for client previews.</p>
|
|
</div>
|
|
|
|
<!-- Feature 3 -->
|
|
<div class="group p-8 rounded-2xl bg-warm-50 dark:bg-warm-800/50 border border-warm-100 dark:border-warm-700 reveal delay-200 hover:shadow-lg transition-all duration-300 hover:border-warm-300 dark:hover:border-warm-600">
|
|
<div class="w-14 h-14 bg-warm-200 dark:bg-warm-700 rounded-xl flex items-center justify-center mb-6 text-warm-700 dark:text-warm-200 group-hover:scale-110 transition-transform">
|
|
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-3">Enterprise Security</h3>
|
|
<p class="text-warm-600 dark:text-warm-400 leading-relaxed">DDoS protection, SSL certificates, and automated backups included. Your creative work is always safe with us.</p>
|
|
</div>
|
|
|
|
<!-- Feature 4 -->
|
|
<div class="group p-8 rounded-2xl bg-warm-50 dark:bg-warm-800/50 border border-warm-100 dark:border-warm-700 reveal hover:shadow-lg transition-all duration-300 hover:border-warm-300 dark:hover:border-warm-600">
|
|
<div class="w-14 h-14 bg-warm-200 dark:bg-warm-700 rounded-xl flex items-center justify-center mb-6 text-warm-700 dark:text-warm-200 group-hover:scale-110 transition-transform">
|
|
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-3">Custom Domains</h3>
|
|
<p class="text-warm-600 dark:text-warm-400 leading-relaxed">Connect your own domain or use our free subdomains. Easy DNS management and SSL setup included.</p>
|
|
</div>
|
|
|
|
<!-- Feature 5 -->
|
|
<div class="group p-8 rounded-2xl bg-warm-50 dark:bg-warm-800/50 border border-warm-100 dark:border-warm-700 reveal delay-100 hover:shadow-lg transition-all duration-300 hover:border-warm-300 dark:hover:border-warm-600">
|
|
<div class="w-14 h-14 bg-warm-200 dark:bg-warm-700 rounded-xl flex items-center justify-center mb-6 text-warm-700 dark:text-warm-200 group-hover:scale-110 transition-transform">
|
|
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-3">Artist Support</h3>
|
|
<p class="text-warm-600 dark:text-warm-400 leading-relaxed">Our support team understands creative workflows. No scripts, just real help from people who get it.</p>
|
|
</div>
|
|
|
|
<!-- Feature 6 -->
|
|
<div class="group p-8 rounded-2xl bg-warm-50 dark:bg-warm-800/50 border border-warm-100 dark:border-warm-700 reveal delay-200 hover:shadow-lg transition-all duration-300 hover:border-warm-300 dark:hover:border-warm-600">
|
|
<div class="w-14 h-14 bg-warm-200 dark:bg-warm-700 rounded-xl flex items-center justify-center mb-6 text-warm-700 dark:text-warm-200 group-hover:scale-110 transition-transform">
|
|
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-3">One-Click Deploy</h3>
|
|
<p class="text-warm-600 dark:text-warm-400 leading-relaxed">Deploy from Git, upload files, or use our visual builder. Get your site live in minutes, not hours.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing Section -->
|
|
<section id="pricing" class="py-24 bg-warm-50 dark:bg-warm-950 transition-colors duration-300">
|
|
<div class="max-w-screen-xl mx-auto px-4">
|
|
<div class="text-center mb-16 reveal">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Simple, Transparent Pricing</h2>
|
|
<p class="text-warm-600 dark:text-warm-400">No hidden fees. No surprises. Just great hosting for your art.</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
|
<!-- Starter -->
|
|
<div class="p-8 bg-white dark:bg-warm-900 rounded-2xl border border-warm-200 dark:border-warm-800 reveal flex flex-col hover:shadow-xl transition-shadow duration-300">
|
|
<h3 class="text-xl font-semibold text-warm-500 mb-2">Starter</h3>
|
|
<p class="text-sm text-warm-400 mb-6">Perfect for emerging artists</p>
|
|
<div class="text-4xl font-bold mb-6">$9<span class="text-lg text-warm-400 font-normal">/mo</span></div>
|
|
<ul class="space-y-4 mb-8 flex-1">
|
|
<li class="flex items-center text-sm text-warm-600 dark:text-warm-300">
|
|
<svg class="w-5 h-5 mr-3 text-warm-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
|
10GB SSD Storage
|
|
</li>
|
|
<li class="flex items-center text-sm text-warm-600 dark:text-warm-300">
|
|
<svg class="w-5 h-5 mr-3 text-warm-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
|
Free SSL Certificate
|
|
</li>
|
|
<li class="flex items-center text-sm text-warm-600 dark:text-warm-300">
|
|
<svg class="w-5 h-5 mr-3 text-warm-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
|
Email Support
|
|
</li>
|
|
<li class="flex items-center text-sm text-warm-600 dark:text-warm-300">
|
|
<svg class="w-5 h-5 mr-3 text-warm-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
|
1 Website
|
|
</li>
|
|
</ul>
|
|
<button class="w-full py-3 rounded-lg border border-warm-200 dark:border-warm-700 text-warm-900 dark:text-white font-medium hover:bg-warm-100 dark:hover:bg-warm-800 transition-colors">Get Started</button>
|
|
</div>
|
|
|
|
<!-- Professional (Highlighted) -->
|
|
<div class="p-8 bg-warm-900 dark:bg-warm-800 rounded-2xl border-2 border-warm-500 transform md:-translate-y-4 shadow-xl reveal delay-100 flex flex-col relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 bg-warm-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">MOST POPULAR</div>
|
|
<h3 class="text-xl font-semibold text-white mb-2">Professional</h3>
|
|
<p class="text-sm text-warm-300 mb-6">For growing creative businesses</p>
|
|
<div class="text-4xl font-bold mb-6 text-white">$24<span class="text-lg text-warm-400 font-normal">/mo</span></div>
|
|
<ul class="space-y-4 mb-8 flex-1">
|
|
<li class="flex items-center text-sm text-warm-200">
|
|
<svg class="w-5 h-5 mr-3 text-warm-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
|
100GB NVMe Storage
|
|
</li>
|
|
<li class="flex items-center text-sm text-warm-200">
|
|
<svg class="w-5 h-5 mr-3 text-warm-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
|
Priority Support
|
|
</li>
|
|
<li class="flex items-center text-sm text-warm-200">
|
|
<svg class="w-5 h-5 mr-3 text-warm-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
|
Daily Backups
|
|
</li>
|
|
<li class="flex items-center text-sm text-warm-200">
|
|
<svg class="w-5 h-5 mr-3 text-warm-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
|
5 Websites
|
|
</li>
|
|
<li class="flex items-center text-sm text-warm-200">
|
|
<svg class="w-5 h-5 mr-3 text-warm-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
|
Client Galleries
|
|
</li>
|
|
</ul>
|
|
<button class="w-full py-3 rounded-lg bg-warm-100 text-warm-900 font-bold hover:bg-white transition-colors">Get Started</button>
|
|
</div>
|
|
|
|
<!-- Agency -->
|
|
<div class="p-8 bg-white dark:bg-warm-900 rounded-2xl border border-warm-200 dark:border-warm-800 reveal delay-200 flex flex-col hover:shadow-xl transition-shadow duration-300">
|
|
<h3 class="text-xl font-semibold text-warm-500 mb-2">Agency</h3>
|
|
<p class="text-sm text-warm-400 mb-6">For studios and teams</p>
|
|
<div class="text-4xl font-bold mb-6">$49<span class="text-lg text-warm-400 font-normal">/mo</span></div>
|
|
<ul class="space-y-4 mb-8 flex-1">
|
|
<li class="flex items-center text-sm text-warm-600 dark:text-warm-300">
|
|
<svg class="w-5 h-5 mr-3 text-warm-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
|
Unlimited Storage
|
|
</li>
|
|
<li class="flex items-center text-sm text-warm-600 dark:text-warm-300">
|
|
<svg class="w-5 h-5 mr-3 text-warm-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
|
Dedicated IP
|
|
</li>
|
|
<li class="flex items-center text-sm text-warm-600 dark:text-warm-300">
|
|
<svg class="w-5 h-5 mr-3 text-warm-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
|
24/7 Phone Support
|
|
</li>
|
|
<li class="flex items-center text-sm text-warm-600 dark:text-warm-300">
|
|
<svg class="w-5 h-5 mr-3 text-warm-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
|
Unlimited Websites
|
|
</li>
|
|
<li class="flex items-center text-sm text-warm-600 dark:text-warm-300">
|
|
<svg class="w-5 h-5 mr-3 text-warm-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
|
White Label Options
|
|
</li>
|
|
</ul>
|
|
<button class="w-full py-3 rounded-lg border border-warm-200 dark:border-warm-700 text-warm-900 dark:text-white font-medium hover:bg-warm-100 dark:hover:bg-warm-800 transition-colors">Get Started</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Roadmap Section -->
|
|
<section id="roadmap" class="py-24 bg-white dark:bg-warm-900 transition-colors duration-300">
|
|
<div class="max-w-screen-xl mx-auto px-4">
|
|
<div class="text-center mb-16 reveal">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Our Roadmap</h2>
|
|
<p class="text-warm-600 dark:text-warm-400 max-w-2xl mx-auto">We're constantly improving our platform. Here's what we're working on and what's coming next.</p>
|
|
</div>
|
|
|
|
<div class="relative timeline-line max-w-4xl mx-auto">
|
|
<!-- Q1 2024 - Completed -->
|
|
<div class="relative pl-16 pb-12 reveal">
|
|
<div class="absolute left-0 top-0 w-12 h-12 bg-warm-500 rounded-full flex items-center justify-center border-4 border-white dark:border-warm-900">
|
|
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
|
</div>
|
|
<div class="bg-warm-50 dark:bg-warm-800/50 rounded-xl p-6 border border-warm-200 dark:border-warm-700">
|
|
<div class="flex flex-wrap items-center gap-3 mb-3">
|
|
<span class="text-sm font-semibold text-warm-500">Q1 2024</span>
|
|
<span class="px-2 py-1 text-xs bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 rounded-full">Completed</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Platform Launch</h3>
|
|
<p class="text-warm-600 dark:text-warm-400">Initial launch with core hosting features, CDN integration, and artist-focused tools.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q2 2024 - Completed -->
|
|
<div class="relative pl-16 pb-12 reveal delay-100">
|
|
<div class="absolute left-0 top-0 w-12 h-12 bg-warm-500 rounded-full flex items-center justify-center border-4 border-white dark:border-warm-900">
|
|
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
|
</div>
|
|
<div class="bg-warm-50 dark:bg-warm-800/50 rounded-xl p-6 border border-warm-200 dark:border-warm-700">
|
|
<div class="flex flex-wrap items-center gap-3 mb-3">
|
|
<span class="text-sm font-semibold text-warm-500">Q2 2024</span>
|
|
<span class="px-2 py-1 text-xs bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 rounded-full">Completed</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Client Galleries</h3>
|
|
<p class="text-warm-600 dark:text-warm-400">Password-protected galleries for client work, with download tracking and expiration dates.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q3 2024 - In Progress -->
|
|
<div class="relative pl-16 pb-12 reveal delay-200">
|
|
<div class="absolute left-0 top-0 w-12 h-12 bg-warm-400 rounded-full flex items-center justify-center border-4 border-white dark:border-warm-900 animate-pulse">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
</div>
|
|
<div class="bg-warm-50 dark:bg-warm-800/50 rounded-xl p-6 border border-warm-200 dark:border-warm-700">
|
|
<div class="flex flex-wrap items-center gap-3 mb-3">
|
|
<span class="text-sm font-semibold text-warm-500">Q3 2024</span>
|
|
<span class="px-2 py-1 text-xs bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300 rounded-full">In Progress</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">AI Image Optimization</h3>
|
|
<p class="text-warm-600 dark:text-warm-400">Automatic image compression and format conversion using AI to maintain quality while reducing file sizes.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q4 2024 - Planned -->
|
|
<div class="relative pl-16 pb-12 reveal delay-300">
|
|
<div class="absolute left-0 top-0 w-12 h-12 bg-warm-300 rounded-full flex items-center justify-center border-4 border-white dark:border-warm-900">
|
|
<span class="text-warm-600 font-bold text-sm">Q4</span>
|
|
</div>
|
|
<div class="bg-warm-50 dark:bg-warm-800/50 rounded-xl p-6 border border-warm-200 dark:border-warm-700 opacity-75">
|
|
<div class="flex flex-wrap items-center gap-3 mb-3">
|
|
<span class="text-sm font-semibold text-warm-500">Q4 2024</span>
|
|
<span class="px-2 py-1 text-xs bg-warm-100 text-warm-600 dark:bg-warm-700 dark:text-warm-300 rounded-full">Planned</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">Video Streaming</h3>
|
|
<p class="text-warm-600 dark:text-warm-400">Built-in video hosting with adaptive streaming for showreels and motion graphics portfolios.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2025 - Future -->
|
|
<div class="relative pl-16 reveal delay-400">
|
|
<div class="absolute left-0 top-0 w-12 h-12 bg-warm-200 rounded-full flex items-center justify-center border-4 border-white dark:border-warm-900">
|
|
<span class="text-warm-500 font-bold text-xs">2025</span>
|
|
</div>
|
|
<div class="bg-warm-50 dark:bg-warm-800/50 rounded-xl p-6 border border-warm-200 dark:border-warm-700 opacity-60">
|
|
<div class="flex flex-wrap items-center gap-3 mb-3">
|
|
<span class="text-sm font-semibold text-warm-500">2025</span>
|
|
<span class="px-2 py-1 text-xs bg-warm-100 text-warm-600 dark:bg-warm-700 dark:text-warm-300 rounded-full">Future</span>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-2">NFT Integration</h3>
|
|
<p class="text-warm-600 dark:text-warm-400">Seamless NFT minting and marketplace integration for digital artists looking to sell their work.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ Section -->
|
|
<section id="faq" class="py-24 bg-warm-50 dark:bg-warm-950 transition-colors duration-300">
|
|
<div class="max-w-screen-xl mx-auto px-4">
|
|
<div class="text-center mb-16 reveal">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently Asked Questions</h2>
|
|
<p class="text-warm-600 dark:text-warm-400 max-w-2xl mx-auto">Got questions? We've got answers. If you can't find what you're looking for, our support team is here to help.</p>
|
|
</div>
|
|
|
|
<div class="max-w-3xl mx-auto space-y-4">
|
|
<!-- FAQ Item 1 -->
|
|
<div class="faq-item bg-white dark:bg-warm-900 rounded-xl border border-warm-200 dark:border-warm-800 overflow-hidden reveal">
|
|
<button class="faq-question w-full px-6 py-5 text-left flex items-center justify-between hover:bg-warm-50 dark:hover:bg-warm-800/50 transition-colors">
|
|
<span class="font-semibold text-warm-900 dark:text-white">How do I migrate my existing website to VFP Media?</span>
|
|
<svg class="faq-icon w-5 h-5 text-warm-500 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-5 text-warm-600 dark:text-warm-400">
|
|
We offer free migration assistance for all plans. Our team will handle the entire process - just provide us with your current hosting credentials and we'll take care of the rest. Most migrations are completed within 24 hours with zero downtime.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ Item 2 -->
|
|
<div class="faq-item bg-white dark:bg-warm-900 rounded-xl border border-warm-200 dark:border-warm-800 overflow-hidden reveal delay-100">
|
|
<button class="faq-question w-full px-6 py-5 text-left flex items-center justify-between hover:bg-warm-50 dark:hover:bg-warm-800/50 transition-colors">
|
|
<span class="font-semibold text-warm-900 dark:text-white">What kind of support do you offer?</span>
|
|
<svg class="faq-icon w-5 h-5 text-warm-500 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-5 text-warm-600 dark:text-warm-400">
|
|
All plans include email support with responses within 24 hours. Professional plans get priority support with 4-hour response times. Agency plans include 24/7 phone support. Our team consists of artists and developers who understand creative workflows.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ Item 3 -->
|
|
<div class="faq-item bg-white dark:bg-warm-900 rounded-xl border border-warm-200 dark:border-warm-800 overflow-hidden reveal delay-200">
|
|
<button class="faq-question w-full px-6 py-5 text-left flex items-center justify-between hover:bg-warm-50 dark:hover:bg-warm-800/50 transition-colors">
|
|
<span class="font-semibold text-warm-900 dark:text-white">Can I host client work and keep it private?</span>
|
|
<svg class="faq-icon w-5 h-5 text-warm-500 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-5 text-warm-600 dark:text-warm-400">
|
|
Absolutely! Our Professional and Agency plans include client galleries with password protection. You can set expiration dates, track downloads, and customize the viewing experience. Perfect for sharing work-in-progress or final deliverables with clients.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ Item 4 -->
|
|
<div class="faq-item bg-white dark:bg-warm-900 rounded-xl border border-warm-200 dark:border-warm-800 overflow-hidden reveal delay-300">
|
|
<button class="faq-question w-full px-6 py-5 text-left flex items-center justify-between hover:bg-warm-50 dark:hover:bg-warm-800/50 transition-colors">
|
|
<span class="font-semibold text-warm-900 dark:text-white">Is there a money-back guarantee?</span>
|
|
<svg class="faq-icon w-5 h-5 text-warm-500 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-5 text-warm-600 dark:text-warm-400">
|
|
Yes! We offer a 30-day money-back guarantee on all plans. If you're not satisfied with our service for any reason, just contact us within the first 30 days and we'll refund your payment in full. No questions asked.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ Item 5 -->
|
|
<div class="faq-item bg-white dark:bg-warm-900 rounded-xl border border-warm-200 dark:border-warm-800 overflow-hidden reveal delay-400">
|
|
<button class="faq-question w-full px-6 py-5 text-left flex items-center justify-between hover:bg-warm-50 dark:hover:bg-warm-800/50 transition-colors">
|
|
<span class="font-semibold text-warm-900 dark:text-white">What happens if I exceed my storage limit?</span>
|
|
<svg class="faq-icon w-5 h-5 text-warm-500 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-5 text-warm-600 dark:text-warm-400">
|
|
We'll notify you when you're approaching your limit. You can upgrade your plan at any time, or purchase additional storage blocks. There are no overage charges - we believe in transparent pricing. Need more space? Just let us know.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="py-24 bg-warm-900 dark:bg-warm-800 transition-colors duration-300">
|
|
<div class="max-w-screen-xl mx-auto px-4 text-center reveal">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Ready to Elevate Your Online Presence?</h2>
|
|
<p class="text-warm-300 max-w-2xl mx-auto mb-8 text-lg">Join hundreds of artists who trust VFP Media for their hosting needs. Start your 30-day free trial today.</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="#pricing" class="inline-flex justify-center items-center py-4 px-8 text-base font-medium text-center text-warm-900 rounded-lg bg-warm-100 hover:bg-white transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1">
|
|
Start Free Trial
|
|
</a>
|
|
<a href="#contact" class="inline-flex justify-center items-center py-4 px-8 text-base font-medium text-center text-white rounded-lg border border-warm-600 hover:bg-warm-800 transition-colors">
|
|
Contact Sales
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-white dark:bg-warm-900 border-t border-warm-200 dark:border-warm-800 pt-16 pb-8 transition-colors duration-300">
|
|
<div class="max-w-screen-xl mx-auto px-4">
|
|
<div class="grid md:grid-cols-4 gap-8 mb-12">
|
|
<div class="col-span-1 md:col-span-2">
|
|
<div class="flex items-center space-x-3 mb-4">
|
|
<div class="w-10 h-10 bg-warm-900 dark:bg-warm-100 rounded-lg flex items-center justify-center">
|
|
<span class="text-warm-100 dark:text-warm-900 font-bold text-lg">V</span>
|
|
</div>
|
|
<span class="text-xl font-bold tracking-tight">VFP<span class="text-warm-500">MEDIA</span></span>
|
|
</div>
|
|
<p class="text-warm-500 max-w-sm mb-6">Managed hosting designed for artists. We handle the infrastructure so you can focus on creating.</p>
|
|
<div class="flex items-center space-x-4">
|
|
<a href="#" class="text-warm-400 hover:text-warm-900 dark:hover:text-white transition-colors">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
|
|
</a>
|
|
<a href="#" class="text-warm-400 hover:text-warm-900 dark:hover:text-white transition-colors">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.85-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
|
|
</a>
|
|
<a href="#" class="text-warm-400 hover:text-warm-900 dark:hover:text-white transition-colors">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold mb-4 text-warm-900 dark:text-white">Product</h4>
|
|
<ul class="space-y-2 text-warm-500 dark:text-warm-400">
|
|
<li><a href="#features" class="hover:text-warm-900 dark:hover:text-white transition-colors">Features</a></li>
|
|
<li><a href="#pricing" class="hover:text-warm-900 dark:hover:text-white transition-colors">Pricing</a></li>
|
|
<li><a href="#roadmap" class="hover:text-warm-900 dark:hover:text-white transition-colors">Roadmap</a></li>
|
|
<li><a href="#" class="hover:text-warm-900 dark:hover:text-white transition-colors">Documentation</a></li>
|
|
<li><a href="#" class="hover:text-warm-900 dark:hover:text-white transition-colors">API</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold mb-4 text-warm-900 dark:text-white">Company</h4>
|
|
<ul class="space-y-2 text-warm-500 dark:text-warm-400">
|
|
<li><a href="#" class="hover:text-warm-900 dark:hover:text-white transition-colors">About</a></li>
|
|
<li><a href="#" class="hover:text-warm-900 dark:hover:text-white transition-colors">Blog</a></li>
|
|
<li><a href="#" class="hover:text-warm-900 dark:hover:text-white transition-colors">Careers</a></li>
|
|
<li><a href="#" class="hover:text-warm-900 dark:hover:text-white transition-colors">Contact</a></li>
|
|
<li><a href="#" class="hover:text-warm-900 dark:hover:text-white transition-colors">Privacy Policy</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-warm-200 dark:border-warm-800 pt-8 flex flex-col md:flex-row justify-between items-center">
|
|
<p class="text-sm text-warm-500">© 2024 VFP Media. All rights reserved.</p>
|
|
<div class="flex items-center space-x-2 mt-4 md:mt-0 text-sm text-warm-500">
|
|
<span>Made with</span>
|
|
<svg class="w-4 h-4 text-warm-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
|
|
<span>for artists everywhere</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Theme Toggle Logic
|
|
const themeToggleBtn = document.getElementById('theme-toggle');
|
|
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
|
|
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
|
|
|
|
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
document.documentElement.classList.add('dark');
|
|
themeToggleLightIcon.classList.remove('hidden');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
themeToggleDarkIcon.classList.remove('hidden');
|
|
}
|
|
|
|
themeToggleBtn.addEventListener('click', function() {
|
|
themeToggleDarkIcon.classList.toggle('hidden');
|
|
themeToggleLightIcon.classList.toggle('hidden');
|
|
|
|
if (localStorage.getItem('color-theme')) {
|
|
if (localStorage.getItem('color-theme') === 'light') {
|
|
document.documentElement.classList.add('dark');
|
|
localStorage.setItem('color-theme', 'dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
localStorage.setItem('color-theme', 'light');
|
|
}
|
|
} else {
|
|
if (document.documentElement.classList.contains('dark')) {
|
|
document.documentElement.classList.remove('dark');
|
|
localStorage.setItem('color-theme', 'light');
|
|
} else {
|
|
document.documentElement.classList.add('dark');
|
|
localStorage.setItem('color-theme', 'dark');
|
|
}
|
|
}
|
|
});
|
|
|
|
// Mobile Menu Toggle
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
mobileMenuBtn.addEventListener('click', function() {
|
|
mobileMenu.classList.toggle('open');
|
|
});
|
|
|
|
// Close mobile menu when clicking a link
|
|
mobileMenu.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
mobileMenu.classList.remove('open');
|
|
});
|
|
});
|
|
|
|
// Scroll Animation Logic
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '0px',
|
|
threshold: 0.1
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('active');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
document.querySelectorAll('.reveal, .reveal-left, .reveal-right').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
// FAQ Accordion Logic
|
|
document.querySelectorAll('.faq-question').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
const faqItem = button.parentElement;
|
|
const wasActive = faqItem.classList.contains('active');
|
|
|
|
// Close all FAQ items
|
|
document.querySelectorAll('.faq-item').forEach(item => {
|
|
item.classList.remove('active');
|
|
});
|
|
|
|
// Open clicked item if it wasn't already open
|
|
if (!wasActive) {
|
|
faqItem.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Smooth scroll 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) {
|
|
const navHeight = document.querySelector('nav').offsetHeight;
|
|
const targetPosition = targetElement.offsetTop - navHeight;
|
|
|
|
window.scrollTo({
|
|
top: targetPosition,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|