Issue#483 fixed. Added the changelog page

subhadeeproy3902 · Jul 21, 2024 · 31ba5b3 · 31ba5b3
1 parent 7dc5de9
commit 31ba5b3
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 143 deletions.
diff --git a/src/app/version/page.tsx b/src/app/version/page.tsx
@@ -1,78 +1,16 @@
 "use client";
-import React, { useEffect, useRef, useState } from 'react';
-import VersionCard from './version';
-import { versionData } from './versionData';
+import React from 'react';
 import Header from '@/components/shared/Header';
 import Footer from '@/components/shared/Footer';
 import ScrollToTopButton from '@/components/shared/ScrollUp';
+import Version from '@/components/shared/Version';
 
-const gradientClasses = [
-  'custom-gradient-3',
-  'custom-gradient-4',
-  'custom-gradient-1',
-  'custom-gradient-2',
-];
-
-const Timeline: React.FC = () => {
-  const [activeIndex, setActiveIndex] = useState<number>(-1);
-  const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          const index = Number(entry.target.getAttribute('data-index'));
-          if (entry.isIntersecting) {
-            setActiveIndex(index);
-          } else if (activeIndex === index) {
-            setActiveIndex(-1);
-          }
-        });
-      },
-      { threshold: 0.5 }
-    );
-
-    cardRefs.current.forEach((ref) => {
-      if (ref) {
-        observer.observe(ref);
-      }
-    });
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [activeIndex]);
-
+const Timeline = () => {
   return (
     <>
       <Header />
-      <div className="relative w-full h-48 bg-gradient-to-r from-orange-400 via-neon-500 to-red-500 md:h-64">
-        <div className="absolute inset-0 flex items-center justify-center text-white">
-          <h1 className="text-4xl font-bold md:text-5xl">What&apos;s new?</h1>
-        </div>
-      </div>
-      <div className="container mx-auto p-4">
-        <div className="relative">
-          {versionData.map((version, index) => (
-            <div
-              key={index}
-              className={`relative pb-24 flex flex-row items-center`}
-              //@ts-ignore
-              ref={(el) => (cardRefs.current[index] = el)}
-              data-index={index}
-            >
-              <div className="w-full flex flex-col ml-10">
-                <div className={`vertical-connector ${index !== versionData.length - 1 ? 'h-full' : ''} bg-gray-300`}></div>
-                <VersionCard
-                  {...version}
-                  className={gradientClasses[index % gradientClasses.length]}
-                  isActive={activeIndex === index}
-                />
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
+      <h1 className="text-4xl font-bold md:text-6xl bg-clip-text text-transparent bg-gradient-to-b from-zinc-50 to-orange-500 bg-opacity-50 text-center p-10">What&apos;s new?</h1>
+      <Version />
       <Footer />
       <ScrollToTopButton/>
     </>

diff --git a/src/app/version/version.tsx b/src/app/version/version.tsx
diff --git a/src/app/version/versionData.ts b/src/app/version/versionData.ts
diff --git a/src/components/shared/Version.tsx b/src/components/shared/Version.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+
+const Version = () => {
+  return (
+    <div className="m-6 flex flex-col justify-center items-center mb-24">
+
+    <div className="relative pl-8 sm:pl-32 py-6 group">
+        <div className="font-caveat font-medium text-2xl text-foreground mb-1 sm:mb-0">Version 1.0</div>
+        <div className="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px before:bg-orange-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 after:bg-orange-600 after:border-4 after:box-content after:border-foreground/75 after:rounded-full sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5">
+            <time className="sm:absolute left-0 translate-y-0.5 inline-flex items-center justify-center text-xs font-semibold uppercase w-20 h-6 mb-3 sm:mb-0 text-orange-600 bg-orange-100 rounded-full">Dec, 2023</time>
+            <div className="text-xl font-bold text-foreground/75">Initialization of the project</div>
+        </div>
+        <div className="text-muted-foreground">Pretium lectus quam id leo. Urna et pharetra pharetra massa massa. Adipiscing enim eu neque aliquam vestibulum morbi blandit cursus risus.</div>
+    </div>
+
+    <div className="relative pl-8 sm:pl-32 py-6 group">
+        <div className="font-caveat font-medium text-2xl text-foreground mb-1 sm:mb-0">Version 1.1</div>
+        <div className="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px before:bg-orange-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 after:bg-orange-600 after:border-4 after:box-content after:border-foreground/75 after:rounded-full sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5">
+            <time className="sm:absolute left-0 translate-y-0.5 inline-flex items-center justify-center text-xs font-semibold uppercase w-20 h-6 mb-3 sm:mb-0 text-orange-600 bg-orange-100 rounded-full">Jan, 2024</time>
+            <div className="text-xl font-bold text-foreground/75">Acme was founded in Milan, Italy</div>
+        </div>
+        <div className="text-muted-foreground">Pretium lectus quam id leo. Urna et pharetra pharetra massa massa. Adipiscing enim eu neque aliquam vestibulum morbi blandit cursus risus.</div>
+    </div>
+
+    <div className="relative pl-8 sm:pl-32 py-6 group">
+        <div className="font-caveat font-medium text-2xl text-foreground mb-1 sm:mb-0">Version 1.2</div>
+        <div className="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px before:bg-orange-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 after:bg-orange-600 after:border-4 after:box-content after:border-foreground/75 after:rounded-full sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5">
+            <time className="sm:absolute left-0 translate-y-0.5 inline-flex items-center justify-center text-xs font-semibold uppercase w-20 h-6 mb-3 sm:mb-0 text-orange-600 bg-orange-100 rounded-full">Mar, 2024</time>
+            <div className="text-xl font-bold text-foreground/75">Acme was founded in Milan, Italy</div>
+        </div>
+        <div className="text-muted-foreground">Pretium lectus quam id leo. Urna et pharetra pharetra massa massa. Adipiscing enim eu neque aliquam vestibulum morbi blandit cursus risus.</div>
+    </div>
+
+    <div className="relative pl-8 sm:pl-32 py-6 group">
+        <div className="font-caveat font-medium text-2xl text-foreground mb-1 sm:mb-0">Version 1.3</div>
+        <div className="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px before:bg-orange-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 after:bg-orange-600 after:border-4 after:box-content after:border-foreground/75 after:rounded-full sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5">
+            <time className="sm:absolute left-0 translate-y-0.5 inline-flex items-center justify-center text-xs font-semibold uppercase w-20 h-6 mb-3 sm:mb-0 text-orange-600 bg-orange-100 rounded-full">May, 2024</time>
+            <div className="text-xl font-bold text-foreground/75">Acme was founded in Milan, Italy</div>
+        </div>
+        <div className="text-muted-foreground">Pretium lectus quam id leo. Urna et pharetra pharetra massa massa. Adipiscing enim eu neque aliquam vestibulum morbi blandit cursus risus.</div>
+    </div>
+</div>
+  )
+}
+
+export default Version
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -77,6 +77,9 @@ const config = {
         "accordion-up": "accordion-up 0.2s ease-out",
         "scroll-vertical": "scroll-vertical 20s linear infinite",
       },
+      fontFamily: {
+        caveat: ['Caveat', 'cursive'],
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],