Looks pretty and added socials page

This commit is contained in:
2026-09-29 19:31:46 -06:00
parent c97bf6cd83
commit bebbfeba4b
11 changed files with 1473 additions and 568 deletions
+90 -207
View File
@@ -10,13 +10,13 @@
<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);">
<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">
<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>
@@ -27,7 +27,7 @@
</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">
<a href="/projects/" 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>
@@ -38,7 +38,7 @@
</span>
</a>
<a href="services.html" 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">
<a href="/services/" 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>
@@ -49,7 +49,7 @@
</span>
</a>
<a href="certificates.html" 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">
<a href="/certificates/" 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>
@@ -60,7 +60,7 @@
</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">
<a href="/socials/" 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>
@@ -83,11 +83,8 @@
</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 href="/login.html" 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">
Login
</a>
</div>
</div>
@@ -99,7 +96,7 @@
<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>
We suck big dick because we can
</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);">
@@ -111,28 +108,51 @@
<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);">
<a href="/socials/" 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">
<div class="grid lg:grid-cols-12 gap-2">
<!-- 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);">
<a href="/projects/operating_system/">
<img data-motion="image" src="/assets/img/projects/os_making/qemu1.png" 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);">
<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">
<h3 class="text-white text-l font-bold text-shadow-lg drop-shadow-[0_2.2px_2.2px_rgba(0,0,128,0.8)]">Building an OS</h3>
</div>
</a>
</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);">
<a href="/projects/python_website/">
<img data-motion="image" src="/assets/img/projects/python_website/python_website.png" 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);">
<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">
<h3 style="color: rgb(0, 191, 10)" class="text-black text-l font-bold text-shadow-lg drop-shadow-[0_2.2px_2.2px_rgba(0,0,0,1)]">Python framework from scratch</h3>
</div>
</a>
</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);">
<img data-motion="image" src="/assets/img/projects/laptop_server/laptop_setup.jpg" 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">
<h3 class="text-white text-xl font-bold text-shadow-lg drop-shadow-[0_2.2px_2.2px_rgba(0,0,128,0.8)]">My server setup</h3>
</div>
</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="/assets/img/projects/laptop_server/laptop_setup.jpg" 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>
@@ -140,41 +160,31 @@
<p class="text-slate-300 text-sm mt-1">Where ideas come to life</p>
</div>
</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="/assets/img/projects/laptop_server/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);">
<div data-motion="card" class="rounded-3xl overflow-hidden h-72" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<a href="/projects/arch_chromebook/">
<img data-motion="image" src="/assets/img/projects/arch_chromebook/arch_chromebook.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);">
<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">
<h3 class="text-white text-l font-bold text-shadow-lg drop-shadow-[0_2.2px_2.2px_rgba(0,0,128,0.8)]">Arch on chromebook</h3>
</div>
</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 data-motion="card" class="rounded-3xl overflow-hidden h-40" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<a href="/projects/pifetch/">
<img data-motion="image" src="/assets/img/projects/pifetch/pifetch_showcase.gif" 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 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">
<h3 class="text-white text-l font-bold text-shadow-lg drop-shadow-[0_2.2px_2.2px_rgba(0,0,128,0.8)]">Pifetch (neofetch alternative)</h3>
</div>
</a>
</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">
@@ -286,174 +296,47 @@
.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);">
<!-- <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>
</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.
Taking inspiration from transgender CS students since 2022
</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 href="https://discordapp.com/users/714918826831118436" 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" stroke="currentColor" viewBox="0 0 24 24">
<path d="M18.59 5.88997C17.36 5.31997 16.05 4.89997 14.67 4.65997C14.5 4.95997 14.3 5.36997 14.17 5.69997C12.71 5.47997 11.26 5.47997 9.83001 5.69997C9.69001 5.36997 9.49001 4.95997 9.32001 4.65997C7.94001 4.89997 6.63001 5.31997 5.40001 5.88997C2.92001 9.62997 2.25001 13.28 2.58001 16.87C4.23001 18.1 5.82001 18.84 7.39001 19.33C7.78001 18.8 8.12001 18.23 8.42001 17.64C7.85001 17.43 7.31001 17.16 6.80001 16.85C6.94001 16.75 7.07001 16.64 7.20001 16.54C10.33 18 13.72 18 16.81 16.54C16.94 16.65 17.07 16.75 17.21 16.85C16.7 17.16 16.15 17.42 15.59 17.64C15.89 18.23 16.23 18.8 16.62 19.33C18.19 18.84 19.79 18.1 21.43 16.87C21.82 12.7 20.76 9.08997 18.61 5.88997H18.59ZM8.84001 14.67C7.90001 14.67 7.13001 13.8 7.13001 12.73C7.13001 11.66 7.88001 10.79 8.84001 10.79C9.80001 10.79 10.56 11.66 10.55 12.73C10.55 13.79 9.80001 14.67 8.84001 14.67ZM15.15 14.67C14.21 14.67 13.44 13.8 13.44 12.73C13.44 11.66 14.19 10.79 15.15 10.79C16.11 10.79 16.87 11.66 16.86 12.73C16.86 13.79 16.11 14.67 15.15 14.67Z" fill="#000000"/>
</svg>
Discord
</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">
<a href="https://signal.me/#eu/14nA-tBiLDlv3Z1DzDlmNSd_hpqwEk2EcjhmY0uWcjbTAQWx9NZGiJfkVOkMR4mS" 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
Signal
</a>
<a href="mailto:pizza2d1@proton.me" 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>
pizza2d1@proton.me
</a>
<a href="tel:+3852780007" 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 (385) 287-0007
</a>
</div>
</div>
@@ -474,17 +357,17 @@
<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>
<li><a href="https://jellyfin.happylizard.me" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Jellyfin</a></li>
<li><a href="https://copyparty.happylizard.me" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Copyparty</a></li>
<li><a href="https://gitea.happylizard.me" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Gitea</a></li>
<li><a href="https://convert.happylizard.me" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Any file conversion tool (Portal Runner)</a></li>
</ul>
</div>
</nav>
</div>
<!-- CTA Section -->
<div class="lg:col-span-3">
<!-- <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>
@@ -495,28 +378,28 @@
Schedule Consultation
</a>
</div>
</div>
</div> -->
</div>
<!-- Divider -->
<div class="h-px bg-slate-200 dark:bg-neutral-800"></div>
<!-- <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">
<!-- <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);">
<!-- <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>
</p> -->
<!-- Legal Links -->
<ul data-motion="legal" class="flex flex-wrap items-center gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<!-- <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>
</ul> -->
<!-- Social Icons -->
<div data-motion="social" class="flex items-center gap-3" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
<!-- <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>
@@ -532,8 +415,8 @@
<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> -->
<!-- </div> -->
</div>
</footer>
</body>