Chore: improved hero section in playground

package.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.25.2",
+    "ajv": "^8.17.1",
     "hamburger-react": "^2.5.1",
     "@nextui-org/react": "^2.4.8",
     "framer-motion": "^11.5.6",

src/app/playground/page.js

@@ -7,77 +7,17 @@ import { NavbarLink } from '@/components/shared/Typography/Links';
 import Navbar from '@/components/Marginals/navbar/navbar';
 import { Footer } from '@/components/Footer/Footer';
 import Hero from '@/components/Hero Section/Hero';
+import { AboutUsMain } from '@/components/AboutUsSection/Main';
 
 const Page = () => {
   return (
     <>
       <Navbar />
       <Hero />
-      <div style={styles.mainContainer}>
-        <Heading1>ABOUT US</Heading1>
-        <Heading2>SubHeading</Heading2>
-
-        <Paragraph>
-          HackNITR 5.0 is a hackathon to encourage you to use your imagination and invention to
-          develop cutting-edge technology-based solutions to challenges in the real world. It was
-          put together by a large group of tech enthusiasts from Google Developer Student Club
-          (GDSC)
-        </Paragraph>
-        <SubParagraph>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus voluptas optio, aliquam
-          molestiae iure fuga animi beatae dolore magni odio. Odio eius vel vitae aut in quia.
-          Maiores, sit nobis.
-        </SubParagraph>
-        <SmallParagraph>
-          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae impedit quidem qui nihil
-          sunt aspernatur eligendi? Dolorum, sequi, ratione impedit animi laboriosam quod
-          doloremque, ipsam quia voluptas qui perspiciatis earum.
-        </SmallParagraph>
-
-        <div style={styles.con2}>
-          <PrimaryButton>Get Started</PrimaryButton>
-          <SecondaryButton>
-            <Image
-              src='https://about.x.com/content/dam/about-twitter/x/brand-toolkit/logo-black.png.twimg.1920.png'
-              alt=''
-              style={{ width: '20px', height: '20px' }}
-              className='invert'
-            />
-          </SecondaryButton>
-        </div>
-
-        <div style={styles.con2}>
-          {/* important use $isActive or any other custom props with a $ before for styled-components */}
-          <NavbarLink $isActive={true}>Link 1</NavbarLink>
-          <NavbarLink>Link 2</NavbarLink>
-          <NavbarLink>Link 3</NavbarLink>
-          <NavbarLink>Link 4</NavbarLink>
-        </div>
-      </div>
+      <AboutUsMain />
       <Footer />
     </>
   );
 };
 
-const styles = {
-  con2: {
-    display: 'flex',
-    justifyContent: 'between',
-    alignItems: 'center',
-    width: 'full',
-    height: 'full',
-    gap: '10px',
-    margin: '20px 0',
-  },
-  mainContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '20px',
-    width: 'full',
-    height: 'full',
-  },
-};
-
 export default Page;

src/components/AboutUsSection/Body.jsx

@@ -0,0 +1,39 @@
+import Image from 'next/image';
+import { LogoText, SubLogoText } from '../shared/Typography/Headings';
+// import { Paragraph } from '../shared/Typography/Paragraphs';
+import {
+  AboutUsHeading,
+  BackgroundDiv,
+  CircleDiv,
+  MainContainer,
+  Paragraph1,
+  Section,
+  SectionWithBgImage,
+} from './body.styles';
+import { HeroImage } from './Image';
+
+export const Body = () => {
+  return (
+    <>
+      <MainContainer>
+        <BackgroundDiv>
+          <CircleDiv />
+        </BackgroundDiv>
+        <Section>
+          <LogoText>innovision</LogoText>
+          <SubLogoText>24</SubLogoText>
+        </Section>
+        <SectionWithBgImage>
+          <HeroImage />
+          <AboutUsHeading>ABOUT US</AboutUsHeading>
+          <Paragraph1>
+            HackNITR 5.0 is a hackathon to encourage you to use your imagination and invention to
+            develop cutting-edge technology-based solutions to challenges in the real world. It was
+            put together by a large group of tech enthusiasts from Google Developer Student Club
+            (GDSC)
+          </Paragraph1>
+        </SectionWithBgImage>
+      </MainContainer>
+    </>
+  );
+};

src/components/AboutUsSection/Image.jsx

@@ -0,0 +1,18 @@
+import Image from 'next/image';
+import { MainContainer } from './image.styles';
+
+export const HeroImage = () => {
+  return (
+    <>
+      <MainContainer>
+        <Image
+          className='mx-auto'
+          src='/static/images/about_bg.png'
+          height={1200}
+          width={1200}
+          alt='Galaxy Background'
+        />
+      </MainContainer>
+    </>
+  );
+};

src/components/AboutUsSection/Main.jsx

@@ -0,0 +1,9 @@
+import { Body } from './Body';
+
+export const AboutUsMain = () => {
+  return (
+    <>
+      <Body />
+    </>
+  );
+};

