bender/a479e2e1-bee6-4524-ba83-e0806ab0cd64
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bob AI: Add dynamic gallery section with user images and remove old

Browse Source
This commit is contained in:
kudinDmitriyUp
2026-07-04 21:42:47 +00:00
parent af39aa1baf
commit d135411c09
3 changed files with 86 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/HomePage.tsx
View File

@@ -9,10 +9,10 @@ import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import React from 'react';
import HeroSection from './HomePage/sections/Hero';
import AboutSection from './HomePage/sections/About';
import PropertiesSection from './HomePage/sections/Properties';
import ContactSection from './HomePage/sections/Contact';
export default function HomePage(): React.JSX.Element {
import GallerySection from './HomePage/sections/Gallery';export default function HomePage(): React.JSX.Element {
return (
<StyleProvider siteBackground="none" heroBackground="none" buttonVariant="stagger">
<SiteBackgroundSlot />
@@ -23,11 +23,11 @@ export default function HomePage(): React.JSX.Element {
<AboutSection />
<PropertiesSection />
<ContactSection />
<GallerySection />
</StyleProvider>
);
}

83
src/pages/HomePage/sections/Gallery.tsx Normal file
View File

@@ -0,0 +1,83 @@
import React from 'react';
import ScrollReveal from '@/components/ui/ScrollReveal';
import TextAnimation from '@/components/ui/TextAnimation';
import ImageOrVideo from '@/components/ui/ImageOrVideo';
import Tag from '@/components/ui/Tag';
export default function GallerySection() {
const images = [
{
src: "https://storage.googleapis.com/webild/users/user_3G3RRYMNJY63CoZ96oJOAlJc2Et/uploaded-1783201278651-n1egshdk.jpg",
title: "Sústredenie pred štartom",
colSpan: "col-span-1 md:col-span-2",
rowSpan: "row-span-2"
},
{
src: "https://storage.googleapis.com/webild/users/user_3G3RRYMNJY63CoZ96oJOAlJc2Et/uploaded-1783201278652-k4urrscu.jpg",
title: "Súboj na trati",
colSpan: "col-span-1",
rowSpan: "row-span-1"
},
{
src: "https://storage.googleapis.com/webild/users/user_3G3RRYMNJY63CoZ96oJOAlJc2Et/uploaded-1783201278653-doj07as6.jpg",
title: "V plnom nasadení",
colSpan: "col-span-1",
rowSpan: "row-span-1"
},
{
src: "https://storage.googleapis.com/webild/users/user_3G3RRYMNJY63CoZ96oJOAlJc2Et/uploaded-1783201278654-948qc5yh.jpg",
title: "Detail prilby",
colSpan: "col-span-1",
rowSpan: "row-span-1"
},
{
src: "https://storage.googleapis.com/webild/users/user_3G3RRYMNJY63CoZ96oJOAlJc2Et/uploaded-1783201278654-0pk26pgo.jpg",
title: "Pretekársky špeciál",
colSpan: "col-span-1 md:col-span-2",
rowSpan: "row-span-1"
}
];
return (
<div id="gallery" data-webild-section="gallery" className="py-24 bg-background relative overflow-hidden">
<div className="w-content-width mx-auto">
<ScrollReveal variant="slide-up">
<div className="flex flex-col items-center text-center mb-16">
<Tag text="Galéria" className="mb-6" />
<TextAnimation
text="Dynamika a Adrenalín"
variant="fade-blur"
tag="h2"
gradientText={false}
className="text-4xl md:text-5xl font-bold text-foreground mb-6"
/>
<p className="text-lg text-accent max-w-2xl">
Zábery z pretekov, tréningov a zákulisia motoršportu. Každá fotografia zachytáva zlomok sekundy plný vášne a rýchlosti.
</p>
</div>
</ScrollReveal>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-[250px]">
{images.map((img, idx) => (
<ScrollReveal
key={idx}
variant="fade-blur"
delay={idx * 0.1}
className={`relative group overflow-hidden rounded-lg card ${img.colSpan} ${img.rowSpan}`}
>
<ImageOrVideo
imageSrc={img.src}
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-end p-6">
<h3 className="text-xl font-bold text-white translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
{img.title}
</h3>
</div>
</ScrollReveal>
))}
</div>
</div>
</div>
);
}

19
src/pages/HomePage/sections/Properties.tsx
View File

@@ -1,19 +0,0 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "properties" section.
import React from 'react';
import FeaturesMediaColumns from "@/components/sections/features/FeaturesMediaColumns";
export default function PropertiesSection(): React.JSX.Element {
return (
<div id="properties" data-section="properties">
<FeaturesMediaColumns
textAnimation="fade"
tag="Galéria"
title="Fotogaléria"
description="Zábery z pretekov, tréningov a zákulisia motoršportu."
items={[{"title":"Na trati","imageSrc":"https://storage.googleapis.com/webild/default/templates/racing/gallery/gallery-1.webp","description":"Záber z posledných pretekov sezóny."},{"title":"V boxoch","description":"Príprava vozidla pred štartom.","imageSrc":"https://storage.googleapis.com/webild/default/templates/racing/gallery/gallery-2.webp"},{"title":"Pódium","description":"Oslava víťazstva na pódiu.","imageSrc":"https://storage.googleapis.com/webild/default/templates/racing/gallery/gallery-3.webp"},{"description":"Detailný pohľad na pretekársky špeciál.","imageSrc":"https://storage.googleapis.com/webild/default/templates/racing/gallery/gallery-4.webp","title":"Technika"},{"title":"Fokus","description":"Sústredenie pred dôležitým pretekom.","imageSrc":"https://storage.googleapis.com/webild/default/templates/racing/gallery/gallery-5.webp"},{"imageSrc":"https://storage.googleapis.com/webild/default/templates/racing/gallery/gallery-6.webp","description":"Akčný záber zo zákruty.","title":"Adrenalín"}]}
/>
</div>
);
}