design

src/components/ArticleHeading.tsx

@@ -6,19 +6,19 @@ interface HeadingProps {
 }
 
 export const H1: React.FC<HeadingProps> = ({ children, className = '' }) => (
-  <h1 className={`text-4xl font-bold text-slate-900 mb-4 mt-8 leading-tight ${className}`}>
+  <h1 className={`text-4xl md:text-5xl font-bold text-slate-900 mb-8 mt-12 leading-[1.1] tracking-tight ${className}`}>
     {children}
   </h1>
 );
 
 export const H2: React.FC<HeadingProps> = ({ children, className = '' }) => (
-  <h2 className={`text-3xl font-bold text-slate-900 mb-4 mt-8 leading-snug ${className}`}>
+  <h2 className={`text-3xl md:text-4xl font-bold text-slate-900 mb-6 mt-10 leading-[1.2] tracking-tight ${className}`}>
     {children}
   </h2>
 );
 
 export const H3: React.FC<HeadingProps> = ({ children, className = '' }) => (
-  <h3 className={`text-2xl font-bold text-slate-900 mb-4 mt-8 leading-relaxed ${className}`}>
+  <h3 className={`text-2xl md:text-3xl font-bold text-slate-900 mb-4 mt-8 leading-[1.3] tracking-tight ${className}`}>
     {children}
   </h3>
 );

src/components/ArticleParagraph.tsx

@@ -6,13 +6,13 @@ interface ParagraphProps {
 }
 
 export const Paragraph: React.FC<ParagraphProps> = ({ children, className = '' }) => (
-  <p className={`text-slate-700 leading-relaxed mb-4 ${className}`}>
+  <p className={`text-slate-700 font-serif text-lg md:text-xl leading-relaxed mb-6 ${className}`}>
     {children}
   </p>
 );
 
 export const LeadParagraph: React.FC<ParagraphProps> = ({ children, className = '' }) => (
-  <p className={`text-xl text-slate-700 leading-relaxed mb-6 ${className}`}>
+  <p className={`text-xl md:text-2xl text-slate-700 font-serif italic leading-relaxed mb-8 ${className}`}>
     {children}
   </p>
 );

src/components/CTA.tsx

