Nicholai
bba1bab8c2
- Added essential configuration files including components.json, package.json, and tsconfig.json to establish the component library structure. - Introduced global styles in globals.css and layout structure in layout.tsx for consistent design application. - Implemented various UI components such as Accordion, AlertDialog, Button, Card, and more, enhancing the component library for future development. - Included utility functions and hooks to support component functionality and responsiveness. This commit sets up the groundwork for a comprehensive UI component library, facilitating a modular and scalable design system.
267 lines
11 KiB
TypeScript
267 lines
11 KiB
TypeScript
import { Button } from "@/components/united/button"
|
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/united/card"
|
|
import { Toast } from "@/components/united/toast"
|
|
import { FormContainer } from "@/components/united/form-container"
|
|
import { FormField, Input, Textarea } from "@/components/united/form-field"
|
|
import { Calendar } from "@/components/united/calendar"
|
|
import { ColorSwatch } from "@/components/united/color-swatch"
|
|
import { SectionLabel } from "@/components/united/section-label"
|
|
import { Heading } from "@/components/united/heading"
|
|
import { LeadText } from "@/components/united/lead-text"
|
|
import { HeroOverlay } from "@/components/united/hero-overlay"
|
|
import { AnimatedLink } from "@/components/united/animated-link"
|
|
import { LiftCard } from "@/components/united/lift-card"
|
|
import { MotionCard } from "@/components/united/motion-card"
|
|
import { GalleryCard } from "@/components/united/gallery-card"
|
|
import { StickySplit } from "@/components/united/sticky-split"
|
|
import { Divider } from "@/components/united/divider"
|
|
import { Filmstrip } from "@/components/united/filmstrip"
|
|
import { Reveal } from "@/components/united/reveal"
|
|
import { Metadata } from "@/components/united/metadata"
|
|
|
|
export default function ComponentLibrary() {
|
|
const calendarDays = [
|
|
{ day: 10, isBooked: true },
|
|
{ day: 11 },
|
|
{ day: 12 },
|
|
{ day: 13 },
|
|
{ day: 14, isBooked: true },
|
|
{ day: 15 },
|
|
{ day: 16 },
|
|
]
|
|
|
|
const filmstripItems = [
|
|
{ src: "/monument-statue-with-colorful-objects-artistic.jpg", label: "Monument Prep" },
|
|
{ src: "/statue-of-liberty-watercolor-painting-pastel.jpg", label: "Avian Story" },
|
|
{ src: "/artistic-studio-with-paintbrushes-and-statue.jpg", label: "Architectural Study" },
|
|
]
|
|
|
|
return (
|
|
<div className="w-full max-w-[1600px] mx-auto px-[clamp(1.5rem,4vw,5rem)] pb-16">
|
|
{/* Hero Section */}
|
|
<header className="min-h-[70vh] flex items-center justify-center relative -mx-[clamp(1.5rem,4vw,5rem)] bg-[url('/artistic-painting-statue-of-liberty-with-warm-colo.jpg')] bg-cover bg-center [mask-image:linear-gradient(180deg,black_60%,transparent_100%)]">
|
|
<Reveal>
|
|
<HeroOverlay>
|
|
<SectionLabel>United Tattoo</SectionLabel>
|
|
<Heading level={1}>Design Language Reference</Heading>
|
|
<LeadText className="mx-auto">
|
|
A living style guide documenting color, typography, components, and interaction patterns.
|
|
</LeadText>
|
|
</HeroOverlay>
|
|
</Reveal>
|
|
</header>
|
|
|
|
{/* Filmstrip Gallery */}
|
|
<Filmstrip
|
|
items={filmstripItems}
|
|
subtitle="01 • Immersion Gallery"
|
|
title="Sunbleached walls & charcoal studies."
|
|
className="-mx-[clamp(1.5rem,4vw,5rem)]"
|
|
/>
|
|
|
|
{/* Brand Identity Section */}
|
|
<section className="mt-[clamp(3.5rem,6vw,6rem)]">
|
|
<StickySplit
|
|
sidebar={
|
|
<Reveal>
|
|
<SectionLabel number="02">Brand Identity</SectionLabel>
|
|
<Heading level={2}>Color, typography, and materiality echo sun-washed plaster.</Heading>
|
|
<LeadText>
|
|
Think plaster walls catching a diagonal slice of afternoon light—burnt oranges, desaturated greens, and
|
|
charcoal blacks. Typography feels like museum placards.
|
|
</LeadText>
|
|
</Reveal>
|
|
}
|
|
>
|
|
<div className="grid gap-8">
|
|
<Reveal delay={100}>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Color Language</CardTitle>
|
|
<Metadata>Ratio — 60 / 25 / 15</Metadata>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="mb-8 text-[rgba(36,27,22,0.7)]">
|
|
Primary palette blends burnt oranges with sage concrete.
|
|
</p>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
<ColorSwatch hex="#E67E50" name="Burnt Orange" usage="Hero Gradients" />
|
|
<ColorSwatch hex="#D87850" name="Terracotta" usage="Interaction" />
|
|
<ColorSwatch hex="#7A8B8B" name="Sage Concrete" usage="Backgrounds" />
|
|
<ColorSwatch hex="#1C1915" name="Charcoal" usage="Ink & Type" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Reveal>
|
|
|
|
<Reveal delay={200}>
|
|
<Card className="bg-[rgba(255,255,255,0.6)]">
|
|
<CardTitle>Typography</CardTitle>
|
|
<CardContent>
|
|
<div className="grid gap-6 mt-6">
|
|
<div className="p-6 border border-dashed border-[rgba(122,139,139,0.4)] rounded-[12px]">
|
|
<SectionLabel>Display / Headlines</SectionLabel>
|
|
<div className="font-serif text-[2.5rem] leading-[1.1] mt-2">
|
|
Playfair Display
|
|
<br />
|
|
<span className="text-2xl text-[var(--burnt)]">Sculptural Statements</span>
|
|
</div>
|
|
</div>
|
|
<div className="p-6 border border-dashed border-[rgba(122,139,139,0.4)] rounded-[12px]">
|
|
<SectionLabel>Body / Interface</SectionLabel>
|
|
<p className="text-base mt-2 max-w-[40ch]">
|
|
Space Grotesk. Used for body copy and interface elements. Quiet, generous tracking, always
|
|
legible on textured backgrounds.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Reveal>
|
|
</div>
|
|
</StickySplit>
|
|
</section>
|
|
|
|
<Divider />
|
|
|
|
{/* Interface Components Section */}
|
|
<section>
|
|
<Reveal className="text-center mb-12">
|
|
<SectionLabel number="03">Interface Components</SectionLabel>
|
|
<Heading level={2}>Micro-interactions that feel tactile.</Heading>
|
|
</Reveal>
|
|
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
<Reveal delay={100}>
|
|
<div>
|
|
<p className="text-[0.75rem] font-semibold uppercase tracking-[0.3em] text-[var(--ink)] mb-6">
|
|
Action Hierarchy
|
|
</p>
|
|
<div className="flex gap-4 flex-wrap mb-12">
|
|
<Button variant="primary">Primary</Button>
|
|
<Button variant="secondary">Secondary</Button>
|
|
<Button variant="ghost">Ghost Link</Button>
|
|
</div>
|
|
|
|
<p className="text-[0.75rem] font-semibold uppercase tracking-[0.3em] text-[var(--ink)] mb-6">
|
|
Toast States
|
|
</p>
|
|
<div className="grid gap-4">
|
|
<Toast variant="success" title="Deposit Received" description="Confirmation sent to email." />
|
|
<Toast variant="alert" title="Waitlist Update" description="Feb 2026 books just opened." />
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
|
|
<Reveal delay={200}>
|
|
<FormContainer>
|
|
<SectionLabel className="text-[var(--ink)]">Booking Request</SectionLabel>
|
|
|
|
<FormField label="Full Name">
|
|
<Input placeholder="Eden Morales" />
|
|
</FormField>
|
|
|
|
<FormField label="Concept Notes">
|
|
<Textarea rows={3} placeholder="Large scale back piece..." />
|
|
</FormField>
|
|
|
|
<div className="bg-[rgba(242,227,208,0.5)] p-4 rounded-[12px] mt-2">
|
|
<Calendar
|
|
title="Availability • Feb 2026"
|
|
days={calendarDays}
|
|
className="shadow-none border-0 p-0 bg-transparent"
|
|
/>
|
|
</div>
|
|
</FormContainer>
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Layout & Pacing Section */}
|
|
<section className="mt-24">
|
|
<Reveal>
|
|
<SectionLabel number="04">Layout & Pacing</SectionLabel>
|
|
<Heading level={2}>Structure mirrors gallery pacing: spacious, staggered, editorial.</Heading>
|
|
</Reveal>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
|
|
<Reveal delay={0}>
|
|
<GalleryCard
|
|
src="/monument-statue-colorful-artistic-display.jpg"
|
|
alt="Hero Canvas"
|
|
label="Hero Canvas • Diptych Pacing"
|
|
/>
|
|
</Reveal>
|
|
<Reveal delay={150} className="md:translate-y-12">
|
|
<GalleryCard
|
|
src="/watercolor-statue-of-liberty-painting.jpg"
|
|
alt="Artist Card"
|
|
label="Artist Card • Chip Layout"
|
|
/>
|
|
</Reveal>
|
|
<Reveal delay={300}>
|
|
<GalleryCard
|
|
src="/artistic-studio-sculpture-with-dove.jpg"
|
|
alt="Lookbook"
|
|
label="Lookbook • Stagger Grid"
|
|
/>
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Motion Principles Section */}
|
|
<section className="mt-32">
|
|
<StickySplit
|
|
sidebar={
|
|
<Reveal>
|
|
<SectionLabel number="05">Motion Principles</SectionLabel>
|
|
<Heading level={2}>Every movement should feel deliberate, like brush strokes.</Heading>
|
|
<div className="mt-8 grid gap-4">
|
|
<MotionCard
|
|
title="0.8s Ease-Out"
|
|
description="Used for reveals. Slow entrance, smooth settling."
|
|
highlight="burnt"
|
|
/>
|
|
<MotionCard
|
|
title="50ms Stagger"
|
|
description='Creates a "walking past paintings" effect.'
|
|
highlight="terracotta"
|
|
/>
|
|
</div>
|
|
</Reveal>
|
|
}
|
|
>
|
|
<Reveal delay={100}>
|
|
<Card variant="motion" className="p-12">
|
|
<CardTitle>Interaction Demo</CardTitle>
|
|
<p className="mt-2">
|
|
Hover the elements below to see the "Shadow Bloom" and "Scale" effects.
|
|
</p>
|
|
|
|
<div className="mt-8 flex flex-col gap-6">
|
|
<div>
|
|
<Metadata className="block mb-2">Link Underline Draw</Metadata>
|
|
<AnimatedLink href="#">Visit the Studio</AnimatedLink>
|
|
</div>
|
|
|
|
<div>
|
|
<Metadata className="block mb-2">Card Lift</Metadata>
|
|
<LiftCard>
|
|
<strong>Hover Me</strong>
|
|
<p className="mt-2 text-[0.9rem] opacity-70">Simulates lifting an object off the table.</p>
|
|
</LiftCard>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</Reveal>
|
|
</StickySplit>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="mt-24 py-16 text-center border-t border-[rgba(36,27,22,0.1)]">
|
|
<Metadata>United Tattoo • Living Style Brief • Updated Quarterly</Metadata>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|