From 94a24a64183d61e7368fb0901c46b5e1d5b2a5ba Mon Sep 17 00:00:00 2001
From: shirsho-roy <shirsho.tffs@gmail.com>
Date: Thu, 11 Aug 2022 23:55:11 +0530
Subject: [PATCH] Tracks and Schedule

---
 src/App.js                              |   2 +-
 src/components/Timeline/ScheduleCard.js |  25 ++++
 src/components/Timeline/ScheduleData.js | 100 +++++++++++++
 src/components/Timeline/Timeline.css    | 124 +++++++++++++++++
 src/components/Timeline/Timeline.js     |  81 ++++++++++-
 src/components/Timeline/raisebox.js     |  12 ++
 src/components/Timeline/style.css       | 113 +++++++++++++++
 src/components/Track/Track.js           | 177 +++++++++++++++++++++++-
 src/index.css                           |   3 +
 src/index.js                            |   7 +-
 10 files changed, 629 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Timeline/ScheduleCard.js
 create mode 100644 src/components/Timeline/ScheduleData.js
 create mode 100644 src/components/Timeline/Timeline.css
 create mode 100644 src/components/Timeline/raisebox.js
 create mode 100644 src/components/Timeline/style.css

diff --git a/src/App.js b/src/App.js
index 044ce3c..144fc88 100644
--- a/src/App.js
+++ b/src/App.js
@@ -31,8 +31,8 @@ function App() {
       <About />
       <Stats />
       <Track/>
-      <Prizes/>
       <Timeline/>
+      <Prizes/>
       <SponserFinal/>
       <FAQ/>
       <Footer />
diff --git a/src/components/Timeline/ScheduleCard.js b/src/components/Timeline/ScheduleCard.js
new file mode 100644
index 0000000..0049c0c
--- /dev/null
+++ b/src/components/Timeline/ScheduleCard.js
@@ -0,0 +1,25 @@
+import React from "react";
+import "./Timeline.css";
+function ScheduleCard(props) {
+  return (
+    <div>
+      <div className="single-event">
+        <div className="date-time">
+          <span className="time">{props.time}</span>
+          <span className="date">{props.date}</span>
+        </div>
+        <div className="description Hackathon">
+          <div className="speaker">
+            {" "}
+            <div className="details">
+              <span className="title">{props.title}</span>
+              <span className="name"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ScheduleCard;
\ No newline at end of file
diff --git a/src/components/Timeline/ScheduleData.js b/src/components/Timeline/ScheduleData.js
new file mode 100644
index 0000000..bb94303
--- /dev/null
+++ b/src/components/Timeline/ScheduleData.js
@@ -0,0 +1,100 @@
+const Day1 = [
+    {
+      id: 1,
+      time: '9:00',
+      date: '18 Sept',
+      title: 'Lorem',
+    },
+    {
+      id: 2,
+      time: '10:00',
+      date: '18 Sept',
+      title: 'Lorem',
+    },
+    {
+      id: 3,
+      time: '12:00',
+      date: '18 Sept',
+      title: 'Lorem',
+    },
+    {
+      id: 4,
+      time: '15:00',
+      date: '18 Sept',
+      title: 'Lorem',
+    },
+    {
+      id: 5,
+      time: '16:30',
+      date: '18 Sept',
+      title: 'Lorem',
+    },
+    {
+      id: 6,
+      time: '18:00',
+      date: '18 Sept',
+      title: 'Lorem',
+    },
+    {
+      id: 7,
+      time: '20:00',
+      date: '18 Sept',
+      title: 'Lorem',
+    },
+    {
+      id: 8,
+      time: '22:00',
+      date: '18 Sept',
+      title: 'Lorem',
+    },
+    // {
+    //   id: 9,
+    //   time: '22:30',
+    //   date: '18 Sept',
+    //   title: 'Workshop by Koren Grinshpoon, CEO of EchoAR',
+    // },
+  ];
+  
+  const Day2 = [
+    {
+      id: 10,
+      time: '17:00',
+      date: '19 Sept',
+      title: 'Lorem',
+    },
+    {
+      id: 11,
+      time: '17:30',
+      date: '19 Sept',
+      title: 'Lorem',
+    },
+    {
+      id: 12,
+      time: '19:00',
+      date: '19 Sept',
+      title: 'Lorem',
+    },
+    {
+      id: 13,
+      time: '19:30',
+      date: '19 Sept',
+      title: 'Lorem',
+    },
+    {
+      id: 14,
+      time: '20:30',
+      date: '19 Sept',
+      title: 'Lorem',
+    },
+  ];
+  
+  const Day3 = [
+    {
+      id: 15,
+      time: '19:00',
+      date: '22 Sept',
+      title: 'Lorem',
+    },
+  ];
+  
+  export { Day1, Day2, Day3 };
\ No newline at end of file
diff --git a/src/components/Timeline/Timeline.css b/src/components/Timeline/Timeline.css
new file mode 100644
index 0000000..601534d
--- /dev/null
+++ b/src/components/Timeline/Timeline.css
@@ -0,0 +1,124 @@
+.contents {
+    padding: 0.5rem 0.5rem;
+  }
+  .cont{
+    width:90vw;
+    margin:auto;
+  }
+  .content-section {
+    flex-direction: column;
+    padding: 0.2px 0;
+  }
+  .container-schedule {
+    display: block;
+    width: 100%;
+   
+    margin: 0 auto;
+  }
+  .daily-schedule {
+    margin-bottom: 1rem;
+    margin: 0.5rem;
+  
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  .single-event {
+    display: flex;
+    flex-direction: row;
+    margin-top: 0.6rem;
+    border-radius: 5px;
+  }
+  .date-time {
+    background-color: rgb(89, 99, 108);
+    opacity: 0.95;
+    display: flex;
+    /* flex-wrap: wrap; */
+    flex-direction: column;
+    
+    padding: 1rem 1rem 1rem 1rem;
+    text-align:left;
+    white-space: nowrap;
+    color: #fff;
+    width:120px;
+    }
+  .date {
+    margin: 0;
+    padding-left: 0;
+    border: 1px;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+    color: #fff;
+  }
+  
+  .time {
+    padding-left: 0;
+    font-size: 1.2rem;
+    font-weight: 700;
+  }
+  .Hackathon {
+    /* font-size: 100%; */
+    font: inherit;
+    /* vertical-align: baseline; */
+    border-left: 5px solid #06bb88;
+  }
+  .description {
+    padding-left: 1rem;
+    background-color: #52358a;
+    opacity: 0.9;
+    flex:2;
+    color: #fff;
+    display: flex;
+    justify-content: space-between;
+    /* margin-left: 1rem; */
+    text-align: left;
+    overflow: hidden;
+  }
+  
+  .title {
+    font-size: 1.1rem;
+    letter-spacing: 0.1rem;
+    font-weight: 699;
+  }
+  
+  .name {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  
+  .speaker {
+    display: flex;
+    align-items: center;
+  }
+  
+  .details {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    line-height: 1.5rem;
+  }
+  
+  @media (max-width: 767px) {
+    .daily-schedule {
+      padding: 0;
+      margin: 0;
+    }
+    .content-section .contents .single-event .date-time {
+      padding: 0.6rem;
+      width:85px;
+    }
+    .Hackathon {
+      border-left: 2px solid #12ca2b;
+    }
+    .description {
+      padding-left: 0.8rem;
+    }
+    
+  }
\ No newline at end of file
diff --git a/src/components/Timeline/Timeline.js b/src/components/Timeline/Timeline.js
index 6709122..b1f3c00 100644
--- a/src/components/Timeline/Timeline.js
+++ b/src/components/Timeline/Timeline.js
@@ -1,15 +1,82 @@
 import React from 'react'
+import styled from 'styled-components';
+// import Raisebox from './raisebox';
+import './Timeline.css';
+import { Day1, Day2, Day3 } from './ScheduleData';
+import ScheduleCard from './ScheduleCard';
+const ScheduleContainer = styled.div`
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+`;
 
+const Scheduleh1 = styled.h1`
+  font-weight: 900;
+  color: #fff;
+  font-size: 6rem;
+  line-height: 0.8em;
+  letter-spacing: -0.07em;
+  @media screen and (max-width: 576px) {
+    font-size: 3.2rem;
+  }
+`;
+function card1(Day1) {
+  return (
+    <ScheduleCard
+      key={Day1.id}
+      time={Day1.time}
+      date={Day1.date}
+      title={Day1.title}
+    />
+  );
+}
+function card2(Day2) {
+  return (
+    <ScheduleCard
+      key={Day2.id}
+      time={Day2.time}
+      date={Day2.date}
+      title={Day2.title}
+    />
+  );
+}
+
+function card3(Day3) {
+  return (
+    <ScheduleCard
+      key={Day3.id}
+      time={Day3.time}
+      date={Day3.date}
+      title={Day3.title}
+    />
+  );
+}
 const Timeline = () => {
   return (
    <section id='Timeline'>
-    <div className="container h-[400px] text-white pl-5 md:pl-28 sm:pl-9 pt-4 pb-4 " >
+    <div className="cont" >
 
-        <div className='text-[44px]'>Timeline</div>
-        <div className='text-[64px] pl-1 mt-8'>Updating soon...</div>
-    </div>
-    </section>
-  )
-}
+      <ScheduleContainer>
+        <Scheduleh1 style={{ color: 'white' }}>
+           TIMELINE<span style={{ color: '#ff0000' }}></span>
+        </Scheduleh1>{' '}
+      </ScheduleContainer>
 
+      <div className="container-schedule">
+        <section className="content-section">
+          <div className="contents">
+            <div id="day1" className="daily-schedule">
+              {Day1.map(card1)}
+              {Day2.map(card2)}
+              {Day3.map(card3)}
+            </div>
+          </div>
+        </section>
+      </div>
+      
+      </div>
+      </section>)}
+     
 export default Timeline
diff --git a/src/components/Timeline/raisebox.js b/src/components/Timeline/raisebox.js
new file mode 100644
index 0000000..e3c43ae
--- /dev/null
+++ b/src/components/Timeline/raisebox.js
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const Raisebox = styled.div`
+  min-height: 70vh;
+  width: 90vw;
+  margin: 10vh auto;
+  background: #18191a;
+  box-shadow: 2vw 2vw 2vw 1vw rgba(0, 0, 0, 0.6);
+  border-radius: 10px;
+`;
+
+export default Raisebox;
\ No newline at end of file
diff --git a/src/components/Timeline/style.css b/src/components/Timeline/style.css
new file mode 100644
index 0000000..d27f360
--- /dev/null
+++ b/src/components/Timeline/style.css
@@ -0,0 +1,113 @@
+.contents {
+    padding: 0.8rem 0.5rem;
+  }
+  
+  .content-section {
+    flex-direction: column;
+    padding: 2px 0;
+  }
+  .container-schedule {
+    display: block;
+    width: 100%;
+    /* max-width: 1280px; */
+    margin: 0 auto;
+  }
+  .daily-schedule {
+    margin-bottom: 1rem;
+    margin: 1rem;
+  
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  .single-event {
+    display: flex;
+    flex-direction: row;
+    margin-top: 0.6rem;
+  }
+  .date-time {
+    background-color: #222;
+    display: flex;
+    flex-direction: column;
+    padding: 1rem 1rem 1rem 5rem;
+    text-align: left;
+    white-space: wrap;
+    color: #fff;
+  }
+  .date {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+    color: #fff;
+  }
+  
+  .time {
+    font-size: 1.2rem;
+    font-weight: 700;
+  }
+  .Hackathon {
+    /* font-size: 100%; */
+    font: inherit;
+    /* vertical-align: baseline; */
+    border-left: 5px solid #ff0000;
+  }
+  .description {
+    padding-left: 2rem;
+    background-color: #333;
+    flex: 1;
+    color: #fff;
+    display: flex;
+    justify-content: space-between;
+    /* margin-left: 1rem; */
+    text-align: left;
+    overflow: hidden;
+  }
+  
+  .title {
+    font-size: 1.1rem;
+    letter-spacing: 0.1rem;
+    font-weight: 699;
+  }
+  
+  .name {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  
+  .speaker {
+    display: flex;
+    align-items: center;
+  }
+  
+  .details {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    line-height: 1.5rem;
+  }
+  
+  @media (max-width: 767px) {
+    .daily-schedule {
+      padding: 0;
+      margin: 0;
+    }
+    .content-section .contents .single-event .date-time {
+      padding: 0.9rem;
+      width:20%;
+    }
+    .Hackathon {
+      border-left: 2px solid #ff0000;
+    }
+    .description {
+      padding-left: 0.8rem;
+    }
+  }
\ No newline at end of file
diff --git a/src/components/Track/Track.js b/src/components/Track/Track.js
index 4734205..6723da3 100644
--- a/src/components/Track/Track.js
+++ b/src/components/Track/Track.js
@@ -3,14 +3,179 @@ import React from 'react'
 const Track = () => {
   return (
     <section id='Tracks'>
-   
-    <div className="container text-white pl-5 h-[400px] sm:pl-9 md:pl-28 p-4 pb-9 overflow-hidden">
 
-        <div className='text-[44px]'>Tracks</div>
-        <div className='text-[64px] pl-1 '>Updating soon...</div>
-        
-        
+    <div class="text-white body-font">
+  <div class="container px-5 py-24 mx-auto">
+    <div class="flex flex-col text-center w-full mb-20">
+      <h1 class="text-2xl font-medium title-font mb-4 tracking-widest text-white">OUR TEAM</h1>
+      <p class="lg:w-2/3 mx-auto leading-relaxed text-white-300 text-base">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of them.</p>
     </div>
+    <div class="flex flex-wrap -m-4">
+      <div class="p-4 lg:w-1/2">
+        <div class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left">
+          {/* <img alt="team" class="flex-shrink-0 rounded-lg w-48 h-48 object-cover object-center sm:mb-0 mb-4" src="https://dummyimage.com/200x200"> */}
+          <div class="flex-grow sm:pl-8">
+            <h2 class="title-font font-medium text-lg text-white">Holden Caulfield</h2>
+            <h3 class="text-gray-900 mb-3">UI Developer</h3>
+            <p class="mb-4">DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
+            {/* <span class="inline-flex">
+              <a class="text-white">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
+                </svg>
+              </a>
+              <a class="ml-2 text-gray-500">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+                </svg>
+              </a>
+              <a class="ml-2 text-gray-500">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
+                </svg>
+              </a>
+            </span> */}
+          </div>
+        </div>
+      </div>
+      <div class="p-4 lg:w-1/2">
+        <div class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left">
+          {/* <img alt="team" class="flex-shrink-0 rounded-lg w-48 h-48 object-cover object-center sm:mb-0 mb-4" src="https://dummyimage.com/201x201"> */}
+          <div class="flex-grow sm:pl-8">
+            <h2 class="title-font font-medium text-lg text-white">Alper Kamu</h2>
+            <h3 class="text-gray-500 mb-3">Designer</h3>
+            <p class="mb-4">DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
+            {/* <span class="inline-flex">
+              <a class="text-gray-500">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
+                </svg>
+              </a>
+              <a class="ml-2 text-gray-500">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+                </svg>
+              </a>
+              <a class="ml-2 text-gray-500">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
+                </svg>
+              </a>
+            </span> */}
+          </div>
+        </div>
+      </div>
+      <div class="p-4 lg:w-1/2">
+        <div class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left">
+          {/* <img alt="team" class="flex-shrink-0 rounded-lg w-48 h-48 object-cover object-center sm:mb-0 mb-4" src="https://dummyimage.com/204x204"> */}
+          <div class="flex-grow sm:pl-8">
+            <h2 class="title-font font-medium text-lg text-white">Atticus Finch</h2>
+            <h3 class="text-gray-500 mb-3">UI Developer</h3>
+            <p class="mb-4">DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
+            {/* <span class="inline-flex">
+              <a class="text-gray-500">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
+                </svg>
+              </a>
+              <a class="ml-2 text-gray-500">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+                </svg>
+              </a>
+              <a class="ml-2 text-gray-500">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
+                </svg>
+              </a>
+            </span> */}
+          </div>
+        </div>
+      </div>
+      <div class="p-4 lg:w-1/2">
+        <div class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left">
+          {/* <img alt="team" class="flex-shrink-0 rounded-lg w-48 h-48 object-cover object-center sm:mb-0 mb-4" src="https://dummyimage.com/206x206"> */}
+          <div class="flex-grow sm:pl-8">
+            <h2 class="title-font font-medium text-lg text-white">Henry Letham</h2>
+            <h3 class="text-gray-500 mb-3">Designer</h3>
+            <p class="mb-4">DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
+            {/* <span class="inline-flex">
+              <a class="text-gray-500">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
+                </svg>
+              </a>
+              <a class="ml-2 text-gray-500">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+                </svg>
+              </a>
+              <a class="ml-2 text-gray-500">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
+                </svg>
+              </a>
+            </span> */}
+          </div>
+        </div>
+      </div>
+      <div class="p-4 lg:w-1/2">
+        <div class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left">
+          {/* <img alt="team" class="flex-shrink-0 rounded-lg w-48 h-48 object-cover object-center sm:mb-0 mb-4" src="https://dummyimage.com/206x206"> */}
+          <div class="flex-grow sm:pl-8">
+            <h2 class="title-font font-medium text-lg text-white">Moran Draxtery</h2>
+            <h3 class="text-gray-500 mb-3">Designer</h3>
+            <p class="mb-4">DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
+            {/* <span class="inline-flex">
+              <a class="text-gray-500">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
+                </svg>
+              </a>
+              <a class="ml-2 text-gray-500">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+                </svg>
+              </a>
+              <a class="ml-2 text-gray-500">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
+                </svg>
+              </a>
+            </span> */}
+          </div>
+        </div>
+      </div>
+      <div class="p-4 lg:w-1/2">
+        <div class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left">
+          {/* <img alt="team" class="flex-shrink-0 rounded-lg w-48 h-48 object-cover object-center sm:mb-0 mb-4" src="https://dummyimage.com/206x206"> */}
+          <div class="flex-grow sm:pl-8">
+            <h2 class="title-font font-medium text-lg text-white">Jake Loid</h2>
+            <h3 class="text-gray-500 mb-3">Designer</h3>
+            <p class="mb-4">DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
+            {/* <span class="inline-flex">
+              <a class="text-gray-500">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
+                </svg>
+              </a>
+              <a class="ml-2 text-gray-500">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+                </svg>
+              </a>
+              <a class="ml-2 text-gray-500">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
+                  <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
+                </svg>
+              </a>
+            </span> */}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
     </section>
   )
 }
diff --git a/src/index.css b/src/index.css
index c0935a6..bbf98e6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -16,6 +16,9 @@ body {
 /* section{
   height:100vh;
 } */
+*{
+  box-sizing: border-box;
+}
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
diff --git a/src/index.js b/src/index.js
index d563c0f..f4676ef 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,12 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-
+export const DeviceSize = {
+  mobile: 768,
+  tablet: 992,
+  laptop: 1324,
+  desktop: 2024,
+};
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>