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

refactor: improve AgentUseCase layout and typography with responsive background image

Browse Source 
- Added leading-normal to CT text component for better readability
- Changed AgentHeroAlt background image to only display on md+ screens using md:bg-[url(...)] classes
- Removed inline style attribute in favor of Tailwind classes for background image
- Updated AgentUseCase to use typography components (H3, CT, CP) instead of generic elements
- Changed Eyebrow color from text-cyan-600 to text-cyan-500
- Adjuste
This commit is contained in:
sasha-astiadi
2025-11-18 12:47:51 +01:00
parent 7d6bbc2763
commit 8509b80f47
3 changed files with 17 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Texts.tsx
View File

@@ -162,5 +162,5 @@ export const DownloadCardDescription = createTextComponent(
'text-base/7 leading-normal tracking-normal'
)
export const CT = createTextComponent('span', 'text-base lg:text-lg font-medium')
export const CT = createTextComponent('span', 'text-base lg:text-lg leading-normal font-medium')
export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-tight font-light')

3
src/pages/agents/AgentHeroAlt.tsx
View File

@@ -8,8 +8,7 @@ export function AgentHeroAlt() {
<div className="">
{/* Boxed container */}
<div
className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
style={{ backgroundImage: "url('/images/agents.webp')", backgroundSize: "contain" }}
className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden md:bg-[url('/images/agents.webp')] md:bg-contain md:bg-right md:bg-no-repeat"
>
{/* Inner padding */}
<div className="px-6 py-16 lg:py-24">

31
src/pages/agents/AgentUseCase.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Eyebrow, SectionHeader, P } from "@/components/Texts";
import { Eyebrow, P, CT, CP, H3} from "@/components/Texts";
import {
CpuChipIcon,
GlobeAltIcon,
@@ -63,19 +63,18 @@ export function AgentUsecase() {
<div className="w-full border-t border-l border-r border-gray-100" />
{/* Main framed section */}
<div className="border border-t-0 border-b-0 border-gray-100 bg-white">
<div className="mx-auto max-w-4xl sm:text-center py-12">
<div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-100">
<div className="mx-auto max-w-3xl sm:text-center px-6 lg:px-8">
{/* Intro block (from isIntro item) */}
{networkUseCases[0].isIntro && (
<>
<Eyebrow className="text-cyan-600">{networkUseCases[0].eyebrow}</Eyebrow>
<SectionHeader
as="h3"
className="mt-4 text-gray-900 text-3xl lg:text-4xl"
<Eyebrow className="text-cyan-500">{networkUseCases[0].eyebrow}</Eyebrow>
<H3
className="mt-4 text-gray-900"
>
{networkUseCases[0].title}
</SectionHeader>
<P className="mt-6 text-lg text-gray-600">
</H3>
<P className="mt-4 text-lg text-gray-600">
{networkUseCases[0].description}
</P>
</>
@@ -85,7 +84,7 @@ export function AgentUsecase() {
{/* Grid of features (excluding intro) */}
<ul
role="list"
className="mx-auto mt-6 max-w-6xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-y-10 px-6 pb-16"
className="mx-auto mt-8 max-w-6xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-y-10 px-6"
>
{networkUseCases.slice(1).map((item, idx) => (
<li
@@ -94,20 +93,20 @@ export function AgentUsecase() {
>
{/* Icon */}
{item.icon && (
<div className="h-10 w-10 flex items-center justify-center rounded-xl bg-gray-100">
<item.icon className="h-6 w-6 text-cyan-600" />
<div className="h-10 w-10 mb-2 flex items-center justify-center rounded-xl bg-gray-100">
<item.icon className="h-6 w-6 text-cyan-500" />
</div>
)}
{/* Title */}
<p className="mt-6 text-lg font-semibold text-gray-900">
<CT className="leading-normal text-gray-900">
{item.title}
</p>
</CT>
{/* Description */}
<p className="mt-2 text-gray-600 text-sm leading-snug">
<CP className="mt-2 text-gray-600 text-sm leading-snug">
{item.description}
</p>
</CP>
</li>
))}
</ul>