Add src/pages/HomePage/sections/ProductsNew.tsx
This commit is contained in:
246
src/pages/HomePage/sections/ProductsNew.tsx
Normal file
246
src/pages/HomePage/sections/ProductsNew.tsx
Normal file
@@ -0,0 +1,246 @@
|
||||
import Button from "@/components/ui/Button";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
export default function ProductsNewSection() {
|
||||
return (
|
||||
<section data-webild-section="products-new" id="products-new" className="relative w-full bg-background">
|
||||
<div className="w-content-width mx-auto space-y-24">
|
||||
|
||||
<div className="text-center max-w-content-width mx-auto">
|
||||
<TextAnimation
|
||||
text="Catálogo de Produtos"
|
||||
variant="fade-blur"
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl font-bold text-foreground mb-4"
|
||||
gradientText={false}
|
||||
/>
|
||||
<p className="text-lg text-accent">
|
||||
Seleciona o modelo e envia-nos uma mensagem para reservar o teu.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Football Row */}
|
||||
<div className="space-y-8">
|
||||
<h3 className="text-3xl font-bold text-foreground">Camisolas de Futebol</h3>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
|
||||
|
||||
<ScrollReveal delay={0} variant="fade">
|
||||
<div className="card flex flex-col h-full overflow-hidden rounded-lg border border-border">
|
||||
<div className="aspect-square w-full relative bg-background-accent">
|
||||
<ImageOrVideo imageSrc="https://storage.googleapis.com/webild/users/user_3EtyL6Iwl8wlOodhQnh3X1mQ2tN/uploaded-1782066657655-jcos8x63.jpg?_wi=1" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="p-4 flex flex-col flex-grow">
|
||||
<h4 className="text-lg font-semibold text-foreground mb-2">Portugal 2026</h4>
|
||||
<p className="text-xl font-bold text-foreground mb-4 mt-auto">75€</p>
|
||||
<Button text="Encomendar" href="#contact" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1} variant="fade">
|
||||
<div className="card flex flex-col h-full overflow-hidden rounded-lg border border-border">
|
||||
<div className="aspect-square w-full relative bg-background-accent">
|
||||
<ImageOrVideo imageSrc="https://storage.googleapis.com/webild/users/user_3EtyL6Iwl8wlOodhQnh3X1mQ2tN/uploaded-1782067097587-e6dwfofk.avif" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="p-4 flex flex-col flex-grow">
|
||||
<h4 className="text-lg font-semibold text-foreground mb-2">FC Porto 25/26</h4>
|
||||
<p className="text-xl font-bold text-foreground mb-4 mt-auto">70€</p>
|
||||
<Button text="Encomendar" href="#contact" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.2} variant="fade">
|
||||
<div className="card flex flex-col h-full overflow-hidden rounded-lg border border-border">
|
||||
<div className="aspect-square w-full relative bg-background-accent">
|
||||
<ImageOrVideo imageSrc="https://storage.googleapis.com/webild/users/user_3EtyL6Iwl8wlOodhQnh3X1mQ2tN/uploaded-1782066804114-6k3g7njy.jpg" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="p-4 flex flex-col flex-grow">
|
||||
<h4 className="text-lg font-semibold text-foreground mb-2">Benfica 25/26</h4>
|
||||
<p className="text-xl font-bold text-foreground mb-4 mt-auto">70€</p>
|
||||
<Button text="Encomendar" href="#contact" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.3} variant="fade">
|
||||
<div className="card flex flex-col h-full overflow-hidden rounded-lg border border-border">
|
||||
<div className="aspect-square w-full relative bg-background-accent">
|
||||
<ImageOrVideo imageSrc="https://storage.googleapis.com/webild/users/user_3EtyL6Iwl8wlOodhQnh3X1mQ2tN/uploaded-1782066844932-8dwofi7e.jpg" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="p-4 flex flex-col flex-grow">
|
||||
<h4 className="text-lg font-semibold text-foreground mb-2">Sporting CP 25/26</h4>
|
||||
<p className="text-xl font-bold text-foreground mb-4 mt-auto">70€</p>
|
||||
<Button text="Encomendar" href="#contact" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.4} variant="fade">
|
||||
<div className="card flex flex-col h-full overflow-hidden rounded-lg border border-border">
|
||||
<div className="aspect-square w-full relative bg-background-accent">
|
||||
<ImageOrVideo imageSrc="https://storage.googleapis.com/webild/users/user_3EtyL6Iwl8wlOodhQnh3X1mQ2tN/uploaded-1782066909093-lxizffdh.jpg" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="p-4 flex flex-col flex-grow">
|
||||
<h4 className="text-lg font-semibold text-foreground mb-2">Real Madrid 25/26</h4>
|
||||
<p className="text-xl font-bold text-foreground mb-4 mt-auto">75€</p>
|
||||
<Button text="Encomendar" href="#contact" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* NBA Row */}
|
||||
<div className="space-y-8">
|
||||
<h3 className="text-3xl font-bold text-foreground">Camisolas NBA</h3>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
|
||||
|
||||
<ScrollReveal delay={0} variant="fade">
|
||||
<div className="card flex flex-col h-full overflow-hidden rounded-lg border border-border">
|
||||
<div className="aspect-square w-full relative bg-background-accent">
|
||||
<ImageOrVideo imageSrc="https://storage.googleapis.com/webild/users/user_3EtyL6Iwl8wlOodhQnh3X1mQ2tN/uploaded-1782066657655-jcos8x63.jpg?_wi=2" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="p-4 flex flex-col flex-grow">
|
||||
<h4 className="text-lg font-semibold text-foreground mb-2">Lakers LeBron James</h4>
|
||||
<p className="text-xl font-bold text-foreground mb-4 mt-auto">65€</p>
|
||||
<Button text="Encomendar" href="#contact" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1} variant="fade">
|
||||
<div className="card flex flex-col h-full overflow-hidden rounded-lg border border-border">
|
||||
<div className="aspect-square w-full relative bg-background-accent">
|
||||
<ImageOrVideo imageSrc="https://storage.googleapis.com/webild/users/user_3EtyL6Iwl8wlOodhQnh3X1mQ2tN/uploaded-1782067190413-umsmadqj.webp" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="p-4 flex flex-col flex-grow">
|
||||
<h4 className="text-lg font-semibold text-foreground mb-2">Warriors Stephen Curry</h4>
|
||||
<p className="text-xl font-bold text-foreground mb-4 mt-auto">65€</p>
|
||||
<Button text="Encomendar" href="#contact" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.2} variant="fade">
|
||||
<div className="card flex flex-col h-full overflow-hidden rounded-lg border border-border">
|
||||
<div className="aspect-square w-full relative bg-background-accent">
|
||||
<ImageOrVideo imageSrc="https://storage.googleapis.com/webild/users/user_3EtyL6Iwl8wlOodhQnh3X1mQ2tN/uploaded-1782067496488-4nq74hk8.webp" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="p-4 flex flex-col flex-grow">
|
||||
<h4 className="text-lg font-semibold text-foreground mb-2">Bulls Michael Jordan</h4>
|
||||
<p className="text-xl font-bold text-foreground mb-4 mt-auto">80€</p>
|
||||
<Button text="Encomendar" href="#contact" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.3} variant="fade">
|
||||
<div className="card flex flex-col h-full overflow-hidden rounded-lg border border-border">
|
||||
<div className="aspect-square w-full relative bg-background-accent">
|
||||
<ImageOrVideo imageSrc="https://storage.googleapis.com/webild/users/user_3EtyL6Iwl8wlOodhQnh3X1mQ2tN/uploaded-1782067580191-fh6wbpef.webp" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="p-4 flex flex-col flex-grow">
|
||||
<h4 className="text-lg font-semibold text-foreground mb-2">Celtics Jayson Tatum</h4>
|
||||
<p className="text-xl font-bold text-foreground mb-4 mt-auto">65€</p>
|
||||
<Button text="Encomendar" href="#contact" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.4} variant="fade">
|
||||
<div className="card flex flex-col h-full overflow-hidden rounded-lg border border-border">
|
||||
<div className="aspect-square w-full relative bg-background-accent">
|
||||
<ImageOrVideo imageSrc="https://storage.googleapis.com/webild/users/user_3EtyL6Iwl8wlOodhQnh3X1mQ2tN/uploaded-1782067688079-ns5tlmn5.avif" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="p-4 flex flex-col flex-grow">
|
||||
<h4 className="text-lg font-semibold text-foreground mb-2">Mavericks Luka Doncic</h4>
|
||||
<p className="text-xl font-bold text-foreground mb-4 mt-auto">65€</p>
|
||||
<Button text="Encomendar" href="#contact" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Baseball Row */}
|
||||
<div className="space-y-8">
|
||||
<h3 className="text-3xl font-bold text-foreground">Camisolas Baseball</h3>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
|
||||
|
||||
<ScrollReveal delay={0} variant="fade">
|
||||
<div className="card flex flex-col h-full overflow-hidden rounded-lg border border-border">
|
||||
<div className="aspect-square w-full relative bg-background-accent">
|
||||
<ImageOrVideo imageSrc="https://storage.googleapis.com/webild/users/user_3EtyL6Iwl8wlOodhQnh3X1mQ2tN/uploaded-1782067847129-cz9g3l5t.webp" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="p-4 flex flex-col flex-grow">
|
||||
<h4 className="text-lg font-semibold text-foreground mb-2">Yankees Aaron Judge</h4>
|
||||
<p className="text-xl font-bold text-foreground mb-4 mt-auto">60€</p>
|
||||
<Button text="Encomendar" href="#contact" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1} variant="fade">
|
||||
<div className="card flex flex-col h-full overflow-hidden rounded-lg border border-border">
|
||||
<div className="aspect-square w-full relative bg-background-accent">
|
||||
<ImageOrVideo imageSrc="https://storage.googleapis.com/webild/users/user_3EtyL6Iwl8wlOodhQnh3X1mQ2tN/uploaded-1782067915727-sibuk1hu.jpg" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="p-4 flex flex-col flex-grow">
|
||||
<h4 className="text-lg font-semibold text-foreground mb-2">Dodgers Shohei Ohtani</h4>
|
||||
<p className="text-xl font-bold text-foreground mb-4 mt-auto">60€</p>
|
||||
<Button text="Encomendar" href="#contact" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.2} variant="fade">
|
||||
<div className="card flex flex-col h-full overflow-hidden rounded-lg border border-border">
|
||||
<div className="aspect-square w-full relative bg-background-accent">
|
||||
<ImageOrVideo imageSrc="https://storage.googleapis.com/webild/users/user_3EtyL6Iwl8wlOodhQnh3X1mQ2tN/uploaded-1782068040968-8pfyqdjq.webp" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="p-4 flex flex-col flex-grow">
|
||||
<h4 className="text-lg font-semibold text-foreground mb-2">Red Sox Rafael Devers</h4>
|
||||
<p className="text-xl font-bold text-foreground mb-4 mt-auto">60€</p>
|
||||
<Button text="Encomendar" href="#contact" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.3} variant="fade">
|
||||
<div className="card flex flex-col h-full overflow-hidden rounded-lg border border-border">
|
||||
<div className="aspect-square w-full relative bg-background-accent">
|
||||
<ImageOrVideo imageSrc="https://storage.googleapis.com/webild/users/user_3EtyL6Iwl8wlOodhQnh3X1mQ2tN/uploaded-1782068167640-t2njzq9x.avif" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="p-4 flex flex-col flex-grow">
|
||||
<h4 className="text-lg font-semibold text-foreground mb-2">Astros Jose Altuve</h4>
|
||||
<p className="text-xl font-bold text-foreground mb-4 mt-auto">60€</p>
|
||||
<Button text="Encomendar" href="#contact" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.4} variant="fade">
|
||||
<div className="card flex flex-col h-full overflow-hidden rounded-lg border border-border">
|
||||
<div className="aspect-square w-full relative bg-background-accent">
|
||||
<ImageOrVideo imageSrc="https://storage.googleapis.com/webild/users/user_3EtyL6Iwl8wlOodhQnh3X1mQ2tN/uploaded-1782068259317-270kz4oh.png" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div className="p-4 flex flex-col flex-grow">
|
||||
<h4 className="text-lg font-semibold text-foreground mb-2">Braves Ronald Acuña Jr.</h4>
|
||||
<p className="text-xl font-bold text-foreground mb-4 mt-auto">60€</p>
|
||||
<Button text="Encomendar" href="#contact" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user