src/components/AboutUsSection/body.styles.jsx

@@ -0,0 +1,39 @@
+import tw, { styled } from 'twin.macro';
+import { Heading1 } from '../shared/Typography/Headings';
+import { Paragraph } from '../shared/Typography/Paragraphs';
+
+export const MainContainer = styled.div`
+  ${tw`relative flex flex-col items-center z-10 justify-center p-5 h-full bg-[#070c23] bg-cover bg-repeat`}
+  background-image: url('/static/images/noise&texture.png');
+`;
+
+export const BackgroundDiv = styled.div`
+  ${tw`absolute -z-10 h-full w-full overflow-hidden flex mx-auto pt-20`}
+`;
+
+export const CircleDiv = styled.div`
+  ${tw`border border-[#070c23] drop-shadow-2xl rounded-full w-full h-full mt-64`}
+  background-image: linear-gradient(to bottom, rgba(197, 208, 255, 0.6) 0%, rgba(197, 208, 255, 0.4) 4%, rgba(21, 42, 126, 0.3) 50%, rgba(21, 42, 126, 0) 100%);
+  box-shadow:
+    inset 0 0 30px 30px rgba(11, 19, 42, 1),
+    0 0 50px 50px rgba(11, 19, 70, 0.5);
+`;
+
+export const Section = styled.section`
+  ${tw`h-screen`}
+`;
+
+export const SectionWithBgImage = styled(Section)`
+  ${tw`relative z-10 mb-52`}
+`;
+
+export const AboutUsHeading = styled(Heading1)`
+  ${tw`mx-auto`}
+  background-color: rgba(0, 0, 0, 0.4);
+  background-blend-mode: darken;
+  box-shadow: 0px 0px 30px 30px rgba(0, 0, 0, 0.4);
+`;
+
+export const Paragraph1 = styled(Paragraph)`
+  ${tw`mx-16 `}
+`;

src/components/AboutUsSection/image.styles.jsx

@@ -0,0 +1,6 @@
+import tw from 'twin.macro';
+import styled from 'styled-components';
+
+export const MainContainer = styled.div`
+  ${tw`absolute -z-10 w-full h-full -top-44`}
+`;

src/components/NavBar/Nav.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { NavContainer, NavItem } from './styles';
 import { NavData } from '@/config/content/NavData';
-import { NavbarLink } from '@/components/shared/Typography/Links';
-import Link from 'next/link';
 
 export const NavBar = () => {
   return (

src/components/shared/Typography/Headings.jsx

@@ -2,22 +2,22 @@ import styled from 'styled-components';
 import tw from 'twin.macro';
 
 export const Heading1 = styled.h1`
-  ${tw`text-2xl md:text-3xl lg:text-5xl font-orbitron mb-4 font-bold text-[#00FFD1]`}
+  ${tw`text-2xl md:text-3xl lg:text-5xl font-orbitron mb-4 font-bold text-2xl md:text-3xl rounded-xl lg:text-5xl font-orbitron my-28 mx-10 font-semibold text-center text-[#00FFD1]  py-16  text-[#00FFD1]`}
 `;
 
 export const Heading2 = styled.h2`
   ${tw`text-base md:text-lg lg:text-xl font-orbitron mb-3 font-medium text-white`}
 `;
 
 export const LogoText = styled.h1`
-  ${tw`text-[80px] xsm:text-[120px]  md:text-[150px] lg:text-[170px] not-italic font-normal font-techno text-[#FFFFFFE6]`}
+  ${tw`text-[80px] xsm:text-[120px] md:text-[150px] lg:text-[170px] not-italic font-normal font-techno text-[#FFFFFFE6]`}
 
   text-shadow: 0px 0px 18.006px #FFFFFF66;
 `;
 export const SubLogoText = styled.h1`
   ${tw`text-[60px] xsm:text-[70px] md:text-[80px] lg:text-[100px] not-italic font-normal font-techno text-transparent`}
 
-  -webkit-text-stroke: 2px #ffffffe6;
+  -webkit-text-stroke: 1px #ffffffe6;
   text-shadow: none;
 `;
 

src/components/shared/Typography/Paragraphs.jsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import tw from 'twin.macro';
 
 export const Paragraph = styled.p`
-  ${tw`text-[14px] xsm:text-[18px] md:text-[20px] lg:text-[24px] mb-4 leading-[30px] xsm:leading-[40px] md:leading-[45px] lg:leading-[53px] not-italic font-medium text-white text-center font-prompt`}
+  ${tw`text-[14px] xsm:text-[18px] md:text-[20px] lg:text-[24px] mb-4 leading-[30px] xsm:leading-[40px] md:leading-[45px] lg:leading-[53px] not-italic font-normal text-white text-center font-prompt`}
 `;
 
 export const SubParagraph = styled.p`