Newsletters

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function Newsletter1() {
  return (
    <section className="bg-primary px-4 py-20 text-primary-foreground">
      <div className="mx-auto max-w-md space-y-6 text-center">
        <div className="space-y-2">
          <h2 className="text-2xl font-bold tracking-tight">Join our newsletter</h2>
          <p className="text-sm">Exclusive offers and updates, straight to your inbox.</p>
        </div>
        <form className="grid gap-4 sm:grid-cols-[1fr_auto]">
          <div className="grid gap-2 text-left">
            <Label htmlFor="email1" className="text-primary-foreground sr-only">
              Email
            </Label>
            <Input id="email1" type="email" placeholder="Enter your email" required className="!bg-background !text-foreground border-0 shadow-none" />
          </div>
          <Button type="submit" variant="secondary" className="w-full sm:w-auto">
            Subscribe
          </Button>
        </form>
      </div>
    </section>
  );
}

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function Newsletter2() {
  return (
    <section className="px-4 py-20 bg-accent">
      <div className="mx-auto max-w-6xl">
        <Card className="overflow-hidden shadow-none p-0">
          <CardContent className="p-0">
            <div className="grid md:grid-cols-2 items-center">
              <img loading="lazy" decoding="async"
                src="/images/dashboard.webp"
                alt="Product screenshot"
                width={1200}
                height={800}
                className="h-64 w-full object-cover md:h-full"
              />
              <form className="flex flex-col gap-4 p-8 max-w-md w-full mx-auto">
                <div className="space-y-1 text-center">
                  <h2 className="text-2xl font-bold tracking-tight">
                    Get the inside scoop
                  </h2>
                  <p className="text-sm text-muted-foreground">
                    Join our newsletter to stay ahead.
                  </p>
                </div>
                <div className="grid gap-2 text-left">
                  <Label htmlFor="email2">Email</Label>
                  <Input
                    id="email2"
                    type="email"
                    placeholder="Enter your email"
                    required
                  />
                </div>
                <Button type="submit">Subscribe</Button>
              </form>
            </div>
          </CardContent>
        </Card>
      </div>
    </section>
  );
}

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";

export default function Newsletter3() {
  return (
    <footer className="bg-muted px-4 py-10">
      <Card className="mx-auto max-w-xl shadow-none">
        <CardContent className="p-4">
          <form className="flex flex-col items-center gap-4 sm:flex-row">
            <span className="text-sm font-medium shrink-0">Join our newsletter</span>
            <Input
              type="email"
              placeholder="Enter your email"
              aria-label="Email address"
              className="text-sm"
              required
            />
            <Button size="sm" aria-label="Subscribe">
              Subscribe
            </Button>
          </form>
        </CardContent>
      </Card>
    </footer>
  );
}

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { CheckCircle } from "@mynaui/icons-react";

export default function Newsletter4() {
  return (
    <section className="px-4 py-20">
      <Card className="mx-auto max-w-3xl overflow-hidden shadow-none">
        <div className="grid gap-8 p-6 grid-cols-1 md:grid-cols-2 items-center justify-center w-full">
          <div>
            <CardHeader className="p-0">
              <CardTitle className="text-2xl font-bold tracking-tight">
                Unlock exclusive content
              </CardTitle>
              <p className="text-sm text-muted-foreground">Sign up and get benefits like:</p>
            </CardHeader>
            <CardContent className="p-0 mt-4">
              <ul className="space-y-2" role="list">
                {['Exclusive tutorials', 'Product news', 'Member-only discounts'].map((benefit) => (
                  <li key={benefit} className="flex items-start gap-2 text-sm">
                    <CheckCircle className="size-4 text-primary" stroke={2} />
                    <span>{benefit}</span>
                  </li>
                ))}
              </ul>
            </CardContent>
          </div>
          <form className="grid gap-4 w-full">
            <div className="grid gap-2">
              <Label htmlFor="email3">Email</Label>
              <Input id="email3" type="email" placeholder="Enter your email" required />
            </div>
            <Button type="submit">Subscribe</Button>
          </form>
        </div>
      </Card>
    </section>
  );
}

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Mail, SparklesSolid } from "@mynaui/icons-react";

export default function Newsletter5() {
  return (
    <section className="px-4 py-20">
      <div className="mx-auto max-w-md">
        <Card className="shadow-none">
          <CardHeader className="text-center space-y-6">
            <div className="mx-auto rounded-full border bg-muted p-2">
              <Mail className="size-5" stroke={2} />
            </div>
            <div className="space-y-2">
              <h2 className="text-2xl font-bold tracking-tight">
                Be part of our community
              </h2>
              <p className="text-sm text-muted-foreground">
                Subscribe to join 10,000+ readers.
              </p>
            </div>
          </CardHeader>
          <CardContent className="space-y-6">
            <form className="grid gap-4">
              <div className="grid gap-2">
                <Label htmlFor="email4">Email</Label>
                <Input
                  id="email4"
                  type="email"
                  placeholder="Enter your email"
                  required
                />
              </div>
              <Button type="submit">Subscribe</Button>
            </form>
            <Separator />
            <div className="flex items-center justify-center gap-2 text-sm">
              <SparklesSolid className="size-4" stroke={2} />
              Join <span className="font-medium">10,000+</span> subscribers
            </div>
          </CardContent>
        </Card>
      </div>
    </section>
  );
}