@@ -9,7 +9,7 @@ export const CTA: React.FC = () => {
       <Reveal width="100%">
         <div className="relative p-12 md:p-20 border border-slate-200 rounded-[3rem] bg-white">
           <div className="absolute top-0 left-12 w-px h-24 bg-slate-200 -translate-y-12"></div>
-          <div className="absolute -right-12 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">?</div>
+          <div className="absolute -right-12 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10 opacity-50">?</div>
           
           <div className="space-y-16 relative z-10">
             <h2 className="text-6xl md:text-8xl font-bold tracking-tighter leading-[0.9] text-slate-900">

src/components/Header.tsx

@@ -13,10 +13,10 @@ export const Header: React.FC = () => {
     <header className="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-50">
       <div className="narrow-container py-4 flex items-center justify-between">
         <Link href="/" className="flex items-center gap-3 group">
-          <div className="w-10 h-10 bg-slate-900 rounded-xl flex items-center justify-center group-hover:bg-slate-800 group-hover:scale-105 transition-all duration-300 shadow-sm">
+          <div className="w-10 h-10 bg-slate-900 rounded-xl flex items-center justify-center group-hover:bg-slate-800 group-hover:scale-105 transition-all duration-500 shadow-sm">
             <span className="text-white text-lg font-bold">M</span>
           </div>
-          <span className="text-slate-900 font-bold tracking-tighter text-2xl">Marc Mintel</span>
+          <span className="text-slate-900 font-bold tracking-tighter text-2xl group-hover:tracking-tight transition-all duration-500">Marc Mintel</span>
         </Link>
         
         <nav className="flex items-center gap-8">

src/components/Landing/ComparisonRow.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { ArrowRight } from 'lucide-react';
+import { Reveal } from '../Reveal';
+
+interface ComparisonRowProps {
+  negativeLabel: string;
+  negativeText: React.ReactNode;
+  positiveLabel: string;
+  positiveText: React.ReactNode;
+  reverse?: boolean;
+  delay?: number;
+}
+
+export const ComparisonRow: React.FC<ComparisonRowProps> = ({
+  negativeLabel,
+  negativeText,
+  positiveLabel,
+  positiveText,
+  reverse = false,
+  delay = 0,
+}) => {
+  return (
+    <Reveal delay={delay}>
+      <div className={`flex flex-col ${reverse ? 'md:flex-row-reverse' : 'md:flex-row'} gap-8 md:gap-12 items-center`}>
+        <div className="flex-1 p-8 md:p-10 bg-slate-50/50 rounded-2xl text-slate-400 border border-transparent w-full">
+          <div className="text-[10px] font-bold uppercase tracking-[0.2em] mb-4 line-through decoration-slate-200">
+            {negativeLabel}
+          </div>
+          <div className="text-lg md:text-xl font-serif italic line-through decoration-slate-200 leading-snug">
+            {negativeText}
+          </div>
+        </div>
+        
+        <div className="shrink-0">
+          <ArrowRight className={`w-6 h-6 text-slate-200 hidden md:block ${reverse ? 'rotate-180' : ''}`} />
+        </div>
+        
+        <div className="flex-1 p-8 md:p-10 border border-slate-100 rounded-2xl bg-white hover:border-slate-200 transition-all duration-500 hover:shadow-xl hover:shadow-slate-100/50 w-full">
+          <div className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 mb-4">
+            {positiveLabel}
+          </div>
+          <div className="text-2xl md:text-3xl font-bold text-slate-900 leading-tight tracking-tight">
+            {positiveText}
+          </div>
+        </div>
+      </div>
+    </Reveal>
+  );
+};

src/components/Landing/FeatureCard.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { LucideIcon } from 'lucide-react';
+import { Reveal } from '../Reveal';
+
+interface FeatureCardProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  delay?: number;
+}
+
+export const FeatureCard: React.FC<FeatureCardProps> = ({ icon: Icon, title, description, delay = 0 }) => {
+  return (
+    <Reveal delay={delay}>
+      <div className="p-8 md:p-10 border border-slate-100 rounded-2xl hover:border-slate-200 transition-all duration-500 group bg-white hover:shadow-xl hover:shadow-slate-100/50 relative overflow-hidden">
+        <div className="absolute top-0 right-0 w-24 h-24 bg-slate-50 rounded-full -mr-12 -mt-12 group-hover:bg-slate-100 transition-colors duration-500"></div>
+        <Icon className="w-8 h-8 mb-6 text-slate-300 group-hover:text-slate-900 group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 relative z-10" />
+        <h3 className="text-xl md:text-2xl font-bold text-slate-900 mb-3 tracking-tight relative z-10">
+          {title}
+        </h3>
+        <p className="text-lg md:text-xl text-slate-500 font-serif italic leading-relaxed relative z-10">
+          {description}
+        </p>
+      </div>
+    </Reveal>
+  );
+};

src/components/Landing/HeroItem.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Reveal } from '../Reveal';
+
+interface HeroItemProps {
+  number: string;
+  title: string;
+  description: string;
+  delay?: number;
+}
+
+export const HeroItem: React.FC<HeroItemProps> = ({ number, title, description, delay = 0 }) => {
+  return (
+    <Reveal delay={delay}>
+      <div className="group flex gap-6 md:gap-8 p-6 md:p-8 border border-transparent hover:border-slate-100 rounded-2xl transition-all duration-500 hover:bg-slate-50/50 relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-r from-slate-50/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+        <span className="text-xs font-bold uppercase tracking-[0.2em] text-slate-300 group-hover:text-slate-900 transition-colors pt-1.5 relative z-10">
+          {number}
+        </span>
+        <div className="space-y-2 relative z-10">
+          <h3 className="text-2xl md:text-4xl font-bold text-slate-900 tracking-tight group-hover:tracking-tighter transition-all duration-500">
+            {title}
+          </h3>
+          <p className="text-lg md:text-xl text-slate-400 font-serif italic leading-snug group-hover:text-slate-600 transition-colors duration-500">
+            {description}
+          </p>
+        </div>
+      </div>
+    </Reveal>
+  );
+};

src/components/Landing/ServiceCard.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import Link from 'next/link';
+import { Reveal } from '../Reveal';
+
+interface ServiceCardProps {
+  title: string;
+  description: string;
+  linkHref?: string;
+  linkLabel?: string;
+  delay?: number;
+}
+
+export const ServiceCard: React.FC<ServiceCardProps> = ({
+  title,
+  description,
+  linkHref,
+  linkLabel,
+  delay = 0,
+}) => {
+  return (
+    <Reveal delay={delay}>
+      <div className="group relative p-10 md:p-12 border border-slate-100 rounded-3xl hover:border-slate-900 transition-all duration-700 bg-white hover:shadow-2xl hover:shadow-slate-100/50 overflow-hidden">
+        {/* Decorative background text */}
+        <div className="absolute -right-4 -bottom-4 text-8xl md:text-9xl font-bold text-slate-50 select-none group-hover:text-slate-100 transition-colors duration-700 -z-10">
+          {title.charAt(0)}
+        </div>
+        
+        <h3 className="text-4xl md:text-6xl font-bold text-slate-900 mb-6 tracking-tighter group-hover:tracking-tight transition-all duration-700">
+          {title}
+        </h3>
+        <p className="text-xl md:text-2xl text-slate-500 font-serif italic mb-10 leading-tight max-w-3xl group-hover:text-slate-700 transition-colors duration-700">
+          {description}
+        </p>
+        {linkHref && linkLabel && (
+          <Link
+            href={linkHref}
+            className="inline-flex items-center gap-4 text-slate-900 font-bold text-[10px] uppercase tracking-[0.2em] group/link"
+          >
+            {linkLabel}
+            <div className="w-8 h-px bg-slate-200 group-hover/link:bg-slate-900 group-hover/link:w-16 transition-all duration-500"></div>
+          </Link>
+        )}
+      </div>
+    </Reveal>
+  );
+};

src/components/Landing/index.ts

