Skip to content

Updated footer #178

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

Open
PrithvijitBose wants to merge 2 commits into
base: main
Choose a base branch
from
+160 −58
Open

Updated footer #178

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e79f8f8
Updated footer
Jul 18, 2026
680c33d
Updated Footer
Jul 18, 2026
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
218 changes: 160 additions & 58 deletions landing-page/src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,82 +1,184 @@
import { Github, Twitter } from "lucide-react";
'use client'


import { motion } from 'framer-motion'
import { Github, Mail, Linkedin, Youtube } from 'lucide-react'
import Image from 'next/image'
import logo from '../../../public/socialshare.png'

// Lucide doesn't ship brand logos for Discord, so a small inline SVG covers it.
function DiscordIcon({ className }: { className?: string }) {
return (
<svg
viewBox="0 0 24 24"
fill="currentColor"
className={className}
aria-hidden="true"
>
<path d="M20.317 4.369A19.791 19.791 0 0 0 15.885 3c-.211.375-.444.879-.608 1.279a18.27 18.27 0 0 0-5.487 0A12.64 12.64 0 0 0 9.182 3a19.736 19.736 0 0 0-4.435 1.369C1.578 9.045.769 13.579 1.174 18.053a19.9 19.9 0 0 0 5.993 3.03c.484-.66.914-1.36 1.285-2.096a12.3 12.3 0 0 1-2.023-.975c.17-.124.336-.253.497-.386 3.902 1.804 8.13 1.804 11.986 0 .163.133.329.262.497.386-.646.389-1.325.719-2.026.977.372.735.8 1.435 1.284 2.095a19.86 19.86 0 0 0 6.002-3.03c.475-5.177-.8-9.669-3.352-13.685ZM8.02 15.331c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.419 0 1.334-.955 2.419-2.157 2.419Zm7.974 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.419 0 1.334-.947 2.419-2.157 2.419Z" />
</svg>
)
}

