v1.3.0

CHANGELOG.md

@@ -2,6 +2,29 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.3.0](https://github.com/frontChapter/website-frontend/compare/v1.2.1...v1.3.0) (2024-03-07)
+
+
+### Features
+
+* add required assets for sponsor section ([905c883](https://github.com/frontChapter/website-frontend/commit/905c883c4a4edc0767d4cf0fa33adb78e50850b3))
+* add Sponsor component ([e8dde30](https://github.com/frontChapter/website-frontend/commit/e8dde30de596bb9f1746d1b2c27d26186d650f21))
+* add static sponsors data ([a40f44a](https://github.com/frontChapter/website-frontend/commit/a40f44a22ed11317ad7d7162db5ddbaa9dc735bd))
+* change `<CountDown>` text ([c5ef6e6](https://github.com/frontChapter/website-frontend/commit/c5ef6e6d209b71083cedc2eedc97328f992cbca9))
+* customize scrollbar ([8e3a084](https://github.com/frontChapter/website-frontend/commit/8e3a084a2a5468e9cf17c68b5ea172f2872f2887))
+* improve webkit scrollbar style ([2bdca9f](https://github.com/frontChapter/website-frontend/commit/2bdca9fb205a72944eab2353630c6c5aed90b249))
+* update conference time ([59de0b7](https://github.com/frontChapter/website-frontend/commit/59de0b7df32d414ef33bb3e893d7355668c9e2e9))
+* use Sponsor component in home page ([e41143e](https://github.com/frontChapter/website-frontend/commit/e41143e6534fda41591dc21fb5db07518f5cf443))
+
+
+### Bug Fixes
+
+* `<CountDown>` update ([2af8795](https://github.com/frontChapter/website-frontend/commit/2af879563aaac90ff2063a2e815cbe904e15a706))
+* countdown issue ([6b2ea54](https://github.com/frontChapter/website-frontend/commit/6b2ea54d146a9eea9d4fc1ea8760bdf130b63072))
+* fix countdown without using moment ([a482116](https://github.com/frontChapter/website-frontend/commit/a48211643a2efea1bc7b11bb7f799536b86c54cf))
+* fix overflow x in section speakers ([c0bbbb6](https://github.com/frontChapter/website-frontend/commit/c0bbbb63aebcbe25b002dec5874259d0ccbec4ce))
+* remove `sass` and change file type from `.scss` to `.css` ([4cfb689](https://github.com/frontChapter/website-frontend/commit/4cfb68994ef0904e24bd78452d4e25535eaa7a5f))
+
 ## [1.2.1](https://github.com/frontChapter/website-frontend/compare/v1.2.0...v1.2.1) (2024-02-01)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "website-frontend",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "private": true,
   "packageManager": "[email protected]",
   "scripts": {
@@ -19,13 +19,11 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "lucide-react": "^0.309.0",
-    "moment": "^2.30.1",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.0.1",
     "recoil": "^0.7.7",
-    "sass": "^1.70.0",
     "server-only": "^0.0.1",
     "sharp": "^0.33.2",
     "swiper": "^11.0.5",

src/app/components/CountDown.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import WaveMobile from "@/assets/images/home/count-down-wave-mobile.svg";
-import Wave from "@/assets/images/home/count-down-wave.svg";
 import { conferenceDateTime } from "@/data/timing";
+import Wave from "@/assets/images/home/count-down-wave.svg";
+import WaveMobile from "@/assets/images/home/count-down-wave-mobile.svg";
 import Image from "next/image";
-import React, { Fragment, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { HiOutlineClock } from "react-icons/hi";
 
 export default function CountDown() {
@@ -23,72 +23,76 @@ export default function CountDown() {
       <HiOutlineClock className="absolute inset-y-0 -z-10 size-60 text-zinc-800/20 lg:size-[460px]" />
 
       <div className="flex flex-col gap-2 text-center text-2xl lg:text-4xl">
-        <strong className="font-bold">ساعت‌ها رو دوباره کوک کردیم</strong>
-        <span className="text-zinc-400">اینجا ثانیه‌ها ارزشمندند</span>
+        <strong className="font-bold">دلتنگتون هستیم</strong>
+        <span className="text-zinc-400">
+          به خاطر خاطره‌های زیبایی که ساختیم
+        </span>
       </div>
       <CountDownTimer />
       <p className="text-xl text-zinc-400 lg:mt-8 lg:text-3xl/snug">
-        تا شروع دومین همایش فرانت چپتر
+        از همایش سال ۱۴۰۲ گذشته
       </p>
     </section>
   );
 }
 
 const CountDownTimer = () => {
-  const calculateTimeRemaining = () => {
-    const now = new Date().getTime();
-    const target = conferenceDateTime.getTime();
-    const timeRemaining = target - now;
+  const calculateDuration = (start: number, end: number) => {
+    const totalSeconds = Math.floor((end - start) / 1000);
+    const days = Math.floor(totalSeconds / (3600 * 24));
+    const hours = Math.floor((totalSeconds % (3600 * 24)) / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = Math.floor(totalSeconds % 60);
 
-    const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
-    const hours = Math.floor(
-      (timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
-    );
-    const minutes = Math.floor(
-      (timeRemaining % (1000 * 60 * 60)) / (1000 * 60),
-    );
-    const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
-
-    return { days, hours, minutes, seconds };
+    return {
+      days,
+      hours,
+      minutes,
+      seconds,
+    };
   };
 
-  const [timeRemaining, setTimeRemaining] = useState(calculateTimeRemaining());
+  const [now, setNow] = useState(Date.now());
+  const conferenceDate = conferenceDateTime.getTime();
+  const duration = calculateDuration(now, conferenceDate);
 
-  React.useEffect(() => {
+  // Update the current time every second
+  useEffect(() => {
     const interval = setInterval(() => {
-      setTimeRemaining(calculateTimeRemaining());
+      setNow(Date.now());
     }, 1000);
-
     return () => clearInterval(interval);
   }, []);
 
+  const times = [
+    {
+      label: "ثانیه",
+      value: duration.seconds,
+    },
+    {
+      label: "دقیقه",
+      value: duration.minutes,
+    },
+    {
+      label: "ساعت",
+      value: duration.hours,
+    },
+    {
+      label: "روز",
+      value: duration.days,
+    },
+  ];
+
   return (
     <div className="mt-7 flex gap-3 lg:mt-8 lg:gap-6">
-      {[
-        {
-          label: "ثانیه",
-          value: timeRemaining.seconds,
-        },
-        {
-          label: "دقیقه",
-          value: timeRemaining.minutes,
-        },
-        {
-          label: "ساعت",
-          value: timeRemaining.hours,
-        },
-        {
-          label: "روز",
-          value: Math.trunc(timeRemaining.days),
-        },
-      ].map(({ label, value }) => (
+      {[...times].map(({ label, value }) => (
         <Fragment key={label}>
-          <div className="flex w-12 flex-col text-center lg:w-24" key={label}>
+          <div className="flex w-12 flex-col text-center lg:w-24">
             <span
               className="text-3xl/snug text-green-500 lg:text-5xl/snug"
               suppressHydrationWarning
             >
-              {value.toLocaleString("fa-IR")}
+              {Math.abs(value).toLocaleString("fa-IR")}
             </span>
             <span className="text-zinc-500 lg:text-xl">{label}</span>
           </div>

src/app/components/Speakers/SpeakerCard.tsx

@@ -1,7 +1,7 @@
 import { TSpeakerCard } from "@/types/home/speakerCard.type";
 import Image from "next/image";
 import SpeakerSocials from "./SpeakerSocials";
-import styles from "./styles.module.scss";
+import styles from "./styles.module.css";
 
 const SpeakerCard = ({
   avatar,

src/app/components/Speakers/Speakers.styles.module.css

@@ -0,0 +1,6 @@
+.speakersSection {
+  @apply relative py-6 lg:pb-44 lg:pt-12;
+  &::before {
+    @apply bg-none lg:absolute lg:inset-0 lg:w-full lg:bg-[url("/images/speakers\_lines.svg")] lg:bg-contain lg:bg-bottom lg:bg-no-repeat lg:content-["_"];
+  }
+}

src/app/components/Speakers/Speakers.tsx

@@ -2,7 +2,7 @@ import { speakersData } from "@/data/speakersData";
 import { Fragment } from "react";
 import { RiMicLine } from "react-icons/ri";
 import SpeakerCard from "./SpeakerCard";
-import styles from "./Speakers.styles.module.scss";
+import styles from "./Speakers.styles.module.css";
 
 export default function Speakers() {
   return (

src/app/components/Timeline/Timeline.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import Image from "next/image";
 import Link from "next/link";
-import styles from "./Timeline.styles.module.scss";
+import styles from "./Timeline.styles.module.css";
 import { TimelineItemType } from "./Timeline.types";
 import { confDayTimeline, nightTimeline } from "./data";
 

src/data/timing.ts

@@ -1 +1 @@
-export const conferenceDateTime = new Date("2024-02-29T09:00:00+03:30");
+export const conferenceDateTime = new Date("2024-02-29T10:00:00+03:30");

src/styles/globals.css

@@ -5,3 +5,22 @@
 html {
   scroll-behavior: smooth;
 }
+
+body {
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #333;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #555;
+    border-radius: 8px;
+
+    &:hover {
+      background: #dadada;
+    }
+  }
+}