Nicholai
3e739877b4
- Introduced multiple new components including AnimatedLink, Button, Calendar, Card, ColorSwatch, Divider, Filmstrip, FormContainer, FormField, GalleryCard, Heading, HeroOverlay, IdentitySection, ImmersionSection, NewArtistsSection, NewContactSection, NewHero, NewNavigation, Reveal, SectionLabel, StickySplit, and Toast. - Each component is designed with responsive layouts and customizable styles to improve the overall UI consistency and interactivity. - Implemented accessibility features and animations to enhance user engagement. This commit significantly expands the component library, providing a robust foundation for building a cohesive user interface.
80 lines
4.2 KiB
TypeScript
80 lines
4.2 KiB
TypeScript
"use client"
|
|
|
|
import { StickySplit } from "./sticky-split"
|
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card" // Import from ui/card to check compat or united/card?
|
|
// Wait, I moved united/card to components/united/card.tsx.
|
|
// United card has variants. Utils/shadcn card does not in the same way.
|
|
import { Card as UnitedCard, CardHeader as UnitedCardHeader, CardTitle as UnitedCardTitle, CardContent as UnitedCardContent } from "./card"
|
|
import { ColorSwatch } from "./color-swatch"
|
|
import { SectionLabel } from "./section-label"
|
|
import { Reveal } from "./reveal"
|
|
|
|
export function IdentitySection() {
|
|
return (
|
|
<section className="py-[clamp(3.5rem,6vw,6rem)] px-[clamp(1.5rem,4vw,5rem)] max-w-[1600px] mx-auto relative bg-[var(--sand)]/30">
|
|
<StickySplit
|
|
sidebar={
|
|
<div className="space-y-6">
|
|
<SectionLabel>02 • The Studio</SectionLabel>
|
|
<h2 className="font-serif text-[clamp(1.9rem,4vw,3rem)] leading-[1.15] text-[var(--ink)]">
|
|
A space for art, not just ink.
|
|
</h2>
|
|
<p className="text-[clamp(0.95rem,2vw,1.3rem)] leading-[1.65] text-[var(--ink)]/75 max-w-[54ch]">
|
|
Located in Fountain, Colorado, United Tattoo is a collective of artists dedicated to the craft.
|
|
We prioritize custom work, clean lines, and a welcoming environment.
|
|
</p>
|
|
</div>
|
|
}
|
|
>
|
|
<div className="grid gap-8">
|
|
<Reveal>
|
|
<UnitedCard variant="default" className="backdrop-blur-sm bg-white/60">
|
|
<UnitedCardHeader>
|
|
<UnitedCardTitle>The Philosophy</UnitedCardTitle>
|
|
<span className="text-[0.7rem] uppercase tracking-[0.25em] opacity-80">Est. 2012</span>
|
|
</UnitedCardHeader>
|
|
<UnitedCardContent>
|
|
<p className="text-[var(--ink)]/80 mb-8 leading-relaxed">
|
|
We believe in tattoos that age as well as you do. Our process is collaborative,
|
|
transparent, and focused on creating lasting pieces of art.
|
|
</p>
|
|
|
|
{/* Decorative swatches to mimic design system look */}
|
|
<div className="hidden md:grid grid-cols-3 gap-4">
|
|
<div className="h-24 rounded-xl bg-[var(--burnt-orange)] flex items-end p-4 text-white text-xs uppercase tracking-wider font-medium">Bold</div>
|
|
<div className="h-24 rounded-xl bg-[var(--sage)] flex items-end p-4 text-white text-xs uppercase tracking-wider font-medium">Clean</div>
|
|
<div className="h-24 rounded-xl bg-[var(--charcoal)] flex items-end p-4 text-white text-xs uppercase tracking-wider font-medium">Lasting</div>
|
|
</div>
|
|
</UnitedCardContent>
|
|
</UnitedCard>
|
|
</Reveal>
|
|
|
|
<Reveal delay={0.1}>
|
|
<UnitedCard variant="component" className="bg-white/80 border-dashed border-[var(--sage-concrete)]/40">
|
|
<UnitedCardHeader>
|
|
<UnitedCardTitle>The Space</UnitedCardTitle>
|
|
</UnitedCardHeader>
|
|
<UnitedCardContent className="space-y-4">
|
|
<p className="leading-relaxed">
|
|
Our studio is designed to be a sanctuary. Bright, open, and professional.
|
|
We strictly adhere to the highest standards of safety and sterilization.
|
|
</p>
|
|
<div className="grid grid-cols-2 gap-4 pt-2">
|
|
<div className="p-4 rounded-lg bg-[var(--sand)]/50 border border-[var(--ink)]/5">
|
|
<span className="block text-xs uppercase tracking-widest text-[var(--moss)] mb-1">Location</span>
|
|
<span className="font-medium">Fountain, CO</span>
|
|
</div>
|
|
<div className="p-4 rounded-lg bg-[var(--sand)]/50 border border-[var(--ink)]/5">
|
|
<span className="block text-xs uppercase tracking-widest text-[var(--moss)] mb-1">Atmosphere</span>
|
|
<span className="font-medium">Private & Relaxed</span>
|
|
</div>
|
|
</div>
|
|
</UnitedCardContent>
|
|
</UnitedCard>
|
|
</Reveal>
|
|
</div>
|
|
</StickySplit>
|
|
</section>
|
|
)
|
|
}
|