mirror of
https://github.com/Snigdha-OS/Snigdha-OS.github.io.git
synced 2025-09-16 17:45:01 +02:00
🚀 feat(_route): add dev to origin
This commit is contained in:
eshanized
375
src/pages/About.tsx
Normal file
375
src/pages/About.tsx
Normal file
@@ -0,0 +1,375 @@
|
||||
import React, { useEffect, useState } from "react"; // Importing React, the useEffect hook for side effects, and useState hook for managing component state.
|
||||
import { Heart, Users, Shield, Package, Coffee } from "lucide-react"; // Importing icons from the `lucide-react` library for use in UI components.
|
||||
|
||||
interface TeamMember {
|
||||
// Defining a TypeScript interface to describe the structure of team member data.
|
||||
login: string; // GitHub username.
|
||||
avatar_url: string; // URL to the user's avatar image.
|
||||
html_url: string; // URL to the user's GitHub profile.
|
||||
name: string; // User's name.
|
||||
bio: string; // User's bio or description.
|
||||
location: string; // User's location.
|
||||
company: string; // User's associated company or organization.
|
||||
}
|
||||
|
||||
export function About() {
|
||||
const [teamMembers, setTeamMembers] = useState<TeamMember[]>([]);
|
||||
// Initializing `teamMembers` state as an empty array to store the team member details.
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
// `loading` state is used to track whether the data fetching process is ongoing.
|
||||
|
||||
useEffect(() => {
|
||||
// useEffect is a React hook that runs a side effect (in this case, fetching data) after the component renders.
|
||||
|
||||
const fetchTeamMembers = async () => {
|
||||
// Declaring an asynchronous function to fetch team member data.
|
||||
try {
|
||||
// Starting the `try` block to handle potential errors during the API requests.
|
||||
|
||||
// List of GitHub usernames of the team members.
|
||||
const teamUsernames = [
|
||||
"eshanized",
|
||||
"d3v1l0n",
|
||||
"iconized",
|
||||
"alokified",
|
||||
"utkrshift",
|
||||
];
|
||||
|
||||
// Mapping over the array of usernames and creating an array of fetch promises.
|
||||
const fetchProfiles = teamUsernames.map(async (username) => {
|
||||
// `fetch` sends an HTTP GET request to the GitHub API for each username.
|
||||
const response = await fetch(`https://api.github.com/users/${username}`);
|
||||
if (!response.ok) {
|
||||
// If the HTTP response status is not OK (e.g., 404 or 500), throw an error.
|
||||
throw new Error(`Failed to fetch data for ${username}`);
|
||||
}
|
||||
return await response.json(); // Parse the JSON response and return the data.
|
||||
});
|
||||
|
||||
const teamData = await Promise.all(fetchProfiles);
|
||||
// `Promise.all` waits for all fetch requests to resolve, resulting in an array of user data.
|
||||
|
||||
setTeamMembers(teamData);
|
||||
// Update the `teamMembers` state with the fetched data.
|
||||
} catch (error) {
|
||||
// Handle any errors that occurred during the fetch process.
|
||||
console.error("Error fetching team members:", error); // Log the error for debugging purposes.
|
||||
} finally {
|
||||
setLoading(false);
|
||||
// Set the `loading` state to false, indicating that the fetch process is complete.
|
||||
}
|
||||
};
|
||||
|
||||
fetchTeamMembers();
|
||||
// Call the `fetchTeamMembers` function when the component mounts.
|
||||
}, []);
|
||||
// The empty dependency array `[]` ensures this effect runs only once when the component mounts.
|
||||
|
||||
|
||||
return (
|
||||
<div className="py-16 bg-gradient-to-b from-[#F7F9FC] to-[#E6EBF1]">
|
||||
<div className="container mx-auto px-4">
|
||||
|
||||
{/* Mission Section */}
|
||||
<section className="mb-16 text-center bg-gradient-to-r from-[#6495ed] via-[#85b1f3] to-[#eaf3fc] py-16 rounded-lg shadow-lg">
|
||||
<div className="container mx-auto px-4">
|
||||
<h1 className="text-5xl font-extrabold mb-6 text-white drop-shadow-lg">
|
||||
About <span className="text-[#eaf3fc]">Snigdha OS</span>
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-white max-w-3xl mx-auto leading-relaxed">
|
||||
Snigdha OS is a modern, elegant, and efficient Linux distribution designed to be lightweight and
|
||||
developer-friendly. Built on Arch Linux with the Zen kernel, it offers a powerful and secure platform
|
||||
for both personal use and penetration testing.
|
||||
</p>
|
||||
<div className="mt-8">
|
||||
<a
|
||||
href="#features"
|
||||
className="inline-block px-8 py-3 text-lg font-semibold bg-white text-[#6495ed] rounded-full shadow-md hover:bg-[#f0f4f8] hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-extrabold text-[#6495ed] mb-8 text-center">Key Features</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<FeatureCard
|
||||
icon={<Package className="h-12 w-12 text-teal-500 transition-transform transform hover:scale-110" />}
|
||||
title="Fast & Lightweight"
|
||||
description="Snigdha OS is designed to run efficiently on both older hardware and modern systems, ensuring excellent performance with minimal resource usage."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Shield className="h-12 w-12 text-green-500 transition-transform transform hover:scale-110" />}
|
||||
title="Security First"
|
||||
description="Snigdha OS focuses on providing robust security with regular updates, patches, and user privacy as top priorities."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Coffee className="h-12 w-12 text-yellow-500 transition-transform transform hover:scale-110" />}
|
||||
title="Developer Friendly"
|
||||
description="Packed with a rich set of tools for developers, Snigdha OS ensures smooth development and testing, especially in security-related tasks."
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Values Section */}
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-extrabold text-[#6495ed] mb-8 text-center">Our Core Values</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<ValueCard
|
||||
icon={<Heart className="h-12 w-12 text-red-500 transition-transform transform hover:scale-110" />}
|
||||
title="Passion for Open Source"
|
||||
description="Our community-driven approach means that Snigdha OS is constantly evolving, with contributions from developers and users worldwide."
|
||||
/>
|
||||
<ValueCard
|
||||
icon={<Users className="h-12 w-12 text-blue-500 transition-transform transform hover:scale-110" />}
|
||||
title="Community Empowerment"
|
||||
description="We believe in empowering the community by encouraging collaboration, innovation, and open dialogue around the development of Snigdha OS."
|
||||
/>
|
||||
<ValueCard
|
||||
icon={<Shield className="h-12 w-12 text-green-500 transition-transform transform hover:scale-110" />}
|
||||
title="Security & Privacy"
|
||||
description="Snigdha OS is built with the philosophy of safeguarding user data and ensuring that privacy remains a top priority."
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Roadmap Section */}
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-extrabold text-[#6495ed] mb-8 text-center">Roadmap</h2>
|
||||
<div className="space-y-6">
|
||||
<TimelineItem
|
||||
year="Q1 2025"
|
||||
title="User Interface Overhaul"
|
||||
description="Introducing a more intuitive and modern user interface with customizable features."
|
||||
/>
|
||||
<TimelineItem
|
||||
year="Q2 2025"
|
||||
title="Security Enhancements"
|
||||
description="Improving system-level security, including advanced encryption support and better intrusion detection mechanisms."
|
||||
/>
|
||||
<TimelineItem
|
||||
year="Q3 2025"
|
||||
title="Developer Tools Expansion"
|
||||
description="Snigdha OS will include more developer tools, including cloud-based IDEs and enhanced testing environments for penetration testers."
|
||||
/>
|
||||
<TimelineItem
|
||||
year="Q4 2025"
|
||||
title="More Community Contributions"
|
||||
description="Increasing community-driven contributions with better documentation and support for new architectures."
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contribution Guidelines Section */}
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-extrabold text-[#6495ed] mb-8 text-center">How You Can Contribute</h2>
|
||||
<div className="text-center max-w-3xl mx-auto text-lg text-gray-600 mb-8">
|
||||
<p>
|
||||
Whether you are a developer, designer, or simply passionate about Snigdha OS, there are many ways you can help the project grow. Contribute code, submit bug reports, or help improve the documentation.
|
||||
</p>
|
||||
<a
|
||||
href="https://github.com/Snigdha-OS/Snigdha-OS"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-4 inline-block px-6 py-3 bg-[#6495ed] text-white text-lg font-semibold rounded-lg hover:bg-[#5a82cc]"
|
||||
>
|
||||
View Contribution Guidelines
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Success Stories Section */}
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-extrabold text-[#6495ed] mb-8 text-center">Success Stories</h2>
|
||||
<div className="space-y-8">
|
||||
<SuccessStory
|
||||
title="A Developer's Dream"
|
||||
description="Alex, a full-stack developer, shares how Snigdha OS transformed their workflow, offering a fast and secure environment to write code and run tests."
|
||||
link="https://github.com/alexdev"
|
||||
/>
|
||||
<SuccessStory
|
||||
title="In the Classroom"
|
||||
description="Local schools have adopted Snigdha OS to give students an affordable, powerful, and secure OS for their coding and programming classes."
|
||||
link="https://github.com/education-department"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Community & Resources Section */}
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-extrabold text-[#6495ed] mb-8 text-center">Community & Resources</h2>
|
||||
<div className="text-center max-w-2xl mx-auto text-lg text-gray-600 mb-8">
|
||||
<p>
|
||||
Join the Snigdha OS community to stay updated, contribute, and collaborate on new features. You can connect with us through our forums and GitHub.
|
||||
</p>
|
||||
<div className="flex justify-center gap-8 mt-6">
|
||||
<a
|
||||
href="https://github.com/Snigdha-OS"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[#6495ed] hover:text-[#5a82cc]"
|
||||
>
|
||||
GitHub Repository
|
||||
</a>
|
||||
<a
|
||||
href="https://www.snigdhaos.com/community"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[#6495ed] hover:text-[#5a82cc]"
|
||||
>
|
||||
Community Forum
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Leadership Team Section */}
|
||||
<section>
|
||||
<h2 className="text-3xl font-extrabold text-[#6495ed] mb-8 text-center">
|
||||
Meet the Leadership Team
|
||||
</h2>
|
||||
{loading ? (
|
||||
<p className="text-center text-gray-600">Loading team members...</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{teamMembers.map((member) => (
|
||||
<TeamMemberCard
|
||||
key={member.login}
|
||||
name={member.name || member.login}
|
||||
image={member.avatar_url}
|
||||
profileUrl={member.html_url}
|
||||
bio={member.bio || "Passionate about Linux and open-source software."}
|
||||
location={member.location || "India"}
|
||||
company={member.company || "TONMOY INFRASTRUCTURE"}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FeatureCard({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="text-center p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow transform hover:scale-105 hover:bg-gray-50">
|
||||
<div className="flex justify-center mb-4">{icon}</div>
|
||||
<h3 className="text-xl font-semibold text-[#6495ed] mb-2">{title}</h3>
|
||||
<p className="text-gray-700">{description}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ValueCard({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="text-center p-6 bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow transform hover:scale-105 hover:bg-gray-50">
|
||||
<div className="flex justify-center mb-4">{icon}</div>
|
||||
<h3 className="text-xl font-semibold text-[#6495ed] mb-2">{title}</h3>
|
||||
<p className="text-gray-700">{description}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SuccessStory({
|
||||
title,
|
||||
description,
|
||||
link,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
link: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
|
||||
<h3 className="text-2xl font-semibold text-[#6495ed]">{title}</h3>
|
||||
<p className="text-gray-700 my-4">{description}</p>
|
||||
<a
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[#6495ed] hover:text-[#5a82cc]"
|
||||
>
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TimelineItem({
|
||||
year,
|
||||
title,
|
||||
description,
|
||||
}: {
|
||||
year: string;
|
||||
title: string;
|
||||
description: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex">
|
||||
<div className="w-24 font-semibold text-green-600">{year}</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-1 text-[#6495ed]">{title}</h3>
|
||||
<p className="text-gray-700">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TeamMemberCard({
|
||||
name,
|
||||
image,
|
||||
profileUrl,
|
||||
bio,
|
||||
location,
|
||||
company,
|
||||
}: {
|
||||
name: string;
|
||||
image: string;
|
||||
profileUrl: string;
|
||||
bio: string;
|
||||
location: string;
|
||||
company: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="text-center bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transition-shadow transform hover:scale-105">
|
||||
<img
|
||||
src={image}
|
||||
alt={name}
|
||||
className="w-32 h-32 rounded-full mx-auto mb-4 object-cover border-4 border-[#6495ed]"
|
||||
/>
|
||||
<h3 className="font-semibold text-lg text-gray-800 mb-2">{name}</h3>
|
||||
<p className="text-gray-600 text-sm">{bio}</p>
|
||||
<p className="text-gray-500 text-sm mt-2">{location}</p>
|
||||
<p className="text-gray-500 text-sm mt-1">{company}</p>
|
||||
<a
|
||||
href={profileUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[#6495ed] hover:text-[#5a82cc] mt-2 inline-block"
|
||||
>
|
||||
View Profile
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
218
src/pages/Donors.tsx
Normal file
218
src/pages/Donors.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
import { Heart, Trophy, PieChart } from 'lucide-react';
|
||||
import { FaRupeeSign } from 'react-icons/fa';
|
||||
|
||||
export function Donors() {
|
||||
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>
|
||||
<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.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Donation Tiers */}
|
||||
<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>
|
||||
<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...",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Become a Donor */}
|
||||
<section className="bg-indigo-50 rounded-lg p-8 text-center">
|
||||
<h2 className="text-3xl font-bold mb-4">
|
||||
<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>
|
||||
<button className="bg-indigo-600 text-white px-8 py-3 rounded-[5px] hover:bg-indigo-700 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" />
|
||||
Yearly Donation Report
|
||||
</h2>
|
||||
<div className="bg-white rounded-lg shadow-lg p-8">
|
||||
<div className="space-y-6">
|
||||
<YearlyStats
|
||||
month="Year - 2024"
|
||||
amount={15750}
|
||||
donors={14}
|
||||
averageDonation={1125}
|
||||
/>
|
||||
<div className="border-t pt-6">
|
||||
<h3 className="font-bold mb-4">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" />}
|
||||
/>
|
||||
<UsageCard
|
||||
percentage={35}
|
||||
category="Server Costs"
|
||||
description="Maintaining mirrors and websites"
|
||||
icon={<PieChart className="h-6 w-6 text-blue-500" />}
|
||||
/>
|
||||
<UsageCard
|
||||
percentage={25}
|
||||
category="Community"
|
||||
description="Supporting community projects and events"
|
||||
icon={<PieChart className="h-6 w-6 text-indigo-500" />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
donors: number;
|
||||
averageDonation: number;
|
||||
};
|
||||
|
||||
function YearlyStats({
|
||||
month,
|
||||
amount,
|
||||
donors,
|
||||
averageDonation,
|
||||
}: YearlyStatsProps) {
|
||||
return (
|
||||
<div>
|
||||
<h3 className="font-bold text-xl mb-4">{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>
|
||||
<p className="text-2xl font-bold">₹{amount.toLocaleString()}</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<p className="text-sm text-gray-600">Number of Donors</p>
|
||||
<p className="text-2xl font-bold">{donors}</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<p className="text-sm text-gray-600">Average Donation</p>
|
||||
<p className="text-2xl font-bold">₹{averageDonation}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type UsageCardProps = {
|
||||
percentage: number;
|
||||
category: string;
|
||||
description: string;
|
||||
icon: React.ReactNode;
|
||||
};
|
||||
|
||||
function UsageCard({
|
||||
percentage,
|
||||
category,
|
||||
description,
|
||||
icon,
|
||||
}: UsageCardProps) {
|
||||
return (
|
||||
<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">
|
||||
{percentage}%
|
||||
</span>
|
||||
</div>
|
||||
<h4 className="font-regular mb-1">{category}</h4>
|
||||
<p className="text-sm text-gray-600">{description}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
388
src/pages/Download.tsx
Normal file
388
src/pages/Download.tsx
Normal file
@@ -0,0 +1,388 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Download as DownloadIcon, Monitor, Server, HardDrive, Smartphone, Code } from 'lucide-react';
|
||||
|
||||
export function DownloadPage() {
|
||||
const [userLocation, setUserLocation] = useState<string | null>(null);
|
||||
const [userRegion, setUserRegion] = useState<string | null>(null);
|
||||
|
||||
// Detect user location using a public API
|
||||
useEffect(() => {
|
||||
async function fetchLocation() {
|
||||
try {
|
||||
const response = await fetch('https://ipapi.co/json/');
|
||||
const data = await response.json();
|
||||
setUserLocation(`${data.city}, ${data.country}`);
|
||||
setUserRegion(data.country); // Store the user's country or region
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch user location:', error);
|
||||
setUserLocation(null);
|
||||
setUserRegion(null);
|
||||
}
|
||||
}
|
||||
fetchLocation();
|
||||
}, []);
|
||||
|
||||
// Find the closest mirror based on the user's region
|
||||
const getSuggestedMirror = () => {
|
||||
if (!userRegion) return null; // If region is not detected, return null
|
||||
|
||||
// Normalize userRegion to handle cases like "United States" vs. "USA"
|
||||
const regionMap: { [key: string]: string } = {
|
||||
"united states": "north america",
|
||||
"canada": "north america",
|
||||
"brazil": "south america",
|
||||
"argentina": "south america",
|
||||
"germany": "europe",
|
||||
"france": "europe",
|
||||
"india": "asia",
|
||||
"japan": "asia",
|
||||
"south africa": "africa",
|
||||
"australia": "australia",
|
||||
};
|
||||
|
||||
// Lowercase the userRegion for more lenient matching
|
||||
const normalizedRegion = regionMap[userRegion.toLowerCase()] || userRegion.toLowerCase();
|
||||
|
||||
// Find the closest mirror based on the user's region
|
||||
return mirrorData.find((mirror) =>
|
||||
mirror.region.toLowerCase().includes(normalizedRegion)
|
||||
);
|
||||
};
|
||||
|
||||
const suggestedMirror = getSuggestedMirror();
|
||||
|
||||
return (
|
||||
<div className="py-12">
|
||||
<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">
|
||||
Download Snigdha OS
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Choose the edition that best suits your needs. All versions are free
|
||||
to download and use, providing the best experience for developers,
|
||||
students, and professionals alike.
|
||||
</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" />
|
||||
</div>
|
||||
<p className="text-lg text-gray-700 max-w-4xl mx-auto">
|
||||
Snigdha OS is designed to provide an unparalleled experience,
|
||||
whether you're working on an older device or a high-end system.
|
||||
Built with efficiency, reliability, and beauty in mind, it’s
|
||||
perfect for home users, professionals, and enterprises. Download
|
||||
today to unlock the full potential of your hardware.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Edition Cards */}
|
||||
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mb-16">
|
||||
{editionData.map((edition, index) => (
|
||||
<EditionCard key={index} {...edition} />
|
||||
))}
|
||||
</section>
|
||||
|
||||
{/* System Requirements */}
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-center mb-8 text-indigo-600">
|
||||
System Requirements
|
||||
</h2>
|
||||
<div className="rounded-lg p-10 shadow-lg">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
<SystemRequirements
|
||||
title="Minimum Requirements"
|
||||
specs={[
|
||||
'2GB RAM (4GB recommended)',
|
||||
'20GB of disk space (100GB recommended)',
|
||||
'1024×768 resolution',
|
||||
]}
|
||||
notes="These are the minimum requirements to run Snigdha OS smoothly. For basic tasks such as web browsing, office applications, and media playback, this setup is sufficient."
|
||||
/>
|
||||
<SystemRequirements
|
||||
title="Recommended Requirements"
|
||||
specs={[
|
||||
'4GB RAM or more',
|
||||
'100GB of disk space or more',
|
||||
'1920×1080 resolution or higher',
|
||||
]}
|
||||
notes="These specifications provide an optimal experience, enabling smooth performance for multitasking, using modern applications, and running resource-intensive tasks like video editing or gaming."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Download Mirrors */}
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-center mb-8">
|
||||
Download Mirrors
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 text-center mb-6 max-w-2xl mx-auto">
|
||||
Select a mirror closest to your location for faster download speeds.{' '}
|
||||
<br />
|
||||
{userLocation ? (
|
||||
<span className="text-gray-600 font-regular">
|
||||
Your detected location: <span className="text-green-600 font-bold">{userLocation}</span>
|
||||
</span>
|
||||
) : (
|
||||
<span>Detecting your location...</span>
|
||||
)}
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{mirrorData.map((mirror, index) => (
|
||||
<MirrorButton key={index} {...mirror} />
|
||||
))}
|
||||
</div>
|
||||
{suggestedMirror && (
|
||||
<div className="mt-8 text-center">
|
||||
<h3 className="text-2xl font-bold text-indigo-600">
|
||||
Suggested Mirror for You
|
||||
</h3>
|
||||
<MirrorButton {...suggestedMirror} />
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Components
|
||||
function FeatureBadge({
|
||||
color,
|
||||
text,
|
||||
}: {
|
||||
color: string;
|
||||
text: string;
|
||||
}) {
|
||||
return (
|
||||
<span
|
||||
className={`inline-block px-4 py-2 text-sm bg-${color}-600 text-white rounded-[5px] shadow-md`}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function EditionCard({
|
||||
title,
|
||||
description,
|
||||
keyFeatures,
|
||||
idealFor,
|
||||
icon,
|
||||
recommended,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
keyFeatures: string[];
|
||||
idealFor: string;
|
||||
icon: React.ReactNode;
|
||||
recommended?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`bg-white rounded-lg shadow-lg p-8 relative ${
|
||||
recommended ? 'border-2 border-indigo-500' : ''
|
||||
}`}
|
||||
>
|
||||
{recommended && (
|
||||
<div className="absolute top-4 right-4 bg-indigo-500 text-white px-2 py-1 rounded-[5px] text-sm">
|
||||
Recommended
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-center mb-4">{icon}</div>
|
||||
<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>
|
||||
<ul className="list-disc list-inside text-gray-600 text-sm">
|
||||
{keyFeatures.map((feature, index) => (
|
||||
<li key={index}>{feature}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-indigo-600">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">
|
||||
<DownloadIcon className="h-5 w-5" />
|
||||
<span>Download</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SystemRequirements({
|
||||
title,
|
||||
specs,
|
||||
notes,
|
||||
}: {
|
||||
title: string;
|
||||
specs: string[];
|
||||
notes: string;
|
||||
}) {
|
||||
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>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
{specs.map((spec, index) => (
|
||||
<li key={index}>{spec}</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className="mt-4 text-gray-600 text-sm">{notes}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MirrorButton({
|
||||
region,
|
||||
speed,
|
||||
host,
|
||||
url,
|
||||
suggested = false, // Added 'suggested' prop to highlight the suggested mirror
|
||||
}: {
|
||||
region: string;
|
||||
speed: string;
|
||||
host: string;
|
||||
url: string;
|
||||
suggested?: boolean; // Optional prop to check if this is the suggested mirror
|
||||
}) {
|
||||
const speedColor = {
|
||||
'Very Fast': 'text-green-500',
|
||||
Fast: 'text-blue-500',
|
||||
Moderate: 'text-orange-500',
|
||||
}[speed];
|
||||
|
||||
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' : ''}`}
|
||||
>
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className="text-center">
|
||||
<h3 className="text-xl font-bold">{region}</h3>
|
||||
<p className="text-sm">{host}</p>
|
||||
</div>
|
||||
<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">
|
||||
Download
|
||||
</button>
|
||||
{suggested && (
|
||||
<div className="absolute top-2 right-2 bg-indigo-600 text-white text-sm px-2 py-1 rounded-lg">
|
||||
Suggested Mirror
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
// Data
|
||||
const editionData = [
|
||||
{
|
||||
title: 'Gnome Edition',
|
||||
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" />,
|
||||
recommended: true,
|
||||
},
|
||||
{
|
||||
title: 'MATE Edition',
|
||||
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" />,
|
||||
},
|
||||
{
|
||||
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" />,
|
||||
},
|
||||
{
|
||||
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" />,
|
||||
},
|
||||
];
|
||||
|
||||
// Mirrors Data
|
||||
const mirrorData = [
|
||||
{
|
||||
region: 'North America',
|
||||
speed: 'Fast',
|
||||
host: 'MirrorHost USA',
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
region: 'Europe',
|
||||
speed: 'Very Fast',
|
||||
host: 'EuroMirror DE',
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
region: 'Asia',
|
||||
speed: 'Fast',
|
||||
host: 'AsiaNet JP',
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
region: 'Australia',
|
||||
speed: 'Moderate',
|
||||
host: 'AusSpeed AU',
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
region: 'South America',
|
||||
speed: 'Moderate',
|
||||
host: 'LATAM Mirror BR',
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
region: 'Africa',
|
||||
speed: 'Fast',
|
||||
host: 'Afrinet ZA',
|
||||
url: '#',
|
||||
},
|
||||
];
|
||||
399
src/pages/Home.tsx
Normal file
399
src/pages/Home.tsx
Normal file
@@ -0,0 +1,399 @@
|
||||
import React from 'react';
|
||||
import { Download, Shield, Terminal, Award, Users, Coffee, ArrowRight, Star, Book, Cpu, Monitor } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
export function Home() {
|
||||
return (
|
||||
<div>
|
||||
{/* Embedded CSS */}
|
||||
<style>
|
||||
{`
|
||||
/* New Gradient Animation for Hero Section */
|
||||
@keyframes gradientAnimation {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* New hover effect for hero section heading */
|
||||
.hero-heading:hover {
|
||||
transform: scale(1.1);
|
||||
color: #ffffff;
|
||||
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
}
|
||||
|
||||
.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 {
|
||||
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 h4 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #6495ed; /* Accent color */
|
||||
margin-bottom: 10px;
|
||||
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 */
|
||||
}
|
||||
|
||||
|
||||
/* New list style for features */
|
||||
.feature-list {
|
||||
list-style-type: disc;
|
||||
padding-left: 20px;
|
||||
margin-top: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
{/* 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="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>
|
||||
|
||||
<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>
|
||||
|
||||
{/* 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://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]">
|
||||
<div className="container mx-auto px-4">
|
||||
{/* Main Heading */}
|
||||
<h2 className="text-4xl font-bold text-center text-[#6495ed] mb-12 tracking-tight">
|
||||
Key Features ✨
|
||||
</h2>
|
||||
|
||||
{/* Subheading */}
|
||||
<p className="text-xl text-center text-gray-700 mb-6 max-w-3xl mx-auto">
|
||||
Discover the amazing features of Snigdha OS that make it the perfect choice for developers, cybersecurity professionals, and anyone looking for a fast, secure, and customizable OS.
|
||||
</p>
|
||||
|
||||
{/* Feature Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-12">
|
||||
<FeatureCard
|
||||
icon={<Shield className="h-10 w-10 text-red-500 mx-auto" />}
|
||||
title="Secure 🔒"
|
||||
description="Regular security updates and a robust system architecture keep your data safe."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Terminal className="h-10 w-10 text-green-500 mx-auto" />}
|
||||
title="Powerful 💪"
|
||||
description="Full access to the terminal and system components for advanced users."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Download className="h-10 w-10 text-blue-500 mx-auto" />}
|
||||
title="Free Forever 🎉"
|
||||
description="Snigdha OS is free and open source. No costs, no subscriptions."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Award className="h-10 w-10 text-yellow-500 mx-auto" />}
|
||||
title="Customizable 🎨"
|
||||
description="Personalize your desktop environment to suit your needs and style."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Users className="h-10 w-10 text-pink-500 mx-auto" />}
|
||||
title="Community Support 🤗"
|
||||
description="A vibrant community ready to help and share knowledge."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Star className="h-10 w-10 text-[#6495ed] mx-auto" />}
|
||||
title="Feature Rich ⚡"
|
||||
description="Pre-installed applications and tools for everyday use."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Coffee className="h-10 w-10 text-brown-500 mx-auto" />}
|
||||
title="Energy Efficient 🌱"
|
||||
description="Optimized performance to save energy and enhance hardware longevity."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<ArrowRight className="h-10 w-10 text-teal-500 mx-auto" />}
|
||||
title="Fast Boot ⏱️"
|
||||
description="Experience faster boot times and smooth transitions."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Terminal className="h-10 w-10 text-purple-500 mx-auto" />}
|
||||
title="Advanced Tools 🧰"
|
||||
description="Access specialized penetration testing and ethical hacking tools."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Desktop Environments Section */}
|
||||
<section className="py-16 bg-gradient-to-r from-[#f9f9f9] to-[#ffffff]">
|
||||
<div className="container mx-auto px-4">
|
||||
{/* Main Heading */}
|
||||
<h2 className="text-4xl font-bold text-center text-[#6495ed] mb-12 tracking-tight">
|
||||
Popular Desktop Environments 🌍
|
||||
</h2>
|
||||
|
||||
{/* Desktop Environment Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-12">
|
||||
<FeatureCard
|
||||
icon={<Monitor className="h-10 w-10 text-blue-500 mx-auto" />}
|
||||
title="GNOME 🌿"
|
||||
description="A clean and modern desktop environment that prioritizes simplicity and ease of use."
|
||||
listItems={[
|
||||
"Minimalist design focused on usability.",
|
||||
"Intuitive interface with modern features.",
|
||||
"Highly customizable with GNOME extensions.",
|
||||
]}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Monitor className="h-10 w-10 text-green-500 mx-auto" />}
|
||||
title="KDE Plasma ⚡"
|
||||
description="Highly customizable and visually appealing, perfect for power users."
|
||||
listItems={[
|
||||
"Rich, visually appealing desktop with full customization.",
|
||||
"Multiple widgets and advanced themes.",
|
||||
"Excellent performance with modern hardware.",
|
||||
]}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Monitor className="h-10 w-10 text-purple-500 mx-auto" />}
|
||||
title="XFCE ⚙️"
|
||||
description="Lightweight, fast, and resource-efficient, ideal for older hardware."
|
||||
listItems={[
|
||||
"Optimized for low resource usage.",
|
||||
"Simple, clean interface with traditional design.",
|
||||
"Fast boot times and low memory footprint.",
|
||||
]}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Monitor className="h-10 w-10 text-pink-500 mx-auto" />}
|
||||
title="Cinnamon 🍃"
|
||||
description="A modern desktop environment that provides a user-friendly interface."
|
||||
listItems={[
|
||||
"Traditional desktop layout with a modern touch.",
|
||||
"Easy to customize and lightweight.",
|
||||
"Supports multiple workspaces and desklets.",
|
||||
]}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Monitor className="h-10 w-10 text-orange-500 mx-auto" />}
|
||||
title="MATE 🌻"
|
||||
description="A continuation of GNOME 2, offering a more traditional desktop experience."
|
||||
listItems={[
|
||||
"Classic desktop environment with modern touches.",
|
||||
"Low memory usage and optimized performance.",
|
||||
"Supports a wide range of applications and tools.",
|
||||
]}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Monitor className="h-10 w-10 text-yellow-500 mx-auto" />}
|
||||
title="LXQt 💻"
|
||||
description="A lightweight and fast desktop environment designed for low-resource systems."
|
||||
listItems={[
|
||||
"Minimal memory footprint and fast boot times.",
|
||||
"Simple interface with modern functionalities.",
|
||||
"Efficient on both old and modern hardware.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Window Managers Section */}
|
||||
<section className="py-16 bg-gradient-to-r from-[#f0f4f8] to-[#ffffff]">
|
||||
<div className="container mx-auto px-4">
|
||||
{/* Main Heading */}
|
||||
<h2 className="text-4xl font-bold text-center text-[#6495ed] mb-12 tracking-tight">
|
||||
Popular Window Managers 🖥️
|
||||
</h2>
|
||||
|
||||
{/* Window Manager Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-12">
|
||||
<FeatureCard
|
||||
icon={<Cpu className="h-10 w-10 text-red-500 mx-auto" />}
|
||||
title="i3 🖱️"
|
||||
description="A tiling window manager designed for power users."
|
||||
listItems={[
|
||||
"Dynamic tiling for efficient workspace management.",
|
||||
"Keyboard-driven interface for quick navigation.",
|
||||
"Highly customizable with scripting support.",
|
||||
]}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Cpu className="h-10 w-10 text-yellow-500 mx-auto" />}
|
||||
title="Awesome WM ⚡"
|
||||
description="Highly configurable and extensible for personalized setups."
|
||||
listItems={[
|
||||
"Extensible and modular configuration.",
|
||||
"Supports tiling, floating, and full-screen layouts.",
|
||||
"Built-in Lua scripting for customizations.",
|
||||
]}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Cpu className="h-10 w-10 text-green-500 mx-auto" />}
|
||||
title="Openbox 🔲"
|
||||
description="Lightweight stacking window manager with high flexibility."
|
||||
listItems={[
|
||||
"Minimalist window manager focused on efficiency.",
|
||||
"Highly customizable themes and behaviors.",
|
||||
"Great for older hardware and resource-limited systems.",
|
||||
]}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Cpu className="h-10 w-10 text-blue-500 mx-auto" />}
|
||||
title="Xmonad 💻"
|
||||
description="A tiling window manager written and configured in Haskell."
|
||||
listItems={[
|
||||
"Written in Haskell for maximum customizability.",
|
||||
"Uses dynamic tiling for flexible window management.",
|
||||
"Highly customizable and extendable.",
|
||||
]}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Cpu className="h-10 w-10 text-orange-500 mx-auto" />}
|
||||
title="Fluxbox 🌀"
|
||||
description="A lightweight and configurable window manager based on Blackbox."
|
||||
listItems={[
|
||||
"Very low memory usage and high performance.",
|
||||
"Highly customizable with simple configuration.",
|
||||
"Supports multiple workspaces and styles.",
|
||||
]}
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Cpu className="h-10 w-10 text-purple-500 mx-auto" />}
|
||||
title="Herbstluftwm 🖼️"
|
||||
description="A manual tiling window manager for X11 with a unique approach."
|
||||
listItems={[
|
||||
"Manual tiling with a highly flexible layout.",
|
||||
"Written in bash and easy to configure.",
|
||||
"Supports multi-monitor setups and dynamic layouts.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const FeatureCard = ({ icon, title, description, listItems }: { icon: React.ReactNode; title: string; description: string; listItems?: string[] }) => (
|
||||
<div className="feature-card p-6 rounded-lg shadow-md text-center">
|
||||
<div className="mb-4">{icon}</div>
|
||||
<h4 className="text-xl font-semibold text-[#6495ed]">{title}</h4>
|
||||
<p className="text-gray-600 mt-2">{description}</p>
|
||||
{listItems && (
|
||||
<ul className="feature-list">
|
||||
{listItems.map((item, index) => (
|
||||
<li key={index}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
129
src/pages/Maintainers.tsx
Normal file
129
src/pages/Maintainers.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Github, Twitter, Globe, MapPin, Users } from 'lucide-react';
|
||||
import { getMaintainers, type Maintainer } from '../services/github';
|
||||
|
||||
export function Maintainers() {
|
||||
const [maintainers, setMaintainers] = useState<Maintainer[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchMaintainers = async () => {
|
||||
try {
|
||||
const data = await getMaintainers();
|
||||
setMaintainers(data);
|
||||
} catch (err) {
|
||||
setError('Failed to load maintainers data');
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchMaintainers();
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-16 w-16 border-4 border-indigo-500 border-t-transparent"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<p className="text-red-500 text-xl">{error}</p>
|
||||
<p className="text-gray-600 mt-2">Please try again later</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="py-12">
|
||||
<div className="container mx-auto px-4">
|
||||
<section className="text-center mb-16">
|
||||
<h1 className="text-4xl font-bold text-gray-800 mb-6">Meet Our Maintainers</h1>
|
||||
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
These dedicated individuals work tirelessly to make Snigdha OS one of the best Linux distributions available.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{maintainers.map((maintainer) => (
|
||||
<MaintainerCard key={maintainer.login} maintainer={maintainer} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MaintainerCard({ maintainer }: { maintainer: Maintainer }) {
|
||||
return (
|
||||
<div className="bg-white rounded-xl shadow-lg p-6 transition-transform transform hover:scale-105 hover:shadow-xl ease-in-out duration-300">
|
||||
<div className="flex items-center space-x-4 mb-4">
|
||||
<img
|
||||
src={maintainer.avatarUrl}
|
||||
alt={maintainer.name || maintainer.login}
|
||||
className="w-24 h-24 rounded-full ring-2 ring-indigo-50"
|
||||
/>
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold text-gray-800">{maintainer.name || maintainer.login}</h2>
|
||||
<p className="text-sm text-gray-500">@{maintainer.login}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{maintainer.bio && (
|
||||
<p className="text-gray-700 mb-4">{maintainer.bio}</p>
|
||||
)}
|
||||
|
||||
<div className="space-y-2 mb-4">
|
||||
{maintainer.location && (
|
||||
<div className="flex items-center space-x-2 text-gray-600">
|
||||
<MapPin className="h-5 w-5 text-gray-600" />
|
||||
<span>{maintainer.location}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center space-x-2 text-gray-600">
|
||||
<Users className="h-5 w-5 text-gray-600" />
|
||||
<span>{maintainer.followers} followers | {maintainer.following} following</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-4 mt-4">
|
||||
<a
|
||||
href={`https://github.com/${maintainer.login}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-600 hover:text-gray-900 transition-colors duration-200"
|
||||
>
|
||||
<Github className="h-6 w-6" />
|
||||
</a>
|
||||
{maintainer.twitterUsername && (
|
||||
<a
|
||||
href={`https://twitter.com/${maintainer.twitterUsername}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-500 hover:text-blue-700 transition-colors duration-200"
|
||||
>
|
||||
<Twitter className="h-6 w-6" />
|
||||
</a>
|
||||
)}
|
||||
{maintainer.blog && (
|
||||
<a
|
||||
href={maintainer.blog}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-indigo-500 hover:text-indigo-700 transition-colors duration-200"
|
||||
>
|
||||
<Globe className="h-6 w-6" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user