Skip to content

Professional aesthetic that's both modern and eye-catching #113

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

Professional aesthetic that's both modern and eye-catching #113

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d79f1cc
Professional aesthetic that's both modern and eye-catching
Aditya30ag Jul 24, 2025
19b4a12
fix the coderabbit suggestions
Aditya30ag Jul 24, 2025
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
50 changes: 32 additions & 18 deletions landing/src/components/layout/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,47 +8,61 @@ const Footer: React.FC = () => {
const isHomePage = location.pathname === '/';

return (
<footer className="bg-dark-lighter py-12">
<div className="container mx-auto px-6">
<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>
<div className="absolute bottom-0 right-0 w-96 h-96 rounded-full bg-blue-500/4 blur-3xl translate-x-1/2 translate-y-1/2"></div>
<div className="absolute inset-0 bg-gradient-to-t from-transparent via-green-500/5 to-transparent opacity-50"></div>
</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>
<p className="text-gray-400 text-sm max-w-xs">
<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-medium mb-3 text-white">Links</h4>
<ul className="space-y-2">
<li><a href={isHomePage ? "#features" : "/#features"} className="text-gray-400 hover:text-primary text-sm">Features</a></li>
<li><a href={isHomePage ? "#how-it-works" : "/#how-it-works"} className="text-gray-400 hover:text-primary text-sm">How It Works</a></li>
<li><a href={isHomePage ? "#integrations" : "/#integrations"} className="text-gray-400 hover:text-primary text-sm">Integrations</a></li>
<li><a href={isHomePage ? "#waitlist" : "/#waitlist"} className="text-gray-400 hover:text-primary text-sm">Join Waitlist</a></li>
<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-medium mb-3 text-white">Legal</h4>
<ul className="space-y-2">
<li><Link to="/privacy-policy" className="text-gray-400 hover:text-primary text-sm">Privacy Policy</Link></li>
<li><Link to="/terms-of-service" className="text-gray-400 hover:text-primary text-sm">Terms of Service</Link></li>
<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>

<div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
<p className="text-gray-500 text-sm mb-4 md:mb-0">
<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'}}>
<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-400 hover:text-primary" 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-400 hover:text-primary" target='_blank'>
<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'>
<Twitter size={20} />
</a>
<a href="https://www.linkedin.com/company/aossie/?originalSubdomain=au" className="text-gray-400 hover:text-primary" target='_blank'>
<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'>
<Linkedin size={20} />
</a>
</div>
Expand Down
Loading