Add attendee kit facts (#66)

* Add attendee kit facts * Add attendee kit details
TEDxNITRourkela · Mar 11, 2021 · bc67031 · bc67031
1 parent 7e0c522
commit bc67031
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 14 deletions.
diff --git a/client/src/assets/placeholder/tickets.js b/client/src/assets/placeholder/tickets.js
@@ -26,4 +26,26 @@ export const TICKETS = Object.freeze({
       createData('Convenience Fee', 'Processing Charges', '₹ 19'),
     ],
   },
+  BANNER: {
+    TITLE: 'Why Attendee Kit is an eco-friendly gift',
+    CONTENT: [
+      'No new materials are required in manufacturing these pens, as we are reusing waste papers and protecting the environment.',
+      'The paper is completely bio-degradable, so no pollution problem.',
+      'These pens are made from recycled paper and not from tree wood thus saving billions of trees to be cut down.',
+      'These pens are embedded with vegetable/fruit/flower seeds. After the purpose of these pencils to be used as a writing instrument is served, we can just bury it in the mud pot and the seeds grow into new saplings or plants.',
+      'These seed plantable pens will sprout within 6-9 days after planting and can be used for your home garden or office desk.',
+      'Traditional plastic-based pens are a great threat to the environment. Around 275 million tonnes of plastic waste is generated each year around the world; between 4.8 million and 12.7 million tonnes are dumped into the sea. These eco-friendly pens are made from recycled cardboard and newspaper which are plastic-free.',
+      'Also, it motivates you to plant a tree, contributing to a greener and cleaner environment.',
+    ],
+  },
+  ATTENDEE_KIT: {
+    TITLE: 'What is the Attendee Kit?',
+
+    CONTENT: [
+      'The attendee kit is hamper of eco-friendly goodies given to all the members attending the event on Airmeet.',
+      "The Kit consists of a calendar which when mixed with soil grow into plants. Instead of throwing away the calendar paper in the Dustbin why not grow a plant from that. Isn't it interesting!! These calendars are made from Seed Papers and each month has different seeds engraved. So you will be able to plant a different tree each month.",
+      'The next item in the Kit is a Recycled Paper Color Pen with a plantable seed made up of recycled paper. The pen that grows, gently push it in a pot with soil and within 7-8 days you can see the plant growing out of it!',
+      'Apart from these, the Kit also has an Eco-Friendly Newspaper Pencil with a plantable seed made up of newspapers. Instead of cutting down trees for wood to shape them into pencils later, this is an eco-friendly solution that uses recycled newspaper to hold graphite within pencils.',
+    ],
+  },
 });
diff --git a/client/src/components/participate/Intro.js b/client/src/components/participate/Intro.js
@@ -3,21 +3,31 @@ import React from 'react';
 // Libraries
 import { makeStyles, Typography } from '@material-ui/core';
 
-// Assets
-import { PARTICIPATE } from '../../assets/placeholder/participate';
-
-function Participate() {
+function Participate({ title, content }) {
   const classes = useStyles();
 
   return (
     <div className={classes.root}>
       <Typography className={classes.title} variant='h2'>
-        {PARTICIPATE.INTRO.TITLE}
-      </Typography>
-      <Typography className={classes.content} variant='body2'>
-        {PARTICIPATE.INTRO.CONTENT}
+        {title}
       </Typography>
 
+      {typeof content === 'string' ? (
+        <Typography className={classes.content} variant='body2'>
+          {content}
+        </Typography>
+      ) : (
+        content.map((point) => (
+          <Typography
+            className={classes.content}
+            variant='body2'
+            style={{ marginTop: 20 }}
+          >
+            {point}
+          </Typography>
+        ))
+      )}
+
       <div className={classes.horizontalLine} />
     </div>
   );
@@ -39,7 +49,7 @@ const useStyles = makeStyles((theme) => ({
     textAlign: 'center',
   },
   content: {
-    fontFamily: 'Zilla Slab',
+    fontFamily: 'Helvetica',
     width: '55%',
     marginTop: '20px',
     textAlign: 'center',

diff --git a/client/src/views/Participate.js b/client/src/views/Participate.js
@@ -37,7 +37,10 @@ function About() {
       </Helmet>
 
       <Container>
-        <Intro />
+        <Intro
+          title={PARTICIPATE.INTRO.TITLE}
+          content={PARTICIPATE.INTRO.CONTENT}
+        />
         <ContentBanner DATA={PARTICIPATE.BANNER} />
         <Incentives />
 

diff --git a/client/src/views/Tickets.js b/client/src/views/Tickets.js
@@ -15,6 +15,8 @@ import Ticket from '../components/tickets/Ticket';
 import CustomTable from '../components/shared/Table';
 import GoogleForm from '../components/tickets/GoogleForm';
 import Modal from '../components/shared/Modal';
+import ContentBanner from '../components/shared/ContentBanner';
+import Intro from '../components/participate/Intro';
 
 // Assets
 import { GRAPHICS } from '../assets/img/graphics';
@@ -126,10 +128,16 @@ function Tickets() {
         />
       </Container>
 
+      <Typography className={classes.title} variant='h2'>
+        {/* Attendee Kit */}
+      </Typography>
+
+      <Intro
+        title={TICKETS.ATTENDEE_KIT.TITLE}
+        content={TICKETS.ATTENDEE_KIT.CONTENT}
+      />
+
       <div className={classes.carouselContainer}>
-        <Typography className={classes.title} variant='h2'>
-          Attendee Kit
-        </Typography>
         <Container>
           <Carousel
             indicators={false}
@@ -149,6 +157,8 @@ function Tickets() {
         </Container>
       </div>
 
+      <ContentBanner DATA={TICKETS.BANNER} />
+
       <Modal
         title='NITR Student Registeration'
         content='Please choose the relevant option. Only registered IDs will get to see event live on YouTube'
@@ -240,7 +250,7 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
     textAlign: 'center',
     color: '#fff',
-    marginBottom: 30,
+    marginTop: 30,
   },
   actionsContainer: {
     display: 'flex',