From be1c356ccac8119d3e3e054188f82b720acd3263 Mon Sep 17 00:00:00 2001
From: AYANscyy2 <mayan6378@gmail.com>
Date: Sun, 12 Jan 2025 11:03:46 +0530
Subject: [PATCH] feat: added about us section

---
 src/app/playground/page.js                    |  4 ++++
 src/components/aboutUs/AboutUsMain.Styles.jsx | 14 ++++++++++++++
 src/components/aboutUs/AboutUsMain.jsx        | 13 +++++++++++++
 src/components/aboutUs/Description.jsx        |  6 ++++++
 src/components/aboutUs/Description.styles.jsx | 10 ++++++++++
 src/components/stats/StatsMain.jsx            | 11 +++++++++++
 src/components/stats/StatsMain.style.jsx      | 14 ++++++++++++++
 src/config/content/AboutUs/Data.js            |  2 ++
 8 files changed, 74 insertions(+)
 create mode 100644 src/components/aboutUs/AboutUsMain.Styles.jsx
 create mode 100644 src/components/aboutUs/AboutUsMain.jsx
 create mode 100644 src/components/aboutUs/Description.jsx
 create mode 100644 src/components/aboutUs/Description.styles.jsx
 create mode 100644 src/components/stats/StatsMain.jsx
 create mode 100644 src/components/stats/StatsMain.style.jsx
 create mode 100644 src/config/content/AboutUs/Data.js

diff --git a/src/app/playground/page.js b/src/app/playground/page.js
index c1121dd..2cc34ce 100644
--- a/src/app/playground/page.js
+++ b/src/app/playground/page.js
@@ -4,10 +4,14 @@ import React from 'react';
 import Gallery from '@/components/gallery/gallery';
 import Prizes from '@/components/prizes/prizes';
 import Timeline from '@/components/timeline/timeline';
+import { AboutUsMain } from '@/components/aboutUs/AboutUsMain';
+import { StatsMain } from '@/components/stats/StatsMain';
 
 const Playground = () => {
   return (
     <div className='flex items-center justify-center flex-col w-full h-full px-5'>
+      <AboutUsMain />
+      <StatsMain />
       <Prizes />
       <Gallery />
       <Timeline />
diff --git a/src/components/aboutUs/AboutUsMain.Styles.jsx b/src/components/aboutUs/AboutUsMain.Styles.jsx
new file mode 100644
index 0000000..175d5ed
--- /dev/null
+++ b/src/components/aboutUs/AboutUsMain.Styles.jsx
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+import { PrizesHeading, PrizesHeadingContainer } from '../prizes/styles';
+
+export const SectionContainer = styled.div`
+  ${tw`
+     flex flex-col justify-center items-center pb-[141px] gap-[40px] sm:gap-[50px] md:gap-[67px] max-w-[1200px]
+  `}
+`;
+export const AboutUSHeadingContainer = styled(PrizesHeadingContainer)`
+  ${tw`max-w-[340px]`}
+`;
+export const AboutUsHeading = styled(PrizesHeading)``;
diff --git a/src/components/aboutUs/AboutUsMain.jsx b/src/components/aboutUs/AboutUsMain.jsx
new file mode 100644
index 0000000..cbb2f57
--- /dev/null
+++ b/src/components/aboutUs/AboutUsMain.jsx
@@ -0,0 +1,13 @@
+import { AboutUsHeading, AboutUSHeadingContainer, SectionContainer } from './AboutUsMain.Styles';
+import { AboutUsDescription } from './Description';
+
+export const AboutUsMain = () => {
+  return (
+    <SectionContainer>
+      <AboutUSHeadingContainer>
+        <AboutUsHeading>About Us</AboutUsHeading>
+      </AboutUSHeadingContainer>
+      <AboutUsDescription />
+    </SectionContainer>
+  );
+};
diff --git a/src/components/aboutUs/Description.jsx b/src/components/aboutUs/Description.jsx
new file mode 100644
index 0000000..bf72e86
--- /dev/null
+++ b/src/components/aboutUs/Description.jsx
@@ -0,0 +1,6 @@
+import { DescriptioData } from '@/config/content/AboutUs/Data';
+import { DescriptionContainer } from './Description.styles';
+
+export const AboutUsDescription = () => {
+  return <DescriptionContainer>{DescriptioData}</DescriptionContainer>;
+};
diff --git a/src/components/aboutUs/Description.styles.jsx b/src/components/aboutUs/Description.styles.jsx
new file mode 100644
index 0000000..e8fd4ee
--- /dev/null
+++ b/src/components/aboutUs/Description.styles.jsx
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+import { Paragraph } from '../shared/typography/Headings';
+
+export const DescriptionContainer = styled(Paragraph)`
+  ${tw`
+    font-light text-[20px] leading-[32px] sm:text-[24px] sm:leading-[36px] md:text-[28px] md:leading-[44.8px] lg:text-[32px] lg:leading-[51.2px]
+  `}
+`;
diff --git a/src/components/stats/StatsMain.jsx b/src/components/stats/StatsMain.jsx
new file mode 100644
index 0000000..e42674e
--- /dev/null
+++ b/src/components/stats/StatsMain.jsx
@@ -0,0 +1,11 @@
+import { SectionContainer, StatsHeading, StatsHeadingContainer } from './StatsMain.style';
+
+export const StatsMain = () => {
+  return (
+    <SectionContainer>
+      <StatsHeadingContainer>
+        <StatsHeading>Stats HackNITR 6.0</StatsHeading>
+      </StatsHeadingContainer>
+    </SectionContainer>
+  );
+};
diff --git a/src/components/stats/StatsMain.style.jsx b/src/components/stats/StatsMain.style.jsx
new file mode 100644
index 0000000..b8aa628
--- /dev/null
+++ b/src/components/stats/StatsMain.style.jsx
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+import { PrizesHeading, PrizesHeadingContainer } from '../prizes/styles';
+
+export const SectionContainer = styled.div`
+  ${tw`
+     flex flex-col justify-center items-center gap-[40px] sm:gap-[50px] md:gap-[67px] max-w-[1200px]
+  `}
+`;
+export const StatsHeadingContainer = styled(PrizesHeadingContainer)`
+  ${tw`max-w-[608px]`}
+`;
+export const StatsHeading = styled(PrizesHeading)``;
diff --git a/src/config/content/AboutUs/Data.js b/src/config/content/AboutUs/Data.js
new file mode 100644
index 0000000..0366c89
--- /dev/null
+++ b/src/config/content/AboutUs/Data.js
@@ -0,0 +1,2 @@
+export const DescriptioData =
+  '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 a event  large group of tech enthusiasts. The main goal is to grow our local community and give hackers an unforgettable experience. The plethora of fun and excitement is waiting for you from 12th Jan 2024.';