feat: styled project cards

src/components/shared/marginals/events.jsx

@@ -0,0 +1,64 @@
+import { Heading, Paragraph, HeroText1 } from '../typography/index.jsx';
+import eventData from '../../../data/eventData.js';
+
+export default function Event() {
+	return (
+		<div className='p-8 border-1 border-red-500 '>
+			<div className=' flex items-center justify-center mx:auto'>
+				<HeroText1
+					className='text-primary-yellow text-center sm:text-4xl'
+					style={{
+						textShadow: '4.608px 4.608px 0px #000',
+
+						WebkitTextStrokeWidth: 2.71052622795105,
+						WebkitTextStrokeColor: '#252525',
+					}}>
+					Events
+				</HeroText1>
+				{eventData.length > 0 && <img src={eventData[0].titleUrl} alt='Icon' className='w-6 h-4 ml-2 lg:mt-10  sm: mt-6' />}
+			</div>
+			<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12'>
+				{eventData.map((event, index) => (
+					<div
+						key={index}
+						className='p-6 rounded-lg flex-shrink-0 relative w-auto bg-[#FF9E7C]'
+						style={{
+							borderRadius: '8px',
+							border: '1px solid #000',
+
+							boxShadow: '4px 4px 0px 0px #000',
+						}}>
+						<div
+							className=' text-white px-3 py-1 rounded-full text-sm absolute  -top-3.5 -right-4 z-10  whitespace-nowrap w-auto bg-yellow-300'
+							style={{
+								borderRadius: '9px',
+								border: '2px solid #000',
+							}}>
+							<Paragraph variant='body3' className='text-black'>
+								{event.time}
+							</Paragraph>
+						</div>
+						<h3 className='text-xl font-semibold mb-2'>
+							<Heading variant='h3'>{event.date}</Heading>
+						</h3>
+						<h4 className='text-lg font-semibold mb-4'>
+							<Heading variant='h3'>{event.venue}</Heading>
+						</h4>
+						<ul className='text-[#d45500]'>
+							{event.agenda.map((item, index) => (
+								<li key={index}>
+									<Paragraph variant='body3' className='text-black'>
+										{item}
+									</Paragraph>
+								</li>
+							))}
+						</ul>
+					</div>
+				))}
+			</div>
+			<div className='  bottom-0 right-0 my-px mr-2  '>
+				{eventData.length > 0 && <img src={eventData[0].imageUrl} alt='Vector' className=' w-44 h-60 stroke-3 ' />}
+			</div>
+		</div>
+	);
+}

src/data/eventData.js

@@ -0,0 +1,24 @@
+const eventData = [
+	{
+		time: '4PM onward',
+		date: 'Friday, 22 Dec',
+		venue: 'Hotel Deepti Courtyard',
+		agenda: ['✦ Registration', '✦ Ice-Breakers', '✦ Dinner', '✦ Catch-up Celebration'],
+		imageUrl: 'https://res.cloudinary.com/dkkuaymml/image/upload/v1711270555/Vector_716_1_lqh4wo.svg',
+		titleUrl: 'https://res.cloudinary.com/dkkuaymml/image/upload/v1711271152/Group_8808_gnoig0.svg',
+	},
+	{
+		time: '9AM to 10:30PM',
+		date: 'Friday, 22 Dec',
+		venue: 'Hotel Deepti Courtyard',
+		agenda: ['✦ Registration', '✦ Ice-Breakers', '✦ Dinner', '✦ Catch-up Celebration'],
+	},
+	{
+		time: '9AM to 2PM',
+		date: 'Friday, 22 Dec',
+		venue: 'Hotel Deepti Courtyard',
+		agenda: ['✦ Registration', '✦ Ice-Breakers', '✦ Dinner', '✦ Catch-up Celebration'],
+	},
+];
+
+export default eventData;

src/pages/playground.jsx

@@ -1,4 +1,33 @@
-import Hero from '../components/Hero';
+import { Heading, Paragraph, PersonalizedText, Text } from '../components/shared';
+import Event from '../components/shared/marginals/events.jsx';
 export default function Playground() {
-	return <Hero />;
+	return (
+		<>
+			<div className='container py-6'>
+				<PersonalizedText>Personalized Text</PersonalizedText>
+				<Heading variant='h1'>Heading 1</Heading>
+				<Heading variant='h2'>Heading 2</Heading>
+				<Heading variant='h3'>Heading 3</Heading>
+				<Paragraph variant='body1'>Paragraph body1</Paragraph>
+				<Paragraph variant='body2'>Paragraph body2</Paragraph>
+				<Paragraph variant='body3'>Paragraph body3</Paragraph>
+				<Text variant='button'>Text button</Text>
+				<Text variant='nav'>Text nav</Text>
+				<Text variant='navButton'>Text navButton</Text>
+				<Text variant='footer'>Text footer</Text>
+
+				<Heading variant='h1' className='mt-6'>
+					Colors
+				</Heading>
+				<ul>
+					<li className='text-primary'>Primary</li>
+					<li className='text-primary-foreground'>Primary Foreground</li>
+					<li className='text-primary-yellow'>Primary Yellow</li>
+					<li className='text-black'>Black</li>
+					<li className='text-black-foreground'>Black Foreground</li>
+				</ul>
+			</div>
+			<Event />
+		</>
+	);
 }