DEV Community

Cover image for 700 views vs 8% conversion: Why I redesigned my Next.js site to a Bento Grid (Day 3)
veloxsoft-web
veloxsoft-web

Posted on

700 views vs 8% conversion: Why I redesigned my Next.js site to a Bento Grid (Day 3)

#nestjs #tailwindcss #webdesign #buildinpublic

The Reality Check 📉

I'm 3 days into my "Building in Public" challenge. Yesterday, the algorithm blessed me: 700+ views on my update video.

I thought: "This is it. Sales are coming."

The reality?

  • 60 actual visitors to the store.
  • 8% conversion rate.

The traffic was there, but the retention wasn't. My landing page was leaking users. It looked generic.

The Pivot: Bento Grids 🍱

I decided to go to war with my own design. I looked at what top-tier dev tools (like Linear or Vercel) are doing. The pattern is clear: Bento Grids.

It organizes complex info into digestible "boxes". It feels premium.

So, I fired up VS Code, nuked my old layout, and started fresh with Next.js 14 and Tailwind CSS.

The Code (How I built it)

The magic of Bento Grids in Tailwind is mastering grid-cols and col-span. Here is a simplified version of the main grid structure I deployed:

export default function BentoGrid() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-4 max-w-4xl mx-auto p-4">

      {/* Hero Box - Spans 2 columns */}
      <div className="col-span-1 md:col-span-2 row-span-2 bg-neutral-900 border border-neutral-800 rounded-xl p-6 flex flex-col justify-between">
        <h1 className="text-4xl font-bold text-white">The Ultimate Kit</h1>
        <p className="text-gray-400">Boost your workflow instantly.</p>
      </div>

      {/* Feature A */}
      <div className="bg-neutral-900 border border-neutral-800 rounded-xl p-6">
        <span className="text-3xl">🚀</span>
        <h3 className="font-bold mt-2 text-white">Next.js Ready</h3>
      </div>

      {/* Feature B */}
      <div className="bg-neutral-900 border border-neutral-800 rounded-xl p-6">
        <span className="text-3xl">🎨</span>
        <h3 className="font-bold mt-2 text-white">Tailwind CSS</h3>
      </div>

      {/* Pricing Box - High Contrast */}
      <div className="col-span-1 md:col-span-2 bg-indigo-600 rounded-xl p-6 flex items-center justify-between cursor-pointer hover:bg-indigo-700 transition">
        <div>
           <h3 className="text-white font-bold text-lg">Get it now</h3>
           <p className="text-indigo-200 text-sm">Limited offer</p>
        </div>
        <span className="text-3xl font-bold text-white">€3</span>
      </div>

    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

The Pricing Strategy 🏷️
To test if the friction was purely design or also monetary, I made a bold move: I set the price to €3.

It's the "no-brainer" zone. Less than a coffee.

What's Next?
I just deployed the new version. I'm tracking two things:

Click-through rate on the Grid elements.

Final purchase conversion.

If you are curious about the live result or want to support the challenge, you can check it here: https://veloxweb.gumroad.com/l/launch-ui

Follow me for Day 4 metrics! 🚀

Top comments (0)