mirror of
https://github.com/Snigdha-OS/Snigdha-OS.github.io.git
synced 2025-09-05 20:26:43 +02:00
✨ style(change): content
This commit is contained in:
eshanized
@@ -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';
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -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 */}
|
||||
<section className="bg-gradient-to-r from-[#000000] to-[#6495ed] text-white py-20 relative overflow-hidden hero-background">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 text-center relative z-10">
|
||||
{/* Main Heading */}
|
||||
<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">
|
||||
SNIGDHA OS 🔥
|
||||
</h1>
|
||||
<div className="container mx-auto px-4 text-center relative z-10">
|
||||
{/* Main Heading */}
|
||||
<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">
|
||||
SNIGDHA OS 🔥
|
||||
</h1>
|
||||
|
||||
<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>
|
||||
{/* 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>
|
||||
|
||||
{/* Call to Action Buttons */}
|
||||
<div className="flex flex-wrap justify-center space-x-6 mt-6">
|
||||
<Link
|
||||
to="/download"
|
||||
className="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold transform hover:scale-105 hover:bg-white hover:text-[#6495ed] transition-all duration-300 inline-flex items-center space-x-3"
|
||||
>
|
||||
<Download className="h-5 w-5" />
|
||||
<span>Download Now 🚀</span>
|
||||
</Link>
|
||||
<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>
|
||||
|
||||
<Link
|
||||
to="https://snigdha-os.github.io/documentation/"
|
||||
className="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold transform hover:scale-105 hover:bg-white hover:text-[#6495ed] transition-all duration-300 inline-flex items-center space-x-3"
|
||||
>
|
||||
<Book className="h-5 w-5" />
|
||||
<span>Documentation 📚</span>
|
||||
</Link>
|
||||
{/* Call to Action Buttons */}
|
||||
<div className="flex flex-wrap justify-center space-x-6 mt-6">
|
||||
<Link
|
||||
to="/download"
|
||||
className="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold transform hover:scale-105 hover:bg-white hover:text-[#6495ed] transition-all duration-300 inline-flex items-center space-x-3"
|
||||
>
|
||||
<Download className="h-5 w-5" />
|
||||
<span>Download Now 🚀</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="https://forum.snigdha-os.org" // Replace with your community forum URL
|
||||
className="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold transform hover:scale-105 hover:bg-white hover:text-[#6495ed] transition-all duration-300 inline-flex items-center space-x-3"
|
||||
>
|
||||
<Users className="h-5 w-5" />
|
||||
<span>Community Forum 🌐</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<Link
|
||||
to="https://snigdha-os.github.io/documentation/"
|
||||
className="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold transform hover:scale-105 hover:bg-white hover:text-[#6495ed] transition-all duration-300 inline-flex items-center space-x-3"
|
||||
>
|
||||
<Book className="h-5 w-5" />
|
||||
<span>Documentation 📚</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="https://forum.snigdha-os.org" // Replace with your community forum URL
|
||||
className="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold transform hover:scale-105 hover:bg-white hover:text-[#6495ed] transition-all duration-300 inline-flex items-center space-x-3"
|
||||
>
|
||||
<Users className="h-5 w-5" />
|
||||
<span>Community Forum 🌐</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="py-16 bg-gradient-to-r from-[#f0f4f8] to-[#ffffff]">
|
||||
|
||||
Reference in New Issue
Block a user