ourworld_web/www_mycelium_net
23
0
Fork 0
forked from sashaastiadi/www_mycelium_net
Code Issues Pull Requests Activity

refactor: reorganize landing page sections and add hover animations to feature cards

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-14 12:41:18 +02:00
parent 34956dc5b3
commit 8f860926bb
14 changed files with 107 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Features.tsx
View File

@@ -21,8 +21,8 @@ export function Features() {
</a>
.
</p>
<div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
<div className="relative lg:col-span-3">
<div className="mt-10 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
<div className="relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
<div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
<Pathfinding />
@@ -39,7 +39,7 @@ export function Features() {
</div>
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
</div>
<div className="relative lg:col-span-3">
<div className="relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
<div className="absolute inset-0 rounded-lg bg-white lg:rounded-tr-4xl" />
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
<MessageBus />
@@ -56,7 +56,7 @@ export function Features() {
</div>
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-tr-4xl" />
</div>
<div className="relative lg:col-span-2">
<div className="relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
<div className="absolute inset-0 rounded-lg bg-white lg:rounded-bl-4xl" />
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
<ProxyDetection className="h-80" />
@@ -73,7 +73,7 @@ export function Features() {
</div>
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-bl-4xl" />
</div>
<div className="relative lg:col-span-2">
<div className="relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
<div className="absolute inset-0 rounded-lg bg-white" />
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
<ProxyForwarding className="h-80" />
@@ -90,7 +90,7 @@ export function Features() {
</div>
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5" />
</div>
<div className="relative lg:col-span-2">
<div className="relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
<div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-br-4xl" />
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
<ContentDistribution className="h-80" />