🔬 test(_new): animations and inline css

src/pages/Home.tsx

@@ -5,54 +5,80 @@ import { Link } from 'react-router-dom';
 export function Home() {
   return (
     <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 */}
-<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 */}
         <div className="absolute inset-0 -z-10">
           <img
             src="https://via.placeholder.com/1920x1080" // Replace with your desired background image URL
             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 className="container mx-auto px-4 text-center relative z-10">
           <h1 className="text-5xl font-extrabold mb-6 text-shadow-md">
-      Welcome to Snigdha OS
+            Welcome to Snigdha OS 🌐
           </h1>
           <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>
           <div className="flex justify-center space-x-6 mt-6">
+            {/* Call-to-action button for downloading */}
             <Link
               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"
             >
               <Download className="h-5 w-5" />
-        <span>Download Now</span>
+              <span>Download Now 🚀</span>
             </Link>
 
+            {/* Call-to-action button for documentation */}
             <Link
               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"
             >
               <Book className="h-5 w-5" />
-        <span>Documentation</span>
+              <span>Documentation 📚</span>
             </Link>
           </div>
 
           {/* Additional Call-to-Action */}
           <div className="mt-12 max-w-2xl mx-auto">
             <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>
             <Link
               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"
             >
               <Users className="h-5 w-5" />
-        <span>Join The Community</span>
+              <span>Join The Community 🤝</span>
             </Link>
           </div>
         </div>
@@ -62,64 +88,63 @@ export function Home() {
       <section className="py-16 bg-gradient-to-r from-indigo-50 to-white">
         <div className="container mx-auto px-4">
           <h2 className="text-4xl font-bold text-center text-indigo-700 mb-12 tracking-tight">
-      Key Features
+            Key Features ✨
           </h2>
           <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-12">
+            {/* Reusable feature card component */}
             <FeatureCard
               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."
             />
             <FeatureCard
               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."
             />
             <FeatureCard
               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."
             />
             <FeatureCard
               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."
             />
             <FeatureCard
               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."
             />
             <FeatureCard
               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."
             />
             <FeatureCard
               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."
             />
             <FeatureCard
               icon={<ArrowRight className="h-10 w-10 text-teal-500" />}
-        title="Fast Boot"
+              title="Fast Boot ⏱️"
               description="Experience faster boot times and smooth transitions."
             />
             <FeatureCard
               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."
             />
           </div>
         </div>
       </section>
 
-
-
       {/* Latest Release Section */}
       <section className="py-16 bg-gray-100">
         <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="flex flex-col md:flex-row items-center">
               {/* Image Section */}
@@ -133,37 +158,36 @@ export function Home() {
 
               {/* Details Section */}
               <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">
-            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>
 
                 <div className="space-y-6">
                   {/* Key Features */}
                   <Feature
                     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
                     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
                     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
                     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
                     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
                     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>
 
@@ -173,14 +197,14 @@ export function Home() {
                     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"
                   >
-              <span>Download Now</span>
+                    <span>Download Now 🚀</span>
                     <ArrowRight className="h-4 w-4" />
                   </Link>
                   <Link
                     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"
                   >
-              <span>View Changelog</span>
+                    <span>View Changelog 📜</span>
                     <ArrowRight className="h-4 w-4" />
                   </Link>
                 </div>
@@ -190,110 +214,75 @@ export function Home() {
         </div>
       </section>
 
-
       {/* Why Choose Snigdha OS */}
       <section className="py-16 bg-white">
         <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">
             <ReasonCard
               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."
             />
             <ReasonCard
               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."
             />
             <ReasonCard
               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."
             />
             <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
-        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
-        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
-        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>
-</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>
     </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>
 );
-}
 
-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>
-        <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>
 );
-}
 
-
+const ReasonCard = ({
-function ReasonCard({
   icon,
   title,
   description,
@@ -301,12 +290,10 @@ function ReasonCard({
   icon: React.ReactNode;
   title: 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>
 );
-}