export function Footer() {
return (
<footer className="bg-neutral-950 text-white border-t border-neutral-900">
{/* Hero CTA */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
<div className="grid lg:grid-cols-2 gap-12 items-center">

<div>
<h2 className="text-5xl md:text-6xl lg:text-7xl font-serif tracking-tight mb-4 font-bold text-white leading-[1.1]">
Start <span className="text-[#FFCC00]">sharing.</span><br />
Start <span className="text-[#FFCC00]">sharing.</span>
<br />
Right <span className="text-[#00C853]">now.</span>
</h2>
<p className="text-neutral-500 max-w-sm text-sm font-medium leading-relaxed mt-6">
Two CDN tags, one function call. No account, no API key, no<br className="hidden sm:block" />
build step. Your users will be sharing in under 30<br className="hidden sm:block" />
Two CDN tags, one function call. No account, no API key, no
<br className="hidden sm:block" />
build step. Your users will be sharing in under 30
<br className="hidden sm:block" />
seconds.
</p>
Comment thread
PrithvijitBose marked this conversation as resolved.
</div>

<div className="space-y-4 max-w-md w-full lg:ml-auto">
<a href="https://github.com/aossie-org/SocialShareButton" target="_blank" rel="noopener noreferrer" className="flex items-center justify-between bg-transparent border border-neutral-800 hover:border-neutral-600 rounded-xl p-4 transition-colors group">
<div className="flex items-center gap-4">
<div className="w-8 h-8 rounded-lg bg-[#FFCC00] flex items-center justify-center flex-shrink-0">
<Github className="w-5 h-5 text-black" />
</div>
<span className="text-sm font-bold text-white group-hover:text-[#FFCC00] transition-colors">Star on GitHub</span>
</div>
<span className="text-neutral-600 group-hover:text-neutral-400">→</span>
</a>

<a href="#" className="flex items-center justify-between bg-transparent border border-neutral-800 hover:border-neutral-600 rounded-xl p-4 transition-colors group">
<div className="flex items-center gap-4">
<div className="w-8 h-8 rounded-lg bg-[#00C853] flex items-center justify-center flex-shrink-0">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4 text-black"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"></path></svg>
</div>
<span className="text-sm font-bold text-white group-hover:text-[#00C853] transition-colors">View Documentation</span>
</div>
<span className="text-neutral-600 group-hover:text-neutral-400">→</span>
</a>

<a href="#" className="flex items-center justify-between bg-transparent border border-neutral-800 hover:border-neutral-600 rounded-xl p-4 transition-colors group">
<div className="flex items-center gap-4">
<div className="w-8 h-8 rounded-lg bg-neutral-800 flex items-center justify-center flex-shrink-0">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4 text-white"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" x2="20" y1="19" y2="19"></line></svg>
</div>
<span className="text-sm font-bold text-white group-hover:text-neutral-300 transition-colors">Try Interactive Demo</span>
</div>
<span className="text-neutral-600 group-hover:text-neutral-400">→</span>
</a>
<a
href="https://github.com/aossie-org/SocialShareButton"
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-between bg-transparent border border-neutral-800 hover:border-neutral-600 rounded-xl p-4 transition-colors group"
>
<div className="flex items-center gap-4">
<div className="w-8 h-8 rounded-lg bg-[#FFCC00] flex items-center justify-center flex-shrink-0">
<Github className="w-5 h-5 text-black" />
</div>
<span className="text-sm font-bold text-white group-hover:text-[#FFCC00] transition-colors">
Star on GitHub
</span>
</div>
<span className="text-neutral-600 group-hover:text-neutral-400">
→
</span>
</a>

<a
href="./docs"
className="flex items-center justify-between bg-transparent border border-neutral-800 hover:border-neutral-600 rounded-xl p-4 transition-colors group"
Comment thread
PrithvijitBose marked this conversation as resolved.
>
<div className="flex items-center gap-4">
<div className="w-8 h-8 rounded-lg bg-[#00C853] flex items-center justify-center flex-shrink-0">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="w-4 h-4 text-black"
>
<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"></path>
</svg>
</div>
<span className="text-sm font-bold text-white group-hover:text-[#00C853] transition-colors">
View Documentation
</span>
</div>
<span className="text-neutral-600 group-hover:text-neutral-400">
→
</span>
</a>
</div>
</div>
</div>

<div className="border-t border-neutral-900 py-8">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4">
<div className="flex items-center gap-2">
<div className="w-6 h-6 rounded-full bg-gradient-to-br from-secondary to-primary flex items-center justify-center">
<span className="text-white font-bold text-[10px]">SB</span>

{/* AOSSIE brand / nav / connect */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="border-t border-neutral-900"
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div className="grid grid-cols-1 gap-8 md:grid-cols-4 lg:gap-12">
<div className="md:col-span-2">
<div className="flex items-center gap-2 mb-4">
{/* eslint-disable-next-line @next/next/no-img-element */}
<Image
src={logo}
alt="SocialShareButton logo"
className="w-auto h-24 rounded-lg"
/>
Comment thread
PrithvijitBose marked this conversation as resolved.

</div>
<h3 className="font-mono text-xl font-bold text-white mb-4">
Developed by AOSSIE
</h3>
<p className="text-sm text-neutral-400 font-mono max-w-md leading-relaxed">
AOSSIE is a not-for-profit organization dedicated to
project-based innovation-focused and research-intensive
education.
</p>
</div>

<div>
<div className="pt-28">
<h3 className="font-mono text-sm font-semibold text-white tracking-wider uppercase mb-4">
Connect
</h3>
<div className="flex flex-wrap gap-6">
<a
aria-label="Contact by Mail"
className="text-neutral-500 hover:text-[#FFCC00] transition"
href="mailto:[email protected]"
>
Comment thread
PrithvijitBose marked this conversation as resolved.
<Mail className="w-6 h-6" />
</a>
<a
aria-label="Join on Discord"
className="text-neutral-500 hover:text-[#FFCC00] transition"
href="https://discord.gg/hjUhu33uAn"
target="_blank"
rel="noopener noreferrer"
>
<DiscordIcon className="w-6 h-6" />
</a>
<a
aria-label="Follow on LinkedIn"
className="text-neutral-500 hover:text-[#FFCC00] transition"
href="https://www.linkedin.com/company/aossie/"
target="_blank"
rel="noopener noreferrer"
>
<Linkedin className="w-6 h-6" />
</a>
<a
aria-label="Subscribe on YouTube"
className="text-neutral-500 hover:text-[#FFCC00] transition"
href="https://www.youtube.com/@AOSSIE-Org"
target="_blank"
rel="noopener noreferrer"
>
<Youtube className="w-6 h-6" />
</a>
</div>
</div>
</div>
<span className="font-semibold text-sm tracking-tight text-white">
SocialShareButton
</span>
</div>

<div className="text-sm text-neutral-500">
Open Source under MIT License.
</div>

<div className="flex gap-4">
<a href="#" className="text-neutral-500 hover:text-white transition-colors">
<Github className="w-5 h-5" />
</a>
<a href="#" className="text-neutral-500 hover:text-white transition-colors">
<Twitter className="w-5 h-5" />
</a>
</div>
</motion.div>

{/* Bottom bar */}
<div className="border-t border-neutral-900 py-8">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-center">
<div className="text-sm text-neutral-500 text-center">
Open Source under MIT License &middot; &copy; 2016-
{new Date().getFullYear()} AOSSIE. All rights reserved.
</div>
</div>
</div>
</footer>
);
}
)
}
Loading