Luxury Atelier Editorial Footer

footers

High-fashion editorial typography with Roman numeral accents and curated volume archives.

#footer#editorial#luxury#serif#fashion

Live Interactive Preview

Component Source Code

Select language in the dropdown

LuxuryEditorialFooter.tsx

1'use client';
2
3import React from 'react';
4
5export default function LuxuryEditorialFooter() {
6  return (
7    <footer className="w-full max-w-5xl mx-auto border-t border-slate-300 dark:border-slate-800 bg-white dark:bg-slate-950 p-8 sm:p-14 select-none">
8      <div className="flex flex-col md:flex-row justify-between items-start gap-10 pb-10 border-b border-slate-200 dark:border-slate-800">
9        <div className="space-y-3">
10          <span className="text-[10px] font-mono uppercase tracking-widest text-slate-400">THE ATELIER COLLECTION</span>
11          <h2 className="text-2xl sm:text-3xl font-serif italic text-slate-900 dark:text-slate-100">
12            AurenzaUI Editorial
13          </h2>
14          <p className="text-xs text-slate-500 max-w-sm font-sans leading-relaxed">
15            High-fashion digital component library curated for luxury magazines, galleries, and bespoke portfolios.
16          </p>
17        </div>
18
19        <div className="grid grid-cols-2 gap-10 text-xs font-serif italic text-slate-700 dark:text-slate-300">
20          <div className="space-y-2">
21            <p className="text-[10px] font-mono not-italic uppercase tracking-widest text-slate-400">EDITIONS</p>
22            <p><a href="#" className="hover:underline">Volume 01: Noir</a></p>
23            <p><a href="#" className="hover:underline">Volume 02: Spatial</a></p>
24            <p><a href="#" className="hover:underline">Volume 03: Minimal</a></p>
25          </div>
26          <div className="space-y-2">
27            <p className="text-[10px] font-mono not-italic uppercase tracking-widest text-slate-400">ARCHIVE</p>
28            <p><a href="#" className="hover:underline">Typography</a></p>
29            <p><a href="#" className="hover:underline">Exhibitions</a></p>
30            <p><a href="#" className="hover:underline">Curators</a></p>
31          </div>
32        </div>
33      </div>
34
35      <div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-6 text-[11px] text-slate-400 font-mono">
36        <p>© MMXXVI AURENZA. ALL RIGHTS PRESERVED.</p>
37        <p className="uppercase tracking-widest">PARIS // TOKYO // NEW YORK</p>
38      </div>
39    </footer>
40  );
41}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/footers/LuxuryEditorialFooter.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import LuxuryAtelierEditorialFooter from '@/components/footers/LuxuryEditorialFooter';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <LuxuryAtelierEditorialFooter />
7    </main>
8  );
9}