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

Footer updated #7

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Footer updated #7

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
112 changes: 57 additions & 55 deletions src/app/components/molecules/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,85 +6,87 @@ import { MdLocationOn } from 'react-icons/md'
import Container from '../../atoms/Container/Container'
import SectionHeading from "../../atoms/SectionHeading/SectionHeading"

import Link from 'next/link';

const Footer = () => {
return (
<>
<SectionHeading><div></div></SectionHeading>
<div className="footer bg-slate-600 w-full py-10">
<div className="footer bg-slate-600 w-full py-12">
<Container classNames="text-black">
<div className="footer__wrapper grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
<div className="intro">
<div>
<div className="intro flex flex-col gap-5 justify-start">
<div className="flex flex-col gap-2">
<h1 className='text-lg font-semibold text-slate-200'>Shree Bhotenamlang Secondary School</h1>
<div>
<a href="tel:+97700000000" target="_blank" className='flex items-center gap-2'><BiSolidPhoneCall className='w-9 h-7' /><p className='text-slate-300'>+977 00000000</p>
</a>

</div>
<div>
<a href="mailto:[email protected]" target="_blank" className='flex items-center gap-2'><AiOutlineMail className='w-9 h-7' /><p className='text-slate-300'>[email protected]</p></a>

</div>
<div className='flex items-center gap-2'>
<MdLocationOn className='w-9 h-7' />
<p className='text-slate-300'>Bhotenamlang, Sindhupalchok, Nepal</p>
<div className='hover:text-[#48823E] transition-colors duration-200 flex items-center gap-5'>
<BiSolidPhoneCall className='w-10 h-10 hover:text-[#48823E] transition-colors duration-200 '></BiSolidPhoneCall>
<p className='text-slate-300 hover:text-[#48823E] transition-colors duration-200'>+97700000000</p>
</div>
<div className='hover:text-[#48823E] transition-colors duration-200 flex items-center gap-5'>
<AiOutlineMail className='w-10 h-10 hover:text-[#48823E] transition-colors duration-200'></AiOutlineMail>
<p className='text-slate-300 hover:text-[#48823E] transition-colors duration-200'>[email protected]</p>

</div>
<div className='flex items-center gap-5 hover:text-[#48823E] transition-colors duration-200'>
<MdLocationOn className='w-10 h-10' />
<p className='text-slate-300 hover:text-[#48823E] transition-colors duration-200'>Bhotenamlang, Sindhupalchok, Nepal</p>
</div>
</div>
</div>



<div className='mt-5'>
<h1 className='text-slate-200'>Social</h1>
<div className="flex gap-5 mt-2">
<div className="">
<a href="https://facebook.com/" target='_blank'><AiFillFacebook className='w-full h-7' /></a>
<p className='text-slate-300'>Facebook</p>
<div>
<h1 className='text-lg font-semibold text-slate-200'>Social</h1>
<div className="flex gap-7 mt-2">
<div className="hover:text-[#48823E] transition-colors duration-200 flex flex-col gap-[5px]">
<a href="https://www.facebook.com/profile.php?id=61558616203473" target='_blank'><AiFillFacebook className='w-full h-10' /></a>
<p className='text-slate-300 hover:text-[#48823E] transition-colors duration-200'>Facebook</p>
</div>
<div className="">
<a href="grfgf" target='_blank'><AiFillInstagram className='w-full h-7' /></a>
<p className='text-slate-300'>Instagram</p>
<div className="hover:text-[#48823E] transition-colors duration-200 flex flex-col gap-[5px]">
<AiFillInstagram className='w-full h-10' />
<p className='text-slate-300 hover:text-[#48823E] transition-colors duration-200'>Instagram</p>
</div>
<div className="">
<a href="rgfgf" target='_blank'><AiFillLinkedin className='w-full h-7' /></a>
<p className='text-slate-300'>Linkedin</p>
<div className="hover:text-[#48823E] transition-colors duration-200 flex flex-col gap-[5px]">
<AiFillLinkedin className='w-full h-10' />
<p className='text-slate-300 hover:text-[#48823E] transition-colors duration-200'>Linkedin</p>
</div>
</div>
</div>
</div>
<div className="about">
<h1 className='text-lg font-semibold text-slate-200'>ABOUT US</h1>
<div className="links text-slate-300">
<p>About Us</p>
<p>Funding and Parters</p>
<p>Management Team</p>
<p>Teachers</p>
<p>Massage of Headsir</p>
<p>Alumni</p>



<div className="about flex flex-col gap-2">
<h1 className='text-lg font-semibold text-slate-200'>IMPORTANT LINKS</h1>
<div className="links text-slate-300 flex flex-col gap-[5px]">
<Link href='/about' className='hover:text-[#48823E] transition-colors duration-200'>About</Link>
<Link href='/sports' className='hover:text-[#48823E] transition-colors duration-200'>Sports</Link>
<Link href='/scholarships' className='hover:text-[#48823E] transition-colors duration-200'>Scholarships</Link>
<Link href='/events' className='hover:text-[#48823E] transition-colors duration-200'>Events</Link>
<Link href='/team' className='hover:text-[#48823E] transition-colors duration-200'>Team</Link>
</div>

</div>
<div className="courses">
<h1 className='text-lg font-semibold text-slate-200'>EDUCATION & SPORT</h1>
<div className="courses flex flex-col gap-2">
<h1 className='text-lg font-semibold text-slate-200'>SPORT</h1>

<div className="links text-slate-300">
<p>Workshop & Training</p>
<p>Science Lab</p>
<p>Computer Lab</p>
<p>Library</p>
<p>Playground</p>
<p>Yoga & Medidation</p>
<p>Karate</p>
<div className="links text-slate-300 flex flex-col gap-[5px]">
<Link href='/' className='hover:text-[#48823E] transition-colors duration-200'>Workshop & Training</Link>
<Link href='/' className='hover:text-[#48823E] transition-colors duration-200'>Science Lab</Link>
<Link href='/' className='hover:text-[#48823E] transition-colors duration-200'>Computer Lab</Link>
<Link href='/' className='hover:text-[#48823E] transition-colors duration-200'>Library</Link>
<Link href='/' className='hover:text-[#48823E] transition-colors duration-200'>Playground</Link>
</div>

</div>

<div className="student">
<div className="student flex flex-col gap-2">
<h1 className='text-lg font-semibold text-slate-200'>STUDENT CENTER</h1>
<div className="links text-slate-300">
<p>Notice Board</p>
<p>News & Events</p>
<p>Blogs & Article</p>
<p>Gallery</p>
<p>House & Club</p>
<p>Student Success Story</p>
<div className="links text-slate-300 flex flex-col gap-[5px]">
<Link href='/' className='hover:text-[#48823E] transition-colors duration-200'>Notice Board</Link>
<Link href='/' className='hover:text-[#48823E] transition-colors duration-200'>Articles</Link>
<Link href='/' className='hover:text-[#48823E] transition-colors duration-200'>Gallery</Link>
<Link href='/' className='hover:text-[#48823E] transition-colors duration-200'>Club</Link>
</div>
</div>

Expand Down