DEV Community

Sherri
Sherri

Posted on

How to build a Custom OEM Wine Box Site With Next.js + Tailwind ?

🏷️ Tags: nextjs, tailwindcss, webdev, startup, ecommerce

Introduction

Building a beautiful, responsive product site doesn’t have to be complicated — especially if you’re offering a highly visual and customizable product like OEM metal wine boxes.

As the founder of Fordico OEM, a company focused on custom wine box manufacturing for global markets, I wanted a site that was:

  • Fast ⚡️
  • Developer-friendly 💻
  • Easy to customize for different product lines 🎨
  • Optimized for international SEO and performance 🌍

So, I built our site with Next.js and Tailwind CSS — and here’s how you can too.

🧱 Step 1: Setup Your Next.js Project 

npx create-next-app@latest fordico-winebox-site
cd fordico-winebox-site
Enter fullscreen mode Exit fullscreen mode

Then install Tailwind:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Update tailwind.config.js:

content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
Enter fullscreen mode Exit fullscreen mode

Add Tailwind to globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

🎨 Step 2: Build a Beautiful Landing Page

Your wine box site needs to impress at first glance, especially if you're targeting premium clients from the US, UK, or France.

Here’s a basic layout structure:

// pages/index.js
export default function Home() {
  return (
    <div className="min-h-screen bg-white text-gray-800">
      <header className="py-6 px-4 md:px-12 flex justify-between items-center border-b">
        <h1 className="text-2xl font-bold">Fordico OEM</h1>
        <nav className="space-x-4">
          <a href="#products" className="hover:underline">Products</a>
          <a href="#about" className="hover:underline">About</a>
          <a href="#contact" className="hover:underline">Contact</a>
        </nav>
      </header>
      <main className="px-4 md:px-12 py-12">
        <h2 className="text-4xl font-bold mb-4">Custom Metal Wine Boxes for Premium Brands</h2>
        <p className="mb-6 text-lg">
          Fordico offers OEM and ODM services for wine and whisky packaging — elegant, durable, and designed to stand out on the shelf.
        </p>
        <a href="#contact" className="bg-black text-white py-2 px-4 rounded hover:bg-gray-800">Get a Quote</a>
      </main>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

🛍️ Step 3: Create a Product Gallery - Metal wine box

You can build a reusable ProductCard component to showcase your boxes:

// components/ProductCard.js
export default function ProductCard({ title, image, description }) {
  return (
    <div className="border rounded-2xl overflow-hidden shadow hover:shadow-lg transition">
      <img src={image} alt={title} className="w-full h-60 object-cover" />
      <div className="p-4">
        <h3 className="font-bold text-lg">{title}</h3>
        <p className="text-sm text-gray-600">{description}</p>
      </div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Then use it inside your product section:

// pages/index.js
import ProductCard from "../components/ProductCard";

const products = [
  {
    title: "Gold Foil Whisky Box",
    image: "/images/gold-box.jpg",
    description: "Premium metal tin with embossed logo and matte black finish.",
  },
  // more products...
];

<section id="products" className="py-12">
  <h2 className="text-3xl font-bold mb-6">Featured Wine Boxes</h2>
  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
    {products.map((p, i) => (
      <ProductCard key={i} {...p} />
    ))}
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

🌍 Step 4: Optimize for SEO and International Clients

Next.js makes SEO easy with its built-in next/head component:

import Head from 'next/head';

<Head>
  <title>Custom OEM Wine Boxes | Fordico</title>
  <meta name="description" content="Custom metal wine and whisky boxes for global brands. OEM & ODM packaging from Fordico." />
</Head>
Enter fullscreen mode Exit fullscreen mode

For multi-language support, you can explore:

🔄 Step 5: Connect Your Backend or Contact Form

At Fordico, we kept it simple at first: just a basic contact form hooked up to Formspree or [Netlify Forms].

Eventually, we integrated a custom admin dashboard for lead tracking and sample management — but you can start with this:

<form action="https://formspree.io/f/{your-id}" method="POST" className="space-y-4">
  <input type="text" name="name" placeholder="Your Name" required className="border rounded w-full p-2" />
  <input type="email" name="email" placeholder="Email" required className="border rounded w-full p-2" />
  <textarea name="message" placeholder="Tell us your packaging needs..." className="border rounded w-full p-2" />
  <button type="submit" className="bg-black text-white px-4 py-2 rounded">Send</button>
</form>
Enter fullscreen mode Exit fullscreen mode

🎁 Conclusion

If you're building a niche product site like custom packaging or industrial components, using Next.js + Tailwind gives you:

  • 🔥 Speed + Flexibility
  • 🎨 Clean UI without bloat
  • 🧩 Modular codebase for scaling
  • 🌐 SEO/SSR benefits out of the box

You can check out our live site for inspiration — and feel free to fork the structure for your own product-driven startup.

💬 Got questions?

Leave a comment or DM me. Always happy to talk about building product sites for the real world — especially if it involves cool packaging 😎

Top comments (0)