banner-03-block

1import React from "react";
2 
3function Banner_03() {
4  return (
5    <div className="relative flex flex-col overflow-hidden rounded-xl bg-gradient-to-br from-gray-900 to-gray-800 p-6 text-white shadow-xl md:flex-row md:items-center md:justify-between">
6      {/* Pattern overlay */}
7      <div className="absolute inset-0 opacity-10">
8        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
9          <defs>
10            <pattern
11              id="grid"
12              width="20"
13              height="20"
14              patternUnits="userSpaceOnUse"
15            >
16              <path
17                d="M 20 0 L 0 0 0 20"
18                fill="none"
19                stroke="white"
20                strokeWidth="1"
21              />
22            </pattern>
23          </defs>
24          <rect width="100%" height="100%" fill="url(#grid)" />
25        </svg>
26      </div>
27 
28      {/* Content */}
29      <div className="z-10 space-y-3 md:w-3/5">
30        <div className="inline-block rounded-lg bg-blue-500 px-3 py-1 text-xs font-semibold tracking-wider text-white uppercase">
31          New in Stock
32        </div>
33        <h2 className="text-3xl leading-tight font-bold tracking-tight md:text-4xl lg:text-5xl">
34          SoundWave Pro X7 <span className="text-blue-400">Headphones</span>
35        </h2>
36        <p className="max-w-xl text-sm text-gray-300 md:text-base">
37          Experience unrivaled sound quality with our premium noise-cancelling
38          headphones. Featuring 40-hour battery life and high-resolution audio
39          for the ultimate listening experience.
40        </p>
41        <div className="flex flex-wrap gap-3 pt-2">
42          <button className="rounded-md bg-blue-500 px-6 py-2 font-medium transition-all hover:bg-blue-600">
43            Shop Now
44          </button>
45          <button className="rounded-md border border-white/30 bg-transparent px-6 py-2 font-medium transition-all hover:bg-white/10">
46            View Specs
47          </button>
48        </div>
49      </div>
50 
51      {/* Image */}
52      <div className="relative z-10 mt-6 h-60 w-full md:mt-0 md:h-80 md:w-2/5">
53        <div className="absolute -top-4 -right-4 h-60 w-60 rounded-full bg-blue-500/30 blur-xl"></div>
54        <div className="relative h-full w-full">
55          <img
56            src="https://placehold.co/400x400/0077ff/ffffff?text=SoundWave+Pro+X7"
57            alt="SoundWave Pro X7 Headphones"
58            className="drop-shadow-2xl"
59          />
60        </div>
61      </div>
62    </div>
63  );
64}
65 
66// … truncated