ourworld_web/www_projectmycelium_com
22
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 3 Pull Requests Projects Releases Activity

feat: add centered intro section to HomeDesign and hover effects to HomeTab cards

Browse Source 
- Added centered "Who's it For" intro section to HomeDesign with eyebrow, heading, and description
- Imported Eyebrow, H3, and P components for consistent typography
- Updated HomeDesign grid item styling with top margin and adjusted border classes
- Added hover effects to all HomeTab cards with scale, border color, and shadow transitions
- Applied consistent hover styling (scale-105, cyan border, and cyan shadow)
This commit is contained in:
sasha-astiadi
2025-11-17 15:46:02 +01:00
parent 1a34508699
commit fb35ede79d
2 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/home/HomeTab.tsx
View File

@@ -26,7 +26,7 @@ export function HomeTab() {
{/* ------------------ LEFT TALL CARD ------------------ */}
<Link to="/network" className="relative lg:row-span-2 cursor-pointer">
<div className="absolute inset-px rounded-lg bg-white lg:rounded-l-4xl" />
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)]">
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)] transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20">
<div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
<h3 className="text-sm/4 font-semibold text-cyan-500">LIVE</h3>
@@ -56,7 +56,7 @@ export function HomeTab() {
{/* ------------------ MIDDLE TOP ------------------ */}
<Link to="/pods" className="relative cursor-pointer max-lg:row-start-1">
<div className="absolute inset-px rounded-lg bg-white max-lg:rounded-t-4xl" />
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]">
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20">
<div className="px-8 pt-8 sm:px-10 sm:pt-10">
<h3 className="text-sm/4 font-semibold text-cyan-500">Coming Soon</h3>
@@ -81,7 +81,7 @@ export function HomeTab() {
{/* ------------------ MIDDLE BOTTOM ------------------ */}
<Link to="/agents" className="relative cursor-pointer max-lg:row-start-3 lg:col-start-2 lg:row-start-2">
<div className="absolute inset-px rounded-lg bg-white" />
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20">
<div className="px-8 pt-8 sm:px-10 sm:pt-10">
<h3 className="text-sm/4 font-semibold text-cyan-500">Q1 2026</h3>
@@ -105,7 +105,7 @@ export function HomeTab() {
{/* ------------------ RIGHT TALL ------------------ */}
<Link to="/cloud" className="relative lg:row-span-2 cursor-pointer">
<div className="absolute inset-px rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-r-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-r-[calc(2rem+1px)]">
<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-r-[calc(2rem+1px)] transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20">
<div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
<h3 className="text-sm/4 font-semibold text-cyan-500">Early Access</h3>