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-06 12:45:18 +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 { HashRouter as Router, Routes, Route } from 'react-router-dom';
import { Layout } from './components/layout/Layout'; import { Layout } from './components/layout/Layout';
import { Home } from './pages/Home'; 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'; 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() { export function Donors() {
const donorUsernames = [
"eshanized", "GlobalSystemsLtd", "FutureComputingInc", "SarahJohnson", "MichaelChang",
"DataFlowSolutions", "RobertWilson", "EmmaThompson", "RajeshKumar", "PriyaSharma",
"AryanPatel", "MeenaIyer", "VikramSingh"
];
const donorData = useGitHubDonors(donorUsernames);
return ( return (
<div className="py-12"> <div className="py-12">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
{/* Hero Section */} {/* Hero Section */}
<section className="text-center mb-16"> <section className="text-center mb-16">
<Heart className="h-16 w-16 text-red-500 mx-auto mb-6" /> <Heart className="h-16 w-16 text-[#6495ed] mx-auto mb-6" />
<h1 className="text-4xl font-bold mb-6">Our Amazing Donors</h1> <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"> <p className="text-xl text-gray-600 max-w-3xl mx-auto">
Snigdha OS is made possible thanks to the generous support of our Snigdha OS is made possible thanks to the generous support of our donors. We are grateful for their contributions to keep our project running.
donors. We are grateful for their contributions to keep our project
running.
</p> </p>
</section> </section>
{/* Donation Tiers */} {/* Donor List */}
<section className="mb-16"> <section className="mb-16">
<h2 className="text-3xl font-bold mb-8 text-center"> <h2 className="text-3xl font-bold mb-8 text-center text-[#6495ed]">Donors List</h2>
<Trophy className="inline-block h-6 w-6 text-yellow-500 mr-2" />
Donation Tiers
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<DonationTier {donorUsernames.map((donor) => (
title="Platinum Donors" <div key={donor} className="flex items-center gap-4">
amount="₹500+" {donorData[donor]?.avatar_url ? (
icon={<Trophy className="h-6 w-6 text-gray-500" />} <img
color="bg-gradient-to-r from-gray-200 to-gray-100" src={donorData[donor].avatar_url}
donors={[ alt={donorData[donor].name}
"TechCorp International", className="h-12 w-12 rounded-full"
"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...",
]}
/> />
) : (
<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> </div>
</section> </section>
{/* Become a Donor */} {/* Become a Donor */}
<section className="bg-indigo-50 rounded-lg p-8 text-center"> <section className="bg-[#6495ed] rounded-lg p-8 text-center">
<h2 className="text-3xl font-bold mb-4"> <h2 className="text-3xl font-bold mb-4 text-white">
<FaRupeeSign className="inline-block h-6 w-6 text-green-500 mr-2" /> <FaRupeeSign className="inline-block h-6 w-6 text-green-500 mr-2" />
Become a Donor Become a Donor
</h2> </h2>
<p className="text-gray-600 mb-8 max-w-2xl mx-auto"> <p className="text-white mb-8 max-w-2xl mx-auto">
Your support helps us maintain and improve Snigdha OS. Every donation, Your support helps us maintain and improve Snigdha OS. Every donation, big or small, makes a difference in keeping our project independent and sustainable.
big or small, makes a difference in keeping our project independent and
sustainable.
</p> </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 Make a Donation
</button> </button>
</section> </section>
{/* Yearly Report */} {/* Yearly Report */}
<section className="mt-16"> <section className="mt-16">
<h2 className="text-3xl font-bold mb-8"> <h2 className="text-3xl font-bold mb-8 text-[#6495ed]">
<PieChart className="inline-block h-6 w-6 text-blue-500 mr-2" /> <PieChart className="inline-block h-6 w-6 text-[#6495ed] mr-2" />
Yearly Donation Report Yearly Donation Report
</h2> </h2>
<div className="bg-white rounded-lg shadow-lg p-8"> <div className="bg-white rounded-lg shadow-lg p-8">
@@ -95,25 +122,25 @@ export function Donors() {
averageDonation={1125} averageDonation={1125}
/> />
<div className="border-t pt-6"> <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"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<UsageCard <UsageCard
percentage={40} percentage={40}
category="Development" category="Development"
description="Supporting core developers and infrastructure" 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 <UsageCard
percentage={35} percentage={35}
category="Server Costs" category="Server Costs"
description="Maintaining mirrors and websites" 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 <UsageCard
percentage={25} percentage={25}
category="Community" category="Community"
description="Supporting community projects and events" 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>
</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 = { type YearlyStatsProps = {
month: string; month: string;
amount: number; amount: number;
@@ -171,7 +167,7 @@ function YearlyStats({
}: YearlyStatsProps) { }: YearlyStatsProps) {
return ( return (
<div> <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="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="bg-gray-50 p-4 rounded-lg"> <div className="bg-gray-50 p-4 rounded-lg">
<p className="text-sm text-gray-600">Total Donations</p> <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="bg-gray-50 p-4 rounded-lg">
<div className="flex items-center mb-2"> <div className="flex items-center mb-2">
{icon} {icon}
<span className="ml-2 text-xl font-semibold text-indigo-600"> <span className="ml-2 text-xl font-semibold text-[#6495ed]">
{percentage}% {percentage}%
</span> </span>
</div> </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> <p className="text-sm text-gray-600">{description}</p>
</div> </div>
); );

114
src/pages/Download.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'; 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() { export function DownloadPage() {
const [userLocation, setUserLocation] = useState<string | null>(null); const [userLocation, setUserLocation] = useState<string | null>(null);
@@ -56,7 +56,7 @@ export function DownloadPage() {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
{/* Hero Section */} {/* Hero Section */}
<section className="text-center mb-16"> <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 Download Snigdha OS
</h1> </h1>
<p className="text-xl text-gray-600 max-w-3xl mx-auto"> <p className="text-xl text-gray-600 max-w-3xl mx-auto">
@@ -66,9 +66,9 @@ export function DownloadPage() {
</p> </p>
<div className="mt-8 space-y-6"> <div className="mt-8 space-y-6">
<div className="flex justify-center items-center space-x-4"> <div className="flex justify-center items-center space-x-4">
<FeatureBadge color="indigo" text="Lightweight & Fast" /> <FeatureBadge color="#6495ed" text="Lightweight & Fast" />
<FeatureBadge color="indigo" text="Open Source & Free" /> <FeatureBadge color="#6495ed" text="Open Source & Free" />
<FeatureBadge color="indigo" text="Customizable & Secure" /> <FeatureBadge color="#6495ed" text="Customizable & Secure" />
</div> </div>
<p className="text-lg text-gray-700 max-w-4xl mx-auto"> <p className="text-lg text-gray-700 max-w-4xl mx-auto">
Snigdha OS is designed to provide an unparalleled experience, Snigdha OS is designed to provide an unparalleled experience,
@@ -89,7 +89,7 @@ export function DownloadPage() {
{/* System Requirements */} {/* System Requirements */}
<section className="mb-16"> <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 System Requirements
</h2> </h2>
<div className="rounded-lg p-10 shadow-lg"> <div className="rounded-lg p-10 shadow-lg">
@@ -139,7 +139,7 @@ export function DownloadPage() {
</div> </div>
{suggestedMirror && ( {suggestedMirror && (
<div className="mt-8 text-center"> <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 Suggested Mirror for You
</h3> </h3>
<MirrorButton {...suggestedMirror} /> <MirrorButton {...suggestedMirror} />
@@ -161,7 +161,7 @@ function FeatureBadge({
}) { }) {
return ( return (
<span <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} {text}
</span> </span>
@@ -186,11 +186,11 @@ function EditionCard({
return ( return (
<div <div
className={`bg-white rounded-lg shadow-lg p-8 relative ${ className={`bg-white rounded-lg shadow-lg p-8 relative ${
recommended ? 'border-2 border-indigo-500' : '' recommended ? 'border-2 border-[#6495ed]' : ''
}`} }`}
> >
{recommended && ( {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 Recommended
</div> </div>
)} )}
@@ -198,7 +198,7 @@ function EditionCard({
<h3 className="text-xl font-bold mb-2 text-center">{title}</h3> <h3 className="text-xl font-bold mb-2 text-center">{title}</h3>
<p className="text-gray-600 text-center mb-4">{description}</p> <p className="text-gray-600 text-center mb-4">{description}</p>
<div className="mb-4"> <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"> <ul className="list-disc list-inside text-gray-600 text-sm">
{keyFeatures.map((feature, index) => ( {keyFeatures.map((feature, index) => (
<li key={index}>{feature}</li> <li key={index}>{feature}</li>
@@ -206,11 +206,11 @@ function EditionCard({
</ul> </ul>
</div> </div>
<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> <p className="text-gray-600 text-sm">{idealFor}</p>
</div> </div>
<div className="flex justify-center mt-6"> <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" /> <DownloadIcon className="h-5 w-5" />
<span>Download</span> <span>Download</span>
</button> </button>
@@ -230,7 +230,7 @@ function SystemRequirements({
}) { }) {
return ( return (
<div className="bg-white rounded-lg p-6 shadow-xl hover:shadow-2xl transition-shadow"> <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"> <ul className="space-y-3 text-gray-700">
{specs.map((spec, index) => ( {specs.map((spec, index) => (
<li key={index}>{spec}</li> <li key={index}>{spec}</li>
@@ -263,7 +263,7 @@ function MirrorButton({
return ( return (
<a <a
href={url} 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="flex flex-col space-y-3">
<div className="text-center"> <div className="text-center">
@@ -273,11 +273,11 @@ function MirrorButton({
<div className="text-center"> <div className="text-center">
<span className={`font-semibold ${speedColor}`}>{speed}</span> <span className={`font-semibold ${speedColor}`}>{speed}</span>
</div> </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 Download
</button> </button>
{suggested && ( {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 Suggested Mirror
</div> </div>
)} )}
@@ -293,7 +293,7 @@ const editionData = [
description: 'Modern, innovative features while being traditional and familiar.', description: 'Modern, innovative features while being traditional and familiar.',
keyFeatures: ['Dynamic Workspaces', 'Extensible Extensions', 'Built-in Accessibility'], keyFeatures: ['Dynamic Workspaces', 'Extensible Extensions', 'Built-in Accessibility'],
idealFor: 'General users who prefer a sleek and functional desktop experience.', 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, recommended: true,
}, },
{ {
@@ -301,88 +301,42 @@ const editionData = [
description: 'Traditional desktop experience, highly stable and reliable.', description: 'Traditional desktop experience, highly stable and reliable.',
keyFeatures: ['Low Resource Usage', 'Consistent Workflow', 'Legacy Support'], keyFeatures: ['Low Resource Usage', 'Consistent Workflow', 'Legacy Support'],
idealFor: 'Users who value simplicity and reliability over modern features.', 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', title: 'Xfce Edition',
description: 'Lightweight and stable. Perfect for older computers.', description: 'Lightweight and stable. Perfect for older computers.',
keyFeatures: ['Minimal Resource Usage', 'Fast Boot Times', 'Highly Customizable'], keyFeatures: ['Minimal Resource Usage', 'Fast Boot Times', 'Highly Customizable'],
idealFor: 'Users with older hardware or those who need maximum performance.', 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', title: 'KDE Plasma Edition',
description: 'Customizable and visually stunning, perfect for power users.', description: 'Feature-rich, eye-catching, and offers tons of customization.',
keyFeatures: ['Advanced Widgets', 'Custom Themes', 'Built-in Productivity Apps'], keyFeatures: ['Cutting-edge Visuals', 'Full Customization', 'Highly Extensible'],
idealFor: 'Tech enthusiasts and power users who love customization.', idealFor: 'Power users who want control and beauty in equal measure.',
icon: <Code className="h-12 w-12 text-pink-600" />, icon: <Smartphone className="h-12 w-12 text-[#6495ed]" />,
},
{
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" />,
}, },
]; ];
// Mirrors Data // Example of mirrorData (you can add more mirrors as needed)
const mirrorData = [ const mirrorData = [
{ {
region: 'North America', region: 'North America (USA)',
speed: 'Fast',
host: 'MirrorHost USA',
url: '#',
},
{
region: 'Europe',
speed: 'Very Fast', speed: 'Very Fast',
host: 'EuroMirror DE', host: 'ExampleMirrorHost.com',
url: '#', url: 'https://example.com/download',
}, },
{ {
region: 'Asia', region: 'Europe (Germany)',
speed: 'Fast', speed: 'Fast',
host: 'AsiaNet JP', host: 'EU-Mirror.com',
url: '#', url: 'https://eu-mirror.com/download',
}, },
{ {
region: 'Australia', region: 'Asia (India)',
speed: 'Moderate', speed: 'Moderate',
host: 'AusSpeed AU', host: 'IN-Mirror.com',
url: '#', url: 'https://in-mirror.com/download',
},
{
region: 'South America',
speed: 'Moderate',
host: 'LATAM Mirror BR',
url: '#',
},
{
region: 'Africa',
speed: 'Fast',
host: 'Afrinet ZA',
url: '#',
}, },
]; ];

98
src/pages/Home.tsx
View File

@@ -21,18 +21,69 @@ export function Home() {
} }
} }
/* Hero Section with updated background */ /* Typing Effect for Hero Tagline */
.hero-background { @keyframes typing {
background: linear-gradient(135deg, #2e3b8c, #6495ed, #ff7f50); /* Multi-color gradient */ from {
background-size: 300% 300%; /* Enlarges the background to create smooth transitions */ width: 0;
animation: gradientAnimation 10s ease infinite; /* Infinite animation loop */
} }
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 */ /* New hover effect for feature cards */
.card:hover { .card:hover {
transform: scale(1.07); 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; transition:
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); 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 */ /* New hover effect for hero section heading */
@@ -45,15 +96,13 @@ export function Home() {
/* New feature card style */ /* New feature card style */
.feature-card { .feature-card {
border: 2px solid transparent; border: 2px solid transparent;
background: linear-gradient(145deg, #ffffff, #f0f4f8); /* Light gradient background */ background: linear-gradient(145deg, #ffffff, #f0f4f8);
padding: 20px; padding: 20px;
border-radius: 15px; 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 */ 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), 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.4s cubic-bezier(0.19, 1, 0.22, 1),
border 0.3s ease;
position: relative; position: relative;
overflow: hidden; /* Hide decorative elements */ overflow: hidden;
} }
.feature-card::before { .feature-card::before {
@@ -74,15 +123,15 @@ export function Home() {
} }
.feature-card:hover { .feature-card:hover {
transform: translateY(-10px) scale(1.05); /* Slight lift effect */ 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); /* Enhanced shadow */ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(100, 149, 237, 0.3);
border-color: #6495ed; /* Highlight border */ border-color: #6495ed;
} }
.feature-card h4 { .feature-card h4 {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
color: #6495ed; /* Accent color */ color: #6495ed;
margin-bottom: 10px; margin-bottom: 10px;
z-index: 1; z-index: 1;
position: relative; position: relative;
@@ -96,14 +145,13 @@ export function Home() {
} }
.feature-card:hover h4 { .feature-card:hover h4 {
color: #1e90ff; /* Subtle color shift on hover */ color: #1e90ff;
} }
.feature-card:hover p { .feature-card:hover p {
color: #555555; /* Slightly darker text */ color: #555555;
} }
/* New list style for features */ /* New list style for features */
.feature-list { .feature-list {
list-style-type: disc; list-style-type: disc;
@@ -129,10 +177,15 @@ export function Home() {
<h1 className="text-5xl font-extrabold mb-6 text-shadow-md leading-tight hero-heading"> <h1 className="text-5xl font-extrabold mb-6 text-shadow-md leading-tight hero-heading">
EXPERIENCE THE POWER OF EXPERIENCE THE POWER OF
</h1> </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 🔥 SNIGDHA OS 🔥
</h1> </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"> <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 🔐💻. 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> </p>
@@ -166,7 +219,6 @@ export function Home() {
</div> </div>
</section> </section>
{/* Features Section */} {/* Features Section */}
<section className="py-16 bg-gradient-to-r from-[#f0f4f8] to-[#ffffff]"> <section className="py-16 bg-gradient-to-r from-[#f0f4f8] to-[#ffffff]">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">