Snigdha-OS/Snigdha-OS.github.io
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/Snigdha-OS.github.io.git synced 2025-09-05 20:26:43 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ style(change): content

Browse Source
This commit is contained in:
eshanized
2024-12-23 10:11:28 +05:30
parent f4f540ae2f
commit 4eb1ddaddb
4 changed files with 283 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import { HashRouter as Router, Routes, Route } from 'react-router-dom';
import { Layout } from './components/layout/Layout';
import { Home } from './pages/Home';

186
src/pages/Donors.tsx
View File

@@ -1,89 +1,116 @@
import { Heart, Trophy, PieChart } from 'lucide-react';
import { useEffect, useState } from 'react';
import { Heart, PieChart } from 'lucide-react';
import { FaRupeeSign } from 'react-icons/fa';
async function getGitHubUserData(username: string): Promise<{ name: string; avatar_url: string }> {
try {
const response = await fetch(`https://api.github.com/users/${username}`);
if (!response.ok) {
throw new Error(`User not found: ${username}`);
}
const data = await response.json();
return {
name: data.name || username, // Use GitHub name or fallback to username
avatar_url: data.avatar_url || '',
};
} catch (error) {
console.error(error);
return { name: username, avatar_url: '' }; // Return username if there is an error
}
}
function useGitHubDonors(usernames: string[]): { [key: string]: { name: string; avatar_url: string } } {
const [donors, setDonors] = useState<{ [key: string]: { name: string; avatar_url: string } }>({});
useEffect(() => {
const fetchDonors = async () => {
const donorData: { [key: string]: { name: string; avatar_url: string } } = {};
for (let username of usernames) {
const data = await getGitHubUserData(username);
donorData[username] = data;
}
setDonors(donorData);
};
fetchDonors();
}, [usernames]);
return donors;
}
export function Donors() {
const donorUsernames = [
"eshanized", "GlobalSystemsLtd", "FutureComputingInc", "SarahJohnson", "MichaelChang",
"DataFlowSolutions", "RobertWilson", "EmmaThompson", "RajeshKumar", "PriyaSharma",
"AryanPatel", "MeenaIyer", "VikramSingh"
];
const donorData = useGitHubDonors(donorUsernames);
return (
<div className="py-12">
<div className="container mx-auto px-4">
{/* Hero Section */}
<section className="text-center mb-16">
<Heart className="h-16 w-16 text-red-500 mx-auto mb-6" />
<h1 className="text-4xl font-bold mb-6">Our Amazing Donors</h1>
<Heart className="h-16 w-16 text-[#6495ed] mx-auto mb-6" />
<h1 className="text-4xl font-bold mb-6 text-[#6495ed]">Our Amazing Donors</h1>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Snigdha OS is made possible thanks to the generous support of our
donors. We are grateful for their contributions to keep our project
running.
Snigdha OS is made possible thanks to the generous support of our donors. We are grateful for their contributions to keep our project running.
</p>
</section>
{/* Donation Tiers */}
{/* Donor List */}
<section className="mb-16">
<h2 className="text-3xl font-bold mb-8 text-center">
<Trophy className="inline-block h-6 w-6 text-yellow-500 mr-2" />
Donation Tiers
</h2>
<h2 className="text-3xl font-bold mb-8 text-center text-[#6495ed]">Donors List</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<DonationTier
title="Platinum Donors"
amount="₹500+"
icon={<Trophy className="h-6 w-6 text-gray-500" />}
color="bg-gradient-to-r from-gray-200 to-gray-100"
donors={[
"TechCorp International",
"Global Systems Ltd",
"Future Computing Inc",
]}
/>
<DonationTier
title="Gold Donors"
amount="₹100-₹499"
icon={<Trophy className="h-6 w-6 text-yellow-500" />}
color="bg-gradient-to-r from-yellow-100 to-yellow-50"
donors={[
"Sarah Johnson",
"Michael Chang",
"DataFlow Solutions",
"Robert Wilson",
"Emma Thompson",
]}
/>
<DonationTier
title="Silver Donors"
amount="$₹10-₹99"
icon={<Trophy className="h-6 w-6 text-gray-400" />}
color="bg-gradient-to-r from-gray-100 to-white"
donors={[
"Rajesh Kumar",
"Priya Sharma",
"Aryan Patel",
"Meena Iyer",
"Vikram Singh",
// "And many more...",
]}
{donorUsernames.map((donor) => (
<div key={donor} className="flex items-center gap-4">
{donorData[donor]?.avatar_url ? (
<img
src={donorData[donor].avatar_url}
alt={donorData[donor].name}
className="h-12 w-12 rounded-full"
/>
) : (
<div className="h-12 w-12 rounded-full bg-gray-300"></div> // Placeholder if no avatar
)}
<div>
<span className="font-semibold">{donorData[donor]?.name || donor}</span>
<br />
<span className="text-sm text-gray-500">
<a
href={`https://github.com/${donor}`}
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:underline"
>
@{donor}
</a>
</span>
</div>
</div>
))}
</div>
</section>
{/* Become a Donor */}
<section className="bg-indigo-50 rounded-lg p-8 text-center">
<h2 className="text-3xl font-bold mb-4">
<section className="bg-[#6495ed] rounded-lg p-8 text-center">
<h2 className="text-3xl font-bold mb-4 text-white">
<FaRupeeSign className="inline-block h-6 w-6 text-green-500 mr-2" />
Become a Donor
</h2>
<p className="text-gray-600 mb-8 max-w-2xl mx-auto">
Your support helps us maintain and improve Snigdha OS. Every donation,
big or small, makes a difference in keeping our project independent and
sustainable.
<p className="text-white mb-8 max-w-2xl mx-auto">
Your support helps us maintain and improve Snigdha OS. Every donation, big or small, makes a difference in keeping our project independent and sustainable.
</p>
<button className="bg-indigo-600 text-white px-8 py-3 rounded-[5px] hover:bg-indigo-700 transition-colors">
<button className="bg-[#6495ed] text-white px-8 py-3 rounded-[5px] hover:bg-[#6495ed] transition-colors">
Make a Donation
</button>
</section>
{/* Yearly Report */}
<section className="mt-16">
<h2 className="text-3xl font-bold mb-8">
<PieChart className="inline-block h-6 w-6 text-blue-500 mr-2" />
<h2 className="text-3xl font-bold mb-8 text-[#6495ed]">
<PieChart className="inline-block h-6 w-6 text-[#6495ed] mr-2" />
Yearly Donation Report
</h2>
<div className="bg-white rounded-lg shadow-lg p-8">
@@ -95,25 +122,25 @@ export function Donors() {
averageDonation={1125}
/>
<div className="border-t pt-6">
<h3 className="font-bold mb-4">How Donations Are Used</h3>
<h3 className="font-bold mb-4 text-[#6495ed]">How Donations Are Used</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<UsageCard
percentage={40}
category="Development"
description="Supporting core developers and infrastructure"
icon={<PieChart className="h-6 w-6 text-green-500" />}
icon={<PieChart className="h-6 w-6 text-[#6495ed]" />}
/>
<UsageCard
percentage={35}
category="Server Costs"
description="Maintaining mirrors and websites"
icon={<PieChart className="h-6 w-6 text-blue-500" />}
icon={<PieChart className="h-6 w-6 text-[#6495ed]" />}
/>
<UsageCard
percentage={25}
category="Community"
description="Supporting community projects and events"
icon={<PieChart className="h-6 w-6 text-indigo-500" />}
icon={<PieChart className="h-6 w-6 text-[#6495ed]" />}
/>
</div>
</div>
@@ -125,37 +152,6 @@ export function Donors() {
);
}
type DonationTierProps = {
title: string;
amount: string;
color: string;
icon: React.ReactNode;
donors: string[];
};
function DonationTier({
title,
amount,
color,
icon,
donors,
}: DonationTierProps) {
return (
<div className={`rounded-lg shadow-lg p-6 ${color}`}>
<h3 className="text-xl font-bold mb-2 flex items-center gap-2">
{icon}
{title}
</h3>
<p className="text-gray-600 mb-4">{amount}</p>
<ul className="space-y-2">
{donors.map((donor, index) => (
<li key={index} className="text-gray-700">{donor}</li>
))}
</ul>
</div>
);
}
type YearlyStatsProps = {
month: string;
amount: number;
@@ -171,7 +167,7 @@ function YearlyStats({
}: YearlyStatsProps) {
return (
<div>
<h3 className="font-bold text-xl mb-4">{month}</h3>
<h3 className="font-bold text-xl mb-4 text-[#6495ed]">{month}</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="bg-gray-50 p-4 rounded-lg">
<p className="text-sm text-gray-600">Total Donations</p>
@@ -207,11 +203,11 @@ function UsageCard({
<div className="bg-gray-50 p-4 rounded-lg">
<div className="flex items-center mb-2">
{icon}
<span className="ml-2 text-xl font-semibold text-indigo-600">
<span className="ml-2 text-xl font-semibold text-[#6495ed]">
{percentage}%
</span>
</div>
<h4 className="font-regular mb-1">{category}</h4>
<h4 className="font-regular mb-1 text-[#6495ed]">{category}</h4>
<p className="text-sm text-gray-600">{description}</p>
</div>
);

114
src/pages/Download.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { Download as DownloadIcon, Monitor, Server, HardDrive, Smartphone, Code } from 'lucide-react';
import { Download as DownloadIcon, Monitor, Server, HardDrive, Smartphone } from 'lucide-react';
export function DownloadPage() {
const [userLocation, setUserLocation] = useState<string | null>(null);
@@ -56,7 +56,7 @@ export function DownloadPage() {
<div className="container mx-auto px-4">
{/* Hero Section */}
<section className="text-center mb-16">
<h1 className="text-4xl font-bold mb-6 text-indigo-600">
<h1 className="text-4xl font-bold mb-6 text-[#6495ed]">
Download Snigdha OS
</h1>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
@@ -66,9 +66,9 @@ export function DownloadPage() {
</p>
<div className="mt-8 space-y-6">
<div className="flex justify-center items-center space-x-4">
<FeatureBadge color="indigo" text="Lightweight & Fast" />
<FeatureBadge color="indigo" text="Open Source & Free" />
<FeatureBadge color="indigo" text="Customizable & Secure" />
<FeatureBadge color="#6495ed" text="Lightweight & Fast" />
<FeatureBadge color="#6495ed" text="Open Source & Free" />
<FeatureBadge color="#6495ed" text="Customizable & Secure" />
</div>
<p className="text-lg text-gray-700 max-w-4xl mx-auto">
Snigdha OS is designed to provide an unparalleled experience,
@@ -89,7 +89,7 @@ export function DownloadPage() {
{/* System Requirements */}
<section className="mb-16">
<h2 className="text-3xl font-bold text-center mb-8 text-indigo-600">
<h2 className="text-3xl font-bold text-center mb-8 text-[#6495ed]">
System Requirements
</h2>
<div className="rounded-lg p-10 shadow-lg">
@@ -139,7 +139,7 @@ export function DownloadPage() {
</div>
{suggestedMirror && (
<div className="mt-8 text-center">
<h3 className="text-2xl font-bold text-indigo-600">
<h3 className="text-2xl font-bold text-[#6495ed]">
Suggested Mirror for You
</h3>
<MirrorButton {...suggestedMirror} />
@@ -161,7 +161,7 @@ function FeatureBadge({
}) {
return (
<span
className={`inline-block px-4 py-2 text-sm bg-${color}-600 text-white rounded-[5px] shadow-md`}
className={`inline-block px-4 py-2 text-sm bg-[${color}] text-white rounded-[5px] shadow-md`}
>
{text}
</span>
@@ -186,11 +186,11 @@ function EditionCard({
return (
<div
className={`bg-white rounded-lg shadow-lg p-8 relative ${
recommended ? 'border-2 border-indigo-500' : ''
recommended ? 'border-2 border-[#6495ed]' : ''
}`}
>
{recommended && (
<div className="absolute top-4 right-4 bg-indigo-500 text-white px-2 py-1 rounded-[5px] text-sm">
<div className="absolute top-4 right-4 bg-[#6495ed] text-white px-2 py-1 rounded-[5px] text-sm">
Recommended
</div>
)}
@@ -198,7 +198,7 @@ function EditionCard({
<h3 className="text-xl font-bold mb-2 text-center">{title}</h3>
<p className="text-gray-600 text-center mb-4">{description}</p>
<div className="mb-4">
<h4 className="text-sm font-bold text-indigo-600">Key Features:</h4>
<h4 className="text-sm font-bold text-[#6495ed]">Key Features:</h4>
<ul className="list-disc list-inside text-gray-600 text-sm">
{keyFeatures.map((feature, index) => (
<li key={index}>{feature}</li>
@@ -206,11 +206,11 @@ function EditionCard({
</ul>
</div>
<div>
<h4 className="text-sm font-bold text-indigo-600">Ideal For:</h4>
<h4 className="text-sm font-bold text-[#6495ed]">Ideal For:</h4>
<p className="text-gray-600 text-sm">{idealFor}</p>
</div>
<div className="flex justify-center mt-6">
<button className="flex items-center space-x-2 bg-indigo-600 text-white px-6 py-2 rounded-[5px] hover:bg-indigo-700 transition-colors">
<button className="flex items-center space-x-2 bg-[#6495ed] text-white px-6 py-2 rounded-[5px] hover:bg-[#4169e1] transition-colors">
<DownloadIcon className="h-5 w-5" />
<span>Download</span>
</button>
@@ -230,7 +230,7 @@ function SystemRequirements({
}) {
return (
<div className="bg-white rounded-lg p-6 shadow-xl hover:shadow-2xl transition-shadow">
<h3 className="text-xl font-bold text-indigo-600">{title}</h3>
<h3 className="text-xl font-bold text-[#6495ed]">{title}</h3>
<ul className="space-y-3 text-gray-700">
{specs.map((spec, index) => (
<li key={index}>{spec}</li>
@@ -263,7 +263,7 @@ function MirrorButton({
return (
<a
href={url}
className={`block bg-white rounded-lg shadow hover:shadow-lg transition-shadow p-6 border border-gray-200 ${suggested ? 'border-2 border-indigo-500 bg-indigo-100' : ''}`}
className={`block bg-white rounded-lg shadow hover:shadow-lg transition-shadow p-6 border border-gray-200 ${suggested ? 'border-2 border-[#6495ed] bg-[#e6f0ff]' : ''}`}
>
<div className="flex flex-col space-y-3">
<div className="text-center">
@@ -273,11 +273,11 @@ function MirrorButton({
<div className="text-center">
<span className={`font-semibold ${speedColor}`}>{speed}</span>
</div>
<button className="bg-indigo-600 text-white py-2 px-4 rounded-lg">
<button className="bg-[#6495ed] text-white py-2 px-4 rounded-lg">
Download
</button>
{suggested && (
<div className="absolute top-2 right-2 bg-indigo-600 text-white text-sm px-2 py-1 rounded-lg">
<div className="absolute top-2 right-2 bg-[#6495ed] text-white text-sm px-2 py-1 rounded-lg">
Suggested Mirror
</div>
)}
@@ -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: <Monitor className="h-12 w-12 text-indigo-600" />,
icon: <Monitor className="h-12 w-12 text-[#6495ed]" />,
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: <Server className="h-12 w-12 text-blue-600" />,
icon: <Server className="h-12 w-12 text-[#6495ed]" />,
},
{
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: <HardDrive className="h-12 w-12 text-purple-600" />,
icon: <HardDrive className="h-12 w-12 text-[#6495ed]" />,
},
{
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: <Code className="h-12 w-12 text-pink-600" />,
},
{
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: <Code className="h-12 w-12 text-gray-600" />,
},
{
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: <Smartphone className="h-12 w-12 text-teal-600" />,
},
{
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: <Server className="h-12 w-12 text-orange-600" />,
},
{
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: <Monitor className="h-12 w-12 text-red-600" />,
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: <Smartphone className="h-12 w-12 text-[#6495ed]" />,
},
];
// 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',
},
];

130
src/pages/Home.tsx
View File

@@ -21,18 +21,69 @@ export function Home() {
}
}
/* Hero Section with updated background */
.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 */
/* 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, #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 */
@@ -45,18 +96,16 @@ export function Home() {
/* New feature card style */
.feature-card {
border: 2px solid transparent;
background: linear-gradient(145deg, #ffffff, #f0f4f8); /* Light gradient background */
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); /* 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;
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; /* Hide decorative elements */
}
overflow: hidden;
}
.feature-card::before {
.feature-card::before {
content: "";
position: absolute;
top: -50%;
@@ -67,42 +116,41 @@ export function Home() {
transform: scale(0);
transition: transform 0.4s ease-in-out;
z-index: 0;
}
}
.feature-card:hover::before {
.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 {
.feature-card h4 {
font-size: 1.5rem;
font-weight: 700;
color: #6495ed; /* Accent color */
color: #6495ed;
margin-bottom: 10px;
z-index: 1;
position: relative;
}
}
.feature-card p {
.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 {
@@ -129,10 +177,15 @@ export function Home() {
<h1 className="text-5xl font-extrabold mb-6 text-shadow-md leading-tight hero-heading">
EXPERIENCE THE POWER OF
</h1>
<h1 className="text-5xl font-extrabold mb-6 text-shadow-md leading-tight hero-heading transform hover:text-white transition-all duration-300">
<h1 className="text-5xl font-extrabold mb-6 text-shadow-md leading-tight hero-heading">
SNIGDHA OS 🔥
</h1>
{/* Tagline with Typing Effect */}
<h2 className="text-2xl font-semibold mb-8 max-w-3xl mx-auto text-shadow-lg text-center">
<span className="typing-effect">"Where Performance Meets Innovation ✨"</span>
</h2>
<p className="text-xl mb-8 max-w-3xl mx-auto text-shadow-lg text-justify">
Snigdha OS is a lightweight, Arch-based Linux distribution crafted for <strong>Penetration Testing 🛡️</strong>, <strong>Ethical Hacking 🔍</strong>, and general use. Power up your system with cutting-edge tools 🛠️ and enhanced security features 🔐💻.
</p>
@@ -164,8 +217,7 @@ export function Home() {
</Link>
</div>
</div>
</section>
</section>
{/* Features Section */}
<section className="py-16 bg-gradient-to-r from-[#f0f4f8] to-[#ffffff]">