feat: aboutPage

.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": {

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;

src/app/globals.css

@@ -12,15 +12,15 @@
   src: url('../assets/fonts/Orbitron-Regular.ttf');
 }
 
-/* * {
+* {
   -moz-user-drag: none;
   -webkit-user-drag: none;
   -ms-user-drag: none;
   user-select: none;
   -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 {

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"

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;

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">