Skip to content

Update the navbar, carousel images, footer & fonts #15

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

Merged
merged 1 commit into from
Apr 30, 2025
Merged

Update the navbar, carousel images, footer & fonts #15

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
Binary file added dist/assets/Color Palette.pdf
View file
Open in desktop
Binary file not shown.
Binary file added dist/assets/Primary Logo.pdf
View file
Open in desktop
Binary file not shown.
Binary file added dist/assets/connection.png
View file
Open in desktop
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 dist/assets/favicon.png
View file
Open in desktop
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 dist/assets/index-BD7dblqY.css
View file
Open in desktop

Large diffs are not rendered by default.

207 changes: 207 additions & 0 deletions dist/assets/index-C8A4iefV.js
View file
Open in desktop

Large diffs are not rendered by default.

133 changes: 0 additions & 133 deletions dist/assets/index-DIslrmKe.js
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion dist/assets/index-Wqfqm6TP.css
View file
Open in desktop

This file was deleted.

Binary file added dist/images/logo.png
View file
Open in desktop
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 dist/images/tek-talent-meetup-1.jpeg
View file
Open in desktop
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 dist/images/tek-talent-meetup-2.jpeg
View file
Open in desktop
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 dist/images/tek-talent-meetup-3.jpeg
View file
Open in desktop
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 dist/images/tek-talent-soroti.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
}
}(window.location))
</script>
<script type="module" crossorigin src="/assets/index-DIslrmKe.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Wqfqm6TP.css">
<script type="module" crossorigin src="/assets/index-C8A4iefV.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BD7dblqY.css">
</head>

<body>
Expand Down
Binary file added public/images/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
122 changes: 75 additions & 47 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,108 @@
import { Link } from "react-router-dom";
import { ArrowUp, Twitter, Linkedin, Github } from "lucide-react";
import { useState, useEffect } from "react";

const Footer = () => {
const [isVisible, setIsVisible] = useState(false);

const toggleVisibility = () => {
if (window.pageYOffset > 300) {
setIsVisible(true);
} else {
setIsVisible(false);
}
};

const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};

useEffect(() => {
window.addEventListener("scroll", toggleVisibility);
return () => {
window.removeEventListener("scroll", toggleVisibility);
};
}, []);

return (
<footer className="dark:bg-tekBlack text-white pt-16 pb-8">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
<div className="col-span-1">
<footer className="bg-gray-900 text-white">
<div className="container mx-auto px-4 py-16">
{/* Main Footer Content */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
{/* Brand Section */}
<div className="space-y-6">
<img
src="public/uploads/tektalentlogo.png"
src="/images/logo.png"
alt="Tek Talent Africa"
className="h-14 mb-6"
className="h-20"
/>
<p className="dark:text-gray-300 text-gray-700 mb-4">
<p className="text-gray-400 leading-relaxed">
Empowering innovation through collaboration, creativity, and community engagement.
</p>
</div>

<div className="col-span-1">
<h4 className="text-lg font-semibold mb-4">Community Links</h4>
<div className="flex flex-col gap-2">
<Link to="/events" className="dark:text-gray-300 text-gray-700 hover:text-tekOrange transition-colors">Events</Link>
<Link to="/projects" className="dark:text-gray-300 text-gray-700 hover:text-tekOrange transition-colors">Projects</Link>
<Link to="/blog" className="dark:text-gray-300 text-gray-700 hover:text-tekOrange transition-colors">Blog Posts</Link>
{/* Community Links */}
<div className="space-y-6">
<h4 className="text-lg font-semibold text-white">Community Links</h4>
<div className="flex flex-col space-y-3">
<Link to="/events" className="text-gray-400 hover:text-tekOrange transition-colors">Events</Link>
<Link to="/projects" className="text-gray-400 hover:text-tekOrange transition-colors">Projects</Link>
<Link to="/blog" className="text-gray-400 hover:text-tekOrange transition-colors">Blog Posts</Link>
</div>
</div>

<div className="col-span-1">
<h4 className="text-lg font-semibold mb-4">Explore</h4>
<div className="flex flex-col gap-2">
<Link to="#join-us" className="dark:text-gray-300 text-gray-700 hover:text-tekOrange transition-colors">Join Us</Link>
{/* Explore Section */}
<div className="space-y-6">
<h4 className="text-lg font-semibold text-white">Explore</h4>
<div className="flex flex-col space-y-3">
<Link to="#join-us" className="text-gray-400 hover:text-tekOrange transition-colors">Join Us</Link>
</div>
</div>

<div className="col-span-1">
<h4 className="text-lg font-semibold mb-4">Company</h4>
<div className="flex flex-col gap-2">
<Link to="/about" className="dark:text-gray-300 text-gray-700 hover:text-tekOrange transition-colors">About us</Link>
<Link to="/contact" className="dark:text-gray-300 text-gray-700 hover:text-tekOrange transition-colors">Contact us</Link>
{/* Company Section */}
<div className="space-y-6">
<h4 className="text-lg font-semibold text-white">Company</h4>
<div className="flex flex-col space-y-3">
<Link to="/about" className="text-gray-400 hover:text-tekOrange transition-colors">About us</Link>
<Link to="/contact" className="text-gray-400 hover:text-tekOrange transition-colors">Contact us</Link>
</div>
</div>
</div>

<div className="border-t border-gray-800 pt-8 mt-8 flex flex-col md:flex-row justify-between items-center">
<p className="dark:text-gray-300 text-gray-700 text-sm mb-4 md:mb-0">© 2025 Tek Talent Africa. All rights reserved.</p>

<div className="flex space-x-6">
<Link to="#" className="text-gray-500 hover:text-tekOrange transition-colors">
<Twitter size={18} />
<span className="sr-only">Twitter</span>
</Link>
<Link to="#" className="text-gray-500 hover:text-tekOrange transition-colors">
<Linkedin size={18} />
<span className="sr-only">LinkedIn</span>
</Link>
{/* Footer Bottom */}
<div className="border-t border-gray-800 pt-8">
<div className="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
{/* Copyright */}
<p className="text-gray-400 text-sm">
© 2025 Tek Talent Africa. All rights reserved.
</p>

<Link to="#" className="text-gray-500 hover:text-tekOrange transition-colors">
<Github size={18} />

<span className="sr-only">GitHub</span>
</Link>
{/* Social Links */}
<div className="flex items-center space-x-6">
<Link to="#" className="text-gray-400 hover:text-tekOrange transition-colors" aria-label="Twitter">
<Twitter size={20} />
</Link>
<Link to="#" className="text-gray-400 hover:text-tekOrange transition-colors" aria-label="LinkedIn">
<Linkedin size={20} />
</Link>
<Link to="#" className="text-gray-400 hover:text-tekOrange transition-colors" aria-label="GitHub">
<Github size={20} />
</Link>
</div>
</div>

<button
onClick={scrollToTop}
className="fixed bottom-8 right-8 bg-tekOrange p-3 rounded-full shadow-lg hover:bg-orange-600 transition-colors z-40"
aria-label="Back to Top"
>
<ArrowUp size={20} className="text-white" />
</button>
</div>
</div>

{/* Back to Top Button */}
{isVisible && (
<button
onClick={scrollToTop}
className="fixed bottom-8 right-8 bg-tekOrange p-3 rounded-full shadow-lg hover:bg-orange-600 transition-colors z-40"
aria-label="Back to Top"
>
<ArrowUp size={20} className="text-white" />
</button>
)}
</footer>
);
};
Expand Down
12 changes: 5 additions & 7 deletions src/components/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

