Brunobrno/vontor-cz
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

api done

Browse Source
This commit is contained in:
David Bruno Vontor
2025-11-07 17:43:37 +01:00
parent c3f837b90f
commit a645c87020
47 changed files with 238 additions and 2203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/hero/HeroCarousel.tsx
View File

@@ -13,11 +13,11 @@ export default function HeroCarousel() {
return (
<section id="home" className="relative min-h-[80vh] md:min-h-[85vh] flex items-center justify-center overflow-hidden">
{/* Background Gradient and animated glows */}
<div className="absolute inset-0 bg-gradient-to-br from-slate-800 via-slate-900 to-black -z-10" />
<div className="absolute inset-0 bg-gradient-to-br from-[var(--c-background-light)] via-[var(--c-background)] to-[var(--c-background)] -z-10" />
<div className="absolute inset-0 -z-10 pointer-events-none">
<div className="absolute top-1/4 left-1/4 w-64 h-64 bg-fuchsia-600/10 rounded-full blur-3xl animate-pulse" />
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-orange-500/10 rounded-full blur-3xl animate-pulse delay-1000" />
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-violet-400/10 rounded-full blur-3xl animate-pulse delay-2000" />
<div className="absolute top-1/4 left-1/4 w-64 h-64 bg-brand-accent/10 rounded-full blur-3xl animate-pulse" />
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-brand-lines/10 rounded-full blur-3xl animate-pulse delay-1000" />
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-brand-boxes/10 rounded-full blur-3xl animate-pulse delay-2000" />
</div>
<div className="relative container mx-auto px-4 py-10 grid lg:grid-cols-2 gap-10 items-center">
@@ -25,18 +25,18 @@ export default function HeroCarousel() {
<div className="text-center lg:text-left">
<h1 className="text-4xl md:text-6xl font-bold mb-4 leading-tight">
<span className="text-rainbow">Welcome to</span><br />
<span className="text-white">Vontor.cz</span>
<span className="text-brand-text">Vontor.cz</span>
</h1>
<p className="text-lg md:text-xl text-gray-300 mb-6">Creative Tech & Design by <span className="text-fuchsia-600 font-semibold">Bruno Vontor</span></p>
<p className="text-lg md:text-xl text-brand-text/80 mb-6">Creative Tech & Design by <span className="text-brand-accent font-semibold">Bruno Vontor</span></p>
<div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
<a href="#portfolio" className="px-8 py-3 bg-gradient-to-r from-fuchsia-600 to-orange-500 text-white font-semibold rounded-lg hover:shadow-lg hover:shadow-fuchsia-600/25 transition-all duration-300 transform hover:scale-105">View Portfolio</a>
<a href="#contact" className="px-8 py-3 border-2 border-violet-400 text-violet-400 font-semibold rounded-lg hover:bg-violet-400 hover:text-white transition-all duration-300">Get In Touch</a>
<a href="#portfolio" className="px-8 py-3 bg-gradient-to-r from-[var(--c-other)] to-[var(--c-lines)] text-brand-text font-semibold rounded-lg hover:shadow-glow transition-all duration-300 transform hover:scale-105">View Portfolio</a>
<a href="#contact" className="px-8 py-3 border-2 border-brand-lines text-brand-lines font-semibold rounded-lg hover:bg-brand-lines hover:text-brand-bg transition-all duration-300">Get In Touch</a>
</div>
</div>
{/* Video carousel */}
<div className="relative">
<div className="relative aspect-video bg-slate-800 rounded-xl overflow-hidden shadow-2xl">
<div className="relative aspect-video bg-brand-bgLight rounded-xl overflow-hidden shadow-2xl">
{videos.map((v,i) => (
<iframe
key={v}
@@ -47,12 +47,12 @@ export default function HeroCarousel() {
allowFullScreen
/>
))}
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" />
<div className="absolute inset-0 bg-gradient-to-t from-brand-bg/60 to-transparent pointer-events-none" />
</div>
{/* Indicators */}
<div className="flex justify-center mt-4 space-x-2">
{videos.map((_,i) => (
<button key={i} onClick={()=>setIndex(i)} aria-label={`Go to slide ${i+1}`} className={`w-3 h-3 rounded-full transition-all duration-300 ${i===index? 'bg-fuchsia-600':'bg-gray-600 hover:bg-gray-400'}`} />
<button key={i} onClick={()=>setIndex(i)} aria-label={`Go to slide ${i+1}`} className={`w-3 h-3 rounded-full transition-all duration-300 ${i===index? 'bg-brand-accent':'bg-brand-lines/40 hover:bg-brand-lines/60'}`} />
))}
</div>
</div>