Skip to content

Commit

Permalink
added footer to layout. fixed navbar links prefetch
Browse files Browse the repository at this point in the history
  • Loading branch information
deveshsawant05 committed Jul 29, 2024
1 parent 28f64b8 commit ab26882
Show file tree
Hide file tree
Showing 13 changed files with 358 additions and 14 deletions.
Binary file added public/facebook-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/facebook-2.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/instagram-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/instagram-2.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/linkedin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/linkedin.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/twitter-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/twitter-2.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Analytics } from "@vercel/analytics/react"
import { SpeedInsights } from "@vercel/speed-insights/next"
import { cn } from "@/lib/utils"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"

const inter = Inter({ subsets: ["latin"] });

Expand Down Expand Up @@ -51,6 +52,7 @@ export default function RootLayout({
<Suspense fallback={<Loading />}>{children}</Suspense>
<Analytics />
<SpeedInsights />
<Footer />
</body>
</html>
);
Expand Down
106 changes: 106 additions & 0 deletions src/components/footer.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import "@/styles/footer.css";
import React from "react";
import Link from "next/link";
import { Noto_Sans , Montserrat } from "next/font/google";
import Image from "next/image";

const notoSansFont = Noto_Sans({ weight: ["300","400"], subsets: ["latin"] });
const montserratFont = Montserrat({weight: ["100","400"], subsets: ["latin"] });

function Footer() {
const homeLink = "/";
const eventsLink = "/events";
const projectsLink = "/projects";
const membersLink = "/members";
const ccEmailLink = "mailto:[email protected]";
const addressLink = "https://goo.gl/maps/7g5D6XJpMAD2";
const linkedInLink = "https://www.linkedin.com/company/iiitvcc/";
const twitterLink = "https://x.com/iiitvcc";
const instagramLink = "https://www.instagram.com/codingclub_iiitv/";
const facebookLink = "https://www.facebook.com/iiitvcc/";
const iconWidthHeight = "30";
return (
<>
<div className={`${notoSansFont.className} footer-container-1 grid grid-cols-1 lg:grid-cols-12`}>
<hr className="col-span-1 lg:col-span-12 footer-divider-1"/>
<div className="col-span-1 lg:col-span-4">
<div className="footer-cc-logo">
<img
className="footer-cc-logo-img "
src="https://avatars.githubusercontent.com/u/9347727?s=200&v=4"
alt="IIITV Logo"
/>
<div>
<p className="footer-cc-logo-title">Coding Club</p>
<p className="footer-cc-logo-subtitle">Blog Website</p>
</div>
</div>
</div>
<div className="col-span-1 lg:col-span-7 grid grid-cols-1 sm:grid-cols-12 footer-first-container-2">
<div className="footer-links-container col-span-2 sm:col-start-2">
<p>
Links
</p>
<div className="footer-links-divider"></div>
<Link href={homeLink} className={montserratFont.className} prefetch={false}>
Home
</Link>
<Link href={eventsLink} className={montserratFont.className} prefetch={false}>
Events
</Link>
<Link href={projectsLink} className={montserratFont.className} prefetch={false}>
Projects
</Link>
<Link className={montserratFont.className} href={membersLink} prefetch={false}>
Members
</Link>
</div>

<div className="footer-contact-container col-span-2 sm:col-span-8 sm:col-start-4">
<p>
Contact
</p>
<div>
<p>Email</p>
<Link href={ccEmailLink} target="_blank">
<text className={montserratFont.className}>: [email protected]</text>
</Link>
<p>Phone</p>
<text className={montserratFont.className}>: +98875503111 ,9034534472</text>
<p>Address</p>
<Link href={addressLink} target="_blank" className={montserratFont.className}>: c/o Block No. 9, Government Engineering College, Sector 28,
Gandhinagar, Gujarat
</Link>
</div>

</div>
<div className="footer-icon-container col-span-1 sm:col-start-12">
<Link href={linkedInLink} prefetch={false} target="_blank"><Image src="linkedin.svg" width={iconWidthHeight} height={iconWidthHeight} alt="Linkedin logo"></Image></Link>
<Link href={twitterLink} prefetch={false} target="_blank"><Image src="twitter-2.svg" width={iconWidthHeight} height={iconWidthHeight} alt="Twitter Logo"></Image></Link>
<Link href={instagramLink} prefetch={false} target="_blank"><Image src="instagram-2.svg" width={iconWidthHeight} height={iconWidthHeight} alt="Instagram Logo"></Image></Link>
<Link href={facebookLink} prefetch={false} target="_blank"><Image src="facebook-2.svg" width={iconWidthHeight} height={iconWidthHeight} alt="Facebook Logo"></Image></Link>
</div>
</div>
</div>
<div className={`${montserratFont.className} footer-container-2`}>
<div className="footer-dot-container">
<p>Designed by DOT</p>
<div className="dot-icon">
<div /><div /><div /><div /><div /><div /><div /><div /><div />
</div>
</div>
<hr className="footer-container-2-divider"></hr>
<div className="footer-cc-container">
<p>Developed by Coding Club</p>
<img
className="footer-cc-logo-img-2"
src="https://avatars.githubusercontent.com/u/9347727?s=200&v=4"
alt="IIITV Logo"
/>
</div>
</div>
</>
);
}

export default Footer;
22 changes: 11 additions & 11 deletions src/components/navbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ function Navbar() {
<>
<div id="pseudo"></div>
<div className="navbar">
<a href="/" className="logo-container">
<Link href="/" className="logo-container" prefetch={false}>
<img className="logo-img" src="https://avatars.githubusercontent.com/u/9347727?s=200&v=4" alt="IIITV Logo" />
<h1 className="logo-title">Coding Club</h1>
</a>
<p className="logo-title">Coding Club</p>
</Link>
<div className="menu-container">
<Link href={eventsLink} className="text-primary">Events</Link>
<Link href={projectsLink} className="text-primary">Projects</Link>
<Link href={membersLink} className="text-primary">Members</Link>
<Link href={contactUsLink} className="text-primary">Contact Us</Link>
<Link href={eventsLink} className="text-primary" prefetch={false}>Events</Link>
<Link href={projectsLink} className="text-primary" prefetch={false} >Projects</Link>
<Link href={membersLink} className="text-primary" prefetch={false}>Members</Link>
<Link href={contactUsLink} className="text-primary" prefetch={false}>Contact Us</Link>
</div>
<div className="mobile-menu">
<div className="menu-icon">
Expand All @@ -41,10 +41,10 @@ function Navbar() {

<div className="mobile-menu-container" style={{display : (hiddenMenu ? "none" : "") }}>
<div className="mobile-menu-container2">
<p><Link href={eventsLink} className="text-primary">Events </Link></p>
<p><Link href={projectsLink} className="text-primary">Projects </Link></p>
<p><Link href={membersLink} className="text-primary">Members </Link></p>
<p><Link href={contactUsLink} className="text-primary">Contact Us </Link></p>
<p><Link href={eventsLink} className="text-primary" prefetch={false}>Events </Link></p>
<p><Link href={projectsLink} className="text-primary" prefetch={false}>Projects </Link></p>
<p><Link href={membersLink} className="text-primary" prefetch={false}>Members </Link></p>
<p><Link href={contactUsLink} className="text-primary" prefetch={false}>Contact Us </Link></p>
</div>
</div>

Expand Down
Loading

0 comments on commit ab26882

Please sign in to comment.