Polish Your Landing Page: Cursor Refinement Workflow
Bạn đã có foundation từ v0.dev. Bây giờ là lúc biến nó thành production-quality product với Cursor hoặc Windsurf.
The Refinement Process
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
│ v0.dev Base │ ──▶ │ Cursor Refine │ ──▶ │ Production │
└─────────────┘ └──────────────┘ └─────────────┘
30% 50% 20%
Structure Polish Deploy
Phase 1: Content Personalization
Setup Context:
@file components/landing/HeroSection.tsx
@file lib/constants.ts
Tôi cần personalize landing page này.
Thông tin cá nhân:
- Tên: [Your Name]
- Role: [Your Title]
- Bio: [2-3 sentences about you]
- Skills: [List of skills]
- Social Links: [GitHub, LinkedIn URLs]
Update all placeholder content với real data.
Extract strings vào constants file cho maintainability.
Create Constants File:
// lib/constants.ts
export const PERSONAL_INFO = {
name: "Nguyễn Văn A",
title: "Full-Stack Developer & AI Enthusiast",
bio: "Passionate about building products that matter...",
email: "your@email.com",
social: {
github: "https://github.com/yourusername",
linkedin: "https://linkedin.com/in/yourusername",
twitter: "https://twitter.com/yourusername"
}
};
export const SKILLS = [
"React", "Next.js", "TypeScript",
"Node.js", "Python", "AI/ML"
];
Phase 2: Visual Polish
Color Theme Refinement:
@file tailwind.config.ts
@file globals.css
Current color scheme quá generic.
Create custom color palette:
- Primary: [your brand color]
- Secondary: [complementary color]
- Accent: [highlight color]
- Background: subtle gradient
Update Tailwind config và CSS variables.
Apply consistently across all sections.
Typography Enhancement:
@file app/layout.tsx
@file globals.css
Upgrade typography:
- Import Inter font from Google Fonts
- Set up type scale: h1, h2, h3, body, small
- Ensure good contrast ratio (accessibility)
- Add letter-spacing cho headings
Apply across all components.
Animation & Micro-interactions:
@file components/landing/HeroSection.tsx
Add subtle animations:
- Hero content fade-in on load
- CTA buttons hover scale effect
- Smooth scroll to sections
- Project cards hover lift
Use Framer Motion hoặc CSS transitions.
Keep animations subtle, không distracting.
Phase 3: Responsive Fine-tuning
Mobile Optimization:
@file components/landing/ProjectsSection.tsx
Test responsive behavior.
Current issues trên mobile:
- [List specific issues]
Fix:
- Proper column stacking
- Touch-friendly button sizes
- Readable font sizes
- No horizontal scroll
Breakpoint Audit:
"Review all components cho responsive issues.
Check: sm (640px), md (768px), lg (1024px), xl (1280px)
List any layout breaks và fix them."
Phase 4: Interactive Features
Contact Form Functionality:
@file components/landing/ContactSection.tsx
Implement working contact form:
- Form validation với react-hook-form + Zod
- Submit handler (console.log for now)
- Loading state khi submit
- Success/Error toast messages
- Clear form on success
Use Shadcn Form components.
Navigation:
@file components/landing/Navbar.tsx
Add sticky navigation:
- Logo on left
- Section links: About, Projects, Contact
- Mobile hamburger menu
- Smooth scroll to sections on click
- Active section highlighting
Quality Checklist
Before Calling "Done":
[ ] All placeholder content replaced
[ ] Images optimized (WebP format, proper sizes)
[ ] Links working (no broken links)
[ ] Forms functional
[ ] Responsive on all screen sizes
[ ] Animations smooth (60fps)
[ ] Accessibility: keyboard nav, contrast, alt texts
[ ] Performance: Lighthouse score > 90
[ ] Cross-browser tested
Pro Tips
- Commit often: Mỗi polish = một commit
- Test real content: Don't wait until end để add real data
- Mobile first: Fix mobile issues before desktop enhancements
- Get feedback: Share staging URL với friends
- Iterate: Polish là continuous process
🔥 Remember: 80% của user impression comes from first 5 seconds. Hero section matters most.
Bài Tập
- Personalize Hero Section với real info
- Add 3 real projects với screenshots
- Implement working contact form
- Test on phone và fix any issues
