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

Styling refactor

Browse Source
This commit is contained in:
augmentedpotato
2026-04-18 16:12:43 -06:00
committed by Harkamal Randhawa
parent 148b587c05
commit 79c42574f6
21 changed files with 829 additions and 4509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
web/app/page.js
View File

@@ -20,85 +20,66 @@ const navImages = [
export default function Home() {
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);
const timer = setInterval(() => { setCurrentSlide((prev) => (prev + 1) % slideshowImages.length); }, 7500);
return () => clearInterval(timer);
}, []);
return (
<main className="home-page">
<main className="min-h-screen">
{/* Slideshow */}
<section className="slideshow-container">
<section className="relative w-full h-[500px] overflow-hidden max-[1024px]:h-[400px] max-[768px]:h-[300px] max-[480px]:h-[250px]">
{slideshowImages.map((image, index) => (
<div
key={image.id}
className={`slide ${index === currentSlide ? "active" : ""}`}
>
<Image
src={image.src}
alt={image.alt}
fill
priority={index === 0}
className="slide-image"
sizes="100vw"
/>
<div key={image.id} className={`slide ${index === currentSlide ? "active" : ""}`}>
<Image src={image.src} alt={image.alt} fill priority={index === 0} className="object-cover" 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 className="text-center py-16 px-8 bg-gradient-to-b from-[#f9f9f9] to-white max-[480px]:py-8 max-[480px]:px-4">
<h1 className="text-5xl font-bold text-[#333] mb-4 tracking-tight max-[1024px]:text-4xl max-[768px]:text-3xl max-[480px]:text-2xl">Welcome to Leon&apos;s Pet Store</h1>
<p className="text-2xl font-light text-[#666] mb-8 max-[768px]:text-[1.25rem] max-[480px]:text-base">Your One-Stop Shop for All Things Pets</p>
<div className="w-[100px] h-1 bg-[#e68672] mx-auto mt-8 rounded-sm"></div>
</section>
{/* Image Hyperlinks */}
<section className="image-links-section">
<div className="image-links-container">
{navImages.map((item, index) => (
<Link href={item.link} key={item.id} 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"
/>
<section className="max-w-[1200px] mx-auto px-8 py-8 max-[768px]:px-4">
<div className="grid grid-cols-3 gap-8 max-[768px]:grid-cols-2 max-[768px]:gap-6 max-[480px]:grid-cols-1 max-[480px]:gap-4">
{navImages.map((item) => (
<Link href={item.link} key={item.id} className="no-underline text-inherit transition-transform duration-300 hover:-translate-y-1.5 flex flex-col items-center group">
<div className="relative w-full aspect-square rounded-[20px] overflow-hidden shadow-[0_4px_8px_rgba(0,0,0,0.1)] mb-4">
<Image src={item.src} alt={item.alt} fill className="object-cover transition-transform duration-300 group-hover:scale-110" sizes="(max-width: 768px) 100vw, 25vw" />
</div>
<h3 className="image-title">{item.title}</h3>
<h3 className="text-center text-[1.2rem] font-semibold text-[#333] mt-2">{item.title}</h3>
</Link>
))}
</div>
</section>
{/* About Us */}
<section className="info-page">
<div className="info-hero">
<h2 className="info-title">About Us</h2>
<p className="info-subtitle">A full-service pet store built on a love for animals and community.</p>
<div className="title-decoration"></div>
<section className="bg-gradient-to-b from-[#f9f9f9] to-white">
<div className="text-center px-8 pt-10 pb-6">
<h2 className="text-[1.6rem] font-bold text-[#333] mb-2 uppercase tracking-[0.08em]">About Us</h2>
<p className="text-base text-[#888] mb-4 max-w-[520px] mx-auto leading-relaxed">A full-service pet store built on a love for animals and community.</p>
<div className="w-[100px] h-1 bg-[#e68672] mx-auto mt-8 rounded-sm"></div>
</div>
<div className="info-content">
<div className="info-card">
<h3>What We Do</h3>
<div className="max-w-[1200px] mx-auto px-8 pb-6 grid grid-cols-3 gap-6 max-[768px]:grid-cols-1">
<div className="bg-white rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.08)] p-6">
<h3 className="mt-0 mb-4 text-[#222]">What We Do</h3>
<p>Leon&apos;s Pet Store is a full-service pet shop offering adoptions, grooming, veterinary appointments, and a wide range of supplies to keep your pets happy and healthy.</p>
</div>
<div className="info-card">
<h3>Our Focus</h3>
<ul className="info-list">
<div className="bg-white rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.08)] p-6">
<h3 className="mt-0 mb-4 text-[#222]">Our Focus</h3>
<ul className="m-0 pl-5 grid gap-2 list-disc">
<li>Support responsible pet adoption</li>
<li>Provide grooming and care services</li>
<li>Offer reliable pet supplies</li>
<li>Create a friendly customer experience</li>
</ul>
</div>
<div className="info-card">
<h3>Visit the Store</h3>
<div className="bg-white rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.08)] p-6">
<h3 className="mt-0 mb-4 text-[#222]">Visit the Store</h3>
<p>Come visit us in person or explore our services online. Whether you&apos;re a first-time pet owner or a seasoned animal lover, we&apos;re here to help every step of the way.</p>
</div>
</div>