spacing
This commit is contained in:
parent
c0b3dc68f7
commit
782174e331
5 changed files with 62 additions and 45 deletions
|
|
@ -45,9 +45,10 @@ export function AboutProfileBlock({
|
|||
const hasSecondary = secondaryButton?.label && secondaryButton?.url
|
||||
|
||||
return (
|
||||
<section className="w-full max-w-5xl mx-auto px-6 py-16">
|
||||
// Standardized vertical padding and alignment
|
||||
<section className="w-full max-w-5xl mx-auto py-20 md:py-28">
|
||||
{(heading || subheading) && (
|
||||
<div className="text-center mb-12">
|
||||
<div className="text-center mb-16">
|
||||
{heading && (
|
||||
<h2 className="text-3xl font-semibold tracking-tight text-foreground mb-3">
|
||||
{heading}
|
||||
|
|
@ -60,11 +61,11 @@ export function AboutProfileBlock({
|
|||
)}
|
||||
|
||||
<div
|
||||
className={`flex flex-col sm:flex-row gap-10 items-center ${isRight ? 'sm:flex-row-reverse' : ''}`}
|
||||
className={`flex flex-col sm:flex-row gap-12 items-center ${isRight ? 'sm:flex-row-reverse' : ''}`}
|
||||
>
|
||||
{imageEl}
|
||||
|
||||
<div className="flex flex-col gap-5 flex-1">
|
||||
<div className="flex flex-col gap-6 flex-1">
|
||||
{body && (
|
||||
<p className="text-sm text-foreground/60 leading-relaxed whitespace-pre-line">{body}</p>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -18,17 +18,19 @@ export function BentoRowBlock(props: BentoRowBlockProps) {
|
|||
const { aboutHeading, aboutText, aboutCta, skillsHeading, skills } = props
|
||||
|
||||
return (
|
||||
<section className="w-full max-w-5xl mx-auto px-6 py-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div className="bg-muted/50 border border-foreground/8 rounded-xl p-6 flex flex-col justify-between gap-6">
|
||||
// Standardized vertical padding and container constraints
|
||||
<section className="w-full max-w-5xl mx-auto py-20 md:py-28">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* About Section */}
|
||||
<div className="bg-muted/50 border border-foreground/10 rounded-2xl p-8 flex flex-col justify-between gap-8">
|
||||
<div>
|
||||
{aboutHeading && (
|
||||
<p className="text-xs tracking-widest uppercase text-foreground/30 mb-4">
|
||||
<p className="text-[10px] font-bold tracking-[0.2em] uppercase text-foreground/30 mb-6">
|
||||
{aboutHeading}
|
||||
</p>
|
||||
)}
|
||||
{aboutText && (
|
||||
<p className="text-sm text-foreground/50 leading-relaxed whitespace-pre-line">
|
||||
<p className="text-sm text-foreground/60 leading-relaxed whitespace-pre-line">
|
||||
{aboutText}
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -38,7 +40,7 @@ export function BentoRowBlock(props: BentoRowBlockProps) {
|
|||
href={aboutCta.url}
|
||||
target={aboutCta.newTab ? '_blank' : '_self'}
|
||||
rel="noopener noreferrer"
|
||||
className="self-start flex items-center gap-2 text-xs text-foreground/50 border border-foreground/10 rounded-lg px-4 py-2 hover:text-foreground/80 hover:bg-muted transition-colors"
|
||||
className="self-start flex items-center gap-2 text-xs text-foreground/60 border border-foreground/10 rounded-lg px-5 py-2.5 hover:text-foreground/90 hover:bg-muted transition-colors"
|
||||
>
|
||||
<i className="ti ti-download" style={{ fontSize: 13 }} aria-hidden="true" />
|
||||
{aboutCta.label}
|
||||
|
|
@ -46,40 +48,39 @@ export function BentoRowBlock(props: BentoRowBlockProps) {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-muted/50 border border-foreground/8 rounded-xl p-6">
|
||||
{/* Skills Section */}
|
||||
<div className="bg-muted/50 border border-foreground/10 rounded-2xl p-8">
|
||||
{skillsHeading && (
|
||||
<p className="text-xs tracking-widest uppercase text-foreground/30 mb-4">
|
||||
<p className="text-[10px] font-bold tracking-[0.2em] uppercase text-foreground/30 mb-6">
|
||||
{skillsHeading}
|
||||
</p>
|
||||
)}
|
||||
{Array.isArray(skills) && skills.length > 0 && (
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{skills.map(function (skill, i) {
|
||||
const tags = skill.tags
|
||||
? skill.tags
|
||||
.split(',')
|
||||
.map(function (t) {
|
||||
return t.trim()
|
||||
})
|
||||
.map((t) => t.trim())
|
||||
.filter(Boolean)
|
||||
: []
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="bg-background/50 border border-foreground/8 rounded-lg p-3 flex flex-col gap-2"
|
||||
className="bg-background/50 border border-foreground/10 rounded-xl p-4 flex flex-col gap-3"
|
||||
>
|
||||
<i
|
||||
className={'ti ' + skill.icon + ' text-foreground/30'}
|
||||
style={{ fontSize: 16 }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="text-xs font-medium text-foreground/70">{skill.title}</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<p className="text-xs font-medium text-foreground/80">{skill.title}</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{tags.map(function (tag, j) {
|
||||
return (
|
||||
<span
|
||||
key={j}
|
||||
className="text-xs text-foreground/30 border border-foreground/8 rounded-full px-2 py-0.5"
|
||||
className="text-[10px] text-foreground/40 border border-foreground/5 rounded-full px-2 py-0.5"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
// src/blocks/KanbanColor/Component.tsx
|
||||
import React from 'react'
|
||||
|
||||
const colorMap: Record<string, { border: string; dot: string }> = {
|
||||
|
|
@ -19,27 +18,32 @@ export function KanbanColorBlock({ columns }: Props) {
|
|||
if (!Array.isArray(columns) || columns.length === 0) return null
|
||||
|
||||
return (
|
||||
<section className="w-full max-w-5xl mx-auto px-6 py-16">
|
||||
// Standardized vertical padding to match other page sections
|
||||
<section className="w-full max-w-5xl mx-auto py-20 md:py-28">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{columns.map((col, i) => {
|
||||
const { border, dot } = colorMap[col.color ?? 'gray'] ?? colorMap.gray
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`bg-muted/50 rounded-xl p-4 flex flex-col gap-3 border-t-[3px] ${border}`}
|
||||
className={`bg-muted/50 rounded-2xl p-6 flex flex-col gap-4 border-t-[3px] ${border}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className={`w-2 h-2 rounded-full shrink-0 ${dot}`} />
|
||||
<span className="text-sm font-medium text-foreground/80">{col.title}</span>
|
||||
<span className="text-xs font-bold tracking-[0.2em] uppercase text-foreground/60">
|
||||
{col.title}
|
||||
</span>
|
||||
</div>
|
||||
{Array.isArray(col.cards) &&
|
||||
col.cards.map((card, j) => (
|
||||
<div
|
||||
key={j}
|
||||
className="bg-background/70 border border-foreground/8 rounded-lg px-3 py-2.5 flex flex-col gap-0.5"
|
||||
className="bg-background/70 border border-foreground/5 rounded-xl px-4 py-3 flex flex-col gap-1"
|
||||
>
|
||||
<p className="text-sm font-medium text-foreground/85">{card.title}</p>
|
||||
{card.subtitle && <p className="text-xs text-foreground/40">{card.subtitle}</p>}
|
||||
<p className="text-sm font-medium text-foreground/80">{card.title}</p>
|
||||
{card.subtitle && (
|
||||
<p className="text-[11px] text-foreground/40">{card.subtitle}</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,18 +13,26 @@ export function StatsStripBlock({ stats }: StatsStripProps) {
|
|||
if (!Array.isArray(stats) || stats.length === 0) return null
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 border-b border-t border-foreground/8">
|
||||
{stats.map((stat, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`px-6 py-5 ${i % 2 === 0 ? 'border-r border-foreground/8' : ''} ${
|
||||
i < 2 ? 'border-b md:border-b-0 border-foreground/8' : ''
|
||||
} ${i < stats.length - 1 ? 'md:border-r md:border-foreground/8' : ''}`}
|
||||
>
|
||||
<p className="text-2xl font-medium text-foreground">{stat.value}</p>
|
||||
<p className="text-xs text-foreground/30 mt-1">{stat.label}</p>
|
||||
</div>
|
||||
))}
|
||||
// Applied consistent vertical spacing to match other page sections
|
||||
<div className="py-20 md:py-28">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 border-t border-b border-foreground/10">
|
||||
{stats.map((stat, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`
|
||||
px-6 py-8
|
||||
/* Border logic: Maintain right divider for grid structure */
|
||||
${i % 2 === 0 ? 'border-r border-foreground/10' : ''}
|
||||
${i < 2 ? 'border-b md:border-b-0 border-foreground/10' : ''}
|
||||
md:border-r md:border-foreground/10
|
||||
${i === stats.length - 1 ? 'md:border-r-0' : ''}
|
||||
`}
|
||||
>
|
||||
<p className="text-3xl font-semibold text-foreground">{stat.value}</p>
|
||||
<p className="text-xs uppercase tracking-wider text-foreground/40 mt-2">{stat.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,16 +9,19 @@ export function ToolStackBlock({ heading, tools }: ToolStackBlockProps) {
|
|||
if (!Array.isArray(tools) || tools.length === 0) return null
|
||||
|
||||
return (
|
||||
<section className="w-full max-w-5xl mx-auto px-6 py-16">
|
||||
<div className="bg-muted/50 border border-foreground/8 rounded-xl p-6">
|
||||
// Standardized vertical spacing to match other page sections
|
||||
<section className="w-full max-w-5xl mx-auto py-20 md:py-28">
|
||||
<div className="bg-muted/50 border border-foreground/10 rounded-2xl p-8">
|
||||
{heading && (
|
||||
<p className="text-xs tracking-widest uppercase text-foreground/30 mb-4">{heading}</p>
|
||||
<p className="text-[10px] font-bold tracking-[0.2em] uppercase text-foreground/30 mb-6">
|
||||
{heading}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{tools.map((tool, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="text-xs text-foreground/50 bg-background/50 border border-foreground/8 rounded-full px-3 py-1.5 hover:text-foreground/70 hover:border-foreground/15 transition-colors"
|
||||
className="text-xs text-foreground/60 bg-background/50 border border-foreground/10 rounded-full px-4 py-2 hover:text-foreground/90 hover:border-foreground/20 transition-all"
|
||||
>
|
||||
{tool.name}
|
||||
</span>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue