make-it-wow

Make It Wow

Applies opinionated visual upgrades to make the site look premium. No configuration, no questions. Just make it look better, immediately.

How It Works

When triggered, scan the current page and apply upgrades from these categories. Don't ask which ones — apply all that make sense for the current content.

Upgrade Categories

1. Smooth Scroll

Add document-level smooth scrolling:

html { scroll-behavior: smooth; }

2. Page Entrance Animation

Add fade-in + slide-up to main content sections on page load:

For Next.js with Tailwind — use CSS animations:

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

Apply staggered delays to sections for a cascading reveal effect.

If Framer Motion is available or appropriate to install:

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.6 }}
>

3. Typography Upgrade

• Headlines: increase contrast between heading and body sizes
• Use font-semibold or font-bold on headings, font-normal on body
• Add tracking-tight to large headings
• Ensure line-height is relaxed on body text (leading-relaxed)
• If the site uses only system font, consider adding Inter or a personality font

4. Hover States

Add hover effects to all interactive elements:

• Buttons: subtle scale + shadow lift

  hover:scale-[1.02] hover:shadow-lg transition-all duration-200
  

• Cards: lift effect

  hover:-translate-y-1 hover:shadow-xl transition-all duration-300
  

• Links: color transition

  hover:text-[accent-color] transition-colors duration-200
  

• Images: subtle zoom

  hover:scale-105 transition-transform duration-500 overflow-hidden
  

5. Gradient & Color Depth

• Replace flat backgrounds with subtle gradients
• Add depth with layered backgrounds
• Use accent color consistently across CTAs, links, and highlights
• Dark sections alternating with light sections for visual rhythm