// exact hex
```
### Font Sizes
Never approximate. Use exact values:
```tsx
// WRONG
// This is 60px, but original might be 64px
// RIGHT
// This is 60px, but original might be 64px
// RIGHT
// Exact value
// Also works
```
### Spacing
Use Tailwind arbitrary values for non-standard spacing:
```tsx
// WRONG - approximation
// 16px and 32px
// RIGHT - exact values
// Exact from original
```
### Complex Backgrounds
Use inline styles for gradients, blurs, and multi-layer effects:
```tsx
```
### Shadows
Preserve exact shadow values:
```tsx
// WRONG - generic Tailwind shadow
// RIGHT - exact shadow
// OR
```
### Transforms
Preserve rotations, scales, and translations:
```tsx
Tape Label
```
## Asset URL Mapping
The scraper downloads assets to `public/assets/`. Map URLs:
```tsx
// Original HTML
// After download, asset is at: ./output/public/assets/hero-bg.png
// In component
// For Next.js Image optimization
import Image from 'next/image';
{/* Floating element */}
{/* Content */}
...
```
### Z-Index Layers
Preserve stacking order:
```tsx
Background
Middle layer
Top layer
Content
```
### Overflow and Clipping
```tsx
{/* This content gets clipped */}
...
```
## Interactive States
Preserve hover, focus, and active states:
```tsx
```
## Animations
For simple animations, use Tailwind:
```tsx
```
For complex animations, define in globals.css:
```css
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
```
## Component Structure Template
```tsx
// "use client" only if needed for interactivity
"use client";
import Image from 'next/image';
export default function SectionName() {
return (
{/* Background Effects */}
{/* Glow blobs, patterns, etc. */}
{/* Content Container */}
{/* Section content */}
{/* Styled-jsx for complex/unique styles */}
);
}
```
## Quality Verification
After generating, check:
1. **Side-by-side comparison** - Does it look identical?
2. **Color picker test** - Are hex values exact?
3. **Font inspection** - Are fonts loading correctly?
4. **Spacing measurement** - Are dimensions exact?
5. **Responsive test** - Does it break at same points?
## Real-World Component Examples
### Navigation with Sticky Header
```tsx
"use client";
import Link from 'next/link';
import Image from 'next/image';
import {useState, useEffect} from 'react';
export default function Navigation() {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => setScrolled(window.scrollY > 50);
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
);
}
```
### Hero with Polaroid Collage Layout
```tsx
import Image from 'next/image';
export default function Hero() {
const photos = [
{src: '/assets/photo1.jpg', rotation: -3, top: '15%', left: '5%', width: 280},
{src: '/assets/photo2.jpg', rotation: 5, top: '25%', right: '8%', width: 320},
{src: '/assets/photo3.jpg', rotation: -2, bottom: '20%', left: '12%', width: 260},
{src: '/assets/photo4.jpg', rotation: 4, bottom: '15%', right: '5%', width: 300},
];
return (
{/* Grid Background */}
Symposium
Join us for an evening of intellectual discourse, creative exploration,
and meaningful connections at our annual gathering.
{/* CTA */}
);
}
```
### Feature Grid with Icons
```tsx
import Image from 'next/image';
const features = [
{
icon: '/assets/icon-community.svg',
title: 'Community',
description: 'Connect with like-minded individuals passionate about ideas.',
},
{
icon: '/assets/icon-learning.svg',
title: 'Learning',
description: 'Expand your horizons through workshops and discussions.',
},
{
icon: '/assets/icon-creativity.svg',
title: 'Creativity',
description: 'Express yourself through collaborative projects.',
},
];
export default function Features() {
return (
What We Offer
{features.map((feature, i) => (
{feature.title}
{feature.description}
))}
);
}
```
### Footer with Multi-Column Layout
```tsx
import Link from 'next/link';
import Image from 'next/image';
const footerLinks = {
'About': ['Our Story', 'Team', 'Careers', 'Press'],
'Events': ['Upcoming', 'Past Events', 'Submit Event', 'Calendar'],
'Community': ['Join', 'Guidelines', 'Discord', 'Newsletter'],
'Legal': ['Privacy', 'Terms', 'Cookies'],
};
export default function Footer() {
return (
);
}
```
### Card with Glassmorphism Effect
```tsx
export default function GlassCard() {
return (
{/* Gradient overlay */}
Glass Card Title
Content with glassmorphism effect.
);
}
```
### Animated Gradient Background
```tsx
"use client";
export default function AnimatedGradientSection() {
return (
{/* Animated gradient background */}
{/* Content */}
Animated Gradient
);
}
```
// Also works
```
### Spacing
Use Tailwind arbitrary values for non-standard spacing:
```tsx
// WRONG - approximation
// 16px and 32px
// RIGHT - exact values
// Exact from original
```
### Complex Backgrounds
Use inline styles for gradients, blurs, and multi-layer effects:
```tsx
```
### Shadows
Preserve exact shadow values:
```tsx
// WRONG - generic Tailwind shadow
// RIGHT - exact shadow
// OR
```
### Transforms
Preserve rotations, scales, and translations:
```tsx
Tape Label
```
## Asset URL Mapping
The scraper downloads assets to `public/assets/`. Map URLs:
```tsx
// Original HTML
// After download, asset is at: ./output/public/assets/hero-bg.png
// In component
// For Next.js Image optimization
import Image from 'next/image';
{/* Background Effects */}
{/* Glow blobs, patterns, etc. */}
{/* Content Container */}
{/* Section content */}
{/* Styled-jsx for complex/unique styles */}
);
}
```
## Quality Verification
After generating, check:
1. **Side-by-side comparison** - Does it look identical?
2. **Color picker test** - Are hex values exact?
3. **Font inspection** - Are fonts loading correctly?
4. **Spacing measurement** - Are dimensions exact?
5. **Responsive test** - Does it break at same points?
## Real-World Component Examples
### Navigation with Sticky Header
```tsx
"use client";
import Link from 'next/link';
import Image from 'next/image';
import {useState, useEffect} from 'react';
export default function Navigation() {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => setScrolled(window.scrollY > 50);
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
);
}
```
### Hero with Polaroid Collage Layout
```tsx
import Image from 'next/image';
export default function Hero() {
const photos = [
{src: '/assets/photo1.jpg', rotation: -3, top: '15%', left: '5%', width: 280},
{src: '/assets/photo2.jpg', rotation: 5, top: '25%', right: '8%', width: 320},
{src: '/assets/photo3.jpg', rotation: -2, bottom: '20%', left: '12%', width: 260},
{src: '/assets/photo4.jpg', rotation: 4, bottom: '15%', right: '5%', width: 300},
];
return (
{/* Grid Background */}
Symposium
Join us for an evening of intellectual discourse, creative exploration,
and meaningful connections at our annual gathering.
{/* CTA */}
);
}
```
### Feature Grid with Icons
```tsx
import Image from 'next/image';
const features = [
{
icon: '/assets/icon-community.svg',
title: 'Community',
description: 'Connect with like-minded individuals passionate about ideas.',
},
{
icon: '/assets/icon-learning.svg',
title: 'Learning',
description: 'Expand your horizons through workshops and discussions.',
},
{
icon: '/assets/icon-creativity.svg',
title: 'Creativity',
description: 'Express yourself through collaborative projects.',
},
];
export default function Features() {
return (
What We Offer
{features.map((feature, i) => (
{feature.title}
{feature.description}
))}
);
}
```
### Footer with Multi-Column Layout
```tsx
import Link from 'next/link';
import Image from 'next/image';
const footerLinks = {
'About': ['Our Story', 'Team', 'Careers', 'Press'],
'Events': ['Upcoming', 'Past Events', 'Submit Event', 'Calendar'],
'Community': ['Join', 'Guidelines', 'Discord', 'Newsletter'],
'Legal': ['Privacy', 'Terms', 'Cookies'],
};
export default function Footer() {
return (
);
}
```
### Card with Glassmorphism Effect
```tsx
export default function GlassCard() {
return (
{/* Gradient overlay */}
Glass Card Title
Content with glassmorphism effect.
);
}
```
### Animated Gradient Background
```tsx
"use client";
export default function AnimatedGradientSection() {
return (
{/* Animated gradient background */}
{/* Content */}
Animated Gradient
);
}
```
// Exact from original
```
### Complex Backgrounds
Use inline styles for gradients, blurs, and multi-layer effects:
```tsx
```
### Shadows
Preserve exact shadow values:
```tsx
// WRONG - generic Tailwind shadow
// RIGHT - exact shadow
// OR
```
### Transforms
Preserve rotations, scales, and translations:
```tsx
// After download, asset is at: ./output/public/assets/hero-bg.png
// In component
// For Next.js Image optimization
import Image from 'next/image';
Tape Label
```
## Asset URL Mapping
The scraper downloads assets to `public/assets/`. Map URLs:
```tsx
// Original HTML
// After download, asset is at: ./output/public/assets/hero-bg.png
// In component
// For Next.js Image optimization
import Image from 'next/image';
{/* Background element */}
{/* Floating element */}
{/* Content */}
```
### Z-Index Layers
Preserve stacking order:
```tsx
...
Background
Middle layer
Top layer
Content
{/* This content gets clipped */}
```
## Interactive States
Preserve hover, focus, and active states:
```tsx
```
## Animations
For simple animations, use Tailwind:
```tsx
...
```
For complex animations, define in globals.css:
```css
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
```
## Component Structure Template
```tsx
// "use client" only if needed for interactivity
"use client";
import Image from 'next/image';
export default function SectionName() {
return (
{/* Background Effects */}
);
}
```
## Quality Verification
After generating, check:
1. **Side-by-side comparison** - Does it look identical?
2. **Color picker test** - Are hex values exact?
3. **Font inspection** - Are fonts loading correctly?
4. **Spacing measurement** - Are dimensions exact?
5. **Responsive test** - Does it break at same points?
## Real-World Component Examples
### Navigation with Sticky Header
```tsx
"use client";
import Link from 'next/link';
import Image from 'next/image';
import {useState, useEffect} from 'react';
export default function Navigation() {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => setScrolled(window.scrollY > 50);
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
);
}
```
### Hero with Polaroid Collage Layout
```tsx
import Image from 'next/image';
export default function Hero() {
const photos = [
{src: '/assets/photo1.jpg', rotation: -3, top: '15%', left: '5%', width: 280},
{src: '/assets/photo2.jpg', rotation: 5, top: '25%', right: '8%', width: 320},
{src: '/assets/photo3.jpg', rotation: -2, bottom: '20%', left: '12%', width: 260},
{src: '/assets/photo4.jpg', rotation: 4, bottom: '15%', right: '5%', width: 300},
];
return (
{/* Grid Background */}
);
}
```
### Feature Grid with Icons
```tsx
import Image from 'next/image';
const features = [
{
icon: '/assets/icon-community.svg',
title: 'Community',
description: 'Connect with like-minded individuals passionate about ideas.',
},
{
icon: '/assets/icon-learning.svg',
title: 'Learning',
description: 'Expand your horizons through workshops and discussions.',
},
{
icon: '/assets/icon-creativity.svg',
title: 'Creativity',
description: 'Express yourself through collaborative projects.',
},
];
export default function Features() {
return (
);
}
```
### Footer with Multi-Column Layout
```tsx
import Link from 'next/link';
import Image from 'next/image';
const footerLinks = {
'About': ['Our Story', 'Team', 'Careers', 'Press'],
'Events': ['Upcoming', 'Past Events', 'Submit Event', 'Calendar'],
'Community': ['Join', 'Guidelines', 'Discord', 'Newsletter'],
'Legal': ['Privacy', 'Terms', 'Cookies'],
};
export default function Footer() {
return (
);
}
```
### Card with Glassmorphism Effect
```tsx
export default function GlassCard() {
return (
{/* Animated gradient background */}
{/* Content */}
);
}
```
{/* Glow blobs, patterns, etc. */}
{/* Content Container */}
{/* Section content */}
{/* Styled-jsx for complex/unique styles */}
{/* Tape Label */}
You're invited
{/* Headline */}
You are invited to the world's greatest celebration of
Symposium
Join us for an evening of intellectual discourse, creative exploration, and meaningful connections at our annual gathering.
{/* CTA */}What We Offer
{features.map((feature, i) => (
{feature.title}
{feature.description}
{/* Gradient overlay */}
);
}
```
### Animated Gradient Background
```tsx
"use client";
export default function AnimatedGradientSection() {
return (
Glass Card Title
Content with glassmorphism effect.