Banners

import { Button } from "@/components/ui/button";
import { Boat, X } from "@mynaui/icons-react";

export default function Banner1() {
  return (
    <div className="bg-background border-b">
      <div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-2">
        <div className="flex items-center gap-4">
          <Boat className="size-5 stroke-2 shrink-0" />
          <span className="font-medium text-sm">
            🚀 Introducing our new AI-powered dashboard - Now available!
          </span>
          <Button variant="secondary" size="sm">
            Learn More
          </Button>
        </div>
        <Button variant="outline" className="size-8">
          <X className="size-4 stroke-2" />
          <span className="sr-only">Dismiss banner</span>
        </Button>
      </div>
    </div>
  );
}

import { Button } from "@/components/ui/button";
import { Shield, X } from "@mynaui/icons-react";

export default function Banners2() {
  return (
    <div className="bg-background border-t absolute bottom-0 left-0 right-0 z-50">
      <div className="flex items-start justify-between gap-4 max-w-7xl mx-auto px-4 py-4">
        <div className="flex items-start gap-4">
          <Shield className="size-5 mt-0.5 stroke-2 shrink-0" />
          <div>
            <h3 className="font-semibold text-sm">
              Privacy Policy Updated
            </h3>
            <p className="text-sm text-muted-foreground mt-1">
              We&apos;ve updated our privacy policy to better protect your data.
              Please review the changes.
            </p>
            <Button variant="link" className="text-primary px-0 h-auto mt-2">
              Review Changes →
            </Button>
          </div>
        </div>
        <Button variant={"outline"} className="size-8">
          <X className="size-4 stroke-2" />
          <span className="sr-only">Dismiss banner</span>
        </Button>
      </div>
    </div>
  );
}

import { Button } from "@/components/ui/button";
import { ShoppingBag, X } from "@mynaui/icons-react";

export default function Banners2() {
  return (
    <div className="bg-background border-b text-sm">
      <div className="flex md:items-center justify-between max-w-7xl mx-auto px-4 py-4">
        <div className="flex items-center gap-2">
          <ShoppingBag className="size-5 stroke-2 shrink-0 hidden md:block" />
          <div className="flex flex-col md:flex-row gap-1">
            <span className="font-medium">
              Help us improve!
            </span>
            <span className="text-muted-foreground">
              Take our 2-minute survey and get 20% off your next purchase.
            </span>
          </div>
        </div>
        <div className="flex gap-2">
          <Button size="sm">
            Take Survey
          </Button>
          <Button variant="outline" className="size-8">
            <X className="size-4 stroke-2" />
            <span className="sr-only">Dismiss banner</span>
          </Button>
        </div>
      </div>
    </div>
  );
}

import { Button } from "@/components/ui/button";
import { Users, X } from "@mynaui/icons-react";

export default function Banners2() {
  return (
    <div className="bg-gradient-to-r from-pink-500 to-rose-500 text-white">
      <div className="max-w-7xl mx-auto px-3 py-3 flex items-center justify-center text-left md:text-center gap-2">
        <Users className="size-5 stroke-2 shrink-0" />
        <span className="font-medium">
          Follow us on social media for the latest updates and tips!
        </span>
        <Button variant="secondary" size="sm" className="ml-4">
          Follow Us
        </Button>
        <Button variant="ghost" className="size-8">
          <X className="size-4 stroke-2" />
          <span className="sr-only">Dismiss banner</span>
        </Button>
      </div>
    </div>
  );
}

import { Button } from "@/components/ui/button";
import { Globe, X } from "@mynaui/icons-react";

export default function Banners2() {
  return (
    <div className="bg-background border-t absolute bottom-0 left-0 right-0 z-50">
      <div className="flex items-start justify-between gap-4 max-w-7xl mx-auto px-4 py-4">
        <div className="flex items-start gap-3">
          <Globe className="size-5 stroke-2 text-muted-foreground mt-0.5 shrink-0" />
          <div>
            <h3 className="font-semibold text-sm">
              Your Privacy Rights
            </h3>
            <p className="text-sm text-muted-foreground mt-1">
              Under GDPR, you have the right to access, update, or delete your
              personal data.
              <Button
                variant="link"
                className="p-0 h-auto ml-1"
              >
                Manage your data →
              </Button>
            </p>
          </div>
        </div>
        <Button variant="ghost" className="size-8">
          <X className="size-4 stroke-2" />
          <span className="sr-only">Dismiss banner</span>
        </Button>
      </div>
    </div>
  );
}