components

components/ui/Badge.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { cn } from './utils';
+
+export function Badge({ children, className, variant = 'primary' }: { children: React.ReactNode, className?: string, variant?: 'primary' | 'accent' | 'neutral' }) {
+  const variants = {
+    primary: 'bg-primary-light text-primary',
+    accent: 'bg-accent-light text-accent-dark',
+    neutral: 'bg-neutral-medium text-text-secondary',
+  };
+  
+  return (
+    <span className={cn('inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider', variants[variant], className)}>
+      {children}
+    </span>
+  );
+}

components/ui/Button.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Link from 'next/link';
+import { cn } from './utils';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'accent' | 'outline' | 'ghost' | 'white';
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  href?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function Button({ className, variant = 'primary', size = 'md', href, ...props }: ButtonProps) {
+  const baseStyles = 'inline-flex items-center justify-center rounded-full font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95';
+  
+  const variants = {
+    primary: 'bg-primary text-white hover:bg-primary-dark shadow-md hover:shadow-lg',
+    secondary: 'bg-secondary text-white hover:bg-secondary-light shadow-md hover:shadow-lg',
+    accent: 'bg-accent text-primary-dark hover:bg-accent-dark shadow-md hover:shadow-lg',
+    outline: 'border-2 border-primary bg-transparent hover:bg-primary hover:text-white text-primary',
+    ghost: 'hover:bg-primary-light text-primary',
+    white: 'bg-white text-primary hover:bg-neutral-light shadow-md hover:shadow-lg',
+  };
+
+  const sizes = {
+    sm: 'h-9 px-4 text-sm',
+    md: 'h-11 px-6 text-base',
+    lg: 'h-14 px-8 text-lg',
+    xl: 'h-16 px-10 text-xl',
+  };
+
+  const styles = cn(baseStyles, variants[variant], sizes[size], className);
+
+  if (href) {
+    return (
+      <Link href={href} className={styles}>
+        {props.children}
+      </Link>
+    );
+  }
+
+  return (
+    <button className={styles} {...props} />
+  );
+}

components/ui/Callout.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { cn } from './utils';
+
+interface CalloutProps {
+  type?: 'info' | 'warning' | 'success' | 'tip';
+  title?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const icons = {
+  info: (
+    <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+    </svg>
+  ),
+  warning: (
+    <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+    </svg>
+  ),
+  success: (
+    <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+    </svg>
+  ),
+  tip: (
+    <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+    </svg>
+  ),
+};
+
+const styles = {
+  info: 'bg-blue-50 border-blue-200 text-blue-900',
+  warning: 'bg-yellow-50 border-yellow-200 text-yellow-900',
+  success: 'bg-green-50 border-green-200 text-green-900',
+  tip: 'bg-purple-50 border-purple-200 text-purple-900',
+};
+
+const iconColors = {
+  info: 'text-blue-500',
+  warning: 'text-yellow-500',
+  success: 'text-green-500',
+  tip: 'text-purple-500',
+};
+
+export function Callout({ type = 'info', title, children, className }: CalloutProps) {
+  return (
+    <div className={cn('my-8 p-6 rounded-xl border-2', styles[type], className)}>
+      <div className="flex gap-4">
+        <div className={cn('flex-shrink-0', iconColors[type])}>
+          {icons[type]}
+        </div>
+        <div className="flex-1">
+          {title && (
+            <h4 className="font-bold text-lg mb-2">{title}</h4>
+          )}
+          <div className="prose prose-sm max-w-none">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/ui/Card.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { cn } from './utils';
+
+export function Card({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn('premium-card overflow-hidden', className)} {...props}>
+      {children}
+    </div>
+  );
+}

components/ui/Container.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { cn } from './utils';
+
+export function Container({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn('container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl', className)} {...props}>
+      {children}
+    </div>
+  );
+}

components/ui/Heading.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { cn } from './utils';
+
+export function Heading({ 
+  level = 2, 
+  children, 
+  className, 
+  subtitle,
+  align = 'left'
+}: { 
+  level?: 1 | 2 | 3 | 4; 
+  children: React.ReactNode; 
+  className?: string;
+  subtitle?: string;
+  align?: 'left' | 'center' | 'right';
+}) {
+  const Tag = `h${level}` as any;
+  
+  const sizes = {
+    1: 'text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold leading-[1.1]',
+    2: 'text-3xl md:text-5xl lg:text-6xl font-bold leading-tight',
+    3: 'text-2xl md:text-3xl lg:text-4xl font-bold',
+    4: 'text-xl md:text-2xl font-bold',
+  };
+
+  const alignments = {
+    left: 'text-left',
+    center: 'text-center mx-auto',
+    right: 'text-right',
+  };
+
+  return (
+    <div className={cn('mb-8 md:mb-16', alignments[align], className)}>
+      {subtitle && (
+        <span className="inline-block text-accent font-bold tracking-widest uppercase text-xs md:text-sm mb-3 md:mb-4 animate-fade-in">
+          {subtitle}
+        </span>
+      )}
+      <Tag className={cn(sizes[level as keyof typeof sizes], 'text-primary')}>
+        {children}
+      </Tag>
+    </div>
+  );
+}

components/ui/Input.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { cn } from './utils';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  className?: string;
+}
+
+export function Input({ className, ...props }: InputProps) {
+  return (
+    <input
+      className={cn(
+        'w-full px-4 md:px-6 py-2.5 md:py-4 bg-neutral-light/50 border border-neutral-dark/10 rounded-xl md:rounded-2xl focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent focus:bg-white transition-all duration-300 placeholder:text-neutral-dark/40 text-sm md:text-lg',
+        className
+      )}
+      {...props}
+    />
+  );
+}

components/ui/Label.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { cn } from './utils';
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  className?: string;
+}
+
+export function Label({ className, ...props }: LabelProps) {
+  return (
+    <label
+      className={cn(
+        'text-[10px] md:text-xs font-extrabold text-primary uppercase tracking-widest',
+        className
+      )}
+      {...props}
+    />
+  );
+}

components/ui/Section.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { cn } from './utils';
+
+export function Section({ className, children, ...props }: React.HTMLAttributes<HTMLElement>) {
+  return (
+    <section className={cn('py-16 md:py-28 lg:py-36 overflow-hidden content-visibility-auto', className)} {...props}>
+      {children}
+    </section>
+  );
+}

components/ui/Textarea.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { cn } from './utils';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  className?: string;
+}
+
+export function Textarea({ className, ...props }: TextareaProps) {
+  return (
+    <textarea
+      className={cn(
+        'w-full px-4 md:px-6 py-2.5 md:py-4 bg-neutral-light/50 border border-neutral-dark/10 rounded-xl md:rounded-2xl focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent focus:bg-white transition-all duration-300 placeholder:text-neutral-dark/40 text-sm md:text-lg resize-none',
+        className
+      )}
+      {...props}
+    />
+  );
+}

components/ui/index.ts

@@ -0,0 +1,11 @@
+export * from './utils';
+export * from './Button';
+export * from './Section';
+export * from './Container';
+export * from './Heading';
+export * from './Card';
+export * from './Badge';
+export * from './Input';
+export * from './Textarea';
+export * from './Label';
+export * from './Callout';

components/ui/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}