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

🔬 test(_new): animations and inline css

Browse Source
This commit is contained in:
Eshan Roy
2024-12-17 13:32:23 +05:30
parent ec8f537dcf
commit 1c9b0b9467
1 changed files with 261 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
src/pages/Home.tsx
View File

@@ -5,121 +5,146 @@ import { Link } from 'react-router-dom';
export function Home() { export function Home() {
return ( return (
<div> <div>
{/* Embedded CSS */}
<style>
{`
/* Gradient animation for the hero section background */
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Adding gradient animation to the hero section */
.hero-background {
background: linear-gradient(270deg, #4f46e5, #9333ea, #22d3ee); /* Gradient color from purple to blue */
background-size: 300% 300%; /* Makes the gradient larger for animation */
animation: gradientAnimation 15s ease infinite; /* Animates the gradient */
}
`}
</style>
{/* Hero Section */} {/* Hero Section */}
<section className="bg-gradient-to-r from-indigo-600 to-indigo-700 text-white py-20 relative overflow-hidden"> <section className="bg-gradient-to-r from-indigo-600 to-indigo-700 text-white py-20 relative overflow-hidden hero-background">
{/* Background Image */} {/* 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" className="w-full h-full object-cover opacity-30" // Ensures the image covers the entire section with low opacity
/> />
</div> </div>
<div className="container mx-auto px-4 text-center relative z-10"> <div className="container mx-auto px-4 text-center relative z-10">
<h1 className="text-5xl font-extrabold mb-6 text-shadow-md"> <h1 className="text-5xl font-extrabold mb-6 text-shadow-md">
Welcome to Snigdha OS Welcome to Snigdha OS 🌐
</h1> </h1>
<p className="text-xl mb-8 max-w-3xl mx-auto text-shadow-lg"> <p className="text-xl mb-8 max-w-3xl mx-auto text-shadow-lg">
Arch-based Linux Distribution for Penetration Testing and Ethical Hacking. Arch-based Linux Distribution for Penetration Testing and Ethical Hacking. Snigdha OS provides a powerful platform with the latest tools for cybersecurity professionals. 🔐💻
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-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"
> >
<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-indigo-700 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 */} {/* 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-indigo-700 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>
</Link> </Link>
</div> </div>
</div> </div>
</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-indigo-50 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-indigo-700 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 🔒"
description="Regular security updates and a robust system architecture keep your data safe." description="Regular security updates and a robust system architecture keep your data safe."
/> />
<FeatureCard <FeatureCard
icon={<Terminal className="h-10 w-10 text-green-500" />} icon={<Terminal className="h-10 w-10 text-green-500" />}
title="Powerful" title="Powerful 💪"
description="Full access to the terminal and system components for advanced users." description="Full access to the terminal and system components for advanced users."
/> />
<FeatureCard <FeatureCard
icon={<Download className="h-10 w-10 text-blue-500" />} icon={<Download className="h-10 w-10 text-blue-500" />}
title="Free Forever" title="Free Forever 🎉"
description="Snigdha OS is free and open source. No costs, no subscriptions." description="Snigdha OS is free and open source. No costs, no subscriptions."
/> />
<FeatureCard <FeatureCard
icon={<Award className="h-10 w-10 text-yellow-500" />} icon={<Award className="h-10 w-10 text-yellow-500" />}
title="Customizable" title="Customizable 🎨"
description="Personalize your desktop environment to suit your needs and style." description="Personalize your desktop environment to suit your needs and style."
/> />
<FeatureCard <FeatureCard
icon={<Users className="h-10 w-10 text-pink-500" />} icon={<Users className="h-10 w-10 text-pink-500" />}
title="Community Support" title="Community Support 🤗"
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-indigo-500" />}
title="Feature Rich" title="Feature Rich ⚡"
description="Pre-installed applications and tools for everyday use." description="Pre-installed applications and tools for everyday use."
/> />
<FeatureCard <FeatureCard
icon={<Coffee className="h-10 w-10 text-brown-500" />} icon={<Coffee className="h-10 w-10 text-brown-500" />}
title="Energy Efficient" title="Energy Efficient 🌱"
description="Optimized performance to save energy and enhance hardware longevity." description="Optimized performance to save energy and enhance hardware longevity."
/> />
<FeatureCard <FeatureCard
icon={<ArrowRight className="h-10 w-10 text-teal-500" />} icon={<ArrowRight className="h-10 w-10 text-teal-500" />}
title="Fast Boot" title="Fast Boot ⏱️"
description="Experience faster boot times and smooth transitions." description="Experience faster boot times and smooth transitions."
/> />
<FeatureCard <FeatureCard
icon={<Terminal className="h-10 w-10 text-purple-500" />} icon={<Terminal className="h-10 w-10 text-purple-500" />}
title="Advanced Tools" title="Advanced Tools 🧰"
description="Access specialized penetration testing and ethical hacking tools." description="Access specialized penetration testing and ethical hacking tools."
/> />
</div> </div>
</div> </div>
</section> </section>
{/* Latest Release Section */} {/* Latest Release Section */}
<section className="py-16 bg-gray-100"> <section className="py-16 bg-gray-100">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<h2 className="text-3xl font-bold text-center mb-12">Latest Release</h2> <h2 className="text-3xl font-bold text-center mb-12">Latest Release 🎉</h2>
<div className="bg-white rounded-lg shadow-lg p-8"> <div className="bg-white rounded-lg shadow-lg p-8">
<div className="flex flex-col md:flex-row items-center"> <div className="flex flex-col md:flex-row items-center">
{/* Image Section */} {/* Image Section */}
@@ -133,37 +158,36 @@ export function Home() {
{/* Details Section */} {/* Details Section */}
<div className="md:w-1/2 md:pl-8"> <div className="md:w-1/2 md:pl-8">
<h3 className="text-2xl font-regular mb-4">Snigdha OS | <b>Arctic V</b></h3> <h3 className="text-2xl font-regular mb-4">Snigdha OS | <b>Arctic V</b> ❄️</h3>
<p className="text-gray-600 mb-6"> <p className="text-gray-600 mb-6">
Experience the latest features and improvements in our newest release. Experience the latest features and improvements in our newest release. Enjoy enhanced performance, better hardware support, and a refined user interface. 🌟
Enjoy enhanced performance, better hardware support, and a refined user interface.
</p> </p>
<div className="space-y-6"> <div className="space-y-6">
{/* Key Features */} {/* Key Features */}
<Feature <Feature
title="New Gnome 47.0" title="New Gnome 47.0"
description="Enjoy a faster and more responsive desktop environment with redesigned animations and improved task handling." description="Enjoy a faster and more responsive desktop environment with redesigned animations and improved task handling. 🚀"
/> />
<Feature <Feature
title="Updated Software Manager" title="Updated Software Manager"
description="Enhanced package management with faster load times and a cleaner interface." description="Enhanced package management with faster load times and a cleaner interface. ⚙️"
/> />
<Feature <Feature
title="Improved Hardware Compatibility" title="Improved Hardware Compatibility"
description="Support for the latest devices and hardware configurations ensures a seamless experience." description="Support for the latest devices and hardware configurations ensures a seamless experience. 🖥️"
/> />
<Feature <Feature
title="Upgraded Kernel and Drivers" title="Upgraded Kernel and Drivers"
description="Leverage the power of the Linux 6.x Zen kernel for optimal system performance." description="Leverage the power of the Linux 6.x Zen kernel for optimal system performance. 🖧"
/> />
<Feature <Feature
title="System Snapshots with Timeshift" title="System Snapshots with Timeshift"
description="Take full control of system recovery with robust snapshot features." description="Take full control of system recovery with robust snapshot features. 🔄"
/> />
<Feature <Feature
title="New Theme Options" title="New Theme Options"
description="Personalize your desktop with a refreshed collection of themes, including dark mode improvements." description="Personalize your desktop with a refreshed collection of themes, including dark mode improvements. 🌒"
/> />
</div> </div>
@@ -173,14 +197,14 @@ export function Home() {
to="/download" to="/download"
className="inline-flex items-center space-x-3 bg-indigo-600 text-white px-8 py-4 rounded-[5px] hover:bg-indigo-700 transition-colors" className="inline-flex items-center space-x-3 bg-indigo-600 text-white px-8 py-4 rounded-[5px] hover:bg-indigo-700 transition-colors"
> >
<span>Download Now</span> <span>Download Now 🚀</span>
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
</Link> </Link>
<Link <Link
to="/changelog" to="/changelog"
className="inline-flex items-center space-x-2 bg-gray-200 text-indigo-600 px-6 py-2 rounded-[5px] hover:bg-gray-300 transition-colors" className="inline-flex items-center space-x-2 bg-gray-200 text-indigo-600 px-6 py-2 rounded-[5px] hover:bg-gray-300 transition-colors"
> >
<span>View Changelog</span> <span>View Changelog 📜</span>
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
</Link> </Link>
</div> </div>
@@ -188,112 +212,77 @@ export function Home() {
</div> </div>
</div> </div>
</div> </div>
</section> </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">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" />}
title="User-Friendly" title="User-Friendly 😊"
description="With its intuitive interface, Snigdha OS provides a seamless experience for beginners and experts alike." description="With its intuitive interface, Snigdha OS provides a seamless experience for beginners and experts alike."
/> />
<ReasonCard <ReasonCard
icon={<Users className="h-10 w-10 text-blue-500" />} icon={<Users className="h-10 w-10 text-blue-500" />}
title="Active Community" title="Active Community 🗣️"
description="Join a vibrant community where users collaborate, share solutions, and build knowledge together." description="Join a vibrant community where users collaborate, share solutions, and build knowledge together."
/> />
<ReasonCard <ReasonCard
icon={<Coffee className="h-10 w-10 text-red-500" />} icon={<Coffee className="h-10 w-10 text-red-500" />}
title="Stable & Reliable" title="Stable & Reliable 📊"
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-purple-500" />} icon={<Star className="h-10 w-10 text-indigo-500" />}
title="Feature Rich" title="Lightweight ⚡"
description="Get all the essential applications and tools pre-installed, saving you time and effort." description="With optimized performance, Snigdha OS works well on both older and newer hardware."
/>
{/* Extended reasons */}
<ReasonCard
icon={<Terminal className="h-10 w-10 text-green-500" />}
title="Customizable 🖌️"
description="Snigdha OS offers extensive customization options, so you can tailor the OS to your exact needs."
/> />
<ReasonCard <ReasonCard
icon={<Shield className="h-10 w-10 text-green-500" />} icon={<Shield className="h-10 w-10 text-purple-500" />}
title="Privacy Focused" title="Top-Notch Security 🛡️"
description="Unlike many OS options, Snigdha OS respects your privacy with no data tracking or telemetry." description="Snigdha OS is built with a strong focus on security. Regular updates and patches ensure that your system is always safe."
/> />
<ReasonCard <ReasonCard
icon={<Terminal className="h-10 w-10 text-indigo-500" />} icon={<Award className="h-10 w-10 text-orange-500" />}
title="Powerful Tools" title="Performance Focused 🚀"
description="Access advanced system tools, a customizable terminal, and powerful package management with APT." description="Snigdha OS is optimized to deliver high performance even on low-spec hardware, ensuring smooth operation."
/> />
<ReasonCard <ReasonCard
icon={<Download className="h-10 w-10 text-orange-500" />} icon={<Star className="h-10 w-10 text-yellow-500" />}
title="Free and Open Source" title="Frequent Updates 🔄"
description="Snigdha OS is free forever, with its source code available for transparency and community-driven improvements." description="Get regular updates with the latest features, bug fixes, and security patches."
/>
<ReasonCard
icon={<ArrowRight className="h-10 w-10 text-teal-500" />}
title="Easy Upgrades"
description="Upgrading to new versions is straightforward, ensuring you always enjoy the latest features without hassle."
/> />
</div> </div>
</div> </div>
</section>
{/* CTA Section */}
<section className="py-16 bg-indigo-600 text-white">
<div className="container mx-auto px-4 text-center">
<h2 className="text-3xl font-bold mb-6">Ready to Try Snigdha OS?</h2>
<p className="text-xl mb-8 max-w-2xl mx-auto">
Join millions of users worldwide and experience the freedom of <br></br>Snigdha OS.
</p>
<Link
to="/download"
className="inline-flex items-center space-x-2 bg-white text-indigo-600 px-8 py-3 rounded-[5px] font-semibold hover:bg-gray-100 transition-colors"
>
<Download className="h-5 w-5" />
<span>Download Now</span>
</Link>
</div>
</section> </section>
</div> </div>
); );
} }
function FeatureCard({ const FeatureCard = ({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) => (
icon, <div className="bg-white p-6 rounded-lg shadow-md text-center">
title, <div className="mb-4">{icon}</div>
description, <h4 className="text-xl font-semibold text-indigo-700">{title}</h4>
}: { <p className="text-gray-600 mt-2">{description}</p>
icon: React.ReactNode;
title: string;
description: string;
}) {
return (
<div className="text-center p-8 bg-white rounded-lg shadow-xl hover:shadow-2xl hover:scale-105 transition-all duration-500">
<div className="flex justify-center mb-6">{icon}</div>
<h3 className="text-xl font-semibold text-indigo-500 mb-3">{title}</h3>
<p className="text-gray-600 text-lg">{description}</p>
</div> </div>
); );
}
function Feature({ title, description }: { title: string; description: string }) { const Feature = ({ title, description }: { title: string; description: string }) => (
return (
<div className="flex items-start space-x-3">
<div className="flex-shrink-0">
<div className="w-2 h-2 mt-2 rounded-[5px] bg-indigo-500"></div>
</div>
<div> <div>
<h4 className="font-semibold">{title}</h4> <h4 className="text-lg font-semibold text-indigo-700">{title}</h4>
<p className="text-sm text-gray-600">{description}</p> <p className="text-gray-600">{description}</p>
</div> </div>
</div> );
);
}
const ReasonCard = ({
function ReasonCard({
icon, icon,
title, title,
description, description,
@@ -301,12 +290,10 @@ function ReasonCard({
icon: React.ReactNode; icon: React.ReactNode;
title: string; title: string;
description: string; description: string;
}) { }) => (
return ( <div className="bg-white p-6 rounded-lg shadow-md text-center">
<div className="text-center p-6 bg-white rounded-lg shadow hover:shadow-lg transition-shadow"> <div className="mb-4">{icon}</div>
<div className="flex justify-center mb-4">{icon}</div> <h4 className="text-xl font-semibold text-indigo-700">{title}</h4>
<h3 className="text-lg text-indigo-500 font-bold mb-2">{title}</h3> <p className="text-gray-600 mt-2">{description}</p>
<p className="text-gray-600 text-sm">{description}</p>
</div> </div>
); );
}