Feat/home page (#17)

* Added synopsis and characters to the Home Page

* Added timer to Home Page

* Added dummy logo and some css to Home Page

* Temporarily disable modal overlay (#21)

* Remove modal overlay

* Remove unused import

* Create initial About Us History Page (#16)

* Create initial About Us History Page

* Modify About Us History Page to make background persisten regarding of zoom

---------

Co-authored-by: izruff <[email protected]>

* Replace apostrophe

* Refactor Timer and fix warning

* Update countdown date

---------

Co-authored-by: Rafael Kristoforus Yanto <[email protected]>
Co-authored-by: FerdiHS <[email protected]>
Co-authored-by: izruff <[email protected]>

app/about-us/history/page.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import HistorySummary from '@/app/components/about-us/history/summary';
+import Timeline from '@/app/components/about-us/history/timeline';
+import VideoFrame from '@/app/components/about-us/history/video-frame';
+
+export default function AboutUsHistorypage() {
+  return (
+    <div className="flex flex-col md:flex-row space-y-8 md:space-y-0 md:space-x-8 p-4 md:p-8 items-start bg-black w-full min-h-screen">
+      <div className="w-full md:w-1/4 md:h-full sticky top-8">
+        <Timeline years={[2025, 2024, 2023, 2022, 2021, 2020]} />
+      </div>
+
+      <div className="w-full md:w-2/4 space-y-4">
+        <VideoFrame
+          videoTitle="RickRoll"
+          videoSrc="https://www.youtube.com/embed/dQw4w9WgXcQ?si=tSGI-Y2bIM5CKrxI"
+        />
+        <HistorySummary
+          title="[Nuansa 2024] Keong Mas: Daha to Surabaya"
+          description='"Keongmas," which translates to "Golden Snail" in Indonesian, could indicate a theme or symbol central to the event. It might involve elements related to the cultural significance or artistic interpretation.'
+        />
+      </div>
+    </div>
+  );
+}

app/components/about-us/history/summary.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+interface HistorySummaryProps {
+    title: string;
+    description: string;
+}
+
+export default function HistorySummary({ title, description }: HistorySummaryProps) {
+    return (
+        <div className="text-left space-y-2 p-4 bg-transparent shadow-md rounded-lg">
+            <h2 className="text-3xl font-bold text-[#ECBF7F] font-poppins text-justify">
+                {title}
+            </h2>
+            <p className="text-white font-poppins text-2xl text-justify">
+                {description}
+            </p>
+        </div>
+    );
+}

app/components/about-us/history/timeline.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface TimelineProps {
+    years: number[];
+}
+
+export default function Timeline({ years }: TimelineProps) {
+    return (
+        <div className="flex flex-col items-center space-y-8 justify-start h-full">
+            {years.map((year, index) => (
+                <div key={index} className="flex items-center">
+                    <div className="flex flex-col items-center mx-2 relative">
+                        <div className="w-2 h-2 bg-[#ECBF7F] rounded-full z-10"/>
+                        {index < years.length - 1? <div className="w-0.5 h-14 bg-[#ECBF7F] absolute"/> : null}
+                    </div>
+                    <span className="text-sm font-bold text-white text-justify ml-2 w-16 text-center">{year}</span>
+                </div>
+            ))}
+        </div>
+    );
+}

app/components/about-us/history/video-frame.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface VideoFrameProps {
+    videoTitle: string;
+    videoSrc: string;
+}
+
+export default function VideoFrame({ videoTitle, videoSrc }: VideoFrameProps) {
+    return (
+        <div className="relative h-0 rounded-lg overflow-hidden shadow-md" style={{ paddingBottom: '56.25%' }}>
+            <iframe
+                width="560"
+                height="315"
+                src={videoSrc}
+                title={videoTitle}
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                referrerPolicy="strict-origin-when-cross-origin"
+                allowFullScreen
+                className="absolute top-0 left-0 w-full h-full"
+            />
+        </div>
+    );
+}

app/components/timer.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface TimeCount {
+  days: string;
+  hours: string;
+  minutes: string;
+  seconds: string;
+}
+
+const getTimeLeft = (expiry: string): TimeCount => {
+  let days = "0";
+  let hours = "0";
+  let minutes = "0";
+  let seconds = "0";
+
+  const difference = new Date(expiry).getTime() - new Date().getTime();
+
+  if (difference <= 0) {
+    return {
+      days,
+      hours,
+      minutes,
+      seconds,
+    };
+  }
+
+  const dys = Math.floor(difference / (1000 * 60 * 60 * 24));
+  const hrs = Math.floor((difference / (1000 * 60 * 60)) % 24);
+  const mnt = Math.floor((difference / (1000 * 60)) % 60);
+  const snd = Math.floor((difference / 1000) % 60);
+
+  days = dys < 10 ? `0${dys}` : dys.toString();
+  hours = hrs < 10 ? `0${hrs}` : hrs.toString();
+  minutes = mnt < 10 ? `0${mnt}` : mnt.toString();
+  seconds = snd < 10 ? `0${snd}` : snd.toString();
+
+  return {
+    days,
+    hours,
+    minutes,
+    seconds,
+  };
+};
+
+const NumberDisplay = ({ value, label }: { value: string; label: string }) => {
+  return (
+    <>
+      <span
+        className="flex flex-col justify-center items-center text-orange-200 text-2xl lg:text-4xl w-16 sm:w-24 lg:w-32"
+        suppressHydrationWarning
+      >
+        {value}
+        <small className="text-xs lg:text-sm uppercase font-semibold text-white pt-1">
+          {label}
+        </small>
+      </span>
+    </>
+  );
+}
+
+const Timer = ({ launchDate }: { launchDate: string }) => {
+  const [timeLeft, setTimeLeft] = useState<TimeCount>(getTimeLeft(launchDate));
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeLeft(getTimeLeft(launchDate));
+    }, 1000);
+  }, [launchDate]);
+
+  return (
+    <div className="flex justify-center lg:justify-start mt-10 gap-1">
+      <NumberDisplay value={timeLeft.days} label="Days" />
+      <NumberDisplay value={timeLeft.hours} label="Hours" />
+      <NumberDisplay value={timeLeft.minutes} label="Minutes" />
+      <NumberDisplay value={timeLeft.seconds} label="Seconds" />
+    </div>
+  );
+};
+
+export default Timer;

