diff --git a/frontend/public/Logo_Desktop_purple.svg b/frontend/public/Logo_Desktop_purple.svg new file mode 100644 index 00000000..9aa9456b --- /dev/null +++ b/frontend/public/Logo_Desktop_purple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/slide4.png b/frontend/public/slide4.png new file mode 100644 index 00000000..4d501592 Binary files /dev/null and b/frontend/public/slide4.png differ diff --git a/frontend/public/spring.png b/frontend/public/spring.png new file mode 100644 index 00000000..301582ae Binary files /dev/null and b/frontend/public/spring.png differ diff --git a/frontend/public/static1.png b/frontend/public/static1.png new file mode 100644 index 00000000..32d2ab30 Binary files /dev/null and b/frontend/public/static1.png differ diff --git a/frontend/public/static4.png b/frontend/public/static4.png new file mode 100644 index 00000000..af63e486 Binary files /dev/null and b/frontend/public/static4.png differ diff --git a/frontend/src/app/Carousel.tsx b/frontend/src/app/Carousel.tsx new file mode 100644 index 00000000..b2733e2f --- /dev/null +++ b/frontend/src/app/Carousel.tsx @@ -0,0 +1,127 @@ +// components/Carousel.tsx +"use client"; +import Image from "next/image"; +import { useEffect, useState } from "react"; + +interface CarouselProps { + slides: string[]; + autoPlay?: boolean; + autoPlayInterval?: number; +} + +export default function Carousel({ + slides, + autoPlay = true, + autoPlayInterval = 3000, +}: CarouselProps) { + const [currentIndex, setCurrentIndex] = useState(0); + const [imageDimensions, setImageDimensions] = useState< + { width: number; height: number }[] + >([]); + const [containerHeight, setContainerHeight] = useState(400); + + // Kunin ang dimensions ng mga images + useEffect(() => { + const loadImageDimensions = async () => { + const dimensions = await Promise.all( + slides.map((src) => { + return new Promise<{ width: number; height: number }>((resolve) => { + const img = document.createElement("img"); + img.onload = () => { + resolve({ width: img.width, height: img.height }); + }; + img.src = src; + }); + }), + ); + setImageDimensions(dimensions); + }; + loadImageDimensions(); + }, [slides]); + + // I-adjust ang height base sa kasalukuyang image + useEffect(() => { + if (imageDimensions[currentIndex]) { + const { width, height } = imageDimensions[currentIndex]; + // Compute aspect ratio at i-set ang height + const containerWidth = window.innerWidth; + const calculatedHeight = + (height / width) * Math.min(containerWidth, 1200); + setContainerHeight(calculatedHeight); + } + }, [currentIndex, imageDimensions]); + + // Handle window resize + useEffect(() => { + const handleResize = () => { + if (imageDimensions[currentIndex]) { + const { width, height } = imageDimensions[currentIndex]; + const containerWidth = window.innerWidth; + const calculatedHeight = + (height / width) * Math.min(containerWidth, 1200); + setContainerHeight(calculatedHeight); + } + }; + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, [currentIndex, imageDimensions]); + + useEffect(() => { + if (!autoPlay) return; + const interval = setInterval(() => { + setCurrentIndex((prevIndex) => (prevIndex + 1) % slides.length); + }, autoPlayInterval); + return () => clearInterval(interval); + }, [autoPlay, autoPlayInterval, slides.length]); + + const goToSlide = (index: number) => { + setCurrentIndex(index); + }; + + return ( +
+ {/* Dynamic height container */} +
+ {slides.map((slide: string, index: number) => ( +
+ {`Slide +
+ ))} +
+ + {/* Dots */} +
+ {slides.map((_: string, index: number) => ( +
+
+ ); +} diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index e68abe6b..65705b11 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -1,103 +1,146 @@ -import Image from "next/image"; +"use client"; +import Carousel from "@/app/Carousel"; + +import { useState } from "react"; export default function Home() { + const [isOpen, setIsOpen] = useState(false); return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
+ <> + {/* Navbar */} +
+
-
+ + {/* Right Side */} +
+ {/* Desktop Download Button */} + + + {/* Hamburger Button */} + +
+ + + {/* Mobile Dropdown */} +
- Window icon + + Shop + + + Winter Holiday Sale + + + How it Works + + + Refer & Earn + + + Merchant Solutions + + +
+ + + + {/* Search Bar */} +
+
+ - Examples - - - Globe icon + + + + +
+
+ + {/* Carousel */} +
+
+ - Go to nextjs.org → - - -
+
+ + ); }