Premium
0
16
Unity Grove
Award Winning Creators
Download Codebase
Commercial License<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unity Grove - Award Winning Creators</title>
<meta name="description" content="Unity Grove is a visual Tailwind CSS creative gallery template for featuring award-winning artists, design projects, and portfolio collections.">
<meta name="keywords" content="Unity Grove, Tailwind CSS template, HTML website template, creative portfolio template, art gallery landing page, visual artists, responsive showcase design">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #fff;
color: #000;
}
.perspective-container {
perspective: 1200px;
}
.gallery-item {
transition: transform 0.5s ease;
}
.gallery-item:hover {
transform: scale(1.05) translateY(-10px) !important;
z-index: 50;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body class="overflow-x-hidden">
<!-- block:start navigation -->
<nav id="header" class="fixed top-0 left-0 w-full bg-white/80 backdrop-blur-md z-50 border-b border-gray-100">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-black rounded-lg flex items-center justify-center text-white">
<i class="fa-solid fa-shapes text-xs"></i>
</div>
<span class="font-bold text-xl tracking-tighter">Unity Grove</span>
</div>
<div class="hidden md:flex items-center gap-8 text-sm font-medium">
<a href="#hero" class="hover:opacity-60 transition">Home</a>
<a href="#features" class="hover:opacity-60 transition">Features</a>
<a href="#gallery" class="hover:opacity-60 transition">Gallery</a>
<a href="#reviews" class="hover:opacity-60 transition">Community</a>
<a href="#pricing" class="hover:opacity-60 transition">Membership</a>
</div>
<div class="flex items-center gap-4">
<button class="text-sm font-semibold hover:opacity-60 transition">Login</button>
<button class="bg-black text-white px-5 py-2.5 rounded-full text-sm font-bold hover:bg-zinc-800 transition">
Get Started
</button>
</div>
</div>
</nav>
<!-- block:end navigation -->
<!-- block:start hero -->
<section id="hero" class="relative pt-40 pb-20 overflow-hidden bg-white">
<div class="max-w-5xl mx-auto px-6 text-center mb-20">
<span class="text-sm font-bold text-gray-500 uppercase tracking-widest mb-6 block">Today's Pick</span>
<h1 class="text-6xl md:text-8xl font-extrabold tracking-tighter mb-8 leading-[0.9]">
AWARD WINNING<br/>CREATORS
</h1>
<p class="text-gray-400 text-lg md:text-xl max-w-2xl mx-auto font-medium leading-relaxed mb-10">
Explore a collection <span class="text-gray-300">where art and design merge to shape what's next.</span> This gallery isn't just about visuals.
</p>
<button class="bg-black text-white px-10 py-4 rounded-full font-bold text-lg hover:scale-105 transition-transform shadow-xl shadow-black/10">
Start for Free
</button>
</div>
<!-- Curved Perspective Gallery -->
<div class="perspective-container relative w-full h-[500px] flex items-center justify-center gap-4 overflow-x-auto no-scrollbar px-[10%]">
<!-- Left skewed -->
<div class="gallery-item flex-shrink-0 w-64 md:w-80 h-[450px] rounded-[3rem] overflow-hidden shadow-2xl border-4 border-white transform rotate-y-[25deg] rotate-x-[5deg] -translate-x-12 translate-y-8">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_ec7610cb95_27f2212bad462ec1.png" alt="lush green mountain ridges covered in morning fog, cinematic landscape photography" />
</div>
<div class="gallery-item flex-shrink-0 w-64 md:w-80 h-[450px] rounded-[3rem] overflow-hidden shadow-2xl border-4 border-white transform rotate-y-[15deg] rotate-x-[2deg] -translate-x-4">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_7e75e26c7a_738ea54dd356f2b1.png" alt="vintage airplane flying through palm trees against a clear blue sky, nostalgic aesthetic" />
</div>
<!-- Center straight -->
<div class="gallery-item flex-shrink-0 w-64 md:w-80 h-[450px] rounded-[3rem] overflow-hidden shadow-2xl border-4 border-white z-10 -translate-y-4">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_d511b287c3_2bb2f9a6781a5aab.png" alt="minimalist modern architecture with infinity pool and palm trees at dusk" />
</div>
<div class="gallery-item flex-shrink-0 w-64 md:w-80 h-[450px] rounded-[3rem] overflow-hidden shadow-2xl border-4 border-white z-10 -translate-y-8">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_eafe222c3e_b9121c7c535a26f2.png" alt="red and orange autumn leaves on trees with bright sunlight peeking through" />
</div>
<!-- Right skewed -->
<div class="gallery-item flex-shrink-0 w-64 md:w-80 h-[450px] rounded-[3rem] overflow-hidden shadow-2xl border-4 border-white transform rotate-y-[-15deg] rotate-x-[2deg] translate-x-4">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_1c06adb705_4af99624a4285ce9.png" alt="surreal monolithic sculpture in a misty field, futuristic brutalist art" />
</div>
<div class="gallery-item flex-shrink-0 w-64 md:w-80 h-[450px] rounded-[3rem] overflow-hidden shadow-2xl border-4 border-white transform rotate-y-[-25deg] rotate-x-[5deg] translate-x-12 translate-y-8">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_161394cecc_13950ec4e1740865.png" alt="scenic mountain valley with red flowers and white clouds, epic nature shot" />
</div>
</div>
</section>
<!-- block:end hero -->
<!-- block:start features -->
<section id="features" class="py-32 bg-white">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-20">
<h2 class="text-5xl font-extrabold tracking-tighter mb-4">Powerful Features for Creators</h2>
<p class="text-gray-500 max-w-2xl mx-auto">Everything you need to showcase, connect, and grow your creative career in one place.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
<div class="space-y-4">
<div class="w-12 h-12 bg-zinc-100 rounded-2xl flex items-center justify-center">
<i class="fa-solid fa-palette text-xl"></i>
</div>
<h4 class="text-xl font-bold">Curated Showcase</h4>
<p class="text-gray-500 leading-relaxed">Submit your work to our curated collections and get featured in front of global art directors and fans.</p>
</div>
<div class="space-y-4">
<div class="w-12 h-12 bg-zinc-100 rounded-2xl flex items-center justify-center">
<i class="fa-solid fa-users text-xl"></i>
</div>
<h4 class="text-xl font-bold">Vibrant Community</h4>
<p class="text-gray-500 leading-relaxed">Connect with fellow artists, share feedback, and collaborate on groundbreaking projects across the globe.</p>
</div>
<div class="space-y-4">
<div class="w-12 h-12 bg-zinc-100 rounded-2xl flex items-center justify-center">
<i class="fa-solid fa-chart-line text-xl"></i>
</div>
<h4 class="text-xl font-bold">Growth Tools</h4>
<p class="text-gray-500 leading-relaxed">Access detailed analytics on your portfolio performance and get personalized tips to boost your reach.</p>
</div>
</div>
</div>
</section>
<!-- block:end features -->
<!-- block:start reviews -->
<section id="reviews" class="py-32 bg-zinc-50 border-y border-gray-100">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
<div>
<h2 class="text-5xl font-extrabold tracking-tighter mb-8">Loved by the<br/>global creative community.</h2>
<p class="text-gray-500 text-lg mb-12">We provide the stage, you bring the vision. Join over 50,000 creators who found their home here.</p>
<div class="flex items-center gap-4">
<div class="flex -space-x-3">
<img class="w-12 h-12 rounded-full border-4 border-white" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" alt="">
<img class="w-12 h-12 rounded-full border-4 border-white" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" alt="">
<img class="w-12 h-12 rounded-full border-4 border-white" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" alt="">
</div>
<div class="text-sm font-bold">
<span class="block">4.9/5 Rating</span>
<span class="text-gray-400 font-medium">from verified users</span>
</div>
</div>
</div>
<div class="space-y-6">
<div class="bg-white p-8 rounded-3xl shadow-sm border border-gray-100">
<div class="flex text-amber-400 mb-4 text-xs gap-1">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<p class="text-lg font-medium mb-6">"Unity Grove has completely changed how I showcase my work. The perspective on presentation is unique and high-end."</p>
<div class="flex items-center gap-3">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-5.jpg" class="w-10 h-10 rounded-full" alt="">
<div>
<p class="font-bold text-sm">Elena Soroka</p>
<p class="text-xs text-gray-400">Digital Artist</p>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-3xl shadow-sm border border-gray-100 ml-0 lg:ml-12">
<div class="flex text-amber-400 mb-4 text-xs gap-1">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<p class="text-lg font-medium mb-6">"The community feedback and the curated gallery picks are top-notch. It's the only portfolio site I need."</p>
<div class="flex items-center gap-3">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-9.jpg" class="w-10 h-10 rounded-full" alt="">
<div>
<p class="font-bold text-sm">Marcus Thorne</p>
<p class="text-xs text-gray-400">Architectural Designer</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end reviews -->
<!-- block:start gallery -->
<section id="gallery" class="py-32 bg-white">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-20">
<h2 class="text-5xl font-extrabold tracking-tighter mb-4">Gallery Masterpieces</h2>
<p class="text-gray-500">A hand-picked selection of the most inspiring works from our members.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="group relative overflow-hidden rounded-[2.5rem] aspect-square">
<img class="w-full h-full object-cover transition duration-500 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_1465bceb05_e011857edccdaaee.png" alt="vibrant digital art landscape, ethereal lighting, high-end design aesthetic" />
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-8">
<div class="text-white">
<p class="font-bold text-lg">Ethereal Realms</p>
<p class="text-sm opacity-70">by Julian Vance</p>
</div>
</div>
</div>
<div class="group relative overflow-hidden rounded-[2.5rem] aspect-square">
<img class="w-full h-full object-cover transition duration-500 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_dc547658fd_b897c596c9d5b52d.png" alt="neon city portrait illustration, futuristic cyberpunk vibe, sharp detail" />
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-8">
<div class="text-white">
<p class="font-bold text-lg">Neon Dreams</p>
<p class="text-sm opacity-70">by Sarah Jenkins</p>
</div>
</div>
</div>
<div class="group relative overflow-hidden rounded-[2.5rem] aspect-square">
<img class="w-full h-full object-cover transition duration-500 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_3d71bb5640_59ec39566abd8dbd.png" alt="minimalist architectural photography, clean lines, urban silence, high contrast" />
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-8">
<div class="text-white">
<p class="font-bold text-lg">Urban Silence</p>
<p class="text-sm opacity-70">by Liam Thorne</p>
</div>
</div>
</div>
</div>
<div class="mt-16 text-center">
<button class="bg-black text-white px-8 py-3 rounded-full font-bold hover:scale-105 transition">Explore Full Gallery</button>
</div>
</div>
</section>
<!-- block:end gallery -->
<!-- block:start pricing -->
<section id="pricing" class="py-32 bg-zinc-50 border-t border-gray-100">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-20">
<h2 class="text-5xl font-extrabold tracking-tighter mb-4">Choose your journey.</h2>
<p class="text-gray-500">Simple, transparent plans for creators of all levels.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Free -->
<div class="p-10 rounded-[3rem] bg-white border border-gray-100 flex flex-col hover:border-black transition-colors duration-500 shadow-sm">
<h3 class="text-xl font-bold mb-2">Sprout</h3>
<div class="mb-8 flex items-baseline gap-1">
<span class="text-5xl font-extrabold">$0</span>
<span class="text-gray-400 font-medium">/mo</span>
</div>
<ul class="space-y-4 mb-12 flex-grow">
<li class="flex items-center gap-3 text-sm text-gray-600"><i class="fa-solid fa-check text-black"></i> 3 Public Collections</li>
<li class="flex items-center gap-3 text-sm text-gray-600"><i class="fa-solid fa-check text-black"></i> Community Access</li>
<li class="flex items-center gap-3 text-sm text-gray-400 opacity-50"><i class="fa-solid fa-xmark"></i> High-Res Downloads</li>
</ul>
<button class="w-full py-4 rounded-full border-2 border-black font-bold hover:bg-black hover:text-white transition">Join for Free</button>
</div>
<!-- Pro -->
<div class="p-10 rounded-[3rem] bg-black text-white flex flex-col relative overflow-hidden shadow-2xl scale-105">
<div class="absolute top-6 right-6 bg-white/10 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest">Most Popular</div>
<h3 class="text-xl font-bold mb-2">Bloom</h3>
<div class="mb-8 flex items-baseline gap-1">
<span class="text-5xl font-extrabold">$19</span>
<span class="text-white/40 font-medium">/mo</span>
</div>
<ul class="space-y-4 mb-12 flex-grow">
<li class="flex items-center gap-3 text-sm text-white/80"><i class="fa-solid fa-check text-white"></i> Unlimited Collections</li>
<li class="flex items-center gap-3 text-sm text-white/80"><i class="fa-solid fa-check text-white"></i> Pro Analytics</li>
<li class="flex items-center gap-3 text-sm text-white/80"><i class="fa-solid fa-check text-white"></i> Custom Domain</li>
</ul>
<button class="w-full py-4 rounded-full bg-white text-black font-bold hover:bg-gray-100 transition shadow-lg">Go Pro Now</button>
</div>
<!-- Agency -->
<div class="p-10 rounded-[3rem] bg-white border border-gray-100 flex flex-col hover:border-black transition-colors duration-500 shadow-sm">
<h3 class="text-xl font-bold mb-2">Studio</h3>
<div class="mb-8 flex items-baseline gap-1">
<span class="text-5xl font-extrabold">$49</span>
<span class="text-gray-400 font-medium">/mo</span>
</div>
<ul class="space-y-4 mb-12 flex-grow">
<li class="flex items-center gap-3 text-sm text-gray-600"><i class="fa-solid fa-check text-black"></i> Team Collaboration</li>
<li class="flex items-center gap-3 text-sm text-gray-600"><i class="fa-solid fa-check text-black"></i> Priority Support</li>
<li class="flex items-center gap-3 text-sm text-gray-600"><i class="fa-solid fa-check text-black"></i> White-label Portfolios</li>
</ul>
<button class="w-full py-4 rounded-full border-2 border-black font-bold hover:bg-black hover:text-white transition">Contact Sales</button>
</div>
</div>
</div>
</section>
<!-- block:end pricing -->
<!-- block:start contact -->
<section id="contact" class="py-32 bg-white">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-5xl font-extrabold tracking-tighter mb-8 leading-tight">Ready to showcase your award-winning work?</h2>
<p class="text-gray-500 text-lg mb-12 max-w-2xl mx-auto">Drop us a line to discuss features, partnerships, or just to say hi. Our team is always here for the creators.</p>
<form class="bg-zinc-50 p-8 md:p-12 rounded-[3rem] shadow-sm text-left border border-gray-100">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-2">Full Name</label>
<input type="text" class="w-full px-6 py-4 rounded-2xl bg-white border-none focus:ring-2 focus:ring-black outline-none transition" placeholder="John Doe">
</div>
<div>
<label class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-2">Email Address</label>
<input type="email" class="w-full px-6 py-4 rounded-2xl bg-white border-none focus:ring-2 focus:ring-black outline-none transition" placeholder="john@example.com">
</div>
</div>
<div class="mb-8">
<label class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-2">Message</label>
<textarea rows="4" class="w-full px-6 py-4 rounded-2xl bg-white border-none focus:ring-2 focus:ring-black outline-none transition" placeholder="Tell us about your creative goals..."></textarea>
</div>
<button class="w-full bg-black text-white py-5 rounded-full font-bold text-lg hover:bg-zinc-800 transition shadow-lg shadow-black/20">
Send Inquiry
</button>
</form>
</div>
</section>
<!-- block:end contact -->
<!-- block:start footer -->
<footer id="footer" class="bg-white pt-24 pb-12">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-20">
<div class="col-span-1 md:col-span-1">
<div class="flex items-center gap-2 mb-6">
<div class="w-8 h-8 bg-black rounded-lg flex items-center justify-center text-white">
<i class="fa-solid fa-shapes text-xs"></i>
</div>
<span class="font-bold text-xl tracking-tighter">Unity Grove</span>
</div>
<p class="text-gray-400 text-sm leading-relaxed mb-6">The premier destination for award-winning creators to showcase their art and design to the world.</p>
<div class="flex gap-4">
<a href="#" class="w-10 h-10 rounded-full bg-zinc-50 flex items-center justify-center text-gray-400 hover:text-black transition"><i class="fa-brands fa-twitter"></i></a>
<a href="#" class="w-10 h-10 rounded-full bg-zinc-50 flex items-center justify-center text-gray-400 hover:text-black transition"><i class="fa-brands fa-instagram"></i></a>
<a href="#" class="w-10 h-10 rounded-full bg-zinc-50 flex items-center justify-center text-gray-400 hover:text-black transition"><i class="fa-brands fa-linkedin"></i></a>
</div>
</div>
<div>
<h4 class="font-bold text-xs uppercase tracking-widest mb-6">Platform</h4>
<ul class="space-y-4 text-sm text-gray-500 font-medium">
<li><a href="#" class="hover:text-black transition">Browse Gallery</a></li>
<li><a href="#" class="hover:text-black transition">Top Creators</a></li>
<li><a href="#" class="hover:text-black transition">Competitions</a></li>
<li><a href="#" class="hover:text-black transition">Resources</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-xs uppercase tracking-widest mb-6">Company</h4>
<ul class="space-y-4 text-sm text-gray-500 font-medium">
<li><a href="#" class="hover:text-black transition">About Us</a></li>
<li><a href="#" class="hover:text-black transition">Careers</a></li>
<li><a href="#" class="hover:text-black transition">Blog</a></li>
<li><a href="#" class="hover:text-black transition">Contact</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-xs uppercase tracking-widest mb-6">Newsletter</h4>
<p class="text-gray-400 text-sm mb-6">Get weekly inspiration delivered to your inbox.</p>
<div class="flex gap-2">
<input type="email" placeholder="Email" class="w-full px-4 py-2 bg-zinc-50 rounded-full text-sm outline-none">
<button class="bg-black text-white px-4 py-2 rounded-full text-xs font-bold hover:bg-zinc-800 transition">Join</button>
</div>
</div>
</div>
<div class="pt-8 border-t border-gray-100 flex flex-col md:flex-row justify-between items-center gap-6">
<p class="text-xs text-gray-400">© 2024 Unity Grove. All rights reserved.</p>
<div class="flex gap-8 text-[10px] font-bold text-gray-300 uppercase tracking-widest">
<a href="#" class="hover:text-black transition">Privacy Policy</a>
<a href="#" class="hover:text-black transition">Terms of Service</a>
</div>
</div>
</div>
</footer>
<!-- block:end footer -->
</body>
</html>
Unlimited access to all templates
Unlock our entire library of premium UI kits, dashboards, and landing pages with a single yearly payment.
€60
per year
Get Unlimited Access