app/layout.tsx

@@ -2,7 +2,6 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import Navbar from "./components/navbar";
-import { Suspense } from "react";
 import ModalOverlay from "./components/modal-overlay";
 import Link from "next/link";
 
@@ -23,7 +22,6 @@ export default function RootLayout({
       <body className={inter.className}>
         <Navbar />
         {children}
-        <ModalOverlay />
       </body>
     </html>
   );

app/page.tsx

@@ -1,12 +1,48 @@
 import Image from "next/image";
+import Timer from "./components/timer";
+
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-0">
+    <main className="flex min-h-screen flex-col items-center justify-between p-0 bg-teal-950 text-white">
       <div className="flex flex-col items-center justify-center h-screen w-full">
-        <h1 className="text-4xl md:text-6xl font-bold text-center">
-          Coming Soon: NUANSA 2025
-        </h1>
+        <Image src={'/images/logo/nuansa_logo.png'} alt={'logo'} width={0} height={0} sizes="100vw" style={{ width: '12rem', height: 'auto' }}/>
+        <Timer launchDate="09-07-2025" />
+      </div>
+      <div className="flex flex-col itemscenter justify center w-full py-6 px-8 sm:py-12 sm:px-16 md:py-20 md:px-32">
+        <h2 className="text-3xl md:text-4xl pb-4 sm:pb-6 md:pb-10 font-bold text-center text-orange-200">
+          Synopsis
+        </h2>
+        <p className="text-center text-base sm:text-lg md:text-xl">
+          The daughter is very lazy and refuses to help her sick mother, instead treating her cruelly. 
+          As punishment for her mistreatment of her mother, a prayer by the widow causes the daughter to be struck by lightning and turned into a crying stone statue. 
+          The story teaches the importance of honoring one&apos;s parents.
+        </p>
+      </div>
+      <div className="w-full py-4 px-8 sm:py-12 sm:px-20 md:py-16 md:px-30">
+        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-orange-200">
+          Characters
+        </h2>
+        <div className="flex justify-between">
+          <div className="flex flex-col w-24 sm:w-32 md:w-40 lg:w-64">
+            <Image src={'/images/characters/character_template.png'} alt={'character'} width={0} height={0} sizes="100vw" style={{ width: '100%', height: 'auto', borderRadius: '8px' }}/>
+            <p className="text-center text-xs md:text-base p-1 md:p-4">
+              The daughter is very lazy and refuses to help her sick mother, instead treating her cruelly. 
+            </p>
+          </div>
+          <div className="flex flex-col w-24 sm:w-32 md:w-40 lg:w-64">
+            <Image src={'/images/characters/character_template.png'} alt={'character'} width={0} height={0} sizes="100vw" style={{ width: '100%', height: 'auto', borderRadius: '8px' }}/>
+            <p className="text-center text-xs md:text-base p-1 md:p-4">
+              The daughter is very lazy and refuses to help her sick mother, instead treating her cruelly. 
+            </p>
+          </div>
+          <div className="flex flex-col w-24 sm:w-32 md:w-40 lg:w-64">
+            <Image src={'/images/characters/character_template.png'} alt={'character'} width={0} height={0} sizes="100vw" style={{ width: '100%', height: 'auto', borderRadius: '8px' }}/>
+            <p className="text-center text-xs md:text-base p-1 md:p-4">
+              The daughter is very lazy and refuses to help her sick mother, instead treating her cruelly. 
+            </p>
+          </div>
+        </div>
       </div>
       <footer className="w-full py-4 text-center text-white">
         <p>© 2025 NUANSA. All rights reserved.</p>