Snigdha-OS/snigdhaos-web-dev
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/snigdhaos-web-dev.git synced 2025-09-20 19:14:56 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

⚡️ perf(_breaking): changes might break

Browse Source
This commit is contained in:
eshanized
2024-12-19 14:34:45 +05:30
parent eb6be747de
commit e28ff0b290
1 changed files with 81 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/pages/Home.tsx
View File

@@ -23,28 +23,27 @@ export function Home() {
/* Adding gradient animation to the hero section */ /* Adding gradient animation to the hero section */
.hero-background { .hero-background {
background: linear-gradient(270deg, #4f46e5, #9333ea, #22d3ee); /* Gradient color from purple to blue */ background: linear-gradient(270deg, #6495ed, #9333ea, #22d3ee); /* Updated with Cornflower Blue */
background-size: 300% 300%; /* Makes the gradient larger for animation */ background-size: 300% 300%;
animation: gradientAnimation 15s ease infinite; /* Animates the gradient */ animation: gradientAnimation 15s ease infinite;
} }
/* Card hover effect */ /* Card hover effect */
.card:hover { .card:hover {
transform: scale(1.05); /* Slight zoom-in effect */ transform: scale(1.05);
transition: transform 0.3s ease-in-out; /* Smooth transition */ transition: transform 0.3s ease-in-out;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Adding subtle shadow */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
} }
`} `}
</style> </style>
{/* Hero Section */} {/* Hero Section */}
<section className="bg-gradient-to-r from-indigo-600 to-indigo-700 text-white py-20 relative overflow-hidden hero-background"> <section className="bg-gradient-to-r from-[#6495ed] to-indigo-700 text-white py-20 relative overflow-hidden hero-background">
{/* Background Image */}
<div className="absolute inset-0 -z-10"> <div className="absolute inset-0 -z-10">
<img <img
src="https://via.placeholder.com/1920x1080" // Replace with your desired background image URL src="https://via.placeholder.com/1920x1080" // Replace with your desired background image URL
alt="Background" alt="Background"
className="w-full h-full object-cover opacity-30" // Ensures the image covers the entire section with low opacity className="w-full h-full object-cover opacity-30"
/> />
</div> </div>
@@ -56,33 +55,30 @@ export function Home() {
Arch-based Linux Distribution for Penetration Testing and Ethical Hacking. Snigdha OS provides a powerful platform with the latest tools for cybersecurity professionals. 🔐💻 Arch-based Linux Distribution for Penetration Testing and Ethical Hacking. Snigdha OS provides a powerful platform with the latest tools for cybersecurity professionals. 🔐💻
</p> </p>
<div className="flex justify-center space-x-6 mt-6"> <div className="flex justify-center space-x-6 mt-6">
{/* Call-to-action button for downloading */}
<Link <Link
to="/download" to="/download"
className="bg-white text-indigo-700 px-8 py-4 rounded-[5px] font-semibold shadow-lg transform hover:scale-105 hover:bg-gray-100 transition-all duration-300 inline-flex items-center space-x-3" className="bg-white text-[#6495ed] px-8 py-4 rounded-[5px] font-semibold shadow-lg transform hover:scale-105 hover:bg-gray-100 transition-all duration-300 inline-flex items-center space-x-3"
> >
<Download className="h-5 w-5" /> <Download className="h-5 w-5" />
<span>Download Now 🚀</span> <span>Download Now 🚀</span>
</Link> </Link>
{/* Call-to-action button for documentation */}
<Link <Link
to="https://snigdha-os.github.io/documentation/" to="https://snigdha-os.github.io/documentation/"
className="border-2 border-white text-white px-8 py-4 rounded-[5px] font-semibold transform hover:scale-105 hover:bg-white hover:text-indigo-700 transition-all duration-300 inline-flex items-center space-x-3" className="border-2 border-white text-white px-8 py-4 rounded-[5px] font-semibold transform hover:scale-105 hover:bg-white hover:text-[#6495ed] transition-all duration-300 inline-flex items-center space-x-3"
> >
<Book className="h-5 w-5" /> <Book className="h-5 w-5" />
<span>Documentation 📚</span> <span>Documentation 📚</span>
</Link> </Link>
</div> </div>
{/* Additional Call-to-Action */}
<div className="mt-12 max-w-2xl mx-auto"> <div className="mt-12 max-w-2xl mx-auto">
<p className="text-lg text-white opacity-80 mb-4"> <p className="text-lg text-white opacity-80 mb-4">
Join a community of like-minded individuals dedicated to enhancing the security and safety of the digital world. 🌍🔧 Explore our open-source ecosystem and contribute to the next-gen tools. Join a community of like-minded individuals dedicated to enhancing the security and safety of the digital world. 🌍🔧 Explore our open-source ecosystem and contribute to the next-gen tools.
</p> </p>
<Link <Link
to="https://forum.snigdhaos.org/" to="https://forum.snigdhaos.org/"
className="border-2 border-white text-white px-8 py-4 rounded-[5px] font-semibold transform hover:scale-105 hover:bg-white hover:text-indigo-700 transition-all duration-300 inline-flex items-center space-x-3" className="border-2 border-white text-white px-8 py-4 rounded-[5px] font-semibold transform hover:scale-105 hover:bg-white hover:text-[#6495ed] transition-all duration-300 inline-flex items-center space-x-3"
> >
<Users className="h-5 w-5" /> <Users className="h-5 w-5" />
<span>Join The Community 🤝</span> <span>Join The Community 🤝</span>
@@ -92,13 +88,12 @@ export function Home() {
</section> </section>
{/* Features Section */} {/* Features Section */}
<section className="py-16 bg-gradient-to-r from-indigo-50 to-white"> <section className="py-16 bg-gradient-to-r from-[#6495ed] to-white">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<h2 className="text-4xl font-bold text-center text-indigo-700 mb-12 tracking-tight"> <h2 className="text-4xl font-bold text-center text-[#6495ed] mb-12 tracking-tight">
Key Features ✨ Key Features ✨
</h2> </h2>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-12"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-12">
{/* Reusable feature card component */}
<FeatureCard <FeatureCard
icon={<Shield className="h-10 w-10 text-red-500" />} icon={<Shield className="h-10 w-10 text-red-500" />}
title="Secure 🔒" title="Secure 🔒"
@@ -125,7 +120,7 @@ export function Home() {
description="A vibrant community ready to help and share knowledge." description="A vibrant community ready to help and share knowledge."
/> />
<FeatureCard <FeatureCard
icon={<Star className="h-10 w-10 text-indigo-500" />} icon={<Star className="h-10 w-10 text-[#6495ed]" />}
title="Feature Rich ⚡" title="Feature Rich ⚡"
description="Pre-installed applications and tools for everyday use." description="Pre-installed applications and tools for everyday use."
/> />
@@ -150,81 +145,77 @@ export function Home() {
{/* Latest Release Section */} {/* Latest Release Section */}
<section className="py-16 bg-gradient-to-r from-indigo-100 to-indigo-200"> <section className="py-16 bg-gradient-to-r from-indigo-100 to-indigo-200">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<h2 className="text-4xl font-extrabold text-center mb-12 text-indigo-800"> <h2 className="text-4xl font-extrabold text-center mb-12 text-[#6495ed]">
🎉 Latest Release: <span className="text-indigo-600">Snigdha OS | Arctic V ❄️</span> 🎉 Latest Release: <span className="text-indigo-600">Snigdha OS | Arctic V ❄️</span>
</h2> </h2>
<div className="bg-white rounded-xl shadow-2xl overflow-hidden flex flex-col md:flex-row items-center transition-transform transform hover:scale-105 hover:shadow-2xl"> <div className="bg-white rounded-xl shadow-2xl overflow-hidden flex flex-col md:flex-row items-center transition-transform transform hover:scale-105 hover:shadow-2xl">
{/* Image Section */} <div className="md:w-1/2 mb-8 md:mb-0">
<div className="md:w-1/2 mb-8 md:mb-0"> <img
<img src="https://images.unsplash.com/photo-1629654297299-c8506221ca97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80"
src="https://images.unsplash.com/photo-1629654297299-c8506221ca97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Snigdha OS Desktop"
alt="Snigdha OS Desktop" className="rounded-lg shadow-xl transform transition duration-500 ease-in-out hover:scale-105 hover:shadow-2xl"
className="rounded-lg shadow-xl transform transition duration-500 ease-in-out hover:scale-105 hover:shadow-2xl" />
/> </div>
</div>
{/* Release Details Section */} <div className="md:w-1/2 md:pl-8 p-8 space-y-6">
<div className="md:w-1/2 md:pl-8 p-8 space-y-6"> <p className="text-lg text-gray-700 mb-6 leading-relaxed">
<p className="text-lg text-gray-700 mb-6 leading-relaxed"> Snigdha OS | Arctic V brings performance enhancements, better hardware support, and a whole new visual refresh! Experience the best of both worlds: sleek design and robust functionality. 🚀
Snigdha OS | Arctic V brings performance enhancements, better hardware support, and a whole new visual refresh! Experience the best of both worlds: sleek design and robust functionality. 🚀 </p>
</p>
<div className="space-y-6"> <div className="space-y-6">
{/* Key Features */} <Feature
<Feature title="🌐 New GNOME 47.0"
title="🌐 New GNOME 47.0" description="A fresh, faster, and more intuitive GNOME experience that simplifies navigation with improved responsiveness."
description="A fresh, faster, and more intuitive GNOME experience that simplifies navigation with improved responsiveness." />
/> <Feature
<Feature title="🛠️ Updated Software Manager"
title="🛠️ Updated Software Manager" description="Enjoy a cleaner, faster interface for package management with streamlined features."
description="Enjoy a cleaner, faster interface for package management with streamlined features." />
/> <Feature
<Feature title="🔧 Improved Hardware Support"
title="🔧 Improved Hardware Support" description="Snigdha OS ensures seamless compatibility with modern devices and hardware configurations for a smooth experience."
description="Snigdha OS ensures seamless compatibility with modern devices and hardware configurations for a smooth experience." />
/> <Feature
<Feature title="⚡ Upgraded Kernel & Drivers"
title="⚡ Upgraded Kernel & Drivers" description="Experience better performance with the latest Linux 6.x Zen kernel and optimized drivers for your hardware."
description="Experience better performance with the latest Linux 6.x Zen kernel and optimized drivers for your hardware." />
/> <Feature
<Feature title="🔄 Timeshift Snapshots"
title="🔄 Timeshift Snapshots" description="Create and manage system snapshots to restore your system whenever needed, ensuring peace of mind."
description="Create and manage system snapshots to restore your system whenever needed, ensuring peace of mind." />
/> <Feature
<Feature title="🎨 New Theme Options"
title="🎨 New Theme Options" description="Customize your desktop with a refreshed collection of themes and dark mode improvements for a more personalized look."
description="Customize your desktop with a refreshed collection of themes and dark mode improvements for a more personalized look." />
/> </div>
<div className="flex mt-8 justify-center space-x-6">
<Link
to="/download"
className="inline-flex items-center space-x-3 bg-[#6495ed] text-white px-8 py-4 rounded-xl shadow-lg hover:bg-indigo-700 transform transition-all duration-300 hover:scale-105"
>
<Download className="h-5 w-5" />
<span>Download Now 🚀</span>
</Link>
<Link
to="/changelog"
className="inline-flex items-center space-x-2 bg-gray-200 text-[#6495ed] px-6 py-2 rounded-xl shadow-lg hover:bg-gray-300 transform transition-all duration-300 hover:scale-105"
>
<ArrowRight className="h-5 w-5" />
<span>View Changelog 📜</span>
</Link>
</div>
</div>
</div>
</div> </div>
</section>
{/* Buttons */}
<div className="flex mt-8 justify-center space-x-6">
<Link
to="/download"
className="inline-flex items-center space-x-3 bg-indigo-600 text-white px-8 py-4 rounded-xl shadow-lg hover:bg-indigo-700 transform transition-all duration-300 hover:scale-105"
>
<Download className="h-5 w-5" />
<span>Download Now 🚀</span>
</Link>
<Link
to="/changelog"
className="inline-flex items-center space-x-2 bg-gray-200 text-indigo-700 px-6 py-2 rounded-xl shadow-lg hover:bg-gray-300 transform transition-all duration-300 hover:scale-105"
>
<ArrowRight className="h-5 w-5" />
<span>View Changelog 📜</span>
</Link>
</div>
</div>
</div>
</div>
</section>
{/* Why Choose Snigdha OS */} {/* Why Choose Snigdha OS */}
<section className="py-16 bg-white"> <section className="py-16 bg-white">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<h2 className="text-3xl font-bold text-center mb-12">Why Choose Snigdha OS? 🤔</h2> <h2 className="text-3xl font-bold text-center mb-12 text-[#6495ed]">Why Choose Snigdha OS? 🤔</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<ReasonCard <ReasonCard
icon={<Award className="h-10 w-10 text-yellow-500" />} icon={<Award className="h-10 w-10 text-yellow-500" />}
@@ -242,11 +233,10 @@ export function Home() {
description="Built on Ubuntu's LTS base, Snigdha OS ensures long-term stability and security updates." description="Built on Ubuntu's LTS base, Snigdha OS ensures long-term stability and security updates."
/> />
<ReasonCard <ReasonCard
icon={<Star className="h-10 w-10 text-indigo-500" />} icon={<Star className="h-10 w-10 text-[#6495ed]" />}
title="Lightweight ⚡" title="Lightweight ⚡"
description="With optimized performance, Snigdha OS works well on both older and newer hardware." description="With optimized performance, Snigdha OS works well on both older and newer hardware."
/> />
{/* Extended reasons */}
<ReasonCard <ReasonCard
icon={<Terminal className="h-10 w-10 text-green-500" />} icon={<Terminal className="h-10 w-10 text-green-500" />}
title="Customizable 🖌️" title="Customizable 🖌️"
@@ -277,14 +267,14 @@ export function Home() {
const FeatureCard = ({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) => ( const FeatureCard = ({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) => (
<div className="bg-white p-6 rounded-lg shadow-md text-center card"> <div className="bg-white p-6 rounded-lg shadow-md text-center card">
<div className="mb-4">{icon}</div> <div className="mb-4">{icon}</div>
<h4 className="text-xl font-semibold text-indigo-700">{title}</h4> <h4 className="text-xl font-semibold text-[#6495ed]">{title}</h4>
<p className="text-gray-600 mt-2">{description}</p> <p className="text-gray-600 mt-2">{description}</p>
</div> </div>
); );
const Feature = ({ title, description }: { title: string; description: string }) => ( const Feature = ({ title, description }: { title: string; description: string }) => (
<div> <div>
<h4 className="text-lg font-semibold text-indigo-700">{title}</h4> <h4 className="text-lg font-semibold text-[#6495ed]">{title}</h4>
<p className="text-gray-600">{description}</p> <p className="text-gray-600">{description}</p>
</div> </div>
); );
@@ -300,7 +290,7 @@ const ReasonCard = ({
}) => ( }) => (
<div className="bg-white p-6 rounded-lg shadow-md text-center card"> <div className="bg-white p-6 rounded-lg shadow-md text-center card">
<div className="mb-4">{icon}</div> <div className="mb-4">{icon}</div>
<h4 className="text-xl font-semibold text-indigo-700">{title}</h4> <h4 className="text-xl font-semibold text-[#6495ed]">{title}</h4>
<p className="text-gray-600 mt-2">{description}</p> <p className="text-gray-600 mt-2">{description}</p>
</div> </div>
); );