+
Suggested Mirror
)}
@@ -293,7 +293,7 @@ const editionData = [
description: 'Modern, innovative features while being traditional and familiar.',
keyFeatures: ['Dynamic Workspaces', 'Extensible Extensions', 'Built-in Accessibility'],
idealFor: 'General users who prefer a sleek and functional desktop experience.',
- icon:
,
+ icon:
,
recommended: true,
},
{
@@ -301,88 +301,42 @@ const editionData = [
description: 'Traditional desktop experience, highly stable and reliable.',
keyFeatures: ['Low Resource Usage', 'Consistent Workflow', 'Legacy Support'],
idealFor: 'Users who value simplicity and reliability over modern features.',
- icon:
,
+ icon:
,
},
{
title: 'Xfce Edition',
description: 'Lightweight and stable. Perfect for older computers.',
keyFeatures: ['Minimal Resource Usage', 'Fast Boot Times', 'Highly Customizable'],
idealFor: 'Users with older hardware or those who need maximum performance.',
- icon:
,
+ icon:
,
},
{
title: 'KDE Plasma Edition',
- description: 'Customizable and visually stunning, perfect for power users.',
- keyFeatures: ['Advanced Widgets', 'Custom Themes', 'Built-in Productivity Apps'],
- idealFor: 'Tech enthusiasts and power users who love customization.',
- icon:
,
- },
- {
- title: 'Minimal Edition',
- description: 'Barebones version for advanced users who prefer custom setups.',
- keyFeatures: ['Minimal Preinstalled Apps', 'Manual Configuration', 'Highly Flexible'],
- idealFor: 'Experienced users who want a clean slate to build their OS.',
- icon:
,
- },
- {
- title: 'ARM Edition',
- description: 'Optimized for ARM-based devices like Raspberry Pi.',
- keyFeatures: ['Optimized for ARM', 'Pre-configured Packages', 'Energy Efficient'],
- idealFor: 'Raspberry Pi enthusiasts and developers working on ARM devices.',
- icon:
,
- },
- {
- title: 'Education Edition',
- description: 'Packed with educational tools for students and teachers.',
- keyFeatures: ['Preloaded Educational Software', 'Child-friendly Interface', 'Classroom Tools'],
- idealFor: 'Students, teachers, and educational institutions.',
- icon:
,
- },
- {
- title: 'Gaming Edition',
- description: 'Enhanced with gaming tools and pre-installed gaming libraries.',
- keyFeatures: ['Gaming Drivers', 'Pre-installed Steam', 'Optimized Performance'],
- idealFor: 'Gamers who need a robust environment for PC gaming.',
- icon:
,
+ description: 'Feature-rich, eye-catching, and offers tons of customization.',
+ keyFeatures: ['Cutting-edge Visuals', 'Full Customization', 'Highly Extensible'],
+ idealFor: 'Power users who want control and beauty in equal measure.',
+ icon:
,
},
];
-// Mirrors Data
+// Example of mirrorData (you can add more mirrors as needed)
const mirrorData = [
{
- region: 'North America',
- speed: 'Fast',
- host: 'MirrorHost USA',
- url: '#',
- },
- {
- region: 'Europe',
+ region: 'North America (USA)',
speed: 'Very Fast',
- host: 'EuroMirror DE',
- url: '#',
+ host: 'ExampleMirrorHost.com',
+ url: 'https://example.com/download',
},
{
- region: 'Asia',
+ region: 'Europe (Germany)',
speed: 'Fast',
- host: 'AsiaNet JP',
- url: '#',
+ host: 'EU-Mirror.com',
+ url: 'https://eu-mirror.com/download',
},
{
- region: 'Australia',
+ region: 'Asia (India)',
speed: 'Moderate',
- host: 'AusSpeed AU',
- url: '#',
- },
- {
- region: 'South America',
- speed: 'Moderate',
- host: 'LATAM Mirror BR',
- url: '#',
- },
- {
- region: 'Africa',
- speed: 'Fast',
- host: 'Afrinet ZA',
- url: '#',
+ host: 'IN-Mirror.com',
+ url: 'https://in-mirror.com/download',
},
];
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index b21a82ad..8a4edd5a 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -21,18 +21,69 @@ export function Home() {
}
}
- /* Hero Section with updated background */
+ /* Typing Effect for Hero Tagline */
+ @keyframes typing {
+ from {
+ width: 0;
+ }
+ to {
+ width: 100%;
+ }
+ }
+ @keyframes blink {
+ 50% {
+ border-color: transparent;
+ }
+ }
+
+ .typing-effect {
+ // font-family: monospace;
+ white-space: nowrap;
+ overflow: hidden;
+ display: inline-block;
+ // border-right: 3px solid;
+ width: 20ch; /* Adjust to fit text length */
+ animation: typing 7s steps(100) infinite;
+ }
+
+
.hero-background {
- background: linear-gradient(135deg, #2e3b8c, #6495ed, #ff7f50); /* Multi-color gradient */
- background-size: 300% 300%; /* Enlarges the background to create smooth transitions */
- animation: gradientAnimation 10s ease infinite; /* Infinite animation loop */
- }
+ background: linear-gradient(135deg, #000000, #1a1a1a, #6495ed);
+ background-size: 300% 300%;
+ animation: gradientAnimation 10s ease infinite;
+ }
+
+ /* Optional: Keep the animation definition if not already present */
+ @keyframes gradientAnimation {
+ 0% { background-position: 0% 50%; }
+ 50% { background-position: 100% 50%; }
+ 100% { background-position: 0% 50%; }
+ }
+
/* New hover effect for feature cards */
.card:hover {
- transform: scale(1.07);
- transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+ transform: scale(1.07) rotate(1deg); /* Slight rotation for a dynamic effect */
+ transition:
+ transform 0.4s ease-in-out,
+ box-shadow 0.4s ease-in-out,
+ background-color 0.4s ease-in-out;
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); /* Increased shadow intensity */
+ background-color: rgba(255, 255, 255, 0.9); /* Light tint on hover */
+ filter: brightness(1.1) contrast(1.05); /* Subtle brightness and contrast boost */
+ }
+
+ /* Optional Glow Effect for a More Eye-Catching Look */
+ .card:hover::after {
+ content: "";
+ position: absolute;
+ top: -5px;
+ left: -5px;
+ right: -5px;
+ bottom: -5px;
+ border-radius: 10px; /* Matches the card border radius */
+ box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); /* Glowing effect */
+ pointer-events: none; /* Ensures it doesn't block interaction */
}
/* New hover effect for hero section heading */
@@ -44,65 +95,62 @@ export function Home() {
/* New feature card style */
.feature-card {
- border: 2px solid transparent;
- background: linear-gradient(145deg, #ffffff, #f0f4f8); /* Light gradient background */
- padding: 20px;
- border-radius: 15px;
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 4px 15px rgba(100, 149, 237, 0.2); /* Double-layered shadow */
- transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
- box-shadow 0.4s cubic-bezier(0.19, 1, 0.22, 1),
- border 0.3s ease;
- position: relative;
- overflow: hidden; /* Hide decorative elements */
-}
+ border: 2px solid transparent;
+ background: linear-gradient(145deg, #ffffff, #f0f4f8);
+ padding: 20px;
+ border-radius: 15px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 4px 15px rgba(100, 149, 237, 0.2);
+ transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.4s cubic-bezier(0.19, 1, 0.22, 1), border 0.3s ease;
+ position: relative;
+ overflow: hidden;
+ }
-.feature-card::before {
- content: "";
- position: absolute;
- top: -50%;
- left: -50%;
- width: 200%;
- height: 200%;
- background: radial-gradient(circle, rgba(100, 149, 237, 0.2), rgba(0, 0, 0, 0));
- transform: scale(0);
- transition: transform 0.4s ease-in-out;
- z-index: 0;
-}
+ .feature-card::before {
+ content: "";
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle, rgba(100, 149, 237, 0.2), rgba(0, 0, 0, 0));
+ transform: scale(0);
+ transition: transform 0.4s ease-in-out;
+ z-index: 0;
+ }
-.feature-card:hover::before {
- transform: scale(1);
-}
+ .feature-card:hover::before {
+ transform: scale(1);
+ }
-.feature-card:hover {
- transform: translateY(-10px) scale(1.05); /* Slight lift effect */
- box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(100, 149, 237, 0.3); /* Enhanced shadow */
- border-color: #6495ed; /* Highlight border */
-}
+ .feature-card:hover {
+ transform: translateY(-10px) scale(1.05);
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(100, 149, 237, 0.3);
+ border-color: #6495ed;
+ }
-.feature-card h4 {
- font-size: 1.5rem;
- font-weight: 700;
- color: #6495ed; /* Accent color */
- margin-bottom: 10px;
- z-index: 1;
- position: relative;
-}
+ .feature-card h4 {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: #6495ed;
+ margin-bottom: 10px;
+ z-index: 1;
+ position: relative;
+ }
-.feature-card p {
- font-size: 1rem;
- color: #333333;
- z-index: 1;
- position: relative;
-}
+ .feature-card p {
+ font-size: 1rem;
+ color: #333333;
+ z-index: 1;
+ position: relative;
+ }
-.feature-card:hover h4 {
- color: #1e90ff; /* Subtle color shift on hover */
-}
-
-.feature-card:hover p {
- color: #555555; /* Slightly darker text */
-}
+ .feature-card:hover h4 {
+ color: #1e90ff;
+ }
+ .feature-card:hover p {
+ color: #555555;
+ }
/* New list style for features */
.feature-list {
@@ -116,56 +164,60 @@ export function Home() {
{/* Hero Section */}
-
-
-
+
+
+
-
- {/* Main Heading */}
-
- EXPERIENCE THE POWER OF
-
-
- SNIGDHA OS 🔥
-
+
+ {/* Main Heading */}
+
+ EXPERIENCE THE POWER OF
+
+
+ SNIGDHA OS 🔥
+
-
- Snigdha OS is a lightweight, Arch-based Linux distribution crafted for Penetration Testing 🛡️ , Ethical Hacking 🔍 , and general use. Power up your system with cutting-edge tools 🛠️ and enhanced security features 🔐💻.
-
+ {/* Tagline with Typing Effect */}
+
+ "Where Performance Meets Innovation ✨"
+
- {/* Call to Action Buttons */}
-
-
-
-
Download Now 🚀
-
+
+ Snigdha OS is a lightweight, Arch-based Linux distribution crafted for Penetration Testing 🛡️ , Ethical Hacking 🔍 , and general use. Power up your system with cutting-edge tools 🛠️ and enhanced security features 🔐💻.
+
-
-
-
Documentation 📚
-
+ {/* Call to Action Buttons */}
+
+
+
+ Download Now 🚀
+
-
-
- Community Forum 🌐
-
-
-
-
+
+
+
Documentation 📚
+
+
+
+
Community Forum 🌐
+
+
+
+
{/* Features Section */}