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

Redesigned footer section and added icons for WhatsApp and Telegram (Solves Issue #138) #139

Closed
wants to merge 1 commit into from
Closed

Redesigned footer section and added icons for WhatsApp and Telegram (Solves Issue #138) #139

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
208 changes: 132 additions & 76 deletions src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,94 +1,138 @@
import React from 'react';
import { Instagram, Linkedin, Github, Twitter } from 'lucide-react';
import React from "react";
import {
Instagram,
Linkedin,
Github,
Twitter,
MessageCircle,
Send,
} from "lucide-react";

const Footer = () => {
return (
<footer className="bg-[#111827] text-white py-12 px-4">
<div className="max-w-6xl mx-auto flex flex-col items-center text-center md:text-left md:items-start md:flex-row md:justify-between gap-8">

{/* Newsletter Subscription */}
<div className="text-center md:text-left mb-8">
<footer className="bg-[#111827] text-white py-12 px-6">
<div className="max-w-6xl mx-auto grid gap-12 md:grid-cols-2 lg:grid-cols-3 mb-3">
<div className="text-center md:text-left">
<h2 className="text-3xl font-bold mb-4 transition-all duration-300 hover:text-gray-300">
Unlock Exclusive Updates!
</h2>
<div className="flex justify-center md:justify-start items-center bg-[#1c1c3d] rounded-full border border-gray-500 px-4 py-3">
<div className="flex justify-center md:justify-start items-center bg-[#1c1c3d] rounded-full border border-gray-500 px-3 py-3">
<input
type="email"
placeholder="Your email address"
className="bg-transparent text-lg text-white placeholder-gray-400 w-full focus:outline-none pr-6"
/>
<button className="bg-white text-black rounded-full p-2 transition-transform duration-300 transform hover:scale-125 hover:bg-[#24246a] hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.5 5.25L18 8M4 6h16a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2z" />
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M3 8l7.5 5.25L18 8M4 6h16a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2z"
/>
</svg>
</button>
</div>
<div className="mt-8">
<p className="text-base text-gray-400 mb-4">FOLLOW US:</p>
<div className="flex justify-center md:justify-start space-x-4">
{[
{ icon: Instagram, name: 'Instagram', link: 'https://www.instagram.com/devcode.community/' },
{ icon: Linkedin, name: 'LinkedIn', link: 'https://www.linkedin.com/company/dev-code-community/' },
{ icon: Github, name: 'GitHub', link: 'https://github.com/Dev-Code-Community' },
{ icon: Twitter, name: 'Twitter', link: 'https://x.com/_DEVCODE_' },
].map(({ icon: Icon, name, link }) => (
<a
key={name}
href={link}
target="_blank"
rel="noopener noreferrer"
className="text-white hover:text-blue-400 transition-colors duration-300"
aria-label={name}
>
<div className="w-10 h-10 rounded-full border border-white flex items-center justify-center transition-transform duration-300 transform hover:scale-125 hover:bg-white hover:text-[#0c0c21]">
<Icon className="h-5 w-5" />
</div>
</a>
))}
</div>
</div>
</div>

{/* Navigation Links */}
<div className="text-center md:text-left mb-8">
<h3 className="text-3xl font-semibold mb-4">Share</h3>
<ul className="space-y-2">
<div className="text-center md:text-left">
<h3 className="text-3xl font-semibold mb-4">Follow Us</h3>
<p className="text-gray-400 mb-5">
Stay connected with us on social media:
</p>
<div className="flex justify-center md:justify-start space-x-3">
{[
{ name: 'X (Twitter)', link: 'https://x.com/_DEVCODE_' },
{ name: 'WhatsApp', link: 'https://chat.whatsapp.com/F2njAIyHZzyEoE8BP75crT' },
{ name: 'LinkedIn', link: 'https://www.linkedin.com/company/dev-code-community/' },
{ name: 'Telegram', link: 'https://t.me/DevCodeCommunity' }
].map(({ name, link }) => (
<li key={name}>
<a
href={link}
target="_blank"
rel="noopener noreferrer"
className="relative inline-block text-white transition-colors duration-300 before:absolute before:left-[50%] before:-bottom-[1px] before:w-full before:h-[2px] before:bg-transparent before:-translate-x-[50%] before:transition-all before:duration-300 hover:before:bg-white hover:before:scale-x-[1] before:scale-x-[0]"
>
{name}
</a>
</li>
{
icon: Instagram,
name: "Instagram",
link: "https://www.instagram.com/devcode.community/",
},
{
icon: Linkedin,
name: "LinkedIn",
link: "https://www.linkedin.com/company/dev-code-community/",
},
{
icon: Github,
name: "GitHub",
link: "https://github.com/Dev-Code-Community",
},
{
icon: Twitter,
name: "Twitter",
link: "https://x.com/_DEVCODE_",
},
{
icon: MessageCircle,
name: "WhatsApp",
link: "https://chat.whatsapp.com/F2njAIyHZzyEoE8BP75crT",
},
{
icon: Send,
name: "Telegram",
link: "https://t.me/DevCodeCommunity",
},
].map(({ icon: Icon, name, link }) => (
<a
key={name}
href={link}
target="_blank"
rel="noopener noreferrer"
className="text-white hover:text-blue-400 transition-colors duration-300"
aria-label={name}
>
<div className="w-10 h-10 rounded-full border border-white flex items-center justify-center transition-transform duration-300 transform hover:scale-125 hover:bg-white hover:text-[#0c0c21]">
<Icon className="h-5 w-5" />
</div>
</a>
))}
</ul>
</div>
</div>

{/* Contact Information */}
<div className="text-center md:text-left mb-8">
<h3 className="text-3xl font-semibold mb-4">Feedback</h3>
<p className="text-sm text-gray-400 mb-2">DROP US A LINE</p>
<a href="mailto:[email protected]" className="relative inline-block text-blue-400 transition-colors duration-300 before:absolute before:left-[50%] before:-bottom-[1px] before:w-full before:h-[2px] before:bg-transparent before:-translate-x-[50%] before:transition-all before:duration-300 hover:before:bg-blue-400 hover:before:scale-x-[1] before:scale-x-[0]">[email protected]</a><br/>
<a href="mailto:[email protected]" className="relative inline-block text-blue-400 transition-colors duration-300 before:absolute before:left-[50%] before:-bottom-[1px] before:w-full before:h-[2px] before:bg-transparent before:-translate-x-[50%] before:transition-all before:duration-300 hover:before:bg-blue-400 hover:before:scale-x-[1] before:scale-x-[0]">[email protected]</a>
<div className="text-center md:text-left">
<h3 className="text-3xl font-semibold mb-4">Contact Us</h3>
<p className="text-sm text-gray-400 mb-4">Drop us a line at:</p>
<a
href="mailto:[email protected]"
className="block text-blue-400 transition-colors duration-300 hover:text-white"
>
[email protected]
</a>
<a
href="mailto:[email protected]"
className="block text-blue-400 transition-colors duration-300 hover:text-white"
>
[email protected]
</a>
</div>
</div>

{/* Image Section for the Logos */}
<div className="max-w-6xl mx-auto flex justify-center md:justify-between items-center space-x-6 mt-8">
<div className="max-w-6xl mx-auto flex justify-center md:justify-between items-center space-x-6 mt-12">
{[
{ src: "/images/logos/logo-no-background.png", alt: "Dev Code Logo", link: "https://devcode-technexus.vercel.app" },
{ src: "/images/logos/DevCode-without-BG.png", alt: "TechNexus Logo", link: "https://dev-code-community.github.io/bio/" }
{
src: "/images/logos/logo-no-background.png",
alt: "Dev Code Logo",
link: "https://devcode-technexus.vercel.app",
},
{
src: "/images/logos/DevCode-without-BG.png",
alt: "TechNexus Logo",
link: "https://dev-code-community.github.io/bio/",
},
].map(({ src, alt, link }) => (
<a key={alt} href={link} target="_blank" rel="noopener noreferrer" className="transition-transform duration-300 transform hover:scale-110">
<a
key={alt}
href={link}
target="_blank"
rel="noopener noreferrer"
className="transition-transform duration-300 transform hover:scale-110"
>
<img
src={src}
alt={alt}
Expand All @@ -98,22 +142,34 @@ const Footer = () => {
))}
</div>

{/* Horizontal Divider */}
<hr className="border-t border-gray-600 mt-12 mb-4" />
<div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center text-md text-gray-400 text-center md:text-left">
<p className="mb-4 md:mb-0">
© 2024 Dev Code & TechNexus | Made with ♥️
</p>

{/* Footer Bottom Section */}
<div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center text-lg text-gray-400 text-center md:text-left">
{/* Copyright */}
<p className="mb-4 md:mb-0">© 2024 Dev Code & TechNexus | Made with ♥️</p>

{/* Footer Links */}
<div className="flex space-x-6 justify-center md:justify-start text-base">
<a href="#" className="hover:text-white transition-colors duration=300">Terms and Conditions</a>
<a href="#" className="hover:text-white transition-colors duration=300">Privacy Policy</a>
<a href="#" className="hover:text-white transition-colors duration=300">Guidelines</a>
<a
href="#"
className="hover:text-white transition-colors duration-300"
>
Terms and Conditions
</a>
<a
href="#"
className="hover:text-white transition-colors duration-300"
>
Privacy Policy
</a>
<a
href="#"
className="hover:text-white transition-colors duration-300"
>
Guidelines
</a>
</div>
</div>
</footer>
</footer>
);
};

Expand Down