first commit

This commit is contained in:
2026-09-29 14:39:37 -06:00
commit faf1c97d4f
+530
View File
@@ -0,0 +1,530 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<header id="_header_icon_nav_h10_001" class="relative bg-white dark:bg-neutral-950 border-b border-slate-100 dark:border-neutral-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<!-- Logo -->
<a data-motion="logo" href="#" class="flex items-center" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<img src="https://cdn.ln-cdn.com/image/placeholder-logo-full.png" ln-logo="" class="h-8" alt="Logo">
</a>
<!-- Icon Navigation -->
<nav data-motion="nav" class="hidden lg:flex items-center gap-2" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<a href="#" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
<div data-motion="icon" class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
</div>
<span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">Home</span>
</a>
<a href="#" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
<div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
</svg>
</div>
<span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">Projects</span>
</a>
<a href="#" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
<div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</div>
<span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">Team</span>
</a>
<a href="#" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
<div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</div>
<span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">Analytics</span>
</a>
<a href="#" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
<div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
</div>
<span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">Messages</span>
</a>
</nav>
<!-- Right Actions -->
<div data-motion="actions" class="flex items-center gap-2" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<button data-motion="button" onclick="document.documentElement.classList.toggle('dark')" class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
<svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</svg>
</button>
<a href="#" class="h-10 px-5 bg-linear-to-r from-indigo-500 to-indigo-600 text-white text-sm font-semibold rounded-xl hover:shadow-lg hover:shadow-indigo-500/25 transition-all flex items-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
Create
</a>
</div>
</div>
</div>
</header>
<section id="_hero_creative_journey_v6_001" class="py-20 sm:py-24 bg-white dark:bg-neutral-950">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Centered Header -->
<div class="text-center max-w-3xl mx-auto mb-16" data-motion="hero" style="opacity: 1;">
<h1 class="text-3xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight mb-6">Pizza2d1's Project Showcase</h1>
<p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text" style="opacity: 1;">
<span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Embrace</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">challenges,</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">find</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">inspiration</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">in</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">everyday</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">moments,</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">and</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">transform</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">your</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">vision</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">into</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">reality.</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Discover</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">your</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">unique</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">creative</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">voice.</span>
</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="https://pizza2d1.github.io/server_links" data-motion="button" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
Links to services
</a>
<a href="https://github.com/pizza2d1" data-motion="button" class="px-6 py-3 bg-orange-100 dark:bg-orange-900/20 hover:bg-orange-200 dark:hover:bg-orange-900/30 transition-colors rounded-full text-orange-700 dark:text-orange-300 font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
Github
</a>
<a href="https://gitea.happylizard.me" data-motion="button" class="px-6 py-3 bg-green-600 hover:bg-green-700 transition-colors rounded-full text-white font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
Gitea
</a>
<a href="https://www.happylizard.me/contact.html" data-motion="button" class="px-6 py-3 bg-indigo-100 dark:bg-indigo-900/30 hover:bg-indigo-200 dark:hover:bg-indigo-900/50 transition-colors rounded-full text-indigo-700 dark:text-indigo-300 font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
Contact Me!
</a>
</div>
</div>
<!-- Asymmetric Image Grid -->
<div class="grid lg:grid-cols-12 gap-5">
<!-- Left Column - 2 stacked images -->
<div class="lg:col-span-3 flex flex-col gap-5">
<div data-motion="card" class="rounded-3xl overflow-hidden h-48" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<img data-motion="image" src="https://images.unsplash.com/photo-1760071744047-5542cbfda184?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&amp;ixlib=rb-4.1.0&amp;w=1200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Creative team collaboration" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
</div>
<div data-motion="card" class="rounded-3xl overflow-hidden h-64" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<img data-motion="image" src="https://images.unsplash.com/photo-1758613654472-7d0f611c1b82?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&amp;ixlib=rb-4.1.0&amp;w=1200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Design workspace" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
</div>
</div>
<!-- Center - Large featured image -->
<div class="lg:col-span-6" data-motion="card" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<div class="relative rounded-3xl overflow-hidden h-80 lg:h-full group">
<img data-motion="image" src="https://images.unsplash.com/photo-1758613654800-26e7f2706fbf?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&amp;ixlib=rb-4.1.0&amp;w=1200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Creative brainstorming session" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<div class="absolute inset-0 bg-linear-to-t from-slate-900/60 via-transparent to-transparent"></div>
<div class="absolute bottom-6 left-6 right-6">
<span data-motion="badge" class="text-indigo-400 text-xs font-semibold uppercase tracking-wider mb-1 block" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">Featured</span>
<h3 class="text-white text-xl font-bold">The Creative Process</h3>
<p class="text-slate-300 text-sm mt-1">Where ideas come to life</p>
</div>
</div>
</div>
<!-- Right Column - 2 stacked images -->
<div class="lg:col-span-3 flex flex-col gap-5">
<div data-motion="card" class="rounded-3xl overflow-hidden h-64" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<a href="https://www.happylizard.me/project_page/projects/?project_number=1">
<img data-motion="image" src="https://www.happylizard.me/assets/img/projects/laptop_setup.jpg" alt="Team meeting" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
</a>
</div>
<div data-motion="card" class="rounded-3xl overflow-hidden h-48" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<img data-motion="image" src="https://images.unsplash.com/photo-1758613653231-bae4e1131dde?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw1fHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&amp;ixlib=rb-4.1.0&amp;w=1200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Creative workshop" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
</div>
</div>
</div>
<!-- Stats Row -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-12 pt-10 border-t border-slate-200 dark:border-neutral-800">
<div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">10K+</span>
<span class="text-slate-500 dark:text-neutral-400 text-sm">Creators</span>
</div>
<div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<span class="text-3xl font-bold text-slate-900 dark:text-white block">500+</span>
<span class="text-slate-500 dark:text-neutral-400 text-sm">Workshops</span>
</div>
<div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<span class="text-3xl font-bold text-slate-900 dark:text-white block">95%</span>
<span class="text-slate-500 dark:text-neutral-400 text-sm">Satisfaction</span>
</div>
<div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">24/7</span>
<span class="text-slate-500 dark:text-neutral-400 text-sm">Support</span>
</div>
</div>
</div>
</section>
<section id="_features_minimal_icons_v6_001" class="py-20 sm:py-24 bg-slate-50 dark:bg-neutral-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Centered Header -->
<div class="text-center max-w-3xl mx-auto mb-16" data-motion="header" style="opacity: 1;">
<span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-wide uppercase mb-4 block" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">Developer Tools</span>
<h2 class="text-slate-900 dark:text-white text-4xl sm:text-5xl font-bold mb-6">
<span data-animate="heading" style="opacity: 1;"><span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Everything</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">You</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Need</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">to</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Build</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Faster</span></span>
</h2>
<p data-animate="text" class="text-slate-600 dark:text-neutral-400 text-lg" style="opacity: 1;">
<span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">A</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">complete</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">developer</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">toolkit</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">with</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">powerful</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">APIs,</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">comprehensive</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">documentation,</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">and</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">enterprise-grade</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">infrastructure.</span>
</p>
</div>
<!-- Bento Grid Features -->
<div class="grid lg:grid-cols-3 gap-5">
<!-- Large Feature Card -->
<div data-motion="card" class="lg:col-span-2 p-8 bg-white dark:bg-neutral-800 rounded-3xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<div class="grid sm:grid-cols-2 gap-8">
<div>
<div data-motion="icon" class="w-14 h-14 bg-indigo-100 dark:bg-indigo-900/40 rounded-2xl flex items-center justify-center mb-6" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<svg class="w-7 h-7 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
</svg>
</div>
<h3 class="text-slate-900 dark:text-white text-xl font-semibold mb-3">Modular Architecture</h3>
<p class="text-slate-600 dark:text-neutral-400 text-base">
Build with composable modules that scale independently and integrate seamlessly with your existing stack.
</p>
</div>
<div class="rounded-2xl overflow-hidden">
<img data-motion="image" src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&amp;auto=format&amp;fit=crop&amp;q=80" alt="Code on screen" class="w-full h-48 object-cover" style="opacity: 1; transform: scale(1); filter: blur(0px);">
</div>
</div>
</div>
<!-- Accent Card -->
<div data-motion="card" class="p-8 bg-indigo-600 rounded-3xl flex flex-col justify-between" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<div>
<div data-motion="icon" class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-6" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-white text-xl font-semibold mb-3">Type Safety</h3>
<p class="text-indigo-100 text-base">
Full TypeScript support with auto-generated types for bulletproof development.
</p>
</div>
<a data-motion="button" href="#" class="inline-flex items-center gap-2 text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
Learn More
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
</div>
<!-- Small Feature Cards -->
<div data-motion="card" class="p-6 bg-white dark:bg-neutral-800 rounded-3xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<div data-motion="icon" class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-5" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" 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>
</div>
<h3 class="text-slate-900 dark:text-white text-lg font-semibold mb-2">REST &amp; GraphQL</h3>
<p class="text-slate-600 dark:text-neutral-400 text-sm">
Choose your preferred API style with full support for both endpoints.
</p>
</div>
<div data-motion="card" class="p-6 bg-white dark:bg-neutral-800 rounded-3xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<div data-motion="icon" class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-5" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg>
</div>
<h3 class="text-slate-900 dark:text-white text-lg font-semibold mb-2">Rich Documentation</h3>
<p class="text-slate-600 dark:text-neutral-400 text-sm">
Comprehensive guides and tutorials to get you started quickly.
</p>
</div>
<div data-motion="card" class="p-6 bg-white dark:bg-neutral-800 rounded-3xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<div data-motion="icon" class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-5" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
</div>
<h3 class="text-slate-900 dark:text-white text-lg font-semibold mb-2">Plugin System</h3>
<p class="text-slate-600 dark:text-neutral-400 text-sm">
Extend functionality with community and official plugins.
</p>
</div>
<!-- CTA Card -->
<div data-motion="card" class="lg:col-span-2 p-8 bg-slate-900 dark:bg-neutral-800 rounded-3xl flex flex-col sm:flex-row items-center justify-between gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<div>
<h3 class="text-white text-xl font-semibold mb-2">24/7 Enterprise Support</h3>
<p class="text-slate-400 text-base">Dedicated engineers with guaranteed response times for your team.</p>
</div>
<a data-motion="button" href="#" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold whitespace-nowrap" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
Contact Sales
</a>
</div>
</div>
</div>
</section>
<style>
.carousel-container { overflow: hidden; }
.carousel-track { display: flex; transition: transform 0.5s ease-out; }
</style>
<section id="_testimonial_centered_quote_avatars_v6_t27_001" class="py-20 sm:py-24 bg-slate-50 dark:bg-neutral-900">
<style>
.carousel-container { overflow: hidden; }
.carousel-track { display: flex; transition: transform 0.5s ease-out; }
</style>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Carousel -->
<div class="relative">
<div class="carousel-container">
<div data-carousel="track" class="carousel-track">
<!-- Slide 1 -->
<div data-motion="slide" class="shrink-0 w-full px-4" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<div class="max-w-4xl mx-auto text-center">
<svg data-motion="icon" class="w-12 h-12 mx-auto mb-8 text-indigo-500" fill="currentColor" viewBox="0 0 24 24" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path>
</svg>
<p class="text-xl sm:text-2xl lg:text-3xl text-slate-700 dark:text-neutral-200 leading-relaxed mb-10 font-medium">
"The platform transformed how we approach customer feedback. Within weeks, we saw a 40% improvement in response times and our NPS score jumped significantly."
</p>
<!-- Avatar Row -->
<div class="flex items-center justify-center gap-6">
<img data-motion="image" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Thomas Wright" class="w-16 h-16 rounded-full object-cover ring-2 ring-indigo-500 ring-offset-2 ring-offset-neutral-50 dark:ring-offset-neutral-900" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<div class="text-left">
<h5 class="text-lg font-semibold text-slate-900 dark:text-white">Thomas Wright</h5>
<p class="text-indigo-600 dark:text-indigo-400 text-sm">VP of Operations, TechFlow</p>
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div data-motion="slide" class="shrink-0 w-full px-4" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<div class="max-w-4xl mx-auto text-center">
<svg data-motion="icon" class="w-12 h-12 mx-auto mb-8 text-indigo-500" fill="currentColor" viewBox="0 0 24 24" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path>
</svg>
<p class="text-xl sm:text-2xl lg:text-3xl text-slate-700 dark:text-neutral-200 leading-relaxed mb-10 font-medium">
"We've tried many solutions before, but nothing comes close to this level of integration and ease of use. Our team adopted it instantly and productivity soared."
</p>
<div class="flex items-center justify-center gap-6">
<img data-motion="image" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Rachel Kim" class="w-16 h-16 rounded-full object-cover ring-2 ring-indigo-500 ring-offset-2 ring-offset-neutral-50 dark:ring-offset-neutral-900" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<div class="text-left">
<h5 class="text-lg font-semibold text-slate-900 dark:text-white">Rachel Kim</h5>
<p class="text-indigo-600 dark:text-indigo-400 text-sm">Head of Product, Innovate Labs</p>
</div>
</div>
</div>
</div>
<!-- Slide 3 -->
<div data-motion="slide" class="shrink-0 w-full px-4" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<div class="max-w-4xl mx-auto text-center">
<svg data-motion="icon" class="w-12 h-12 mx-auto mb-8 text-indigo-500" fill="currentColor" viewBox="0 0 24 24" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path>
</svg>
<p class="text-xl sm:text-2xl lg:text-3xl text-slate-700 dark:text-neutral-200 leading-relaxed mb-10 font-medium">
"The analytics dashboard alone is worth the investment. We now have real-time insights that help us make data-driven decisions every single day."
</p>
<div class="flex items-center justify-center gap-6">
<img data-motion="image" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&amp;auto=format&amp;fit=crop&amp;q=80" alt="David Chen" class="w-16 h-16 rounded-full object-cover ring-2 ring-indigo-500 ring-offset-2 ring-offset-neutral-50 dark:ring-offset-neutral-900" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<div class="text-left">
<h5 class="text-lg font-semibold text-slate-900 dark:text-white">David Chen</h5>
<p class="text-indigo-600 dark:text-indigo-400 text-sm">CTO, DataStream Inc</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation Dots & Arrows -->
<div class="flex items-center justify-center gap-6 mt-12">
<button data-motion="button" data-carousel="prev" type="button" aria-label="Previous testimonial" class="w-11 h-11 rounded-full bg-white dark:bg-neutral-800 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
<div class="flex gap-2">
<button data-motion="button" data-carousel="dot" class="w-2.5 h-2.5 rounded-full bg-indigo-500" aria-label="Go to slide 1" style="opacity: 1; transform: translateY(0px); filter: blur(0px);"></button>
<button data-motion="button" data-carousel="dot" class="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-neutral-600" aria-label="Go to slide 2" style="opacity: 1; transform: translateY(0px); filter: blur(0px);"></button>
<button data-motion="button" data-carousel="dot" class="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-neutral-600" aria-label="Go to slide 3" style="opacity: 1; transform: translateY(0px); filter: blur(0px);"></button>
</div>
<button data-motion="button" data-carousel="next" type="button" aria-label="Next testimonial" class="w-11 h-11 rounded-full bg-white dark:bg-neutral-800 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Carousel Script -->
<script>
(function() {
function initCarousel() {
const section = document.getElementById('_testimonial_centered_quote_avatars_v6_t27_001');
if (!section) return;
const container = section.querySelector('[data-carousel="container"]') || section.querySelector('.carousel-container');
const prevBtn = section.querySelector('[data-carousel="prev"]') || section.querySelector('.carousel-prev');
const nextBtn = section.querySelector('[data-carousel="next"]') || section.querySelector('.carousel-next');
if (!container || !prevBtn || !nextBtn) return;
// Clone buttons to remove existing listeners
const newPrevBtn = prevBtn.cloneNode(true);
const newNextBtn = nextBtn.cloneNode(true);
prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
let currentIndex = 0;
const scrollAmount = 320;
function updateCarousel(direction) {
const maxScroll = container.scrollWidth - container.parentElement.offsetWidth;
if (direction === 'next') {
currentIndex = Math.min(currentIndex + scrollAmount, maxScroll);
} else {
currentIndex = Math.max(currentIndex - scrollAmount, 0);
}
container.style.transform = 'translateX(-' + currentIndex + 'px)';
}
newPrevBtn.addEventListener('click', () => updateCarousel('prev'));
newNextBtn.addEventListener('click', () => updateCarousel('next'));
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initCarousel);
} else {
initCarousel();
}
window.addEventListener('load', initCarousel);
})();
</script>
</section>
<footer id="_footer_nav_contact_button_v6_001" class="py-20 sm:py-24 bg-white dark:bg-neutral-950">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Main Content Grid -->
<div class="grid lg:grid-cols-12 gap-12 pb-16">
<!-- Logo & Contact Info -->
<div class="lg:col-span-5 flex flex-col gap-8">
<a data-motion="logo" href="#" class="flex items-center w-fit" style="opacity: 1; transform: scale(1); filter: blur(0px);">
<img src="https://cdn.ln-cdn.com/image/placeholder-logo-full.png" ln-logo="" class="h-10" alt="Logo">
</a>
<p data-motion="description" class="text-slate-600 dark:text-neutral-400 text-lg leading-relaxed max-w-sm" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
Award-winning architecture studio creating spaces that inspire and endure for generations.
</p>
<!-- Contact Card -->
<div data-motion="contact-card" class="p-6 bg-indigo-50 dark:bg-indigo-900/20 rounded-2xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<h4 class="text-sm font-semibold text-indigo-700 dark:text-indigo-400 uppercase tracking-wide mb-4">Get in Touch</h4>
<div class="flex flex-col gap-3">
<a href="mailto:hello@archway.studio" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
<svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
hello@archway.studio
</a>
<a href="tel:+1234567890" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
<svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
</svg>
+1 (234) 567-890
</a>
</div>
</div>
</div>
<!-- Navigation Links -->
<div class="lg:col-span-4">
<nav data-motion="nav" class="grid grid-cols-2 gap-8" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<div>
<h4 class="text-sm font-semibold text-slate-900 dark:text-white uppercase tracking-wide mb-5">Company</h4>
<ul class="flex flex-col gap-3">
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">About Us</a></li>
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Our Team</a></li>
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Careers</a></li>
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Press</a></li>
</ul>
</div>
<div>
<h4 class="text-sm font-semibold text-slate-900 dark:text-white uppercase tracking-wide mb-5">Services</h4>
<ul class="flex flex-col gap-3">
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Residential</a></li>
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Commercial</a></li>
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Interior Design</a></li>
<li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Consulting</a></li>
</ul>
</div>
</nav>
</div>
<!-- CTA Section -->
<div class="lg:col-span-3">
<div data-motion="cta" class="flex flex-col gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<h4 class="text-lg font-semibold text-slate-900 dark:text-white">Ready to start your project?</h4>
<p class="text-slate-600 dark:text-neutral-400">Let's discuss how we can bring your vision to life.</p>
<a data-motion="button" href="#" class="inline-flex items-center justify-center gap-2 px-6 py-4 bg-indigo-500 hover:bg-indigo-600 text-white font-semibold rounded-xl transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
Schedule Consultation
</a>
</div>
</div>
</div>
<!-- Divider -->
<div class="h-px bg-slate-200 dark:bg-neutral-800"></div>
<!-- Bottom Section -->
<div class="pt-10 flex flex-col lg:flex-row items-center justify-between gap-6">
<!-- Copyright -->
<p data-motion="copyright" class="text-sm text-slate-500 dark:text-neutral-400" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
© 2026 Archway Studio. All rights reserved.
</p>
<!-- Legal Links -->
<ul data-motion="legal" class="flex flex-wrap items-center gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Privacy Policy</a></li>
<li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Terms of Service</a></li>
<li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Cookie Policy</a></li>
</ul>
<!-- Social Icons -->
<div data-motion="social" class="flex items-center gap-3" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<a href="#" aria-label="Instagram" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
<svg class="w-4 h-4" 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.849-.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"></path>
</svg>
</a>
<a href="#" aria-label="Pinterest" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"></path>
</svg>
</a>
<a href="#" aria-label="LinkedIn" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
<svg class="w-4 h-4" 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"></path>
</svg>
</a>
</div>
</div>
</div>
</footer>
</body>
</html>