style: minor changes in ui

This commit is contained in:
eshanized
2025-01-03 12:00:26 +05:30
parent 3d9b9a8fb5
commit 1956709f83

View File

@@ -7,44 +7,64 @@ import { KeySponsors } from '../components/donate/KeySponsors';
export default function Donate() { export default function Donate() {
return ( return (
<div className="min-h-screen bg-gradient-to-b from-gray-50 to-white py-12"> <div className="min-h-screen bg-gradient-to-b from-gray-50 via-white to-gray-100 py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
{/* Hero Section */}
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
className="text-center mb-12" transition={{ duration: 0.8 }}
className="text-center mb-16"
> >
<Heart className="h-12 w-12 text-red-500 mx-auto mb-4" /> <motion.div
<h1 className="text-4xl font-bold text-gray-900">Support Snigdha OS</h1> initial={{ scale: 0.8 }}
<p className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto"> animate={{ scale: 1 }}
transition={{ duration: 0.6, bounce: 0.4 }}
>
<Heart className="h-16 w-16 text-red-500 mx-auto mb-4" />
</motion.div>
<h1 className="text-4xl md:text-5xl font-extrabold text-gray-900">
Support Snigdha OS
</h1>
<p className="mt-4 text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
Your support helps us maintain and improve Snigdha OS, keeping it free and open source for the security community. Your support helps us maintain and improve Snigdha OS, keeping it free and open source for the security community.
</p> </p>
<div className="mt-8"> <motion.div
className="mt-8"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
<GithubSponsorButton /> <GithubSponsorButton />
</div> </motion.div>
</motion.div> </motion.div>
<div className="space-y-16"> {/* Key Sections */}
<section> <div className="space-y-20">
{/* Key Sponsors */}
<section className="relative">
<div className="absolute -top-10 -left-10 w-32 h-32 bg-cornflower-blue/10 rounded-full blur-3xl"></div>
<KeySponsors /> <KeySponsors />
</section> </section>
{/* Sponsorship Stats */}
<section> <section>
<SponsorshipStats /> <SponsorshipStats />
</section> </section>
{/* Sponsorship Tiers */}
<section> <section>
<h2 className="text-2xl font-bold text-gray-900 text-center mb-8"> <h2 className="text-3xl font-bold text-gray-900 text-center mb-12">
Choose Your Sponsorship Tier Choose Your Sponsorship Tier
</h2> </h2>
<SponsorshipTiers /> <SponsorshipTiers />
</section> </section>
<section className="max-w-3xl mx-auto text-center bg-cornflower-blue/5 rounded-2xl p-8"> {/* Why Sponsor */}
<h2 className="text-2xl font-bold text-gray-900 mb-4"> <section className="max-w-3xl mx-auto text-center bg-gray-100 rounded-2xl p-10 shadow-lg">
<h2 className="text-3xl font-bold text-gray-900 mb-6">
Why Sponsor Snigdha OS? Why Sponsor Snigdha OS?
</h2> </h2>
<p className="text-gray-600"> <p className="text-gray-600 text-lg leading-relaxed">
Your sponsorship directly supports the development of cutting-edge security tools, Your sponsorship directly supports the development of cutting-edge security tools,
maintenance of our infrastructure, and helps us keep Snigdha OS at the forefront maintenance of our infrastructure, and helps us keep Snigdha OS at the forefront
of security testing. Join our community of sponsors and help shape the future of of security testing. Join our community of sponsors and help shape the future of