feat: added footer web-view

dscnitrourkela · Mar 6, 2024 · eda87db · eda87db
1 parent 4bc9203
commit eda87db
Show file tree

Hide file tree

Showing 3 changed files with 196 additions and 24 deletions.
diff --git a/src/components/shared/marginals/footer.jsx b/src/components/shared/marginals/footer.jsx
@@ -0,0 +1,83 @@
+import footerData from '../../../data/footerData.js';
+import { Heading, Paragraph } from '../typography/index.jsx';
+
+export default function Footer() {
+	return (
+		<div className='w-full h-[475px] bg-[#1E1E1E]'>
+			<div className='w-[95%] mx-auto md:pt-[16px] md:pb-[52px]' style={{ borderBottom: '1px solid white' }}>
+				<div className='w-full flex justify-end'>
+					<div className='h-[76px] w-[76px]'>
+						<img src='https://res.cloudinary.com/dme9vltjf/image/upload/v1709728904/Star_e1ephq.png' alt='star' />
+					</div>
+				</div>
+				<div className='flex md:flex-row flex-col md:justify-between'>
+					<div className='h-[174px] w-[174px] md:my-auto md:pl-[24px]'>
+						<img
+							src='https://res.cloudinary.com/dme9vltjf/image/upload/v1697438367/Instagram_post_-_7_y5szxa.png'
+							alt='logo'
+						/>
+					</div>
+					<div className='flex gap-[164px] pr-[54px]'>
+						<div className=''>
+							<Heading
+								variant='h3'
+								className='text-primary-yellow pb-8'
+								style={{
+									textShadow: ' 1.7px 1.7px 0px #FFF',
+									WebkitTextStrokeWidth: 1,
+									WebkitTextStrokeColor: '#252525',
+								}}>
+								{footerData.contact.title}
+							</Heading>
+							<Paragraph variant='body3' className='text-white'>
+								{footerData.contact.desc}
+							</Paragraph>
+							<Paragraph variant='body3' className='pt-[12px] text-white'>
+								Email: <span className='text-[#FF7647]'>{footerData.contact.email}</span>
+							</Paragraph>
+							<div className='flex gap-[26px] pt-[16px]'>
+								{footerData.contact.socials.map(({ name, link, icon }) => (
+									<a href={link} key={name}>
+										<img src={icon} alt={name} />
+									</a>
+								))}
+							</div>
+						</div>
+						<div className>
+							<Heading
+								variant='h2'
+								className='text-primary-yellow pb-8'
+								style={{
+									textShadow: ' 1.7px 1.7px 0px #FFF',
+									WebkitTextStrokeWidth: 1,
+									WebkitTextStrokeColor: '#252525',
+								}}>
+								{footerData.links.title}
+							</Heading>
+							<div className='flex gap-[51px]'>
+								<div className='flex flex-col gap-4'>
+									{footerData.links.links1.map(({ name, link }) => (
+										<a href={link} key={name}>
+											<Paragraph variant='body3' className='text-white'>
+												{name}
+											</Paragraph>
+										</a>
+									))}
+								</div>
+								<div className='flex flex-col gap-4'>
+									{footerData.links.links2.map(({ name, link }) => (
+										<a href={link} key={name}>
+											<Paragraph variant='body3' className='text-white'>
+												{name}
+											</Paragraph>
+										</a>
+									))}
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/src/data/footerData.js b/src/data/footerData.js
@@ -0,0 +1,84 @@
+const footerData = {
+	contact: {
+		title: 'Contact Us',
+		desc: 'NITR 1999 Silver Jubilee Group',
+		email: '[email protected]',
+		socials: [
+			{
+				name: 'Facebook',
+				link: '',
+				icon: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1709710971/Vector_1_qkkjnj.png',
+			},
+			{
+				name: 'WhatsApp',
+				link: '',
+				icon: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1709710970/Vector_2_gnwyks.png',
+			},
+			{
+				name: 'LinkedIn',
+				link: '',
+				icon: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1709710971/Group_36701_dhutzn.png',
+			},
+		],
+	},
+
+	links: {
+		title: 'Useful Links',
+		links1: [
+			{
+				index: 0,
+				name: 'Register',
+				link: '/',
+			},
+			{
+				index: 1,
+				name: 'Payment',
+				link: '/',
+			},
+			{
+				index: 2,
+				name: 'Donation',
+				link: '/',
+			},
+			{
+				index: 3,
+				name: 'Schedule',
+				link: '/',
+			},
+			{
+				index: 9,
+				name: 'FAQ',
+				link: '/',
+			},
+		],
+		links2: [
+			{
+				index: 4,
+				name: 'Home',
+				link: '/',
+			},
+			{
+				index: 5,
+				name: 'Gallery',
+				link: '/',
+			},
+			{
+				index: 6,
+				name: 'Who is Coming?',
+				link: '/',
+			},
+			{
+				index: 7,
+				name: 'Volunteers',
+				link: '/',
+			},
+			{
+				index: 8,
+				name: 'Privacy',
+				link: '/',
+			},
+		],
+	},
+};
+
+export default footerData;
diff --git a/src/pages/playground.jsx b/src/pages/playground.jsx
@@ -1,31 +1,36 @@
 import { Heading, HeroText, Paragraph, PersonalizedText, Text } from '../components/shared';
+import Footer from '../components/shared/marginals/footer.jsx';
 
 export default function Playground() {
 	return (
-		<div className='container py-6'>
-			<HeroText>Hero Text</HeroText>
-			<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>
+		<>
+			<div className='container py-6'>
+				<HeroText>Hero Text</HeroText>
+				<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>
+				<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>
+
+			<Footer />
+		</>
 	);
 }