Flip card animation testimonial
Category: Testimonials
create a canvas to display a testimonial component. we want the testimonial component to be centered and the space around it to be flexible empty.
reproduce this testimonial component
Below is the component for your context <!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>FOLLOW.ART - Recreated</title>
<style>
body { background-color: #000; color: #fff; }
</style>
<style type="text/tailwindcss">@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: 'Hardbop';
src: url('https://fonts.cdnfonts.com/css/hardbop') format('woff2');
font-weight: 700;
font-style: normal;
}
@layer base {
body {
@apply m-0 p-0;
}
.text-h2 {
@apply font-primary text-[228px] font-bold leading-[180px] uppercase tracking-tighter;
}
}
.underline-text-piece {
@apply relative inline-block;
}
.underline-text-piece__decoration {
@apply absolute bottom-[-4px] left-0 w-full h-[4px] overflow-hidden;
}
.section-layer-sticky {
@apply sticky top-0 w-full h-screen overflow-hidden flex flex-col;
}
@keyframes shake {
0% { transform: translate(0, 0); }
25% { transform: translate(2px, -2px); }
50% { transform: translate(-2px, 2px); }
75% { transform: translate(2px, 2px); }
100% { transform: translate(0, 0); }
}
.icon-shake {
animation: shake 0.5s ease-in-out infinite;
}
.section-4__card {
@apply transition-transform duration-500 preserve-3d;
}
.section-4__card:hover {
transform: rotateY(180deg);
}
.preserve-3d {
transform-style: preserve-3d;
}
.backface-hidden {
backface-visibility: hidden;
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'art-orange': '#f4793a',
'art-pink': '#c5939d',
'art-blue': '#8498ac',
'art-green': '#8e9487',
'art-black': '#000000',
},
fontFamily: {
'primary': ['Hardbop', 'Helvetica', 'Arial', 'sans-serif'],
'secondary': ['HeadingNow', 'Helvetica', 'Arial', 'sans-serif'],
},
spacing: {
'promo-header': '60px',
}
}
}
}</script></head>
<body id="app-root" class="font-secondary antialiased">
<main><div class="relative w-full">
<!-- Sticky Promo Header component -->
<header class="fixed top-0 left-0 w-full h-[60px] bg-art-pink px-5 flex items-center justify-between z-[100] text-blue-700">
<div class="flex items-center gap-10">
<a href="/" class="text-[13px] font-bold text-white uppercase tracking-tighter">FOLLOW. ART</a>
<p class="text-[13px] text-white/60 hidden md:block">Nexus of Curators and Artists</p>
</div>
<nav class="hidden md:flex gap-10 text-[13px] font-medium text-white">
<a href="/about" class="hover:text-black">About</a>
<a href="/nexus-card" class="hover:text-black">Nexus Card</a>
<a href="/community" class="hover:text-black">Community</a>
<a href="/pricing" class="hover:text-black">Pricing</a>
<a href="/faq" class="hover:text-black">FAQ</a>
</nav>
<div class="flex gap-5 text-[13px] font-bold text-white">
<a href="/signin">Login</a>
<a href="/signup">Join</a>
</div>
</header>
<!-- Section 1: Intro Hero -->
<section class="section-layer-sticky bg-art-orange text-white">
<div class="flex-1 flex flex-col justify-center items-center px-5 pt-20">
<div class="w-full max-w-7xl relative">
<h1 class="text-[15vw] md:text-[250px] font-primary leading-none uppercase text-white overflow-hidden">
FOLLOWART
</h1>
<div class="absolute bottom-[-20%] right-[10%] w-[20vw] rotate-[15deg]">
<img src="https://images.unsplash.com/photo-1658780470099-9d1723f601a1?ixid=M3w4NjU0NDF8MHwxfHNlYXJjaHwxfHxkeW5hbWljJTIwZGVjb3JhdGl2ZSUyMGxpbmUlMjBzdmclMjBncmFwaGljc3xlbnwwfHx8d2hpdGV8MTc3MDAyNTY2Mnww&ixlib=rb-4.1.0&w=300&h=200&fit=crop&fm=jpg&q=80" alt="decoration" class="w-full h-auto">
</div>
</div>
</div>
<div class="p-10 flex justify-between items-end">
<p class="text-2xl max-w-xs leading-tight">
Nexus of <br> Curators and <br> Artists
</p>
<div class="w-40 h-20"></div>
</div>
</section>
<!-- Section 2: Video Preview -->
<section class="section-layer-sticky bg-art-green text-white">
<div class="flex-1 grid grid-cols-1 md:grid-cols-2 gap-10 items-center p-10 mt-10">
<div class="relative flex justify-center">
<div class="relative w-[300px] h-[400px] md:w-[480px] md:h-[560px] bg-gray-200 rounded-3xl overflow-hidden shadow-2xl skew-x-3 -rotate-6">
<img src="https://images.unsplash.com/photo-1759184966982-a3a247decb6b?ixid=M3w4NjU0NDF8MHwxfHNlYXJjaHwxfHx2aWJyYW50JTIwYXJ0JTIwcHJldmlldyUyMHZpZGVvJTIwdGh1bWJuYWlsfGVufDB8MXx8fDE3NzAwMjU2NzB8MA&ixlib=rb-4.1.0&w=600&h=800&fit=crop&fm=jpg&q=80" class="w-full h-full object-cover">
<button class="absolute inset-0 m-auto w-20 h-20 bg-art-orange rounded-full flex items-center justify-center text-white text-xl">▶</button>
</div>
<img src="https://images.unsplash.com/photo-1647554195187-17a1cca17256?ixid=M3w4NjU0NDF8MHwxfHNlYXJjaHwxfHxoZWxpeCUyMGRlY29yYXRpdmUlMjBzcGlyYWwlMjBncmFwaGljfGVufDB8fHx3aGl0ZXwxNzcwMDI1NjcwfDA&ixlib=rb-4.1.0&w=300&h=300&fit=crop&fm=jpg&q=80" class="absolute -bottom-20 -right-20 w-80 opacity-50 -z-10">
</div>
<div class="flex flex-col">
<h2 class="text-h2 text-black">YOUR <span class="relative">NEXUS <span class="absolute top-0 right-0 icon-shake text-5xl">✨</span></span></h2>
<hr class="border-black/20 my-10 w-full">
<p class="text-2xl max-w-sm">
Join Nexus of Curators & Artists, built on
<span class="underline-text-piece">
collaboration.
<svg class="underline-text-piece__decoration" viewBox="0 0 82 4"><path fill="black" d="M81.8 1.8c-.1 0-.2-.1-.1-.2l-.2-.4-.2-.3c.4 0-1-.4-2-.5a23.6 23.6 0 0 0-5.5-.1c0-.2-.3-.2-2.5-.2a4751 4751 0 0 1-23.2 0h-.7a3189.9 3189.9 0 0 0-21.8.1L23 .3h-2.7a.6.6 0 0 1-.3.2c-.1 0-.2 0 0-.1h-1.3A135.9 135.9 0 0 1 7.6.4H5.8c.1.2-.4.1-1 0h-1L3 .6H1.9c-.5 0-.8 0-.7.1 0 .1 0 .2-.2.2H.8L.4.7 0 1l.2.1c.1 0 .2 0 0 .2 0 .1.1.2.6.1.5 0 .7 0 .6.2 0 .1.1.2.3.2H2c0 .1 0 .3.2.5s.2.3.1.3l.3.1 1.5.1c1 0 1 0 .9.2h1.5c.3 0 .4 0 .3-.1a.8.8 0 0 1-.2-.4c-.1-.3 0-.3.4 0l.3.4c-.1 0 0 .1 0 .2.2 0 .5 0 .7-.2.3-.3.4-.3.5 0 .2.4.5.3.3 0 0-.3-.1-.4-.3-.4 0 0-.1 0 0 0H9c.4.1.4.1.2-.1C9 2 8.9 2 8.8 2L8.7 2c0-.1 0-.2.3-.2h.2c0 .1 0 .3.2.5.2.1.2.3.1.3-.5.2-.2.4.5.4l.8.1c.1.2.2.2.5 0 .4-.2.4-.2.4 0h.3v-.3c-.2 0-.2-.1 0-.2.3 0 .4 0 .4.2s.1.4.6.5h.9c.1 0 .3-.1.4 0l.3-.1a.6.6 0 0 1 .3-.2c.2 0 .2.1 0 .2-.2.2-.2.2.2.3h.7c.3-.2.7-.2 1.3 0 .4 0 .5 0 .4-.2l.2.1c.2.2.3.3.4.1h.7l.6.2c-.2-.2.6-.3.8-.2.3.2.9.2.7 0h2c.3.2.5.2.7 0 .2-.1.6-.1.4 0 0 .1.2.2.7.2.6 0 .9 0 .8.1-.2.2 0 .1.6-.1.4-.3.4-.3.5-.1 0 .1.2.2.3.1a3 3 0 0 1 1.9 0c.6.4 3.3.3 3 0-.2-.2 0-.2.4 0 .2.2.3.2.3.1l.3-.1c.2 0 .3 0 .2.1h1.1c-.2-.2.3-.3 1.2-.3l1.1-.1c.2-.1.3 0 .2 0-.1.2 0 .2.4.2.3 0 .6 0 .7.2h.3c0-.1.2-.3.5-.3h.4v.2c.2 0 .3 0 .3-.2h.5c.7.3 1.2.3 1.2.1 0-.2 0-.2 1.4-.2h.9s.1.1.2 0h1.8c.9 0 1.5-.1 1.5-.2L47 3c.1 0 .2 0 .1.2-.2.1.5.2.9 0h.4c0 .1.2.2.3.1 0 0 .2 0 .2.2s1.1.1 1.3 0a.5.5 0 0 1 .4-.2s.1 0 0 .1c0 .1 0 .2.2.1h.6l.1.1s0-.2.2-.2h.2s0 .2.2.2h.2l.1-.2 1-.1c.2-.1.3-.1.2 0l.2.1.4-.1h.4c.2.2.3.2.8 0 .5-.3.6-.4.6-.2s0 .2.3 0h.4c0 .2.2.2.4.3.2 0 .3 0 .2-.1l.2-.1.4.1c0 .1 0 .1.2 0 .3-.1 1.2-.2 1.3 0v-.1c0-.2.4-.2.9 0 .3.3.4.3.5 0h.9l1.2-.2h2.3l.5-.2.4-.1c0-.1 0-.2.2-.1l.1.2c0 .2 0 .2.2.2h.4l.8-.2c.7 0 .8 0 1 .3.1.2.2.2.2 0s.6-.4 1.1-.2c.2 0 .4 0 .5-.2.1-.1.2-.2.3 0l.6.2c.4 0 .5-.1.5-.4 0-.1 0 0 .2 0 .2.2.6.2 1.4.2.6 0 1.2 0 1.2-.2h.4l.2.3h.6l.4-.2c.7-.1.8-.1.8.1s0 .2.4 0 .5-.3.6-.2h2.1c0 .1.2.1.4 0h.6c.1.1.7-.3.7-.6l-.2-.1Z"></path></svg>
</span>
<br> No gatekeeping and competition.
</p>
</div>
</div>
</section>
<!-- Section 3: Professional Cards -->
<section class="section-layer-sticky bg-art-blue text-white">
<div class="flex-1 flex flex-col md:flex-row gap-10 p-10 h-full items-center">
<div class="w-full md:w-1/2">
<h2 class="text-h2 text-black">FOLLOW. <br> <span class="relative inline-flex items-center">ART <img src="https://images.pexels.com/photos/33931033/pexels-photo-33931033.png?w=100&h=100&fit=crop" class="w-20 mx-4 icon-shake"></span></h2>
<p class="text-2xl max-w-sm mt-10">
FOLLOW.ART is the first and only network made for curators and artists.
</p>
</div>
<div class="w-full md:w-1/2 grid grid-cols-2 gap-4">
<!-- Feature Cards with Flip Effect -->
<div class="group relative h-64 bg-black p-6 flex flex-col justify-between overflow-hidden cursor-pointer border border-white/10 transition-all duration-500 hover:scale-105">
<span class="text-xs text-white/50">01</span>
<h3 class="text-xl font-bold uppercase leading-none">Professional <br> presentation</h3>
<div class="absolute inset-0 bg-art-orange p-6 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
<p class="text-sm">Share your creative identity via the Nexus Card.</p>
</div>
</div>
<div class="group relative h-64 bg-black p-6 flex flex-col justify-between overflow-hidden cursor-pointer border border-white/10 transition-all duration-500 hover:scale-105">
<span class="text-xs text-white/50">02</span>
<h3 class="text-xl font-bold uppercase leading-none">Visibility</h3>
<div class="absolute inset-0 bg-art-pink p-6 translate-y-full group-hover:translate-y-0 transition-transform duration-300 text-black">
<p class="text-sm">Get discovered easily and without algorithms.</p>
</div>
</div>
<div class="group relative h-64 bg-black p-6 flex flex-col justify-between overflow-hidden cursor-pointer border border-white/10 transition-all duration-500 hover:scale-105">
<span class="text-xs text-white/50">03</span>
<h3 class="text-xl font-bold uppercase leading-none">Connection</h3>
<div class="absolute inset-0 bg-art-green p-6 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
<p class="text-sm">Build a network for collaborations with fellow creatives.</p>
</div>
</div>
<div class="group relative h-64 bg-black p-6 flex flex-col justify-between overflow-hidden cursor-pointer border border-white/10 transition-all duration-500 hover:scale-105">
<span class="text-xs text-white/50">04</span>
<h3 class="text-xl font-bold uppercase leading-none">Knowledge <br> exchange</h3>
<div class="absolute inset-0 bg-white p-6 translate-y-full group-hover:translate-y-0 transition-transform duration-300 text-black">
<p class="text-sm">Give and get – support, skills, and good vibes.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Join Component (Fixed at bottom right) -->
<div class="fixed bottom-5 right-5 z-[200]">
<a href="/signup" class="flex items-center justify-between gap-10 bg-art-orange text-white px-8 py-6 rounded-full font-bold uppercase tracking-widest text-lg shadow-2xl hover:bg-black transition-colors group">
<span>Join</span>
<span class="text-2xl group-hover:translate-x-2 transition-transform">→</span>
</a>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Parallax or scroll handling if needed
window.addEventListener('scroll', () => {
const sections = document.querySelectorAll('.section-layer-sticky');
sections.forEach(sec => {
const rect = sec.getBoundingClientRect();
if (rect.top < 0) {
// Apply subtle rotation or scaling based on scroll
}
});
});
});
</script></main>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Basic scroll interactions for sections
const observerOptions = {
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
}
});
}, observerOptions);
document.querySelectorAll('.section').forEach(el => observer.observe(el));
});
</script>
</body></html>
Created by: LandingHero
![\"decoration\"](\"https://images.unsplash.com/photo-1658780470099-9d1723f601a1?ixid=M3w4NjU0NDF8MHwxfHNlYXJjaHwxfHxkeW5hbWljJTIwZGVjb3JhdGl2ZSUyMGxpbmUlMjBzdmclMjBncmFwaGljc3xlbnwwfHx8d2hpdGV8MTc3MDAyNTY2Mnww&ixlib=rb-4.1.0&w=300&h=200&fit=crop&fm=jpg&q=80\")
\n ![](\"https://images.unsplash.com/photo-1647554195187-17a1cca17256?ixid=M3w4NjU0NDF8MHwxfHNlYXJjaHwxfHxoZWxpeCUyMGRlY29yYXRpdmUlMjBzcGlyYWwlMjBncmFwaGljfGVufDB8fHx3aGl0ZXwxNzcwMDI1NjcwfDA&ixlib=rb-4.1.0&w=300&h=300&fit=crop&fm=jpg&q=80\")
\n ![](\"https://images.unsplash.com/photo-1759184966982-a3a247decb6b?ixid=M3w4NjU0NDF8MHwxfHNlYXJjaHwxfHx2aWJyYW50JTIwYXJ0JTIwcHJldmlldyUyMHZpZGVvJTIwdGh1bWJuYWlsfGVufDB8MXx8fDE3NzAwMjU2NzB8MA&ixlib=rb-4.1.0&w=600&h=800&fit=crop&fm=jpg&q=80\")
\n \n ![](\"https://images.pexels.com/photos/33931033/pexels-photo-33931033.png?w=100&h=100&fit=crop\")