Skip to content

Commit

Permalink
Merge pull request #234 from dev129/enhacement-footer
Browse files Browse the repository at this point in the history 
Enhance Footer Design
  • Loading branch information
@rishicds
rishicds authored Oct 27, 2024
2 parents e86ad58 + bc7ee14 commit fd71088
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 242 deletions.
6 changes: 3 additions & 3 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
node_modules
.env
.next
node_modules/
.env
.next/
344 changes: 105 additions & 239 deletions src/components/Global/Footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,272 +1,138 @@
"use client"
import React, { useState } from "react";
import React from "react";
import { FiMail } from "react-icons/fi";
import { FaWhatsapp, FaInstagram as Instagram } from "react-icons/fa";
import { FaLinkedin as Linkedin } from "react-icons/fa";
import { FaGithub as Github } from "react-icons/fa";
import { FaXTwitter } from "react-icons/fa6";
import Link from "next/link";
import { toast } from "react-toastify";
import { HeartIcon } from "lucide-react";

const Footer = () => {
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');

const handleSubmit = async (e) => {
e.preventDefault();
const resources = [
{ text: "Location", href: "https://www.google.com/maps/place/RCC+Institute+of+Information+Technology/@22.5592665,88.3938297,17z/data=!4m14!1m7!3m6!1s0x3a027686b848fb8d:0xed09795e4836e886!2sRCC+Institute+of+Information+Technology!8m2!3d22.5592616!4d88.3964046!16s%2Fm%2F02vtlkw!3m5!1s0x3a027686b848fb8d:0xed09795e4836e886!8m2!3d22.5592616!4d88.3964046!16s%2Fm%2F02vtlkw?entry=ttu&g_ep=EgoyMDI0MTAyMy4wIKXMDSoASAFQAw%3D%3D" },
{ text: "About GDG", href: "https://tailwindcss.com/" },
{ text: "How to Apply", href: "https://tailwindcss.com/" },
{ text: "Who can apply?", href: "https://tailwindcss.com/" },
];

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
toast.error("Please enter a valid email address.");
return;
}
const followUs = [
{ text: "Github", href: "https://github.com/GDSC-RCCIIT/gdg-website" },
{ text: "Instagram", href: "https://instagram.com/" },
{ text: "Twitter", href: "https://x.com/gdsc_rcciit" },
{ text: "Whatsapp", href: "https://web.whatsapp.com/" },
{ text: "LinkedIn", href: "https://www.linkedin.com/company/gdgc-rcciit/" },
];

try {
const response = await fetch('/api/subscribe', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email }),
});
const legal = [
{ text: "Privacy Policy", href: "/PrivacyPolicy" },
{ text: "Terms & Conditions", href: "/TermsAndConditions" },
{ text: "Rules & Regulations", href: "/RulesAndRegulations" },
];

if (response.ok) {
setEmail("");
toast.success("Thank you for subscribing!");
} else {
const data = await response.json();
toast.error(data.message || "Subscription failed. Please try again.");
}
} catch (error) {
console.error("Subscription error:", error);
toast.error("An error occurred. Please try again later.");
}
};
const socialLinks = [
{ icon: <Instagram size={20} />, color: "bg-gradient-to-br from-purple-600 to-pink-500", href: "https://instagram.com/" },
{ icon: <FaXTwitter size={20} />, color: "bg-black", href: "https://x.com/gdsc_rcciit" },
{ icon: <Linkedin size={20} />, color: "bg-blue-600", href: "https://www.linkedin.com/company/gdgc-rcciit/" },
{ icon: <Github size={20} />, color: "bg-gray-800", href: "https://github.com/GDSC-RCCIIT/gdg-website" },
{ icon: <FaWhatsapp size={20} />, color: "bg-green-500", href: "https://web.whatsapp.com/" },
{ icon: <FiMail size={20} />, color: "bg-red-500", href: "mailto:[email protected]" },
];

