Data for 2081 Dashain (#37)

* feat: data for 2081 and new page

* fix: remove unused image

public/index.html

@@ -7,9 +7,9 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Countdown for Dashain, Tihar 2023, बडा दशैँ, तिहार २०८०"
+      content="Countdown for Dashain, Tihar 2024, बडा दशैँ, तिहार २०८१"
     />
-  <meta property="og:title" content="तिहार २०८० को शुभकामना, Happy Deepawali 2023" />
+  <meta property="og:title" content="तिहार २०८१ को शुभकामना, Happy Deepawali 2024" />
   <meta property="og:type" content="website" />
   <meta property="og:url" content="https://dashainaayo.com" />
   <meta property="og:description"
@@ -21,7 +21,7 @@
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:url" content="https://dashainaayo.com">
   <meta name="twitter:creator" content="@samit_gh" />
-  <meta name="twitter:title" content="तिहार २०८० को शुभकामना, Tihar 2023">
+  <meta name="twitter:title" content="तिहार २०८१ को शुभकामना, Tihar 2024">
   <meta name="twitter:description"
     content="Countdown for Dashain, Tihar and important festivals.">
   <meta name="twitter:image" content="https://dashainaayo.com/tihar.jpeg">
@@ -51,7 +51,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Dashain 2023 || बडा दशैँ २०८०</title>
+    <title>Dashain 2024 || बडा दशैँ २०८१</title>
 
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-66202609-2"></script>
   <script>

src/Components/Header/index.js

@@ -4,7 +4,7 @@ import ReactTypingEffect from 'react-typing-effect'
 
 const Header = ({ isDashain, children }) => {
   const year = new Date().getFullYear()
-  const nepaliYear = '२०८०'
+  const nepaliYear = '२०८१'
   const greetingText = isDashain
     ? [`बडा दशैँ ${nepaliYear}`, `Dashain ${year}`]
     : [`तिहार ${nepaliYear}`, `Tihar ${year}`]

src/constants/dates.js

@@ -1,20 +1,21 @@
 export const TiharDates = {
-  start_date: '2023-11-11 00:00:00',
-  end_date: '2023-11-16 00:00:00',
+  start_date: '2024-10-30 00:00:00',
+  end_date: '2024-11-03 00:00:00',
   dates: [
     { eng_label: 'Kaag Tihar', nep_label: 'काग तिहार', day: 1 },
     { eng_label: 'Kukur Tihar', nep_label: 'कुकुर तिहार', day: 2 },
     { eng_label: 'Laxmi Pooja', nep_label: 'लक्ष्मी पुजा', day: 2 },
-    { eng_label: 'Gaai Puja', nep_label: 'गाई पूजा', day: 3 },
+    { eng_label: 'Tihar Aunsi', nep_label: 'तिहार औँशी', day: 3 },
+    { eng_label: 'Gaai Puja', nep_label: 'गाई पूजा', day: 4 },
     { eng_label: 'Gobardan Puja', nep_label: 'गोवर्धन पूजा', day: 4 },
     { eng_label: 'Mha Puja', nep_label: 'म्हपूजा', day: 4 },
     { eng_label: 'Bhai Tika', nep_label: 'भाइटीका', day: 5 },
   ],
 }
 
 export const DashainDates = {
-  start_date: '2023-10-15 00:00:00',
-  end_date: '2023-10-28 00:00:00',
+  start_date: '2024-10-03 00:00:00',
+  end_date: '2024-10-16 00:00:00',
   dates: [
     { eng_label: 'Ghatasthapana', nep_label: 'घटस्थापना', day: 1 },
     { eng_label: 'Fulpati', nep_label: 'फूलपाती', day: 7 },
@@ -27,7 +28,7 @@ export const DashainDates = {
 }
 
 export const DashainMessages = {
-  nepEffect: 'विजया दशमी एवम दिपावली २०८० को हार्दिक मंङगलमय शुभकामना!!!',
+  nepEffect: 'विजया दशमी एवम दिपावली २०८१ को हार्दिक मंङगलमय शुभकामना!!!',
   engEffect: 'Wish you a very Happy Dashain and Tihar!!!',
 }
 

src/pages/NoData/index.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+import './style.css';
+import noDataImage from './no-data.svg';
+
+const NoData = () => {
+  return (
+      <div className="no-data-container">
+      <img src={noDataImage} alt="No Data Available" className="no-data-image" />
+      <h1 className="no-data-title">No Data Available</h1>
+      <p className="no-data-message">Data for next year is not available yet.</p>
+    </div>
+  );
+};
+
+export default NoData;

src/pages/NoData/style.css

@@ -0,0 +1,44 @@
+.no-data-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    text-align: center;
+    background: linear-gradient(135deg, #f3ec78, #af4261);
+    color: #ffffff;
+    font-family: 'Arial', sans-serif;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .no-data-image {
+    width: 200px;
+    margin-bottom: 20px;
+    animation: bounce 2s infinite;
+  }
+
+  .no-data-title {
+    font-size: 3rem;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  .no-data-message {
+    font-size: 1.5rem;
+    max-width: 400px;
+    margin-bottom: 20px;
+  }
+
+  @keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+      transform: translateY(0);
+    }
+    40% {
+      transform: translateY(-30px);
+    }
+    60% {
+      transform: translateY(-15px);
+    }
+  }
+

src/router/Router.js

@@ -2,17 +2,26 @@ import React from 'react'
 import { Route, Routes } from 'react-router-dom'
 import Dashain from '../pages/Dashain'
 import Tihar from '../pages/Tihar'
-import { DashainDates } from '../constants'
+import NoData from '../pages/NoData'
+import { DashainDates, TiharDates } from '../constants'
 
 export default function Router() {
   const today = new Date()
   const hasDashainEnded = today > new Date(DashainDates.end_date)
+  const hasTiharEnded = today > new Date(TiharDates.end_date)
+
+  function show()  {
+    if (!hasDashainEnded) {return <Dashain />}
+    if (!hasTiharEnded) {return <Tihar />}
+    return  <NoData/>
+  }
 
   return (
     <Routes>
-      <Route path="/" exact element={!hasDashainEnded ? <Dashain /> : <Tihar />} />
+      <Route path="/" exact element={show()}/>
       <Route path="/dashain" exact element={<Dashain />} />
       <Route path="/tihar" exact element={<Tihar />} />
+      <Route path="/no-data" exact element={<NoData />} />
     </Routes>
   )
 }