forked from emre/www_projectmycelium_com
refactor: standardize Tailwind class syntax and component usage
- Replaced arbitrary CSS values with standard Tailwind utilities (e.g., `bottom-[-18rem]` → `-bottom-72`, `mt-[-2rem]` → `-mt-8`) - Fixed invalid gradient syntax by removing `bg-` prefix from gradient utilities - Consolidated text styling by replacing inline elements with CT/CP text components - Adjusted CT component typography from semibold to medium for better visual hierarchy
This commit is contained in:
BIN
public/images/pods.png
Normal file
BIN
public/images/pods.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
@@ -162,5 +162,5 @@ export const DownloadCardDescription = createTextComponent(
|
||||
'text-base/7 leading-normal tracking-normal'
|
||||
)
|
||||
|
||||
export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold')
|
||||
export const CT = createTextComponent('span', 'text-base lg:text-lg font-medium')
|
||||
export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-tight font-light')
|
||||
|
||||
@@ -136,7 +136,7 @@ export function GallerySection() {
|
||||
</div>
|
||||
|
||||
{/* Foreground pill (Desktop) */}
|
||||
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[60] hidden md:block">
|
||||
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-60 hidden md:block">
|
||||
<div className="flex items-center justify-between w-[1040px] gap-6 rounded-2xl bg-gray-100/80 shadow-[0_8px_40px_rgba(0,0,0,0.15)] px-12 backdrop-blur">
|
||||
<CP as="h4" className="max-w-[820px] h-[72px] flex items-center" color="dark">
|
||||
<TypeAnimation
|
||||
|
||||
@@ -38,7 +38,7 @@ export function ComputeDesign() {
|
||||
<div className="mx-auto max-w-7xl border-gray-100">
|
||||
<dl className="grid grid-cols-1 gap-4 lg:gap-14 overflow-hidden text-center lg:grid-cols-3">
|
||||
{stats.map((stat) => (
|
||||
<div key={stat.id} className="flex flex-col items-center bg-gray-400/5 py-8 px-12 border border-gray-100 lg:border-t-0 lg:border-b-0">
|
||||
<div key={stat.id} className="flex flex-col items-center bg-gray-100 py-8 px-12 border border-gray-100 lg:border-t-0 lg:border-b-0">
|
||||
<stat.icon className="h-8 w-8 fill-cyan-500 mb-4" aria-hidden="true" />
|
||||
<CT className="">{stat.value}</CT>
|
||||
<CP className="mt-1">{stat.name}</CP>
|
||||
|
||||
@@ -31,9 +31,9 @@ export function ComputeOverview() {
|
||||
/>
|
||||
<CircleBackground
|
||||
color="#22d3ee"
|
||||
className="absolute bottom-[-18rem] left-[15%] h-[420px] w-[420px] opacity-15 blur-3xl"
|
||||
className="absolute -bottom-72 left-[15%] h-[420px] w-[420px] opacity-15 blur-3xl"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(0,0,0,0.03),_transparent_55%)]" />
|
||||
<div className="absolute inset-0 bg-radial-gradient(circle_at_top,_rgba(0,0,0,0.03),_transparent_55%)]" />
|
||||
</div>
|
||||
|
||||
<Container className="relative py-12 bg-white mx-auto s border border-t-0 border-b-0 border-gray-100">
|
||||
@@ -69,7 +69,7 @@ export function ComputeOverview() {
|
||||
key={card.title}
|
||||
className="group relative overflow-hidden rounded-md border border-gray-100 bg-white p-10 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-cyan-50 via-white to-cyan-100 opacity-0 transition group-hover:opacity-70" />
|
||||
<div className="absolute inset-0 bg-linear-to-br from-cyan-50 via-white to-cyan-100 opacity-0 transition group-hover:opacity-70" />
|
||||
|
||||
<div className="relative">
|
||||
<p className="text-[0.7rem] font-semibold uppercase tracking-[0.35em] text-cyan-600">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { Container } from '@/components/Container'
|
||||
import { Eyebrow, H3, P } from '@/components/Texts'
|
||||
import { CT, CP, Eyebrow, H3, P } from '@/components/Texts'
|
||||
|
||||
/* ✅ Custom Icons (unchanged) */
|
||||
|
||||
@@ -142,8 +142,8 @@ export function HomeHosting() {
|
||||
hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white"
|
||||
>
|
||||
<feature.icon className="h-14 w-14" />
|
||||
<h3 className="mt-4 font-semibold text-gray-900">{feature.name}</h3>
|
||||
<p className="mt-2 text-gray-700 leading-snug">{feature.description}</p>
|
||||
<CT className="mt-4 text-gray-900">{feature.name}</CT>
|
||||
<CP className="mt-2 text-gray-700 leading-snug">{feature.description}</CP>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { Link } from "react-router-dom";
|
||||
import { Eyebrow, H3, P } from "@/components/Texts";
|
||||
import { CP, CT, Eyebrow, H3, P } from "@/components/Texts";
|
||||
|
||||
const bentoCards = [
|
||||
{
|
||||
@@ -107,10 +107,10 @@ export function HomeTab() {
|
||||
/>
|
||||
<div className="px-8 pt-4 pb-6">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">{card.eyebrow}</h3>
|
||||
<p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">{card.title}</p>
|
||||
<p className="mt-1 max-w-lg text-sm/6 text-gray-600">
|
||||
<CT className="mt-2 text-lg lg:text-xl tracking-tight text-gray-950">{card.title}</CT>
|
||||
<CP className="mt-1 max-w-lg text-gray-600">
|
||||
{card.description}
|
||||
</p>
|
||||
</CP>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${card.rounded}`} />
|
||||
|
||||
@@ -185,7 +185,7 @@ const bodyAnimation: MotionProps = {
|
||||
function InviteScreen() {
|
||||
return (
|
||||
<AppScreen className="w-full">
|
||||
<img src={connectorImg} alt="Mycelium Connector" width="366" height="732" className="mt-[-2rem]" />
|
||||
<img src={connectorImg} alt="Mycelium Connector" width="366" height="732" className="-mt-8" />
|
||||
</AppScreen>
|
||||
)
|
||||
}
|
||||
@@ -193,7 +193,7 @@ function InviteScreen() {
|
||||
function StocksScreen() {
|
||||
return (
|
||||
<AppScreen className="w-full">
|
||||
<img src={peersImg} alt="Mycelium Peers" width="366" height="732" className="mt-[-2rem]" />
|
||||
<img src={peersImg} alt="Mycelium Peers" width="366" height="732" className="-mt-8" />
|
||||
</AppScreen>
|
||||
)
|
||||
}
|
||||
@@ -201,7 +201,7 @@ function StocksScreen() {
|
||||
function InvestScreen() {
|
||||
return (
|
||||
<AppScreen className="w-full">
|
||||
<img src={settingImg} alt="Mycelium Settings" width="366" height="732" className="mt-[-2rem]" />
|
||||
<img src={settingImg} alt="Mycelium Settings" width="366" height="732" className="-mt-8" />
|
||||
</AppScreen>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useId } from 'react'
|
||||
import { Container } from '@/components/Container'
|
||||
import { CP } from '@/components/Texts'
|
||||
|
||||
const features = [
|
||||
{
|
||||
@@ -214,9 +215,9 @@ export function SecondaryFeatures() {
|
||||
className="rounded-2xl border border-gray-100 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
|
||||
>
|
||||
<feature.icon className="h-8 w-8" />
|
||||
<h3 className="mt-6 font-semibold text-gray-900">
|
||||
<CP className="mt-6 font-semibold text-gray-900">
|
||||
{feature.name}
|
||||
</h3>
|
||||
</CP>
|
||||
<p className="mt-2 text-gray-700">{feature.description}</p>
|
||||
</li>
|
||||
))}
|
||||
|
||||
11
src/pages/pods/PodsPage.tsx
Normal file
11
src/pages/pods/PodsPage.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import Homepod from './Homepod';
|
||||
|
||||
const PodsPage = () => {
|
||||
return (
|
||||
<>
|
||||
<Homepod />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PodsPage;
|
||||
Reference in New Issue
Block a user