RecentRunner/group-2-threaded-project-petshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix web routing

Browse Source
This commit is contained in:
augmentedpotato
2026-04-02 08:54:24 -06:00
parent 3d6b87a7d2
commit 82935303ba
12 changed files with 407 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
web/app/page.js
View File

@@ -4,15 +4,21 @@ 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 slideshowImages = [
{id: "slide-1", src: "/images/home/slideshow/pet1.jpg", alt: "Happy pets"},
{id: "slide-2", src: "/images/home/slideshow/pet2.jpg", alt: "Pet supplies"},
{id: "slide-3", src: "/images/home/slideshow/pet3.jpg", alt: "Pet grooming"},
{id: "slide-4", src: "/images/home/slideshow/pet4.jpg", alt: "Pet food"},
];
const navImages = [
{id: "nav-adopt", src: "/images/home/navimages/adopt.jpg", alt: "Adopt a Pet", link: "/adopt", title: "Adopt a Pet"},
{id: "nav-products", src: "/images/home/navimages/store.jpg", alt: "Online Store", link: "/products", title: "Online Store"},
{id: "nav-appointments", src: "/images/home/navimages/appointments.jpg", alt: "Appointments", link: "/appointments", title: "Appointments"},
{id: "nav-about", src: "/images/home/navimages/about.jpg", alt: "About Us", link: "/about", title: "About Us"},
];
export default function Home() {
const [currentSlide, setCurrentSlide] = useState(0);
//Auto-advance slideshow
@@ -21,15 +27,7 @@ export default function Home() {
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">
@@ -37,7 +35,7 @@ export default function Home() {
<section className="slideshow-container">
{slideshowImages.map((image, index) => (
<div
key={index}
key={image.id}
className={`slide ${index === currentSlide ? "active" : ""}`}
>
<Image
@@ -63,7 +61,7 @@ export default function Home() {
<section className="image-links-section">
<div className="image-links-container">
{navImages.map((item, index) => (
<Link href={item.link} key={index} className="image-link-card">
<Link href={item.link} key={item.id} className="image-link-card">
<div className="image-wrapper">
<Image
src={item.src}
@@ -80,4 +78,4 @@ export default function Home() {
</section>
</main>
);
}
}