All Prompts
All Prompts
testimonialsectiontailwindanimatedresponsiveinteractivelandingbackground
Testimonial Hero with Animated Background
Секция с отзывами клиентов для лендинга. Анимированный фон, цитата, детали автора, изображение. Tailwind CSS, адаптивный дизайн.
Prompt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collaborator Insights - Typography Remix</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></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=DM+Mono:ital,wght@0,300;0,400&family=Geist:wght@300;400&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
</head>
<body class="bg-[#0a0a0a] text-white font-['Geist'] font-light antialiased min-h-screen relative overflow-x-hidden selection:bg-[#E85D25] selection:text-white">
<!-- Background Layers -->
<div class="fixed inset-0 z-0 pointer-events-none">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/7e6b62ee-9375-4b9a-8a12-e017daf0e3f8_3840w.webp" alt="Ambient Background" class="w-full h-full object-cover opacity-20 mix-blend-luminosity">
<div class="absolute inset-0 bg-gradient-to-b from-[#0a0a0a]/80 via-[#0a0a0a]/90 to-[#0a0a0a]"></div>
<canvas id="webgl-lines" class="absolute inset-0 w-full h-full opacity-40"></canvas>
</div>
<!-- Main Content -->
<main class="relative z-10 min-h-screen flex flex-col justify-center py-20 md:py-32">
<div class="max-w-[1400px] mx-auto w-full px-6 md:px-12 lg:px-20">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 items-center">
<!-- Left Column: Typography & Content -->
<div class="lg:col-span-7 flex flex-col justify-center">
<!-- Header -->
<div class="reveal opacity-0 translate-y-8 transition-all duration-1000 ease-out mb-12 md:mb-20">
<h1 class="text-5xl md:text-7xl text-white font-['Instrument_Serif'] font-normal tracking-tight leading-none mb-6 italic">
Authentic Insights
</h1>
<div class="flex items-center gap-4">
<span class="font-['Geist'] text-lg md:text-xl font-light tracking-tight text-gray-400 uppercase">From Our</span>
<span class="relative inline-block px-5 py-1 text-white whitespace-nowrap font-['Geist'] text-xl md:text-2xl tracking-tight font-light uppercase">
<!-- Left Orange Bracket -->
<span class="absolute left-0 top-0 h-full w-4 border-l-[2px] border-t-[2px]" style="border-color: #E85D25;">
<span class="absolute -top-[5px] -left-[5px] w-[8px] h-[8px] rounded-full" style="background-color: #E85D25;"></span>
</span>
PARTNERS
<!-- Right Orange Bracket -->
<span class="absolute right-0 bottom-0 h-full w-4 border-r-[2px] border-b-[2px]" style="border-color: #E85D25;">
<span class="absolute -bottom-[5px] -right-[5px] w-[8px] h-[8px] rounded-full" style="background-color: #E85D25;"></span>
</span>
</span>
</div>
</div>
<!-- Quote -->
<div class="reveal opacity-0 translate-y-8 transition-all duration-1000 delay-300 ease-out relative">
<iconify-icon icon="solar:chat-square-quote-linear" stroke-width="1.5" class="text-4xl text-[#E85D25] mb-8"></iconify-icon>
<p class="font-['Instrument_Serif'] text-4xl md:text-5xl lg:text-6xl text-white leading-[1.05] tracking-tight font-normal mb-12">
"Integrating this framework completely redefined our deployment workflows. <span class="text-gray-400 italic">The elegant architecture and instant performance boosts</span> were celebrated across the board."
</p>
</div>
<!-- Author & Controls -->
<div class="reveal opacity-0 translate-y-8 transition-all duration-1000 delay-500 ease-out flex flex-col md:flex-row md:items-end justify-between gap-10 mt-4 border-t border-white/10 pt-10">
<!-- Author Details -->
<div class="flex flex-col">
<span class="font-['DM_Mono'] text-xs tracking-widest text-[#E85D25] uppercase mb-2">VP of Infrastructure</span>
<span class="font-['Geist'] text-2xl md:text-3xl text-white tracking-tight font-light">Julian Vance</span>
</div>
<!-- Pagination & Nav -->
<div class="flex items-center gap-8 md:gap-12">
<div class="flex items-baseline gap-2 font-['DM_Mono']">
<span class="text-2xl md:text-3xl font-light tracking-tight text-white">03</span>
<span class="text-gray-500 text-sm font-light">/06</span>
</div>
<div class="flex gap-3">
<button class="w-12 h-12 md:w-14 md:h-14 rounded-full border border-gray-700/50 flex items-center justify-center text-gray-400 hover:border-gray-400 hover:text-white transition-all duration-300 group bg-black/20 backdrop-blur-sm" aria-label="Previous">
<iconify-icon icon="solar:arrow-left-linear" stroke-width="1.5" class="text-xl md:text-2xl group-hover:-translate-x-1 transition-transform duration-300"></iconify-icon>
</button>
<button class="w-12 h-12 md:w-14 md:h-14 rounded-full border border-gray-700/50 flex items-center justify-center text-[#E85D25] hover:border-[#E85D25] transition-all duration-300 group bg-black/20 backdrop-blur-sm" aria-label="Next">
<iconify-icon icon="solar:arrow-right-linear" stroke-width="1.5" class="text-xl md:text-2xl group-hover:translate-x-1 transition-transform duration-300"></iconify-icon>
</button>
</div>
</div>
</div>
</div>
<!-- Right Column: Visual -->
<div class="lg:col-span-5 reveal opacity-0 translate-y-8 transition-all duration-1000 delay-150 ease-out">
<div class="rounded-none md:rounded-2xl overflow-hidden aspect-[3/4] lg:aspect-[4/5] relative bg-gray-900 shadow-2xl shadow-black/50 group">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/477cc240-09a0-4a31-afc6-f701a13e30d8_800w.webp" alt="VP of Infrastructure" class="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-1000 ease-out opacity-80 group-hover:opacity-100 mix-blend-luminosity group-hover:mix-blend-normal">
<div class="absolute inset-0 bg-gradient-to-t from-[#0a0a0a]/80 via-transparent to-transparent pointer-events-none"></div>
</div>
</div>
</div>
</div>
</main>
<script>
// Entry Animations
document.addEventListener('DOMContentLoaded', () => {
const reveals = document.querySelectorAll('.reveal');
setTimeout(() => {
reveals.forEach(el => {
el.classList.remove('opacity-0', 'translate-y-8');
el.classList.add('opacity-100', 'translate-y-0');
});
}, 100);
});
// Background WebGL-style Line Animation
const canvas = document.getElementById('webgl-lines');
const ctx = canvas.getContext('2d');
let width, height, particles;
function initCanvas() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
const particleCount = Math.min(Math.floor(window.innerWidth / 15), 80);
particles = Array.from({length: particleCount}, () => ({
x: Math.random() * width,
y: Math.random() * height,
vx: (Math.random() - 0.5) * 0.3,
vy: (Math.random() - 0.5) * 0.3
}));
}
function animateCanvas() {
ctx.clearRect(0, 0, width, height);
ctx.strokeStyle = 'rgba(255, 255, 255, 0.03)';
ctx.lineWidth = 1;
particles.forEach((p, i) => {
p.x += p.vx;
p.y += p.vy;
if (p.x < 0 || p.x > width) p.vx *= -1;
if (p.y < 0 || p.y > height) p.vy *= -1;
for (let j = i + 1; j < particles.length; j++) {
const p2 = particles[j];
const dist = Math.hypot(p.x - p2.x, p.y - p2.y);
if (dist < 180) {
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();
}
}
});
requestAnimationFrame(animateCanvas);
}
window.addEventListener('resize', initCanvas);
initCanvas();
animateCanvas();
</script>
</body>
</html>