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

Source: Dev.to

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 and felt generic.

The Pivot: Bento Grids 🍱

I decided to redesign the layout using the Bento Grid pattern popular with top‑tier dev tools like Linear and Vercel. Bento Grids organize complex information into digestible “boxes” and give a premium feel.

I fired up VS Code, removed the old layout, and rebuilt the page 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. Below is a simplified version of the main grid component:

export default function BentoGrid() {
  return (
    <div className="grid grid-cols-2 gap-4">
      {/* Hero Box - Spans 2 columns */}
      <div className="col-span-2 bg-gray-100 p-6">
        <h2>## The Ultimate Kit</h2>
        <p>Boost your workflow instantly.</p>
      </div>

      {/* Feature A */}
      <div className="bg-white p-4">
        <span>🚀</span>
        <h3>Next.js Ready</h3>
      </div>

      {/* Feature B */}
      <div className="bg-white p-4">
        <span>🎨</span>
        <h3>Tailwind CSS</h3>
      </div>

      {/* Pricing Box - High Contrast */}
      <div className="bg-black text-white p-6">
        <h3>Get it now</h3>
        <p>Limited offer</p>
        <p>€3</p>
      </div>
    </div>
  );
}

The Pricing Strategy 🏷️

To test whether friction was purely design‑related or also monetary, I set the price to €3—the “no‑brainer” zone, less than a coffee.

What’s Next?

The new version is live. I’m tracking two key metrics:

1. Click‑through rate on the grid elements.
2. Final purchase conversion.

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

Stay tuned for Day 4 metrics! 🚀