Merge version_2_1778606850844 into main
Merge version_2_1778606850844 into main
This commit was merged in pull request #1.
This commit is contained in:
@@ -1,133 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Star } from "lucide-react";
|
||||
import { motion, AnimatePresence } from "motion/react";
|
||||
import { cls } from "@/lib/utils";
|
||||
import Button from "@/components/ui/Button";
|
||||
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
|
||||
type Testimonial = {
|
||||
name: string;
|
||||
handle: string;
|
||||
text: string;
|
||||
rating: number;
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
type HeroOverlayTestimonialProps = {
|
||||
tag: string;
|
||||
title: string;
|
||||
description: string;
|
||||
primaryButton: { text: string; href: string };
|
||||
secondaryButton: { text: string; href: string };
|
||||
testimonials: Testimonial[];
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
const INTERVAL = 5000;
|
||||
|
||||
const HeroOverlayTestimonial = ({
|
||||
tag,
|
||||
title,
|
||||
description,
|
||||
primaryButton,
|
||||
secondaryButton,
|
||||
imageSrc,
|
||||
videoSrc,
|
||||
testimonials,
|
||||
}: HeroOverlayTestimonialProps) => {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (testimonials.length <= 1) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setCurrentIndex((prev) => (prev + 1) % testimonials.length);
|
||||
}, INTERVAL);
|
||||
return () => clearInterval(interval);
|
||||
}, [currentIndex, testimonials.length]);
|
||||
|
||||
const testimonial = testimonials[currentIndex];
|
||||
|
||||
return (
|
||||
<section
|
||||
aria-label="Hero section"
|
||||
className="relative w-full h-svh overflow-hidden flex flex-col justify-start mb-20"
|
||||
>
|
||||
<HeroBackgroundSlot />
|
||||
<ImageOrVideo
|
||||
imageSrc={imageSrc}
|
||||
videoSrc={videoSrc}
|
||||
className="absolute inset-0 w-full h-full object-cover rounded-none"
|
||||
/>
|
||||
|
||||
<div
|
||||
className="absolute z-10 w-[150vw] h-[150vw] left-0 top-0 -translate-x-1/2 -translate-y-1/2 backdrop-blur mask-[radial-gradient(circle,black_20%,transparent_70%)]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<div className="relative z-10 w-content-width mx-auto pt-35">
|
||||
<div className="flex flex-col gap-3 w-full md:w-6/10 lg:w-1/2 xl:w-45/100 2xl:w-4/10">
|
||||
<span className="w-fit px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
|
||||
|
||||
<TextAnimation
|
||||
text={title}
|
||||
variant="fade-blur"
|
||||
gradientText={true}
|
||||
tag="h1"
|
||||
className="text-7xl 2xl:text-8xl font-medium text-primary-cta-text text-balance"
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
text={description}
|
||||
variant="fade-blur"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="text-lg md:text-xl text-primary-cta-text leading-tight text-balance"
|
||||
/>
|
||||
|
||||
<div className="flex flex-wrap gap-3 mt-3">
|
||||
<Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
|
||||
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={currentIndex}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="absolute z-10 bottom-3 left-3 right-3 p-3 xl:p-4 2xl:p-5 card rounded flex flex-col gap-3 xl:gap-4 2xl:gap-5 md:left-auto md:bottom-8 md:right-8 md:max-w-25/100 2xl:max-w-2/10"
|
||||
>
|
||||
<div className="flex gap-1">
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<Star
|
||||
key={index}
|
||||
className={cls("size-5 text-accent", index < testimonial.rating ? "fill-accent" : "fill-transparent")}
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-lg leading-tight text-balance">{testimonial.text}</p>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<ImageOrVideo
|
||||
imageSrc={testimonial.imageSrc}
|
||||
videoSrc={testimonial.videoSrc}
|
||||
className="size-10 rounded-full object-cover"
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-medium">{testimonial.name}</span>
|
||||
<span className="text-sm text-foreground/60">{testimonial.handle}</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroOverlayTestimonial;
|
||||
|
||||
@@ -1,78 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "motion/react";
|
||||
import { useButtonClick } from "@/hooks/useButtonClick";
|
||||
import { cls } from "@/lib/utils";
|
||||
import { useStyle } from "@/components/ui/useStyle";
|
||||
import ButtonArrow from "@/components/ui/ButtonArrow";
|
||||
import ButtonBounce from "@/components/ui/ButtonBounce";
|
||||
import ButtonBubble from "@/components/ui/ButtonBubble";
|
||||
import ButtonElastic from "@/components/ui/ButtonElastic";
|
||||
import ButtonExpand from "@/components/ui/ButtonExpand";
|
||||
import ButtonMagnetic from "@/components/ui/ButtonMagnetic";
|
||||
import ButtonShift from "@/components/ui/ButtonShift";
|
||||
import ButtonStagger from "@/components/ui/ButtonStagger";
|
||||
|
||||
interface ButtonProps {
|
||||
text: string;
|
||||
variant?: "primary" | "secondary";
|
||||
href?: string;
|
||||
onClick?: () => void;
|
||||
animate?: boolean;
|
||||
animationDelay?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const DefaultButton = ({ text, variant = "primary", href = "#", onClick, animate = true, animationDelay = 0, className = "" }: ButtonProps) => {
|
||||
const handleClick = useButtonClick(href, onClick);
|
||||
|
||||
const button = (
|
||||
<a
|
||||
href={href}
|
||||
onClick={handleClick}
|
||||
className={cls("flex items-center justify-center h-9 px-6 text-sm rounded cursor-pointer", variant === "primary" ? "primary-button text-primary-cta-text" : "secondary-button text-secondary-cta-text", className)}
|
||||
>
|
||||
{text}
|
||||
</a>
|
||||
);
|
||||
|
||||
if (!animate) return button;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: animationDelay, ease: "easeOut" }}
|
||||
>
|
||||
{button}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
const Button = (props: ButtonProps) => {
|
||||
const { buttonVariant } = useStyle();
|
||||
|
||||
switch (buttonVariant) {
|
||||
case "arrow":
|
||||
return <ButtonArrow {...props} />;
|
||||
case "bounce":
|
||||
return <ButtonBounce {...props} />;
|
||||
case "bubble":
|
||||
return <ButtonBubble {...props} />;
|
||||
case "elastic":
|
||||
return <ButtonElastic {...props} />;
|
||||
case "expand":
|
||||
return <ButtonExpand {...props} />;
|
||||
case "magnetic":
|
||||
return <ButtonMagnetic {...props} />;
|
||||
case "shift":
|
||||
return <ButtonShift {...props} />;
|
||||
case "stagger":
|
||||
return <ButtonStagger {...props} />;
|
||||
default:
|
||||
return <DefaultButton {...props} />;
|
||||
}
|
||||
};
|
||||
|
||||
export default Button;
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { fetchProduct, type Product } from "@/lib/api/product";
|
||||
|
||||
const useProduct = (productId: string) => {
|
||||
const [product, setProduct] = useState<Product | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const loadProduct = async () => {
|
||||
if (!productId) {
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const data = await fetchProduct(productId);
|
||||
if (isMounted) {
|
||||
setProduct(data);
|
||||
}
|
||||
} catch (err) {
|
||||
if (isMounted) {
|
||||
setError(err instanceof Error ? err : new Error("Failed to fetch product"));
|
||||
}
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadProduct();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [productId]);
|
||||
|
||||
return { product, isLoading, error };
|
||||
};
|
||||
|
||||
export default useProduct;
|
||||
|
||||
@@ -25,7 +25,7 @@ export default function HomePage() {
|
||||
text: "Get a Consultation",
|
||||
href: "#contact",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/ceramic-tiles-wooden-desk_23-2148155190.jpg"
|
||||
imageSrc="https://pixabay.com/get/gcb194901229a5b8226140cf4e7658a441159afb46da218f8597fdddfc215453d500d6c5db5e80cc834a09dfc7369bd2da81ed5fb3fe560484df940e91bdda5b0_1280.jpg?id=1866667"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
@@ -34,7 +34,7 @@ export default function HomePage() {
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTestimonial
|
||||
tag="Our Legacy"
|
||||
quote="LumberCraft Artisans transformed our vision into a stunning reality. Their attention to detail and dedication to perfection are unmatched. We couldn't be happier with our custom timber work."
|
||||
quote="Hey how's it going?"
|
||||
author="Eleanor Vance"
|
||||
role="Residential Client"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-young-smiling-woman-listens-music-her-black-wireless-earphones-using-headphones_1258-201724.jpg"
|
||||
|
||||
Reference in New Issue
Block a user