Skip to content

Improve footer visual hierarchy and space usage (#278) #290

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
mahek2016 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improve footer visual hierarchy and space usage (#278) #290

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
139 changes: 106 additions & 33 deletions landing/src/components/layout/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const Footer: React.FC = () => {

return (
<footer className="relative bg-gradient-to-br from-dark via-dark-lighter to-gray-900 py-12 overflow-hidden">

{/* Background gradient overlays */}
<div className="absolute inset-0 pointer-events-none">
<div className="absolute top-0 left-0 w-96 h-96 rounded-full bg-green-500/5 blur-2xl -translate-x-1/2 -translate-y-1/2"></div>
Expand All @@ -17,58 +18,130 @@ const Footer: React.FC = () => {
</div>

<div className="container mx-auto px-6 relative z-10">
<div className="flex flex-col md:flex-row justify-between items-start mb-8">
<div className="mb-6 md:mb-0">
<h3 className="text-2xl font-bold gradient-text mb-2">Devr.AI</h3>

{/* Main Footer Grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">

{/* Brand Section */}
<div>
<h3 className="text-2xl font-bold gradient-text mb-3">
Devr.AI
</h3>
<p className="text-gray-300 text-sm max-w-xs leading-relaxed">
Revolutionizing developer relations with AI-powered community management.
</p>
</div>
<div className="flex flex-row gap-12">
<div>
<h4 className="font-semibold mb-4 text-white bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">Links</h4>
<ul className="space-y-3">
<li><a href={isHomePage ? "#features" : "/#features"} className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Features</a></li>
<li><a href={isHomePage ? "#how-it-works" : "/#how-it-works"} className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">How It Works</a></li>
<li><a href={isHomePage ? "#integrations" : "/#integrations"} className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Integrations</a></li>
<li><a href={isHomePage ? "#waitlist" : "/#waitlist"} className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Join Waitlist</a></li>
</ul>
</div>
<div>
<h4 className="font-semibold mb-4 text-white bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">Legal</h4>
<ul className="space-y-3">
<li><Link to="/privacy-policy" className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Privacy Policy</Link></li>
<li><Link to="/terms-of-service" className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out">Terms of Service</Link></li>
</ul>
</div>

{/* Links Section */}
<div>
<h4 className="font-semibold mb-4 text-white bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">
Links
</h4>
<ul className="space-y-3">
<li>
<a
href={isHomePage ? "#features" : "/#features"}
className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out"
>
Features
</a>
</li>
<li>
<a
href={isHomePage ? "#how-it-works" : "/#how-it-works"}
className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out"
>
How It Works
</a>
</li>
<li>
<a
href={isHomePage ? "#integrations" : "/#integrations"}
className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out"
>
Integrations
</a>
</li>
<li>
<a
href={isHomePage ? "#waitlist" : "/#waitlist"}
className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out"
>
Join Waitlist
</a>
</li>
</ul>
</div>

{/* Legal Section */}
<div>
<h4 className="font-semibold mb-4 text-white bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">
Legal
</h4>
<ul className="space-y-3">
<li>
<Link
to="/privacy-policy"
className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out"
>
Privacy Policy
</Link>
</li>
<li>
<Link
to="/terms-of-service"
className="text-gray-300 hover:text-transparent hover:bg-gradient-to-r hover:from-green-400 hover:to-blue-500 hover:bg-clip-text text-sm transition-all duration-300 ease-in-out"
>
Terms of Service
</Link>
</li>
</ul>
</div>

</div>

<div className="border-t border-gradient-to-r from-green-500/20 via-blue-500/20 to-green-500/20 pt-8 flex flex-col md:flex-row justify-between items-center" style={{borderImage: 'linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(59, 130, 246, 0.2), rgba(34, 197, 94, 0.2)) 1'}}>
{/* Bottom Section */}
<div
className="border-t pt-8 flex flex-col md:flex-row justify-between items-center"
style={{
borderImage:
'linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(59, 130, 246, 0.2), rgba(34, 197, 94, 0.2)) 1'
}}
>
<p className="text-gray-400 text-sm mb-4 md:mb-0">
&copy; {currentYear} Devr.AI. All rights reserved.
</p>

<div className="flex space-x-6">
<a href="https://github.com/AOSSIE-Org/Devr.AI/"
className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-green-500/20"
target='_blank'
rel="noreferrer">
<a
href="https://github.com/AOSSIE-Org/Devr.AI/"
className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-green-500/20"
target="_blank"
rel="noreferrer"
>
<Github size={20} />
</a>
<a href="https://x.com/aossie_org?lang=en"
className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-blue-500/20"
target='_blank'
rel="noreferrer">

<a
href="https://x.com/aossie_org?lang=en"
className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-blue-500/20"
target="_blank"
rel="noreferrer"
>
<Twitter size={20} />
</a>
<a href="https://www.linkedin.com/company/aossie/?originalSubdomain=au"
className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-green-500/20"
target='_blank'
rel="noreferrer">

<a
href="https://www.linkedin.com/company/aossie/?originalSubdomain=au"
className="text-gray-300 hover:text-white hover:scale-110 transition-all duration-300 ease-in-out p-2 rounded-lg hover:bg-gradient-to-r hover:from-green-500/10 hover:to-blue-500/10 hover:shadow-lg hover:shadow-green-500/20"
target="_blank"
rel="noreferrer"
>
<Linkedin size={20} />
</a>
</div>
</div>

</div>
</footer>
);
Expand Down