Call to Action

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

export default function Basic() {
  return (
    <section className="px-4 py-24 text-center">
      <div className="mx-auto flex max-w-3xl flex-col items-center space-y-6">
        <div className="rounded-full border bg-primary-foreground p-2">
          <Bookmark className="size-5 stroke-2 text-primary" />
        </div>
        <div className="space-y-2">
          <p className="text-3xl font-bold tracking-tight">
            Join over 4,000 bookmarkers.
          </p>
          <p className="text-balance text-base text-muted-foreground">
            Sign up to bookmark your favorite links and access them from any
            device.
          </p>
        </div>
        <div className="flex items-center justify-center gap-2">
          <Button variant="outline">View Features</Button>
          <Button>Sign Up</Button>
        </div>
      </div>
    </section>
  );
}

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

export default function WithBorder() {
  return (
    <section className="px-4 py-10 text-center">
      <div className="relative mx-auto max-w-7xl rounded-lg border bg-primary-foreground px-4 py-12">
        <div className="mx-auto flex max-w-3xl flex-col items-center gap-6">
          <div className="rounded-full border bg-background p-2">
            <Mobile className="size-5 stroke-2" />
          </div>
          <div className="space-y-2">
            <p className="text-3xl font-bold tracking-tight">
              Save anywhere you go.
            </p>
            <p className="text-base text-muted-foreground">
              Easily save your favorite links from any device, anywhere.
            </p>
          </div>
          <div className="flex items-center justify-center gap-2">
            <Button variant={"outline"}>Sign Up for Free</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

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

export default function Horizontal() {
  return (
    <section className="px-4 py-10">
      <div className="mx-auto flex max-w-7xl flex-col justify-between gap-4 rounded-lg border p-6 md:flex-row md:items-center">
        <div className="max-w-lg">
          <p className="text-xl font-bold">Start with a free account.</p>
          <p className="text-base text-muted-foreground">
            Join over 4,000 bookmarkers who have saved over 100,000 links
          </p>
        </div>
        <div className="flex items-center space-x-2 md:flex-row-reverse md:space-x-reverse">
          <Button className="gap-2">
            <Login className="size-4" stroke={2} />
            Sign Up for Free
          </Button>
          <Button variant="outline">Contact Us</Button>
        </div>
      </div>
    </section>
  );
}

import { Button } from "@/components/ui/button";

export default function WithImage() {
  return (
    <section className="px-4 py-10">
      <div className="mx-auto grid max-w-7xl grid-cols-1 items-center gap-6 overflow-hidden rounded-lg border p-6 md:grid-cols-2 md:gap-12 md:px-10">
        <div className="space-y-4">
          <div className="space-y-2">
            <h2 className="text-xl font-bold tracking-tight md:text-3xl">
              Get started with MynaUI today!
            </h2>
            <p className="text-base text-muted-foreground">
              Join over 4,000 bookmarkers who have saved over 100,000 links.
            </p>
          </div>
          <Button>Sign Up for Free</Button>
        </div>
        <div className="relative h-80">
          <img
            src="/images/dashboard.png"
            className="absolute left-0 top-0 h-96 max-w-none rounded-lg border bg-primary-foreground object-cover object-center"
            alt="MynaUI dashboard"
          />
        </div>
      </div>
    </section>
  );
}

import { Button } from "@/components/ui/button";

export default function LargeFont() {
  return (
    <section className="px-4 py-24 text-center">
      <div className="mx-auto max-w-3xl space-y-10">
        <p className="text-balance text-4xl font-extralight tracking-tighter md:text-6xl">
          Try for free for 14 days, then $9/mo.
        </p>
        <Button size="lg">Sign Up</Button>
      </div>
    </section>
  );
}

import { buttonVariants } from "@/components/ui/button";
import { Bookmark } from "@mynaui/icons-react";

export default function CTA() {
  return (
    <section className="w-full bg-[url('https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?q=80&w=1000&auto=format')] bg-cover bg-center bg-no-repeat py-24">
      <div className="mx-auto flex max-w-lg flex-col items-center space-y-4 px-4 text-center md:px-6">
        <h2 className="text-balance text-3xl font-bold tracking-tighter text-white sm:text-5xl">
          Never lose a great resource again.
        </h2>
        <p className="text-balance text-base font-medium text-white">
          MynaUI&apos;s powerful bookmarking feature helps you organize and
          access your favorite content with ease. Save articles, videos, and
          more for quick reference anytime, anywhere.
        </p>
        <div className="flex flex-wrap gap-4">
          <a
            href="#"
            className={buttonVariants({ size: "sm" })}
            aria-label="Start Bookmarking"
          >
            <Bookmark className="size-4 stroke-2" />
            Start Bookmarking
          </a>
          <a
            href="#"
            className={buttonVariants({ variant: "outline", size: "sm" })}
            aria-label="Learn More"
          >
            Learn More
          </a>
        </div>
      </div>
    </section>
  );
}

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

export default function CTA() {
  return (
    <section className="w-full bg-[url('https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?q=80&w=1000&auto=format')] bg-cover bg-center bg-no-repeat py-28">
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="max-w-2xl">
          <h2 className="mb-4 text-balance text-4xl font-bold tracking-tight text-white sm:text-5xl">
            Never lose your favorite content again.
          </h2>
          <p className="mb-8 text-balance text-lg text-white">
            Save and organize your most important web discoveries with our
            powerful bookmarking tool. Access your curated content anywhere,
            anytime.
          </p>
          <form className="flex max-w-md flex-col gap-4 sm:flex-row">
            <Input
              type="email"
              placeholder="Enter your email"
              className="h-10 placeholder:text-white"
              required
            />
            <Button type="submit">Sign up</Button>
          </form>
          <p className="mt-4 text-sm text-white">
            By clicking Sign Up you&apos;re confirming that you agree with our{" "}
            <a href="#" className="underline underline-offset-2">
              Privacy Policy
            </a>
            .
          </p>
        </div>
      </div>
    </section>
  );
}

import {
  logoFive,
  logoFour,
  logoOne,
  logoSix,
  logoThree,
  logoTwo,
} from "@/mynaui/SampleLogos";
import { buttonVariants } from "@/components/ui/button";
import { Bookmark } from "@mynaui/icons-react";

export default function CTA() {
  const logos = [logoOne, logoTwo, logoThree, logoFour, logoFive, logoSix];

  return (
    <section className="px-4 py-16 md:py-24">
      <div className="mx-auto mb-10 flex max-w-lg flex-col items-center gap-6 text-center">
        <h2 className="text-balance text-3xl font-bold tracking-tight">
          Never lose your favorite content again.
        </h2>
        <div className="flex flex-wrap gap-4">
          <a
            href="#"
            className={buttonVariants({ size: "sm" })}
            aria-label="Start Bookmarking"
          >
            <Bookmark className="size-4 stroke-2" />
            Start Bookmarking
          </a>
          <a
            href="#"
            className={buttonVariants({ variant: "outline", size: "sm" })}
            aria-label="Learn More"
          >
            Learn More
          </a>
        </div>
      </div>
      <ul className="mx-auto grid max-w-3xl grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6">
        {logos.map((logo, index) => (
          <li key={index} className="flex items-center justify-center px-2">
            {logo}
          </li>
        ))}
      </ul>
    </section>
  );
}