fraqtal/sent-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: transfer repo

Browse Source
This commit is contained in:
Danijel
2026-01-19 20:21:14 +01:00
commit 7d2fb0c737
213 changed files with 18085 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
components/home/HeroCarousel.tsx Normal file
View File

@@ -0,0 +1,184 @@
"use client";
import { Button } from "@/components/ui/Button";
import { Carousel } from "@/components/ui/Carousel";
import { Section } from "@/components/ui/Section";
import { Heading, Text } from "@/components/ui/Typography";
import { useTranslation } from "@/lib/hooks/useTranslation";
import { CarouselSlide } from "@/lib/types/carousel";
import { container } from "@/lib/utils";
import Image from "next/image";
export default function HeroCarousel() {
const { t } = useTranslation();
// Carousel data with translations
const carouselData: CarouselSlide[] = [
{
id: 1,
title: t('hero.title'),
titleColored: t('hero.title_colored'),
titleEnd: t('hero.title_end'),
description: t('hero.description'),
buttonText: t('hero.build_box_button'),
buttonLink: "/build-box",
imageSrc: "/assets/images/carousel1.png"
},
{
id: 2,
title: t('hero.title'),
titleColored: t('hero.title_colored'),
titleEnd: t('hero.title_end'),
description: t('hero.description'),
buttonText: t('hero.build_box_button'),
buttonLink: "/build-box",
imageSrc: "/assets/images/carousel2.png"
},
{
id: 3,
title: t('hero.title'),
titleColored: t('hero.title_colored'),
titleEnd: t('hero.title_end'),
description: t('hero.description'),
buttonText: t('hero.build_box_button'),
buttonLink: "/build-box",
imageSrc: "/assets/images/carousel1.png"
}
];
// Default slide to use as fallback
const defaultSlide: CarouselSlide = {
id: 0,
title: t('hero.title'),
titleColored: t('hero.title_colored'),
titleEnd: t('hero.title_end'),
description: t('hero.description'),
buttonText: t('hero.build_box_button'),
buttonLink: "/build-box",
imageSrc: "/assets/images/image1.png"
};
// Create mobile slide components - each image needs to be in a container div
const mobileImageSlides = carouselData.map((slide, index) => (
<div key={slide.id} className="relative w-full h-full">
{/* Background gradient */}
<div className="absolute inset-0 bg-gradient-to-r from-[#958C87] via-[#A9A19C] via-[#BDBAB3] via-[#C5C1C0] via-[#C7C1C1] via-[#C3BFBE] to-[#C4C0BF]"></div>
{/* Image container - right side with padding */}
<div className="absolute right-0 top-0 h-full w-1/2">
<div className="relative h-full py-8">
<Image
src={slide.imageSrc}
alt={slide.title}
fill
sizes="50vw"
className="object-contain"
priority={index === 0}
/>
</div>
</div>
</div>
));
// Create desktop slide components
const desktopSlides = carouselData.map((slide, index) => (
<div key={slide.id} className="w-full h-full">
{/* Background gradient */}
<div className="absolute inset-0 bg-gradient-to-r from-[#958C87] via-[#A9A19C] via-[#BDBAB3] via-[#C5C1C0] via-[#C7C1C1] via-[#C3BFBE] to-[#C4C0BF]"></div>
{/* Image container - positioned on the right with padding */}
<div className="absolute right-0 top-0 h-full w-[46.3%]">
<div className="relative h-full py-12">
<Image
src={slide.imageSrc}
alt={slide.title}
fill
sizes="46.3vw"
className="object-contain"
priority={index === 0}
/>
</div>
</div>
{/* Container for proper alignment */}
<div className={`relative h-full ${container} flex items-end`}>
{/* Text overlay */}
<div className="pb-32 max-w-2xl">
<Heading level={1} className="mb-4 text-black text-[40px] leading-[48px] md:text-[60px] md:leading-[76px] flex flex-col font-bold">
<span>{slide.title}</span>
<span className="text-primary">{slide.titleColored}</span>
<span>{slide.titleEnd}</span>
</Heading>
<Text size="lg" className="mb-6 text-black text-[18px] leading-[28px]">
{slide.description}
</Text>
<div className="flex gap-4">
<Button
href={slide.buttonLink}
variant="filled"
size="lg"
>
{slide.buttonText}
</Button>
<Button
href="/products"
variant="custom"
size="lg"
>
{t('hero.ready_made_button')}
</Button>
</div>
</div>
</div>
</div>
));
return (
<Section spacing="none" fullWidth={true}>
<div className="w-full">
{/* Mobile version */}
<div className="md:hidden">
{/* Image carousel */}
<div className="relative w-full h-[350px] bg-gradient-to-r from-[#958C87] via-[#A9A19C] via-[#BDBAB3] via-[#C5C1C0] via-[#C7C1C1] via-[#C3BFBE] to-[#C4C0BF]">
<Carousel
slides={mobileImageSlides}
interval={10000}
indicatorsClassName="absolute bottom-4 left-0 right-0"
className="w-full h-full"
/>
</div>
{/* Text content below carousel on mobile */}
<div className="p-6 bg-white">
<Heading level={1} className="mb-3 text-[40px] leading-[48px] flex flex-col font-bold">
<span>{carouselData[0]?.title || defaultSlide.title}</span>
<span className="text-primary">{carouselData[0]?.titleColored || defaultSlide.titleColored}</span>
<span>{carouselData[0]?.titleEnd || defaultSlide.titleEnd}</span>
</Heading>
<Text className="mb-6 text-[18px] leading-[28px]">
{carouselData[0]?.description || defaultSlide.description}
</Text>
<Button
href={carouselData[0]?.buttonLink || defaultSlide.buttonLink}
variant="filled"
size="lg"
fullWidth
>
{carouselData[0]?.buttonText || defaultSlide.buttonText}
</Button>
</div>
</div>
{/* Desktop version */}
<div className="hidden md:block relative h-[600px]">
<Carousel
slides={desktopSlides}
interval={10000}
indicatorsClassName="absolute bottom-6 left-0 right-0"
className="w-full h-full"
/>
</div>
</div>
</Section>
);
}