Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added footer web-view #7

Closed
wants to merge 1 commit into from
+196 −24
Closed

feat: added footer web-view #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 83 additions & 0 deletions src/components/shared/marginals/footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
84 changes: 84 additions & 0 deletions src/data/footerData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
53 changes: 29 additions & 24 deletions src/pages/playground.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 />
</>
);
}
Loading