diff --git a/config/content/Footer.js b/config/content/Footer.js
index 1ebe56b..6104a6d 100644
--- a/config/content/Footer.js
+++ b/config/content/Footer.js
@@ -1,113 +1,82 @@
-/* eslint-disable max-len */
-import {
- faTwitterSquare,
- faInstagramSquare,
- faYoutubeSquare,
- faFacebookSquare,
- faLinkedin,
-} from '@fortawesome/free-brands-svg-icons';
-import { faEnvelope, faMapMarkerAlt, faPhoneAlt } from '@fortawesome/free-solid-svg-icons';
-import logo from '../../images/navLogo.svg';
-
export default {
- innovision: {
- img: logo,
- alt: 'Innovision 2k22',
+ logo: {
+ img: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1695818710/inno_logo_gjqvic.svg',
+ alt: 'Innovision 2k23',
},
- title: 'Innovision 2k22',
- desc: `
- INNOVISION, one of the largest techno-management fest in eastern India, aims at providing a stage for young budding minds to exhibit their talents. Our primary goal is to create awareness for great ideas that would help humanity and society.`,
+
+ title: 'Innovision 2k23',
+
quicklinks: {
title: 'Quick Links',
list: [
{
- name: 'Technical Events',
- link: '/technical-events',
- },
- {
- name: 'Guest Lectures',
- link: '/guest-lectures',
- },
- {
- name: 'C.A program',
- link: '/campus-ambassador',
- },
- {
- name: 'Fun Events',
- link: '/fun-events',
- },
- {
- name: 'Pro Shows',
- link: '/proshows',
- },
- {
- name: 'Workshops',
- link: '/workshops',
- },
- {
- name: 'Exhibition',
- link: '/exhibition',
- },
- {
+ id: 1,
name: 'Privacy Policy',
link: '/privacy',
},
{
- name: 'Refund Policy',
- link: '/refund',
- },
- {
- name: 'Terms & Conditions',
- link: '/terms',
- },
- {
- name: 'Pricing',
- link: '/pricing',
+ id: 2,
+ name: 'Team',
+ link: '/',
},
],
},
- contactTitle: "Let's Connect",
- contact: [
+ information: [
{
- icon: faMapMarkerAlt,
- link: '',
- text: 'SAC, NIT Rourkela, Odisha - 769008',
+ id: 1,
+ infoTitle: 'Opening Hours',
+ list: [
+ {
+ idx: 1,
+ infoName: 'Weekdays',
+ info: 'Timings',
+ },
+ {
+ idx: 2,
+ infoName: 'Saturday, Sunday',
+ info: 'Timings',
+ },
+ ],
},
{
- icon: faPhoneAlt,
- link: '',
- text: '+91 7655070696',
- },
- {
- icon: faEnvelope,
- link: '',
- text: 'innovision.nitrkl@gmail.com',
+ id: 2,
+ infoTitle: 'Opening Hours',
+ list: [
+ {
+ idx: 1,
+ infoName: 'Weekdays',
+ info: 'Timings',
+ },
+ {
+ idx: 2,
+ infoName: 'Saturday, Sunday',
+ info: 'Timings',
+ },
+ ],
},
],
socials: [
{
- icon: faFacebookSquare,
+ id: 1,
+ icon: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1695819165/facebook_sxz0rs.svg',
+ alt: 'Facebook',
link: 'https://www.facebook.com/innonitr/',
},
{
- icon: faInstagramSquare,
+ id: 2,
+ icon: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1695819152/instagram_jzbpcd.svg',
+ alt: 'Instagram',
link: 'https://www.instagram.com/inno.nitr/',
},
{
- icon: faYoutubeSquare,
- link: 'https://www.youtube.com/c/InnovisionNITRourkelaTech',
- },
- {
- icon: faLinkedin,
- link: 'https://www.linkedin.com/company/innovision-nitrkl/',
- },
- {
- icon: faTwitterSquare,
+ id: 3,
+ icon: 'https://res.cloudinary.com/dme9vltjf/image/upload/v1695819050/Twitter_xzkmus.svg',
+ alt: 'Twitter',
link: 'https://twitter.com/innonitr',
},
],
- devLink: {
+ developers: {
link: 'https://github.com/dscnitrourkela',
- linkText: 'GDSC NIT Rourkela',
+ text: 'Designed and Developed with 💜 by GDSC NIT Rourkela',
},
};
diff --git a/src/components/index.js b/src/components/index.js
index c9ab1b0..433632f 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -7,3 +7,6 @@ export { default as SuccessCard } from './SuccessCard/SuccesssCard';
// 404 card
export { default as PageNotFoundCard } from './PageNotFoundCard/PageNotFoundCard';
+
+// FAQ section
+export { default as FAQSection } from './FAQSection/FAQSection';
diff --git a/src/components/marginals/Footer/Footer.jsx b/src/components/marginals/Footer/Footer.jsx
index 78cc341..15b0445 100644
--- a/src/components/marginals/Footer/Footer.jsx
+++ b/src/components/marginals/Footer/Footer.jsx
@@ -1,240 +1,81 @@
import React from 'react';
-
-// Libraries
-import styled from 'styled-components';
-import tw from 'twin.macro';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
- faTwitterSquare,
- faInstagramSquare,
- faYoutubeSquare,
- faFacebookSquare,
- faLinkedin,
-} from '@fortawesome/free-brands-svg-icons';
-import { faEnvelope, faMapMarkerAlt, faPhoneAlt } from '@fortawesome/free-solid-svg-icons';
import { Link } from 'gatsby';
-
-// Components
-import Heading4 from '../../shared/Typography/Heading4';
-import Body2 from '../../shared/Typography/Body2';
-import { Body1, Container } from '../../shared';
-
-// Assets
-import { footer } from '../../../../config/content';
-
-library.add(
- faFacebookSquare,
- faInstagramSquare,
- faTwitterSquare,
- faYoutubeSquare,
- faLinkedin,
- faMapMarkerAlt,
- faPhoneAlt,
- faEnvelope,
-);
-
-const FooterOuterContainer = styled.div`
- ${tw`
- w-full
- h-auto
- overflow-x-hidden
- overflow-y-auto
- flex
- justify-center
- `}
- box-shadow: 0 0 16px 0 rgba(255, 255, 255, 0.36);
-
- .about-site {
- grid-column: 1/7;
- text-align: center;
- margin-bottom: 0;
- width: 100%;
- font-size: 0.9em;
- margin-right: auto;
- margin-left: auto;
- padding-top: 15px;
- padding-bottom: 15px;
- border-top: 2px solid lightgrey;
- & > a {
- ${tw`inline-block`}
- }
- & > a:hover {
- ${tw`text-color-secondary`}
- }
- }
-`;
-
-const FooterContainer = styled.div`
- ${tw`
- grid
- grid-cols-12
- md:grid-cols-1
- gap-16
- md:gap-7
- max-w-full
- py-16
- `}
-`;
-
-const FooterLeftContainer = styled.div`
- ${tw`
- col-span-4
- `}
-`;
-
-const FooterLogoContainer = styled.div`
- ${tw`
- flex
- gap-4
- mb-6
- md:mb-3
- `}
-`;
-
-const FooterLogo = styled.img`
- ${tw`
- w-8
- h-8
-`}
-`;
-
-const FooterDescription = styled(Body1)`
- ${tw`
- text-color-tertiary
- leading-6
- `}
-`;
-
-const FooterCenterContainer = styled.div`
- ${tw`
- col-span-4
- flex
- justify-center
- md:justify-start
-`}
-`;
-
-const FooterLocationContainer = styled.div`
- ${tw`
- mt-6
- md:mt-3
- `}
-`;
-
-const FooterLocationItem = styled.div`
- ${tw`
- flex
- mb-4
- gap-4
-`}
-`;
-
-const FooterCenterSubContainer = styled.div`
- ${tw`
- text-left
-`}
-`;
-
-const FooterLinkContainer = styled.div`
- ${tw`
- grid
- grid-cols-2
- md:grid-cols-3
- mt-6
- md:mt-3
- gap-x-8
- gap-y-4
- `}
-`;
-
-const FooterRightContainer = styled.div`
- ${tw`
- col-span-4
-`}
-`;
-
-const IconContainer = styled.div`
- ${tw`
- flex
- gap-4
- `}
-`;
-
-const FooterSocialText = styled(Body2)`
- word-break: break-all;
-`;
-
-const LinkText = styled(Body2)`
- ${tw`
- text-color-tertiary
- `}
- &:hover {
- ${tw`
- text-color-secondary
- `}
- }
-`;
-
-const FooterHeading = styled(Heading4)`
- ${tw`
- text-2xl
- 2xl:text-2xl
- lg:text-2xl
- md:text-xl
- sm:text-xl`}
-`;
+import {
+ InformationContainer,
+ InformationListContainer,
+ InformationName,
+ InformationTitle,
+ InformationValue,
+ InformationWrapper,
+ LinksContainer,
+ Logo,
+ QuickLinkContainer,
+ LogoAndTitleContainer,
+ TitleText,
+ LinksWrapper,
+ DevText,
+ SocialsContainer,
+ SocialIcon,
+ DevAndSocialContainer,
+ FooterContainer,
+ FooterWrapper,
+} from './styles';
+
+import FooterData from '../../../../config/content/Footer';
+
+const { logo, title, information, quicklinks, developers, socials } = FooterData;
const Footer = () => (
-
-
-
-
-
-
- {footer.title}
-
- {footer.desc}
-
-
-
- {footer.quicklinks.title}
-
- {footer.quicklinks.list.map(({ link, name }) => (
-
- {name}
-
+
+
+
+
+
+ {title}
+
+
+
+ {quicklinks.title}
+
+ {quicklinks.list.map(({ id, name, link }) => (
+
+ {name}
+
))}
-
-
-
-
- {footer.contactTitle}
-
- {footer.contact.map(({ icon, text }) => (
-
-
- {text}
-
- ))}
-
-
- {footer.socials.map(({ icon, link }) => (
-
-
-
+
+
+
+ {information.map((item) => (
+
+ {item.infoTitle}
+
+ {item.list.map(({ idx, infoName, info }) => (
+
+ {infoName}
+ {': '}
+ {info}
+
+ ))}
+
+
))}
-
-
-
-
- Designed and Developed with 💙 by{' '}
-
- {footer.devLink.linkText}
-
-
-
-
+
+
+
+
+
+ {developers.text}
+
+
+ {socials.map(({ id, icon, alt, link }) => (
+
+
+
+ ))}
+
+
+
+
);
export default Footer;
diff --git a/src/components/marginals/Footer/styles.js b/src/components/marginals/Footer/styles.js
new file mode 100644
index 0000000..b52a310
--- /dev/null
+++ b/src/components/marginals/Footer/styles.js
@@ -0,0 +1,217 @@
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+export const InformationContainer = styled.div`
+ ${tw`
+ flex
+ flex-col
+ gap-[15px]
+ w-[208px]
+ overflow-hidden
+ `}
+
+ @media (max-width: 890px) {
+ gap: 16px;
+ width: 264px;
+ margin: 0 auto;
+ }
+`;
+export const InformationTitle = styled.p`
+ ${tw`
+ font-Inter
+ `}
+ color: #fff;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 28px;
+
+ @media (max-width: 890px) {
+ font-size: 16px;
+ line-height: 20px;
+ }
+`;
+export const InformationListContainer = styled.div`
+ ${tw`
+ flex
+ flex-col
+ gap-[8px]
+ text-[#fff]
+ `}
+`;
+export const InformationName = styled.p`
+ ${tw`
+ font-Inter
+ `}
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 28px;
+
+ @media (max-width: 890px) {
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 20px;
+ }
+`;
+export const InformationValue = styled.span`
+ ${tw`
+ text-color-secondary
+ `}
+`;
+
+export const InformationWrapper = styled.div`
+ ${tw`
+ flex
+ gap-[32px]
+ `}
+ @media (max-width: 890px) {
+ flex-direction: column;
+ gap: 24px;
+ }
+`;
+export const QuickLinkContainer = styled.div`
+ ${tw`
+ flex
+ flex-col
+ gap-[15px]
+ max-w-[208px]
+ overflow-hidden
+ `}
+ @media (max-width: 890px) {
+ gap: 16px;
+ max-width: 264px;
+ margin: 0 auto;
+ }
+`;
+export const LinksContainer = styled.div`
+ ${tw`
+ flex
+ gap-[32px]
+ `}
+ @media (max-width: 890px) {
+ flex-direction: column;
+ gap: 24px;
+ text-align: center;
+ }
+`;
+export const LogoAndTitleContainer = styled.div`
+ ${tw`
+ flex
+ flex-col
+ gap-[16px]
+ items-start
+ `}
+ @media (max-width: 890px) {
+ align-items: center;
+ }
+`;
+export const Logo = styled.img`
+ ${tw`
+ w-[40px]
+ h-[40px]
+ `}
+`;
+
+export const TitleText = styled.p`
+ ${tw`
+ font-Roslindale
+ `}
+ color: #FFF;
+ font-size: 24px;
+ font-style: italic;
+ font-weight: 400;
+ line-height: normal;
+ text-transform: uppercase;
+`;
+
+export const LinksWrapper = styled.div`
+ ${tw`
+ flex
+ justify-between
+ pb-[72px]
+ border-b-[2px]
+ border-solid
+ border-[rgba(255, 255, 255, 0.32)]
+ `}
+
+ @media (max-width: 890px) {
+ flex-direction: column;
+ gap: 40px;
+ padding-bottom: 40px;
+ text-align: center;
+ }
+`;
+export const DevText = styled.p`
+ ${tw`
+ font-Inter
+ `}
+ color: #FFF;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 24px;
+ letter-spacing: 0.32px;
+ text-transform: capitalize;
+ cursor: pointer;
+`;
+
+export const SocialsContainer = styled.div`
+ ${tw`
+ flex
+ gap-[32px]
+ `}
+ @media (max-width: 890px) {
+ gap: 24px;
+ }
+`;
+
+export const SocialIcon = styled.img`
+ ${tw`
+ w-[24px]
+ h-[24px]
+ `}
+`;
+
+export const DevAndSocialContainer = styled.div`
+ ${tw`
+ w-full
+ flex
+ justify-between
+ `}
+ @media (max-width: 890px) {
+ flex-direction: column;
+ gap: 16px;
+ align-items: center;
+ }
+`;
+
+export const FooterContainer = styled.div`
+ ${tw`
+ flex
+ flex-col
+ gap-[34px]
+ w-[92%]
+ mx-auto
+ sm:w-full
+ `}
+ @media (max-width: 890 px) {
+ gap: 24px;
+ width: 80%;
+ }
+`;
+
+export const FooterWrapper = styled.div`
+ ${tw`
+ w-full
+ bg-background-dark
+ pt-[72px]
+ pb-[40px]
+ `}
+
+ @media (max-width: 890px) {
+ padding-top: 24px;
+ padding-bottom: 24px;
+ text-align: center;
+ }
+`;