Merge pull request dscnitrourkela#3 from AYANscyy2/dev-aboutus

feat: added about us and stats

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

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)``;

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>
+  );
+};

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>;
+};

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]
+  `}
+`;

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>
+  );
+};

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)``;