From 1c9b0b9467648eea6e8b042cf9ef9df98fe9143d Mon Sep 17 00:00:00 2001 From: Eshan Roy Date: Tue, 17 Dec 2024 13:32:23 +0530 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=AC=20test(=5Fnew):=20animations=20and?= =?UTF-8?q?=20inline=20css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home.tsx | 535 ++++++++++++++++++++++----------------------- 1 file changed, 261 insertions(+), 274 deletions(-) diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 7e8f06b..34327f2 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -5,262 +5,284 @@ import { Link } from 'react-router-dom'; export function Home() { return (
+ {/* Embedded CSS */} + + {/* Hero Section */} -
- {/* Background Image */} -
- Background -
- -
-

- Welcome to Snigdha OS -

-

- Arch-based Linux Distribution for Penetration Testing and Ethical Hacking. - Snigdha OS provides a powerful platform with the latest tools for cybersecurity professionals. -

-
- - - Download Now - - - - - Documentation - -
- - {/* Additional Call-to-Action */} -
-

- 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 The Community - -
-
-
- - {/* Features Section */} -
-
-

- Key Features -

-
- } - title="Secure" - description="Regular security updates and a robust system architecture keep your data safe." - /> - } - title="Powerful" - description="Full access to the terminal and system components for advanced users." - /> - } - title="Free Forever" - description="Snigdha OS is free and open source. No costs, no subscriptions." - /> - } - title="Customizable" - description="Personalize your desktop environment to suit your needs and style." - /> - } - title="Community Support" - description="A vibrant community ready to help and share knowledge." - /> - } - title="Feature Rich" - description="Pre-installed applications and tools for everyday use." - /> - } - title="Energy Efficient" - description="Optimized performance to save energy and enhance hardware longevity." - /> - } - title="Fast Boot" - description="Experience faster boot times and smooth transitions." - /> - } - title="Advanced Tools" - description="Access specialized penetration testing and ethical hacking tools." - /> -
-
-
- - - - {/* Latest Release Section */} -
-
-

Latest Release

-
-
- {/* Image Section */} -
+
+ {/* Background Image */} +
Snigdha OS Desktop
- {/* Details Section */} -
-

Snigdha OS | Arctic V

-

- Experience the latest features and improvements in our newest release. - Enjoy enhanced performance, better hardware support, and a refined user interface. +

+

+ Welcome to Snigdha OS 🌐 +

+

+ Arch-based Linux Distribution for Penetration Testing and Ethical Hacking. Snigdha OS provides a powerful platform with the latest tools for cybersecurity professionals. 🔐💻

- -
- {/* Key Features */} - - - - - - -
- - {/* Buttons */} -
+
+ {/* Call-to-action button for downloading */} - Download Now - + + Download Now 🚀 + + {/* Call-to-action button for documentation */} - View Changelog - + + Documentation 📚 + +
+ + {/* Additional Call-to-Action */} +
+

+ 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 The Community 🤝
-
-
-
-
+ + {/* Features Section */} +
+
+

+ Key Features ✨ +

+
+ {/* Reusable feature card component */} + } + title="Secure 🔒" + description="Regular security updates and a robust system architecture keep your data safe." + /> + } + title="Powerful 💪" + description="Full access to the terminal and system components for advanced users." + /> + } + title="Free Forever 🎉" + description="Snigdha OS is free and open source. No costs, no subscriptions." + /> + } + title="Customizable 🎨" + description="Personalize your desktop environment to suit your needs and style." + /> + } + title="Community Support 🤗" + description="A vibrant community ready to help and share knowledge." + /> + } + title="Feature Rich ⚡" + description="Pre-installed applications and tools for everyday use." + /> + } + title="Energy Efficient 🌱" + description="Optimized performance to save energy and enhance hardware longevity." + /> + } + title="Fast Boot ⏱️" + description="Experience faster boot times and smooth transitions." + /> + } + title="Advanced Tools 🧰" + description="Access specialized penetration testing and ethical hacking tools." + /> +
+
+
-{/* Why Choose Snigdha OS */} -
-
-

