83 lines
2.8 KiB
JavaScript
83 lines
2.8 KiB
JavaScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useState, useEffect } from "react";
|
|
|
|
export default function Home() {
|
|
//Slideshow images array
|
|
const slideshowImages = [
|
|
{src: "/images/home/slideshow/pet1.jpg", alt: "Happy pets"},
|
|
{src: "/images/home/slideshow/pet2.jpg", alt: "Pet supplies"},
|
|
{src: "/images/home/slideshow/pet3.jpg", alt: "Pet grooming"},
|
|
{src: "/images/home/slideshow/pet4.jpg", alt: "Pet food"},
|
|
];
|
|
|
|
const [currentSlide, setCurrentSlide] = useState(0);
|
|
|
|
//Auto-advance slideshow
|
|
useEffect(() => {
|
|
//Change slide every 7.5 seconds
|
|
const timer = setInterval(() => {setCurrentSlide((prev) => (prev + 1) % slideshowImages.length);}, 7500);
|
|
|
|
return () => clearInterval(timer);
|
|
}, [slideshowImages.length]);
|
|
|
|
//Hyperlinks to other pages
|
|
const navImages = [
|
|
{src: "/images/home/navimages/adopt.jpg", alt: "Adopt a Pet", link: "/adopt", title: "Adopt a Pet"},
|
|
{src: "/images/home/navimages/store.jpg", alt: "Online Store", link: "/store", title: "Online Store"},
|
|
{src: "/images/home/navimages/appointments.jpg", alt: "Appointments", link: "/appointments", title: "Appointments"},
|
|
{src: "/images/home/navimages/about.jpg", alt: "About Us", link: "/about", title: "About Us"},
|
|
];
|
|
|
|
return (
|
|
<main className="home-page">
|
|
{/* Slideshow */}
|
|
<section className="slideshow-container">
|
|
{slideshowImages.map((image, index) => (
|
|
<div
|
|
key={index}
|
|
className={`slide ${index === currentSlide ? "active" : ""}`}
|
|
>
|
|
<Image
|
|
src={image.src}
|
|
alt={image.alt}
|
|
fill
|
|
priority={index === 0}
|
|
className="slide-image"
|
|
sizes="100vw"
|
|
/>
|
|
</div>
|
|
))}
|
|
</section>
|
|
|
|
{/* Title Section */}
|
|
<section className="centered-title-section">
|
|
<h1 className="main-title">Welcome to Leon's Pet Store</h1>
|
|
<p className="subtitle">Your One-Stop Shop for All Things Pets</p>
|
|
<div className="title-decoration"></div>
|
|
</section>
|
|
|
|
{/* Image Hyperlinks */}
|
|
<section className="image-links-section">
|
|
<div className="image-links-container">
|
|
{navImages.map((item, index) => (
|
|
<Link href={item.link} key={index} className="image-link-card">
|
|
<div className="image-wrapper">
|
|
<Image
|
|
src={item.src}
|
|
alt={item.alt}
|
|
fill
|
|
className="linked-image"
|
|
sizes="(max-width: 768px) 100vw, 25vw"
|
|
/>
|
|
</div>
|
|
<h3 className="image-title">{item.title}</h3>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
} |