Add some styles and assets (#47)

* Apply color themes * Add background to home page * Update testcase
nuansacp2025 · Oct 15, 2024 · 71e7d20 · 71e7d20
1 parent 25ed380
commit 71e7d20
Show file tree

Hide file tree

Showing 17 changed files with 52 additions and 44 deletions.
diff --git a/__tests__/components/about-us/history/year.test.tsx b/__tests__/components/about-us/history/year.test.tsx
@@ -20,7 +20,7 @@ describe('Year Component', () => {
             <Year year={year} selected={true} setSelected={setSelected} />
         );
 
-        expect(getByText(year.toString())).toHaveClass('text-[#ECBF7F]');
+        expect(getByText(year.toString())).toHaveClass('text-orange-a');
     });
 
     it('applies the correct class when not selected', () => {

diff --git a/app/about-us/page.tsx b/app/about-us/page.tsx
@@ -22,7 +22,7 @@ export default function AboutUs() {
 
         isModalOpen && 
         <ModalOverlay onClose={onClose}>
-          <div className="text-3xl mb-8 text-lime-900">
+          <div className="text-xl mb-8 text-gray-900">
             headddddddddasdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffadfasdhe
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -50,18 +50,18 @@ export default function AboutUs() {
       </section>
 
       {/* Fun Fact Section */}
-      <section className="text-center py-12 px-4 md:px-20 bg-orange-50 flex flex-col md:flex-row items-center justify-center">
-        <h2 className="text-3xl mb-8 text-lime-900">Fun Fact</h2>
+      <section className="text-center py-12 px-4 md:px-20 bg-orange-a flex flex-col md:flex-row items-center justify-center">
+        <h2 className="text-3xl mb-8 text-green-a">Fun Fact</h2>
         <div className="flex-grow px-4 md:px-20">
           <FunFact>
-            <h2 className="text-3xl mb-8 text-lime-900">Fun Fact</h2>
-            <h2 className="text-3xl mb-8 text-lime-900">Fun Fict</h2>
+            <h2 className="text-3xl mb-8 text-green-a">Fun Fact</h2>
+            <h2 className="text-3xl mb-8 text-green-a">Fun Fict</h2>
           </FunFact>
         </div>
       </section>
 
       {/* Vision and Mission Section */}
-      <section className="grid grid-cols-1 md:grid-cols-2 bg-orange-50 gap-8 py-12 px-4 md:px-10 text-lime-900">
+      <section className="grid grid-cols-1 md:grid-cols-2 bg-orange-a gap-8 py-12 px-4 md:px-10 text-green-a">
         <div className="text-left">
           <h2 className="text-2xl font-semibold mb-4">Our Vision</h2>
           <p className="text-lg">
@@ -77,7 +77,7 @@ export default function AboutUs() {
       </section>
 
        {/* Memorable Clips Section */}
-       <section className="flex flex-col items-center justify-center py-12 text-center bg-lime-950 text-white pb-10">
+       <section className="flex flex-col items-center justify-center py-12 text-center bg-green-a text-white pb-10">
         <h2 className="text-3xl font-bold mb-5">Memorable Clips</h2>
         <div className="flex flex-col md:flex-row items-center justify-center gap-y-8 md:gap-x-20">
           <Carousel>
@@ -99,7 +99,7 @@ export default function AboutUs() {
           </Carousel>
         </div>
       </section>
-      <section className="text-center py-12 bg-orange-50">
+      <section className="text-center py-12 bg-orange-a">
         {/* Flex container for Why Join Us section */}
         <div className="flex flex-col-reverse md:flex-row items-center justify-center pb-10 gap-8 md:gap-20">
           {/* Grid of Features (Networking, Collaboration, Creativity) */}
@@ -117,13 +117,13 @@ export default function AboutUs() {
 
           {/* Why Join Us heading */}
           <div className="mb-8 md:mb-0">
-            <h1 className="text-4xl mb-4 text-center text-lime-950">Why Join Us</h1>
+            <h1 className="text-4xl mb-4 text-center text-green-a">Why Join Us</h1>
           </div>
         </div>
 
         {/* Video section */}
         <div className="flex flex-col md:flex-row items-center justify-center pb-10 gap-8 md:gap-20">
-          <h1 className="text-4xl mb-4 text-lime-950">View Our Latest Show {">>"}</h1>
+          <h1 className="text-4xl mb-4 text-green-a">View Our Latest Show {">>"}</h1>
           <VideoFrame
             videoTitle="RickRoll"
             videoSrc="https://www.youtube.com/embed/dQw4w9WgXcQ?si=tSGI-Y2bIM5CKrxI"

diff --git a/app/components/about-us/history/summary.tsx b/app/components/about-us/history/summary.tsx
@@ -8,7 +8,7 @@ interface HistorySummaryProps {
 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">
+            <h2 className="text-3xl font-bold text-orange-a font-poppins text-justify">
                 {title}
             </h2>
             <p className="text-white font-poppins text-2xl text-justify">

diff --git a/app/components/about-us/history/timeline.tsx b/app/components/about-us/history/timeline.tsx
@@ -14,8 +14,8 @@ export default function Timeline({ years, selectedHistoryIndex, setSelectedHisto
             {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 className="w-2 h-2 bg-orange-a rounded-full z-10"/>
+                        {index < years.length - 1? <div className="w-0.5 h-14 bg-orange-a absolute"/> : null}
                     </div>
                     <Year
                         year={year}

diff --git a/app/components/about-us/history/year.tsx b/app/components/about-us/history/year.tsx
@@ -7,7 +7,7 @@ interface YearProps {
 export default function Year({ year, selected, setSelected }: YearProps) {
     return (
         <button 
-            className={`text-sm font-bold font-poppin text-justify ml-2 w-16 text-center ${selected ? 'text-[#ECBF7F]' : 'text-gray-500'}`} 
+            className={`text-sm font-bold font-poppin text-justify ml-2 w-16 text-center ${selected ? 'text-orange-a' : 'text-gray-500'}`} 
             onClick={setSelected}
         >
             {year}

diff --git a/app/components/footer.tsx b/app/components/footer.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 
 const Footer = () => {
   return (
-    <div className="flex items-center bg-[#1a7f7d] justify-start px-8 py-4 lg:justify-between">
+    <div className="flex items-center bg-green-b justify-start px-8 py-4 lg:justify-between">
       <div className="flex items-center gap-x-4">
         <Link href="https://www.facebook.com/nuansa.culturalproductions/">
           <Image src="/images/logo/facebook.svg" width={20} height={20} alt="Facebook" />

diff --git a/app/components/navbar.tsx b/app/components/navbar.tsx
@@ -70,7 +70,7 @@ const Navbar = () => {
   const [mobileMenuHidden, setMobileMenuHidden] = React.useState(true);
 
   return (
-    <nav className="flex sticky top-0 h-[72] shadow-lg items-center justify-between bg-teal-950 p-2 md:p-0">
+    <nav className="flex sticky top-0 h-[72] shadow-lg items-center justify-between bg-green-a p-2 md:p-0">
       <div>
         <span className="md:hidden ml-4 text-2xl text-white font-bold leading-8">
           NUANSA
@@ -80,7 +80,7 @@ const Navbar = () => {
         ${mobileMenuHidden ? "hidden" : "flex"}
         absolute h-max inset-0 top-full z-10 md:relative md:flex md:top-0 
         flex-col p-2 md:flex-row md:items-center md:justify-center md:p-0 md:gap-6 lg:gap-12
-        bg-teal-900 md:bg-inherit
+        bg-green-b md:bg-inherit
         `}>
         <NavbarItem href="/" label="Home" />
         <NavbarItem href="/about-us" label="About Us">

diff --git a/app/components/timer.tsx b/app/components/timer.tsx
@@ -48,7 +48,7 @@ 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"
+        className="flex flex-col justify-center items-center text-orange-a text-2xl lg:text-4xl w-16 sm:w-24 lg:w-32"
         suppressHydrationWarning
       >
         {value}

diff --git a/app/contact-us/page.tsx b/app/contact-us/page.tsx
@@ -4,7 +4,7 @@ import GeneralForm from "@/app/components/contact-us/general-form";
 
 export default function ContactPage() {
     return (
-        <div className="items-center bg-teal-950 space-y-20 px-4 md:px-12 lg:px-16 pb-12">
+        <div className="items-center bg-green-a space-y-20 px-4 md:px-12 lg:px-16 pb-12">
             <div className="sm:grid sm:grid-cols-2 text-white py-10">
                 <div className="sm:place-self-center mx-auto my-auto">
                     <GeneralForm/>
@@ -14,7 +14,7 @@ export default function ContactPage() {
                            style={{ width: '12rem', height: 'auto' }}/>
                 </div>
             </div>
-            <div className="sm:grid sm:grid-cols-2 bg-amber-50 rounded-md text-black bottom-8 p-10">
+            <div className="sm:grid sm:grid-cols-2 bg-orange-a rounded-md text-black bottom-8 p-10">
                 <div className="sm:place-self-center hidden sm:block">
                     <Image src={'/images/logo/nuansa_logo.png'} alt={'logo'} width={0} height={0} sizes="100vw"
                            style={{width: '12rem', height: 'auto'}}/>

diff --git a/app/our-team/arts/page.tsx b/app/our-team/arts/page.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 
 export default function Page() {
   return (
-    <main className="min-h-screen bg-orange-50">
+    <main className="min-h-screen">
       <section className="relative w-full py-12 px-16 overflow-hidden md:py-20 md:px-0">
         <Image src={"/images/our-team/what-we-do.png"} alt="What We Do" fill={true} objectFit="cover" />
         <div className="relative w-full flex flex-col items-center md:flex-row">
@@ -13,7 +13,7 @@ export default function Page() {
             </h2>
           </div>
           <div className="flex flex-1 flex-col items-center justify-center gap-4 md:items-start md:pr-16">
-            <h2 className="text-3xl md:text-4xl font-bold text-orange-200">
+            <h2 className="text-3xl md:text-4xl font-bold text-orange-a">
               What We Do
             </h2>
             <p className="text-lg md:text-xl text-white">
@@ -24,10 +24,10 @@ export default function Page() {
       </section>
 
       <section className="w-full flex flex-col items-center py-12 px-16 md:py-20 md:px-32">
-        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-lime-950">
+        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-green-a">
           Divisions and Tasks
         </h2>
-        <h3 className="text-2xl md:text-3xl pb-6 md:pb-8 font-semibold text-lime-950">
+        <h3 className="text-2xl md:text-3xl pb-6 md:pb-8 font-semibold text-green-a">
           Members
         </h3>
         <div className="grid gap-8 place-content-center place-items-stretch grid-cols-[minmax(0,_350px)] md:grid-cols-[repeat(2,_minmax(0,_350px))] lg:grid-cols-[repeat(3,_minmax(0,_350px))] md:gap-16">

diff --git a/app/our-team/external-affairs/page.tsx b/app/our-team/external-affairs/page.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 
 export default function Page() {
   return (
-    <main className="min-h-screen bg-orange-50">
+    <main className="min-h-screen">
       <section className="relative w-full py-12 px-16 overflow-hidden md:py-20 md:px-0">
         <Image src={"/images/our-team/what-we-do.png"} alt="What We Do" fill={true} objectFit="cover" />
         <div className="relative w-full flex flex-col items-center md:flex-row">
@@ -13,7 +13,7 @@ export default function Page() {
             </h2>
           </div>
           <div className="flex flex-1 flex-col items-center justify-center gap-4 md:items-start md:pr-16">
-            <h2 className="text-3xl md:text-4xl font-bold text-orange-200">
+            <h2 className="text-3xl md:text-4xl font-bold text-orange-a">
               What We Do
             </h2>
             <p className="text-lg md:text-xl text-white">
@@ -24,10 +24,10 @@ export default function Page() {
       </section>
 
       <section className="w-full flex flex-col items-center py-12 px-16 md:py-20 md:px-32">
-        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-lime-950">
+        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-green-a">
           Divisions and Tasks
         </h2>
-        <h3 className="text-2xl md:text-3xl pb-6 md:pb-8 font-semibold text-lime-950">
+        <h3 className="text-2xl md:text-3xl pb-6 md:pb-8 font-semibold text-green-a">
           Members
         </h3>
         <div className="grid gap-8 place-content-center place-items-stretch grid-cols-[minmax(0,_350px)] md:grid-cols-[repeat(2,_minmax(0,_350px))] lg:grid-cols-[repeat(3,_minmax(0,_350px))] md:gap-16">

diff --git a/app/our-team/page.tsx b/app/our-team/page.tsx
@@ -3,23 +3,23 @@ import TeamCard from "../components/our-team/team-card";
 
 export default function Page() {
   return (
-    <main className="min-h-screen bg-teal-950">
+    <main className="min-h-screen bg-green-a">
       <section className="relative w-full flex flex-col items-center py-12 px-16 md:py-20 md:px-32">
-        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-orange-200">
+        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-orange-a">
           Structure
         </h2>
         <Image src={"/images/our-team/structure.png"} alt="Structure" width={800} height={0} />
       </section>
       <section className="w-full flex justify-center py-12 px-16 md:py-20 md:px-32">
-        <div className="w-full flex flex-col items-center -m-8 p-8 md:-m-16 md:p-16 rounded-md bg-orange-200">
-          <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-lime-950">
+        <div className="w-full flex flex-col items-center -m-8 p-8 md:-m-16 md:p-16 rounded-md bg-orange-a">
+          <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-green-a">
           Management Profile
           </h2>
           <Image src={"/images/our-team/structure.png"} alt="Management Profile" width={800} height={0}/>
         </div>
       </section>
       <section className="w-full flex flex-col items-center py-12 px-16 md:py-20 md:px-32">
-        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-orange-200">
+        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-orange-a">
           Find Out More
         </h2>
         <div className="relative w-full flex flex-col justify-center gap-8 md:flex-row">

diff --git a/app/our-team/production/page.tsx b/app/our-team/production/page.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 
 export default function Page() {
   return (
-    <main className="min-h-screen bg-orange-50">
+    <main className="min-h-screen">
       <section className="relative w-full py-12 px-16 overflow-hidden md:py-20 md:px-0">
         <Image src={"/images/our-team/what-we-do.png"} alt="What We Do" fill={true} objectFit="cover" />
         <div className="relative w-full flex flex-col items-center md:flex-row">
@@ -13,7 +13,7 @@ export default function Page() {
             </h2>
           </div>
           <div className="flex flex-1 flex-col items-center justify-center gap-4 md:items-start md:pr-16">
-            <h2 className="text-3xl md:text-4xl font-bold text-orange-200">
+            <h2 className="text-3xl md:text-4xl font-bold text-orange-a">
               What We Do
             </h2>
             <p className="text-lg md:text-xl text-white">
@@ -24,10 +24,10 @@ export default function Page() {
       </section>
 
       <section className="w-full flex flex-col items-center py-12 px-16 md:py-20 md:px-32">
-        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-lime-950">
+        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-green-a">
           Divisions and Tasks
         </h2>
-        <h3 className="text-2xl md:text-3xl pb-6 md:pb-8 font-semibold text-lime-950">
+        <h3 className="text-2xl md:text-3xl pb-6 md:pb-8 font-semibold text-green-a">
           Members
         </h3>
         <div className="grid gap-8 place-content-center place-items-stretch grid-cols-[minmax(0,_350px)] md:grid-cols-[repeat(2,_minmax(0,_350px))] lg:grid-cols-[repeat(3,_minmax(0,_350px))] md:gap-16">

diff --git a/app/page.tsx b/app/page.tsx
@@ -4,13 +4,16 @@ import Timer from "./components/timer";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-0 bg-teal-950 text-white">
+    <main className="flex min-h-screen flex-col items-center justify-between p-0 text-white">
+      <div className="fixed inset-0 -z-10">
+        <Image src={'/images/home/background.png'} alt={'Background'} layout="fill" objectFit="cover" quality={100} />
+      </div>
       <div className="flex flex-col items-center justify-center h-screen w-full">
-        <Image src={'/images/logo/nuansa_logo.png'} alt={'logo'} width={0} height={0} sizes="100vw" style={{ width: '12rem', height: 'auto' }}/>
+        <Image src={'/images/home/the-crying-stone.png'} alt={'The Crying Stone'} width={0} height={0} sizes="100vw" style={{ width: '24rem', 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">
+      <div className="flex flex-col items-center justify-center w-full py-6 px-8 sm:py-12 sm:px-16 md:py-20 md:px-32 bg-transparent">
+        <h2 className="text-3xl md:text-4xl pb-4 sm:pb-6 md:pb-10 font-bold text-center text-orange-a">
           Synopsis
         </h2>
         <p className="text-center text-base sm:text-lg md:text-xl">
@@ -19,8 +22,8 @@ export default function Home() {
           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">
+      <div className="w-full py-4 px-8 sm:py-12 sm:px-20 md:py-16 md:px-30 bg-transparent">
+        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-orange-a">
           Characters
         </h2>
         <div className="flex justify-between">

diff --git a/public/images/home/background.png b/public/images/home/background.png
diff --git a/public/images/home/the-crying-stone.png b/public/images/home/the-crying-stone.png
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -8,6 +8,11 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      colors: {
+        'green-a': '#1F4C4A',
+        'green-b': '#1A7F7D',
+        'orange-a': '#ECBF7F',
+      },
       fontFamily: {
         'myriad': ['Myriad Pro', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
       },