import { useState, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import { Menu, X } from "lucide-react";
Expand Down Expand Up @@ -31,7 +30,7 @@ const NavBar = () => {
};

// Tobias or anyone can add this WhatsApp community link here
const whatsappLink = "";
const whatsappLink = "https://chat.whatsapp.com/INVITE_CODE";

return (
<nav
Expand All @@ -42,11 +41,10 @@ const NavBar = () => {
<div className="container mx-auto px-4 flex justify-between items-center">
<Link to="/" className="flex items-center gap-2">
<img
src="public/uploads/tektalentlogo.png"
src="/images/logo.png"
alt="Tek Talent Africa"
className="h-10"
className="h-20"
/>
<span className="text-xl font-bold text-tekOrange dark:text-tekOrange hidden md:inline">TekTalent Africa Community</span>
</Link>

<div className="hidden md:flex items-center gap-8">
Expand All @@ -60,7 +58,7 @@ const NavBar = () => {
to="/events"
className={`${isActive('/events') ? 'text-tekOrange font-semibold' : 'hover:text-tekOrange'} transition-colors dark:text-gray-200`}
>
Events & Activities
Events
</Link>
<Link
to="/projects"
Expand Down Expand Up @@ -115,7 +113,7 @@ const NavBar = () => {
className={`py-3 px-4 ${isActive('/events') ? 'text-tekOrange font-semibold' : ''} dark:text-gray-200`}
onClick={() => setIsMenuOpen(false)}
>
Events & Activities
Events
</Link>
<Link
to="/projects"
Expand Down
3 changes: 2 additions & 1 deletion src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
Expand Down Expand Up @@ -91,7 +92,7 @@
}

body {
@apply bg-background text-foreground;
@apply bg-background text-foreground font-poppins;
font-feature-settings: "rlig" 1, "calt" 1;
}

Expand Down
20 changes: 8 additions & 12 deletions src/pages/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,21 +37,17 @@ const Home = () => {
}, []);

const carouselImages = [
"public/uploads/tektalentlogo.png",
"public/uploads/tektalentlogo.png",
"public/uploads/tektalentlogo.png",
"public/uploads/tektalentlogo.png",
"public/uploads/tektalentlogo.png",
"public/uploads/tektalentlogo.png"
"/images/tek-talent-meetup-1.jpeg",
"/images/tek-talent-meetup-2.jpeg",
"/images/tek-talent-meetup-3.jpeg",
"/images/tek-talent-soroti.jpeg"
];

const carouselImages2 = [
"public/uploads/tektalentlogo.png",
"public/uploads/tektalentlogo.png",
"public/uploads/tektalentlogo.png",
"public/uploads/tektalentlogo.png",
"public/uploads/tektalentlogo.png",
"public/uploads/tektalentlogo.png"
"/images/tek-talent-soroti.jpeg",
"/images/tek-talent-meetup-3.jpeg",
"/images/tek-talent-meetup-2.jpeg",
"/images/tek-talent-meetup-1.jpeg"
];

return (
Expand Down
4 changes: 3 additions & 1 deletion tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

import type { Config } from "tailwindcss";

export default {
Expand All @@ -19,6 +18,9 @@ export default {
}
},
extend: {
fontFamily: {
poppins: ['Poppins', 'sans-serif'],
},
colors: {
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
Expand Down