Snigdha-OS/snigdhaos-web-dev
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/snigdhaos-web-dev.git synced 2025-09-07 13:25:12 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ style(_ui*): add new animation

Browse Source
This commit is contained in:
eshanized
2024-12-20 22:51:49 +05:30
parent da463ffc2e
commit 50bbc9a5e0
1 changed files with 102 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/pages/Home.tsx
View File

@@ -45,31 +45,65 @@ export function Home() {
/* New feature card style */
.feature-card {
border: 2px solid transparent;
background: #f7f8fb;
background: linear-gradient(145deg, #ffffff, #f0f4f8); /* Light gradient background */
padding: 20px;
border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
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(-12px);
box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2);
border-color: #6495ed;
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 content style */
.feature-card h4 {
font-size: 1.25rem;
font-size: 1.5rem;
font-weight: 700;
color: #6495ed;
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;
@@ -104,7 +138,7 @@ export function Home() {
</p>
{/* 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
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"
@@ -120,10 +154,19 @@ export function Home() {
<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">