"use client"; import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; import { Compass, Hash, ExternalLink, ArrowDownRight, Globe } from "lucide-react"; /** * Technical Utility: Merges Tailwind classes safely. */ function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } interface VerticalDecorProps { label: string; mainTitle: string; description: string; className?: string; } /** * Sideways Vertical Label * A professional editorial component that utilizes 90-degree rotated text * to anchor the layout's perimeter. Perfect for sidebars and card accents. */ export default function SidewaysVerticalLabel({ label = "Architecture_v2", mainTitle = "Spatial Design Systems", description = "Redefining how users interact with vertical space through precise typographic alignment.", className, }: VerticalDecorProps) { const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); if (!mounted) return null; return (

{/* VERTICAL DECOR SIDEBAR */}

{/* The Core Vertical Text */}

{label}

2026

{/* MAIN CONTENT AREA */}

Concept_Log_01

{mainTitle}

{description}

Global_Reach

Optimized for lateral reading patterns and perimeter-based UI navigation.

Explore Docs

{/* BOTTOM RIGHT DECOR */}

Uixtra_Perimeter_Engine

); }