Why Choose Snigdha OS?

-
- } - title="User-Friendly" - description="With its intuitive interface, Snigdha OS provides a seamless experience for beginners and experts alike." - /> - } - title="Active Community" - description="Join a vibrant community where users collaborate, share solutions, and build knowledge together." - /> - } - title="Stable & Reliable" - description="Built on Ubuntu's LTS base, Snigdha OS ensures long-term stability and security updates." - /> - } - title="Feature Rich" - description="Get all the essential applications and tools pre-installed, saving you time and effort." - /> - } - title="Privacy Focused" - description="Unlike many OS options, Snigdha OS respects your privacy with no data tracking or telemetry." - /> - } - title="Powerful Tools" - description="Access advanced system tools, a customizable terminal, and powerful package management with APT." - /> - } - title="Free and Open Source" - description="Snigdha OS is free forever, with its source code available for transparency and community-driven improvements." - /> - } - title="Easy Upgrades" - description="Upgrading to new versions is straightforward, ensuring you always enjoy the latest features without hassle." - /> -
-
-
+ {/* Latest Release Section */} +
+
+

Latest Release 🎉

+
+
+ {/* Image Section */} +
+ Snigdha OS Desktop +
- {/* CTA Section */} -
-
-

Ready to Try Snigdha OS?

-

- Join millions of users worldwide and experience the freedom of

Snigdha OS. -

- - - Download Now - + {/* Details Section */} +
+

Snigdha OS | Arctic V ❄️

+

+ Experience the latest features and improvements in our newest release. Enjoy enhanced performance, better hardware support, and a refined user interface. 🌟 +

+ +
+ {/* Key Features */} + + + + + + +
+ + {/* Buttons */} +
+ + Download Now 🚀 + + + + View Changelog 📜 + + +
+
+
+
+
+
+ + {/* Why Choose Snigdha OS */} +
+
+

Why Choose Snigdha OS? 🤔

+
+ } + title="User-Friendly 😊" + description="With its intuitive interface, Snigdha OS provides a seamless experience for beginners and experts alike." + /> + } + title="Active Community 🗣️" + description="Join a vibrant community where users collaborate, share solutions, and build knowledge together." + /> + } + title="Stable & Reliable 📊" + description="Built on Ubuntu's LTS base, Snigdha OS ensures long-term stability and security updates." + /> + } + title="Lightweight ⚡" + description="With optimized performance, Snigdha OS works well on both older and newer hardware." + /> + {/* Extended reasons */} + } + title="Customizable 🖌️" + description="Snigdha OS offers extensive customization options, so you can tailor the OS to your exact needs." + /> + } + title="Top-Notch Security 🛡️" + description="Snigdha OS is built with a strong focus on security. Regular updates and patches ensure that your system is always safe." + /> + } + title="Performance Focused 🚀" + description="Snigdha OS is optimized to deliver high performance even on low-spec hardware, ensuring smooth operation." + /> + } + title="Frequent Updates 🔄" + description="Get regular updates with the latest features, bug fixes, and security patches." + /> +
); } -function FeatureCard({ +const FeatureCard = ({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) => ( +
+
{icon}
+

{title}

+

{description}

+
+); + +const Feature = ({ title, description }: { title: string; description: string }) => ( +
+

{title}

+

{description}

+
+); + +const ReasonCard = ({ icon, title, description, @@ -268,45 +290,10 @@ function FeatureCard({ icon: React.ReactNode; title: string; description: string; -}) { - return ( -
-
{icon}
-

{title}

-

{description}

-
- ); -} - -function Feature({ title, description }: { title: string; description: string }) { - return ( -
-
-
-
-
-

{title}

-

{description}

-
-
- ); -} - - -function ReasonCard({ - icon, - title, - description, -}: { - icon: React.ReactNode; - title: string; - description: string; -}) { - return ( -
-
{icon}
-

{title}

-

{description}

-
- ); -} +}) => ( +
+
{icon}
+

{title}

+

{description}

+
+);