@@ -0,0 +1,4 @@
+export * from './HeroItem';
+export * from './FeatureCard';
+export * from './ComparisonRow';
+export * from './ServiceCard';

src/components/Mermaid.tsx

@@ -57,13 +57,13 @@ export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
 
   return (
     <div className="mermaid-wrapper my-8 not-prose">
-      <div className="bg-white border border-slate-200/80 rounded-lg overflow-hidden shadow-sm">
-        <div className="px-3 py-2 border-b border-slate-100 bg-slate-50/30 flex items-center justify-between">
+      <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden transition-all duration-500 hover:border-slate-400">
+        <div className="px-4 py-3 border-b border-slate-100 bg-white flex items-center justify-between">
           <div className="flex items-center gap-2">
             <svg className="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
             </svg>
-            <span className="text-xs font-medium text-slate-500 uppercase tracking-wider">Diagram</span>
+            <span className="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">Diagram</span>
           </div>
         </div>
         <div className="mermaid-container p-8 md:p-12 overflow-x-auto flex justify-center bg-white">

src/components/PageHeader.tsx

@@ -22,27 +22,27 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
   return (
     <section className="narrow-container relative">
       {backgroundSymbol && (
-        <div className="absolute -left-24 -top-24 text-[20rem] font-bold text-slate-50 select-none -z-10">
+        <div className="absolute -left-24 -top-24 text-[20rem] font-bold text-slate-50 select-none -z-10 opacity-50">
           {backgroundSymbol}
         </div>
       )}
       
       {backLink && (
-        <Link href={backLink.href} className="inline-flex items-center gap-2 text-slate-300 hover:text-slate-900 mb-16 transition-colors font-mono text-xs uppercase tracking-[0.3em]">
-          <ArrowLeft className="w-3 h-3" /> {backLink.label}
+        <Link href={backLink.href} className="inline-flex items-center gap-3 text-slate-400 hover:text-slate-900 mb-12 transition-all duration-300 font-bold text-[10px] uppercase tracking-[0.3em] group">
+          <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" /> {backLink.label}
         </Link>
       )}
       
       <div className="space-y-16">
         <Reveal>
-          <h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
+          <h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.95]">
             {title}
           </h1>
         </Reveal>
 
         {description && (
           <Reveal delay={0.2}>
-            <p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-tight max-w-2xl">
+            <p className="text-2xl md:text-3xl text-slate-500 font-serif italic leading-snug max-w-3xl">
               {description}
             </p>
           </Reveal>

src/components/Reveal.tsx

@@ -27,10 +27,10 @@ export const Reveal: React.FC<RevealProps> = ({
   }, [isInView, mainControls]);
 
   return (
-    <div ref={ref} style={{ position: "relative", width, overflow: "hidden" }} className={className}>
+    <div ref={ref} style={{ position: "relative", width }} className={className}>
       <motion.div
         variants={{
-          hidden: { opacity: 0, y: 75 },
+          hidden: { opacity: 0, y: 20 },
           visible: { opacity: 1, y: 0 },
         }}
         initial="hidden"

src/components/Section.tsx

@@ -8,6 +8,8 @@ interface SectionProps {
   className?: string;
   numberPosition?: 'left' | 'right';
   delay?: number;
+  variant?: 'white' | 'gray';
+  borderTop?: boolean;
 }
 
 export const Section: React.FC<SectionProps> = ({
@@ -16,21 +18,33 @@ export const Section: React.FC<SectionProps> = ({
   children,
   className = "",
   numberPosition = 'left',
-  delay = 0
+  delay = 0,
+  variant = 'white',
+  borderTop = false,
 }) => {
+  const bgClass = variant === 'gray' ? 'bg-slate-50/50' : 'bg-white';
+  const borderClass = borderTop ? 'border-t border-slate-100' : '';
+
   return (
-    <section className={`narrow-container relative ${className}`}>
-      {number && (
-        <div className={`absolute ${numberPosition === 'left' ? '-left-24' : '-right-24'} -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10`}>
-          {number}
+    <section className={`relative py-24 md:py-32 ${bgClass} ${borderClass} ${className}`}>
+      <div className="narrow-container relative">
+        {number && (
+          <div className={`absolute ${numberPosition === 'left' ? '-left-24' : '-right-24'} -top-24 text-[15rem] md:text-[20rem] font-bold text-slate-100/50 select-none -z-10 pointer-events-none`}>
+            {number}
+          </div>
+        )}
+        {title && (
+          <Reveal delay={delay}>
+            <div className="flex items-center gap-4 mb-12 md:mb-16">
+              <div className="h-px w-8 bg-slate-200"></div>
+              <h2 className="text-[10px] font-bold uppercase tracking-[0.4em] text-slate-400">{title}</h2>
+            </div>
+          </Reveal>
+        )}
+        <div className="relative z-10">
+          {children}
         </div>
-      )}
-      {title && (
-        <Reveal delay={delay}>
-          <h2 className="text-sm font-bold uppercase tracking-[0.3em] text-slate-400 mb-24">{title}</h2>
-        </Reveal>
-      )}
-      {children}
+      </div>
     </section>
   );
 };