mirror of
https://github.com/Snigdha-OS/snigdhaos-web-dev.git
synced 2025-09-08 13:54:57 +02:00
✨ style(_ui*): add new animation
This commit is contained in:
eshanized
@@ -44,31 +44,65 @@ export function Home() {
|
|||||||
|
|
||||||
/* New feature card style */
|
/* New feature card style */
|
||||||
.feature-card {
|
.feature-card {
|
||||||
border: 2px solid transparent;
|
border: 2px solid transparent;
|
||||||
background: #f7f8fb;
|
background: linear-gradient(145deg, #ffffff, #f0f4f8); /* Light gradient background */
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
|
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.3s ease, box-shadow 0.3s ease, border 0.3s ease;
|
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:hover {
|
.feature-card::before {
|
||||||
transform: translateY(-12px);
|
content: "";
|
||||||
box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2);
|
position: absolute;
|
||||||
border-color: #6495ed;
|
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 content style */
|
.feature-card:hover::before {
|
||||||
.feature-card h4 {
|
transform: scale(1);
|
||||||
font-size: 1.25rem;
|
}
|
||||||
font-weight: 700;
|
|
||||||
color: #6495ed;
|
.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 */
|
||||||
|
}
|
||||||
|
|
||||||
.feature-card p {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* New list style for features */
|
/* New list style for features */
|
||||||
.feature-list {
|
.feature-list {
|
||||||
@@ -82,47 +116,56 @@ export function Home() {
|
|||||||
|
|
||||||
{/* Hero Section */}
|
{/* Hero Section */}
|
||||||
<section className="bg-gradient-to-r from-[#000000] to-[#6495ed] text-white py-20 relative overflow-hidden hero-background">
|
<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">
|
<div className="absolute inset-0 -z-10">
|
||||||
<img
|
<img
|
||||||
src="https://via.placeholder.com/1920x1080" // Replace with your desired background image URL
|
src="https://via.placeholder.com/1920x1080" // Replace with your desired background image URL
|
||||||
alt="Background"
|
alt="Background"
|
||||||
className="w-full h-full object-cover opacity-30"
|
className="w-full h-full object-cover opacity-30"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="container mx-auto px-4 text-center relative z-10">
|
<div className="container mx-auto px-4 text-center relative z-10">
|
||||||
{/* Main Heading */}
|
{/* Main Heading */}
|
||||||
<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 transform hover:text-white transition-all duration-300">
|
||||||
SNIGDHA OS 🔥
|
SNIGDHA OS 🔥
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<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>
|
||||||
|
|
||||||
{/* Call to Action Buttons */}
|
{/* Call to Action Buttons */}
|
||||||
<div className="flex justify-center space-x-6 mt-6">
|
<div className="flex flex-wrap justify-center space-x-6 mt-6">
|
||||||
<Link
|
<Link
|
||||||
to="/download"
|
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"
|
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" />
|
<Download className="h-5 w-5" />
|
||||||
<span>Download Now 🚀</span>
|
<span>Download Now 🚀</span>
|
||||||
</Link>
|
</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>
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</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]">
|
||||||
|
|||||||
Reference in New Issue
Block a user