Skip to content

Commit

Permalink
Merge pull request #4 from Electrium-Mobility/nav-bar-footer
Browse files Browse the repository at this point in the history 
Nav bar footer
  • Loading branch information
@Jerryzjx
Jerryzjx authored Jul 25, 2024
2 parents 89844bc + 05543f1 commit 6a9e57e
Show file tree
Hide file tree
Showing 10 changed files with 664 additions and 47 deletions.
9 changes: 9 additions & 0 deletions app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,12 @@
@apply border-foreground/20;
}
}

.logo-opacity {
opacity: 0.6;
transition: opacity 0.3s ease;
}

.logo-opacity:hover {
opacity: 1;
}
8 changes: 7 additions & 1 deletion app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import '@fontsource/nunito/400.css';
import '@fontsource/nunito/700.css';
import "./globals.css";
import Navbar from "@/components/shop/Navbar";
import Footer from "@/components/shop/Footer";

const defaultUrl = process.env.VERCEL_URL
? `https://${process.env.VERCEL_URL}`
Expand All @@ -23,7 +25,11 @@ export default function RootLayout({
return (
<html lang="en">
<body style={{ fontFamily: 'Nunito, sans-serif' }}>
{children}
<Navbar/>
<main className="pt-[75px]">
{children}
</main>
<Footer/>
</body>
</html>
);
Expand Down
2 changes: 0 additions & 2 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,6 @@ export default async function Home() {

return (
<div className="flex flex-col min-h-screen">
<Navbar />
<main className="flex-grow bg-white py-16 px-4">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
Expand Down Expand Up @@ -141,7 +140,6 @@ export default async function Home() {
</section>
</div>
</main>
<Footer />
</div>
);
}
2 changes: 0 additions & 2 deletions app/products/[productId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ export default async function ProductPage({params}: { params: { productId: strin

return (
<div className="flex flex-col min-h-screen">
<Navbar/>
<main className="flex-grow bg-gray-100 py-16 px-4">
<div className="max-w-6xl mx-auto bg-white p-8 rounded-lg shadow-md">
<h1 className="text-3xl font-bold text-gray-800 mb-2">{bike.name}</h1>
Expand Down Expand Up @@ -97,7 +96,6 @@ export default async function ProductPage({params}: { params: { productId: strin
<p className="text-gray-700">Currently in stock: {bike.amount_stocked}</p>
</div>
</main>
<Footer />
</div>
);
}
75 changes: 57 additions & 18 deletions components/shop/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,82 @@ import Link from 'next/link';

export default function Footer() {
return (
<footer className="bg-gray-800 text-white py-8">
<footer className="bg-[#303846] text-white py-8">
<div className="container mx-auto px-4">
<div className="grid grid-cols-4 gap-8">
<div>
<h3 className="font-bold mb-4">Pages</h3>
<h3 className="text-xl mb-4">Pages</h3>
<ul className="space-y-2">
<li><Link href="/about">About</Link></li>
<li><Link href="/team">Team</Link></li>
<li><Link href="/contact">Contact</Link></li>
<li><a href="https://electriummobility.com/about"
className="font-extralight hover:text-green-600 hover:underline transition ease-in-out duration-300">About</a>
</li>
<li><a href="https://electriummobility.com/team"
className="font-extralight hover:text-green-600 hover:underline transition ease-in-out duration-300">Team</a>
</li>
<li><a href="https://electriummobility.com/contact"
className="font-extralight hover:text-green-600 hover:underline transition ease-in-out duration-300">Contact</a>
</li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Recent Projects</h3>
<h3 className="text-xl mb-4">Recent Projects</h3>
<ul className="space-y-2">
<li><Link href="/projects/electric-bike">Electric Bike</Link></li>
<li><Link href="/projects/electric-skateboard">Electric Skateboard</Link></li>
<li><Link href="/projects/onewheel">OneWheel</Link></li>
<li><a href="https://electriummobility.com/docs/W2024-projects/project1_2023"
className="font-extralight hover:text-green-600 hover:underline transition ease-in-out duration-300">Electric Bike</a>
</li>
<li><a href="https://electriummobility.com/docs/W2024-projects/project2_2023"
className="font-extralight hover:text-green-600 hover:underline transition ease-in-out duration-300">Electric Skateboard</a>
</li>
<li><a href="https://electriummobility.com/docs/W2024-projects/project3_2023"
className="font-extralight hover:text-green-600 hover:underline transition ease-in-out duration-300">OneWheel</a>
</li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Get Involved</h3>
<h3 className="text-xl mb-4">Get Involved</h3>
<ul className="space-y-2">
<li><Link href="/join">Join Our Team</Link></li>
<li><Link href="/sponsor">Become A Sponsor</Link></li>
<li><a href="https://electriummobility.com/join-our-team"
className="font-extralight hover:text-green-600 hover:underline transition ease-in-out duration-300">Join Our Team</a>
</li>
<li><a href="https://electriummobility.com/sponsors"
className="font-extralight hover:text-green-600 hover:underline transition ease-in-out duration-300">Become A Sponsor</a>
</li>
</ul>
</div>
<div>
<h3 className="font-bold mb-4">Community</h3>
<h3 className="text-xl mb-4">Community</h3>
<ul className="space-y-2">
<li><Link href="/support">Support Us</Link></li>
<li><a href="https://www.youtube.com">YouTube</a></li>
<li><a href="https://www.instagram.com">Instagram</a></li>
<li><a href="https://www.discord.com">Discord</a></li>
<li><a href="https://www.linkedin.com">LinkedIn</a></li>
<li><a
href="https://imodules.uwaterloo.ca/s/1802/21/form.aspx?sid=1802&gid=2&pgid=1266&cid=3030&bledit=1&dids=296"
className="font-extralight hover:text-green-600 hover:underline transition ease-in-out duration-300">Support
Us</a>
</li>
<li><a href="https://www.youtube.com/@electriummobility"
className="font-extralight hover:text-green-600 hover:underline transition ease-in-out duration-300">YouTube</a>
</li>
<li><a href="https://www.instagram.com/electriummobility/"
className="font-extralight hover:text-green-600 hover:underline transition ease-in-out duration-300">Instagram</a>
</li>
<li><a href="https://discord.com/invite/jggFVza4XR"
className="font-extralight hover:text-green-600 hover:underline transition ease-in-out duration-300">Discord</a>
</li>
<li><a href="https://www.linkedin.com/company/electrium-mobility/"
className="font-extralight hover:text-green-600 hover:underline transition ease-in-out duration-300">LinkedIn</a>
</li>
<li><a href="mailto:[email protected]"
className="font-extralight hover:text-green-600 hover:underline transition ease-in-out duration-300">Email</a>
</li>
</ul>
</div>
</div>
<div className="mt-8 text-center">
<a href="https://electriummobility.com">
<img src="/img/logo-dark-mode.png" alt="Electrium Mobility Logo"
className="mx-auto mb-4 logo-opacity w-1/3 "/>
</a>
<p className="text-gray-400">Copyright © {new Date().getFullYear()} Electrium Mobility. All Rights
Reserved.</p>
</div>
</div>
</footer>
);
Expand Down
54 changes: 30 additions & 24 deletions components/shop/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,35 @@ import Image from 'next/image';

export default function Navbar() {
return (
<nav className="flex justify-between items-center p-4 bg-white">
<div className="flex items-center">
<Image src="/img/favicon.png" alt="Electrium Mobility" width={40} height={40} />
<span className="ml-2 text-xl font-semibold">electrium mobility</span>
</div>
<div className="space-x-4">
<Link href="https://electriummobility.com/about" className="text-gray-600 hover:text-gray-900">About</Link>
<Link href="https://electriummobility.com/team" className="text-gray-600 hover:text-gray-900">Team</Link>
<Link href="https://electriummobility.com/docs/W2024-projects/project1_2023" className="text-gray-600 hover:text-gray-900">Projects</Link>
<Link href="https://electriummobility.com/sponsors" className="text-gray-600 hover:text-gray-900">Sponsors</Link>
<Link href="" className="text-gray-600 hover:text-gray-900">Shop</Link>
<Link href="https://electriummobility.com/contact" className="text-gray-600 hover:text-gray-900">Contact</Link>
</div>
<div className="flex items-center space-x-4">
<button className="bg-blue-500 text-white px-4 py-2 rounded">Join Our Team</button>
<button className="text-blue-500 border border-blue-500 px-4 py-2 rounded">Donate</button>
<Link href="/cart" className="text-gray-600 hover:text-gray-900">
<i className="fas fa-shopping-cart"></i>
</Link>
<button className="text-gray-600 hover:text-gray-900">
<i className="fas fa-sun"></i>
</button>
</div>
</nav>
<header className="bg-white fixed top-0 w-full shadow-md z-50">
<nav className="flex justify-between items-center p-4 bg-white">
<div className="flex items-center">
<Image src="/img/logo-light-mode.png" alt="Electrium Mobility" width={165} height={50}/>
</div>
<div className="space-x-4">
<Link href="https://electriummobility.com/about"
className="text-gray-600 hover:text-gray-900">About</Link>
<Link href="https://electriummobility.com/team"
className="text-gray-600 hover:text-gray-900">Team</Link>
<Link href="https://electriummobility.com/docs/W2024-projects/project1_2023"
className="text-gray-600 hover:text-gray-900">Projects</Link>
<Link href="https://electriummobility.com/sponsors"
className="text-gray-600 hover:text-gray-900">Sponsors</Link>
<Link href="" className="text-gray-600 hover:text-gray-900">Shop</Link>
<Link href="https://electriummobility.com/contact"
className="text-gray-600 hover:text-gray-900">Contact</Link>
</div>
<div className="flex items-center space-x-4">
<button className="bg-blue-500 text-white px-4 py-2 rounded">Join Our Team</button>
<button className="text-blue-500 border border-blue-500 px-4 py-2 rounded">Donate</button>
<Link href="/cart" className="text-gray-600 hover:text-gray-900">
<i className="fas fa-shopping-cart"></i>
</Link>
<button className="text-gray-600 hover:text-gray-900">
<i className="fas fa-sun"></i>
</button>
</div>
</nav>
</header>
);
}
Loading

0 comments on commit 6a9e57e

Please sign in to comment.