uploading index to repo

2026-03-24 16:56:03 -06:00
parent 79f8514f3e
commit a7dfe3962d
27 changed files with 7116 additions and 0 deletions
--- a/web/app/page.js
+++ b/web/app/page.js
@@ -0,0 +1,83 @@
+"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]);
+
+  // Four images that link 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 */}
+      <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>
+
+      {/* Centered 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>
+
+      {/* Four Image Links Section */}
+      <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>
+  );
+}