First commit

dev/b2in-layout-v10/src/components/PremierBargain.tsx

@@ -0,0 +1,75 @@
+import accommodationImage2 from "../assets/accommodation-2.jpg";
+
+const PremierBargain = () => {
+  return (
+    <section className="section-dark py-20 px-4">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid lg:grid-cols-2 gap-16 items-center">
+          <div className="space-y-8">
+            <div>
+              <h2 className="text-6xl font-light text-[hsl(var(--dark-foreground))] mb-2">
+                Premier
+              </h2>
+              <h2 className="text-6xl font-light text-wood-accent">
+                Bargain
+              </h2>
+            </div>
+            
+            <div className="space-y-6">
+              <div className="border-l-4 border-wood-accent pl-6">
+                <h3 className="text-2xl font-medium text-[hsl(var(--dark-foreground))] mb-2">
+                  Midtown Manhattan Retreat
+                </h3>
+                <p className="text-[hsl(var(--dark-muted))] mb-4">
+                  Experience luxury in the heart of Manhattan with our exclusive premier suite featuring panoramic city views and world-class amenities.
+                </p>
+                <div className="flex items-center gap-4">
+                  <span className="text-3xl font-light text-wood-accent">$200</span>
+                  <span className="text-[hsl(var(--dark-muted))]">/night</span>
+                  <span className="text-sm text-[hsl(var(--dark-muted))] line-through">$350/night</span>
+                </div>
+              </div>
+              
+              <div className="grid grid-cols-2 gap-6">
+                <div className="space-y-2">
+                  <div className="text-lg font-medium text-[hsl(var(--dark-foreground))]">4.9/5</div>
+                  <p className="text-[hsl(var(--dark-muted))] text-sm">Guest Rating</p>
+                </div>
+                <div className="space-y-2">
+                  <div className="text-lg font-medium text-[hsl(var(--dark-foreground))]">1,200+</div>
+                  <p className="text-[hsl(var(--dark-muted))] text-sm">Reviews</p>
+                </div>
+              </div>
+              
+              <button className="btn-secondary bg-wood-accent text-primary hover:bg-wood-accent/90">
+                Book Premier Deal
+              </button>
+            </div>
+          </div>
+          
+          <div className="relative">
+            <div className="card-elevated bg-[hsl(var(--dark-muted))] p-0 overflow-hidden rounded-3xl">
+              <img 
+                src={accommodationImage2}
+                alt="Premier Manhattan suite interior"
+                className="w-full h-96 object-cover"
+              />
+              <div className="absolute top-6 right-6 bg-wood-accent text-primary px-4 py-2 rounded-lg">
+                <span className="text-sm font-medium">43% OFF</span>
+              </div>
+            </div>
+            
+            <div className="absolute -bottom-4 -left-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-4">
+              <div className="flex items-center gap-3">
+                <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
+                <span className="text-white text-sm">2 rooms left at this price</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default PremierBargain;