From 499db0afd222955ed4bb3308e4063a13b1646f53 Mon Sep 17 00:00:00 2001
From: Bhoopesh <bhoopesh459@gmail.com>
Date: Thu, 9 Nov 2023 22:29:49 +0530
Subject: [PATCH] feat: aboutPage

---
 .eslintrc.json                         |  6 ++++--
 src/app/about/page.tsx                 | 10 +++++-----
 src/app/globals.css                    |  7 ++++---
 src/app/page.tsx                       |  2 +-
 src/components/AboutCard/AboutCard.tsx | 12 +++++++++++-
 src/components/Clock/Clock.tsx         | 14 ++++++++------
 6 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 44cc310..dcd606c 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,9 +1,11 @@
 {
   "extends": [
     "next/core-web-vitals",
-    "prettier",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
   ],
+  "plugins": ["prettier", "@typescript-eslint"],
   "overrides": [],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 1c08f1c..648390a 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -7,9 +7,9 @@ import { motion } from 'framer-motion';
 import { NavBar } from '@/components';
 import AboutCard from '@/components/AboutCard/AboutCard';
 
-const About1 = () => {
+const About = () => {
   return (
-    <div className="min-h-screen w-full text-center p-7 about">
+    <div className="h-screen w-screen text-center p-7 about flex flex-col">
       <div className="flex w-full relative z-10">
         <NavBar />
       </div>
@@ -22,12 +22,12 @@ const About1 = () => {
       >
         <Image src={bigmascot} alt="bigmascot" className="scale-90" />
       </motion.div>
-      <div className="flex flex-col justify-center items-center w-full h-full">
-        <p className="font-ROG text-9xl">ABOUT US</p>
+      <div className="flex flex-col justify-center items-center h-full w-full">
+        <div className="font-ROG text-8xl">ABOUT US</div>
         <AboutCard />
       </div>
     </div>
   );
 };
 
-export default About1;
+export default About;
diff --git a/src/app/globals.css b/src/app/globals.css
index a1efef7..e465f03 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -12,7 +12,7 @@
   src: url('../assets/fonts/Orbitron-Regular.ttf');
 }
 
-/* * {
+* {
   -moz-user-drag: none;
   -webkit-user-drag: none;
   -ms-user-drag: none;
@@ -20,7 +20,7 @@
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
-} */
+}
 
 html {
   height: 100vh;
@@ -33,6 +33,7 @@ body {
   width: 100%;
   height: 100%;
   margin: 0;
+  color: white;
 }
 
 .footer-bg {
@@ -58,9 +59,9 @@ body {
 
 .AboutCard {
   background: url('../assets/images/aboutCard.png');
+  background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
-  background-repeat: no-repeat;
 }
 
 .wingman {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a9ebf45..e7503a4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,7 +9,7 @@ export default function Home() {
     <>
       <div className="min-h-screen w-full text-center p-7 home">
         <NavBar />
-        <p className="font-ROG text-9xl mt-24">AD INFINITUM</p>
+        <p className="font-ROG text-9xl mt-24">CHRONOCLE</p>
         <Image
           src={wingman}
           alt="Wingman"
diff --git a/src/components/AboutCard/AboutCard.tsx b/src/components/AboutCard/AboutCard.tsx
index a254c29..38839fb 100644
--- a/src/components/AboutCard/AboutCard.tsx
+++ b/src/components/AboutCard/AboutCard.tsx
@@ -1,5 +1,15 @@
 const AboutCard = () => {
-  return <div className="w-100 bg-slate-600 AboutCard">AboutCard</div>;
+  return (
+    <div className="w-[40%] h-[50%] AboutCard flex justify-center items-center p-10">
+      <p className="text-lg">
+        Pragyan, the international techno-managerial organisation of NIT Trichy,
+        which came into being in 2005, achieves just that by providing a
+        platform for a multitude of students to showcase their technical
+        ingenuity and prowess. Pragyan has come a long way since its inception,
+        propelling the fields of science and technology toward greater heights.{' '}
+      </p>
+    </div>
+  );
 };
 
 export default AboutCard;
diff --git a/src/components/Clock/Clock.tsx b/src/components/Clock/Clock.tsx
index c7950bc..918517e 100644
--- a/src/components/Clock/Clock.tsx
+++ b/src/components/Clock/Clock.tsx
@@ -3,20 +3,22 @@
 import { useEffect, useState } from 'react';
 
 function Clock() {
-  const [time, setTime] = useState<Date>();
+  const [time, setTime] = useState<string>('00:00:00');
 
   useEffect(() => {
     const timer = setInterval(() => {
-      setTime(new Date());
+      setTime(
+        new Date().toLocaleTimeString(undefined, {
+          timeStyle: 'medium',
+          hour12: false,
+        }),
+      );
     }, 1000);
 
     return () => clearInterval(timer);
   }, []);
 
-  const Time = time?.toLocaleTimeString(undefined, {
-    timeStyle: 'medium',
-    hour12: false,
-  });
+  const Time = time;
 
   return (
     <div className="flex text-2xl font-custom">