Image Aside

A promo with copy on one side and a product image alongside it. Pairs your offer with a visual so shoppers see exactly what is on sale right now.

import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';

export default function ImageAsidePromo() {
  return (
    <div className="bg-background overflow-hidden py-16 sm:py-24">
      <div className="mx-auto max-w-7xl md:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start">
          {/* Image Section */}
          <div className="px-6 md:px-0 lg:pt-4 lg:pr-4">
            <div className="relative mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
              <div className="relative overflow-hidden rounded-2xl shadow-xl">
                <img
                  src="https://images.unsplash.com/photo-1473968512647-3e447244af8f?q=80&w=1000&auto=format&fit=crop"
                  alt="Aerial view from a drone flying above mountains"
                  width={1000}
                  height={800}
                  className="object-cover"
                />
              </div>
              {/* Decorative Shape */}
              <div
                className="ring-primary/10 pointer-events-none absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset"
                aria-hidden="true"
              />
              {/* Background Gradient */}
              <svg
                viewBox="0 0 1090 1090"
                aria-hidden="true"
                className="absolute -top-10 left-1/2 -z-10 h-[68.125rem] w-[68.125rem] -translate-x-1/2 [mask-image:radial-gradient(closest-side,white,transparent)]"
              >
                <ellipse
                  cx={545}
                  cy={545}
                  rx={545}
                  ry={545}
                  fill="url(#drone-promo-gradient)"
                  fillOpacity="0.3"
                />
                <defs>
                  <radialGradient id="drone-promo-gradient">
                    <stop stopColor="hsl(var(--primary))" />
                    <stop offset={1} stopColor="hsl(var(--accent))" />
                  </radialGradient>
                </defs>
              </svg>
            </div>
          </div>

          {/* Content Section */}
          <div className="px-6 md:px-0 lg:pt-4 lg:pl-4">
            <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-lg">
              <Badge variant="default" className="mb-2">
                New Technology
              </Badge>
              <h2 className="text-primary text-base leading-7 font-semibold">
                Capture Stunning Views
              </h2>
              <p className="text-foreground mt-2 text-3xl font-bold tracking-tight sm:text-4xl">
                Aerial Photography Drone
              </p>
              <p className="text-muted-foreground mt-6 text-lg leading-8">
                Elevate your content with breathtaking aerial shots. Our latest
                drone features a 4K camera, intelligent flight modes, and
                extended battery life for the ultimate creative freedom.
              </p>
              <dl className="text-muted-foreground mt-10 max-w-xl space-y-8 text-base leading-7 lg:max-w-none">
                <div className="relative">
                  <dt className="text-foreground inline font-semibold">
                    4K HDR Video:
                  </dt>{' '}
                  <dd className="inline">
                    Capture cinematic footage with incredible detail and dynamic
                    range.
                  </dd>
                </div>
                <div className="relative">
                  <dt className="text-foreground inline font-semibold">
                    Obstacle Avoidance:
                  </dt>{' '}
                  <dd className="inline">
                    Fly with confidence thanks to advanced sensors on all sides.
                  </dd>
                </div>
                <div className="relative">
                  <dt className="text-foreground inline font-semibold">
                    30-Min Flight Time:
                  </dt>{' '}
                  <dd className="inline">
                    Spend more time in the air and less time charging.
                  </dd>
                </div>
              </dl>
              <div className="mt-10 flex flex-col items-center gap-x-6 gap-y-3 sm:flex-row">
                <Button size="lg" asChild>
                  <a href="#">Explore the Drone</a>
                </Button>
                <Button variant="outline" size="lg" asChild>
                  <a href="#">Watch Demo</a>
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

About this block

Image Aside is a two-column promo section. The left column holds a rounded, shadowed product image with a subtle radial glow behind it. The right column stacks a badge, a short category label, a bold headline, a supporting paragraph, a definition list of three key specs (each with an inline bold label followed by a sentence), and a row of two buttons.

The badge, headline, body copy, spec labels, spec descriptions, and button labels are all independent pieces of text. The image swaps out without touching the copy side, and the spec list can grow or shrink freely. On smaller screens the columns stack so the image appears above the text.

When to use

Reach for this block when you need to spotlight a single product or service tier alongside a strong visual. It works especially well on a logistics or delivery platform landing page where you want to show the physical hardware or vehicle fleet next to a concise list of operational specs. Compared to a centered promo, the side-by-side layout gives the image room to breathe while keeping the copy at reading weight rather than headline scale.

A natural flow around it on an Ecommerce page:

Before

A Simple Banner to announce the promotion or discount code before the detail block
Product List to establish the catalog context before the featured item

After

Customer Reviews to back up the spec claims with social proof
Shipping Returns to address post-purchase questions right after the buy prompt

What you can display

The layout fits any product or offer that benefits from pairing a key visual with a short list of standout details:

Fleet or hardware specs. List range, payload capacity, and dispatch time for a delivery vehicle or logistics asset the same way the demo lists flight specs.
Service tier highlights. Replace the image with a photo of your fulfillment center and swap the spec list for SLA guarantees such as same-day cutoff, tracking updates, and coverage area.
A featured bundle or kit. Show a packaged product photo and call out what is included, the savings versus buying separately, and the expected delivery window.

Tip: keep the spec list to three items so the two columns stay roughly the same height and the layout feels balanced at all viewport sizes.

About this block

When to use

A natural flow around it on an Ecommerce page:

Before

A Simple Banner to announce the promotion or discount code before the detail block
Product List to establish the catalog context before the featured item

After

Customer Reviews to back up the spec claims with social proof
Shipping Returns to address post-purchase questions right after the buy prompt

What you can display

The layout fits any product or offer that benefits from pairing a key visual with a short list of standout details:

Fleet or hardware specs. List range, payload capacity, and dispatch time for a delivery vehicle or logistics asset the same way the demo lists flight specs.
Service tier highlights. Replace the image with a photo of your fulfillment center and swap the spec list for SLA guarantees such as same-day cutoff, tracking updates, and coverage area.
A featured bundle or kit. Show a packaged product photo and call out what is included, the savings versus buying separately, and the expected delivery window.

Tip: keep the spec list to three items so the two columns stay roughly the same height and the layout feels balanced at all viewport sizes.

Image Aside

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display