const Footer = () => {
return (
<footer className="bg-gradient-to-b from-blue-900 via-purple-900 to-gray-900 py-12 text-white">
<div className="mx-auto w-full max-w-7xl px-6">
{/* Main Footer Content */}
<div className="grid grid-cols-1 lg:grid-cols-5 gap-12">
{/* Brand Section */}
<div className="lg:col-span-1">
<Link href="/" className="flex items-center gap-3 mb-6">
<img src="/Logo.svg" className="h-12 w-auto" alt="Logo" />
<span className="text-3xl font-extrabold text-white tracking-wider">
GDG-RCCIIT
</span>
<footer className="relative bg-gradient-to-br from-blue-50 via-white to-blue-50">
{/* Google-inspired geometric shapes */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute -right-12 -top-12 w-48 h-48 bg-blue-100 rounded-full opacity-20"></div>
<div className="absolute left-1/4 top-1/3 w-24 h-24 bg-green-100 rotate-45 opacity-20"></div>
<div className="absolute right-1/3 bottom-1/4 w-32 h-32 bg-yellow-100 rounded-lg opacity-20"></div>
<div className="absolute left-1/2 top-1/2 w-40 h-40 bg-red-100 rounded-full opacity-20"></div>
</div>

<div className="relative mx-auto w-full max-w-7xl px-6 py-16">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
{/* Brand Section with enhanced styling */}
<div className="lg:col-span-4 space-y-6">
<Link href="/" className="inline-block">
<div className="flex items-center gap-3 mb-6">
<div className="relative">
<img src="/Logo.svg" className="h-14 w-auto" alt="Logo" />
<div className="absolute -bottom-2 -right-2 w-6 h-6 bg-blue-500 rounded-full opacity-20"></div>
</div>
<div className="flex flex-col">
<span className="text-3xl font-bold bg-gradient-to-r from-blue-600 via-blue-500 to-green-500 bg-clip-text text-transparent">
GDSC
</span>
<span className="text-lg font-medium text-gray-600">RCCIIT</span>
</div>
</div>
</Link>
<p className="text-gray-600 max-w-md">
Join our community of student developers, designers, and innovators. Build solutions for local businesses and your community.
</p>
</div>

{/* Links Sections */}
<div className="lg:col-span-3 grid grid-cols-3 gap-8">
{/* Resources */}
<div className="flex flex-col items-center">
<h2 className="text-lg font-semibold uppercase tracking-wide mb-6">
Resources
</h2>
<ul className="space-y-4 text-center">
<li>
<a
href="/"
className="text-gray-300 hover:text-white transition-all duration-200"
>
Location
</a>
</li>
<li>
<a
href="/About"
className="text-gray-300 hover:text-white transition-all duration-200"
>
About GDG
</a>
</li>
<li>
<Link
href="/how-apply"
className="text-gray-300 hover:text-white transition-all duration-200"
>
How to Apply
</Link>
</li>
<li>
<Link
href="/who-apply"
className="text-gray-300 hover:text-white transition-all duration-200"
>
Who can apply?
</Link>
</li>
</ul>
</div>

{/* Follow us */}
<div className="flex flex-col items-center">
<h2 className="text-lg font-semibold uppercase tracking-wide mb-6">
Follow Us
</h2>
<ul className="space-y-4 text-center">
<li>
<Link
href="https://github.com/GDSC-RCCIIT/gdg-website"
className="text-gray-300 hover:text-white transition-all duration-200"
>
Github
</Link>
</li>
<li>
<Link
href="https://instagram.com/"
className="text-gray-300 hover:text-white transition-all duration-200"
>
Instagram
</Link>
</li>
<li>
<Link
href="https://x.com/"
className="text-gray-300 hover:text-white transition-all duration-200"
>
X
</Link>
</li>
<li>
<Link
href="https://www.linkedin.com/in/rishi-paul04/"
className="text-gray-300 hover:text-white transition-all duration-200"
>
Whatsapp
</Link>
</li>
</ul>
</div>

{/* Legal */}
<div className="flex flex-col items-center">
<h2 className="text-lg font-semibold uppercase tracking-wide mb-6">
Legal
</h2>
<ul className="space-y-4 text-center">
<li>
<a
href="/PrivacyPolicy"
className="text-gray-300 hover:text-white transition-all duration-200"
>
Privacy Policy
</a>
</li>
<li>
<a
href="/TermsAndConditions"
className="text-gray-300 hover:text-white transition-all duration-200"
>
Terms & Conditions
</a>
</li>
<li>
<a
href="/RulesAndRegulations"
className="text-gray-300 hover:text-white transition-all duration-200"
>
Rules & Regulations
</a>
</li>
</ul>
</div>
{/* Links Sections with enhanced styling */}
<div className="lg:col-span-5 grid grid-cols-3 gap-8">
<FooterSection title="Resources" links={resources} />
<FooterSection title="Follow Us" links={followUs} />
<FooterSection title="Legal" links={legal} />
</div>

{/* Newsletter and Social Section */}
<div className="lg:col-span-1">
<div className="flex flex-col items-center lg:items-start">
<h2 className="text-lg font-semibold uppercase tracking-wide mb-6">
Stay Updated
</h2>

{/* Newsletter Form */}
<div className="flex justify-center w-full">
<div className="max-w-sm min-w-[200px] w-full">
<form onSubmit={handleSubmit} noValidate>
<div className="relative">
<input
type="email"
className="w-full pl-3 pr-10 py-2 bg-transparent placeholder:text-slate-400 text-white text-sm border border-slate-200 rounded-md transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow"
placeholder="[email protected]"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<button
type="submit"
className="absolute inset-y-0 right-0 px-2 flex items-center space-x-1 bg-black rounded-md my-[1px] mx-[1px]"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className="w-5 h-5 text-white"
>
<rect width="20" height="16" x="2" y="4" rx="2" />
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
</svg>
</button>
</div>
</form>
</div>
</div>
{/* Social Links */}
<h2 className="text-sm font-bold text-white dark:text-white uppercase tracking-wider mt-6 mb-2">
Socials
</h2>
<div className="flex gap-4">
<SocialLink
href="https://gmail.com/"
icon={<FiMail size={20} className="hover:text-blue-500" />}
/>
<SocialLink
href="https://instagram.com/"
icon={<Instagram size={20} className="hover:text-pink-500" />}
/>
<SocialLink
href="https://twitter.com/"
icon={<FaXTwitter size={20} className="hover:text-blue-400" />}
/>
<SocialLink
href="https://www.linkedin.com/in/rishi-paul04/"
icon={<Linkedin size={20} className="hover:text-blue-600" />}
/>
<SocialLink
href="https://github.com/GDSC-RCCIIT/gdg-website"
icon={<Github size={20} className="hover:text-gray-500" />}
/>
<SocialLink
href="https://www.linkedin.com/in/rishi-paul04/"
icon={<FaWhatsapp size={20} className="hover:text-green-500" />}
/>
{/* Social Section with embedded design */}
<div className="lg:col-span-3">
<div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
<h3 className="text-lg font-semibold mb-6 text-gray-800">Connect With Us</h3>
<div className="grid grid-cols-3 gap-4">
{socialLinks.map((link, index) => (
<SocialButton key={index} icon={link.icon} color={link.color} href={link.href} />
))}
</div>
</div>
</div>
</div>

{/* Footer Bottom */}
<div className="mt-12 pt-8 border-t border-gray-700">
<p className="text-center text-sm text-gray-300">
© 2024 GDG-RCCIIT. All Rights Reserved.
</p>
{/* Footer Bottom with enhanced design */}
<div className="mt-16 pt-8 border-t border-gray-200">
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-sm text-gray-600">
© 2024 Google Developer Student Club - RCCIIT. All Rights Reserved.
</p>
<div className="flex items-center gap-2">
<span className="text-sm text-gray-500">Made with</span>
<div className="flex gap-1">
<HeartIcon color='red' />
</div>
</div>
</div>
</div>
</div>
</footer>
);
};

const SocialLink = ({ href, icon }) => (
const FooterSection = ({ title, links }) => (
<div className="flex flex-col items-start">
<h2 className="text-lg font-semibold text-gray-800 mb-4">{title}</h2>
<ul className="space-y-3">
{links.map((link, index) => (
<li key={index}>
<Link
href={link.href}
className="text-gray-600 hover:text-blue-500 transition-colors duration-300 flex items-center gap-2 group"
>
<span className="w-1 h-1 rounded-full bg-gray-300 group-hover:bg-blue-500 transition-colors duration-300"></span>
{link.text}
</Link>
</li>
))}
</ul>
</div>
);

const SocialButton = ({ href, icon, color }) => (
<Link
href={href}
className="text-gray-500 transition-all duration-300 transform hover:scale-110"
className={`${color} p-3 rounded-lg text-white transition-transform duration-300 hover:-translate-y-1 hover:shadow-lg flex items-center justify-center`}
>
{icon}
</Link>
Expand Down

0 comments on commit fd71088

Please sign in to comment.