"use client";

import AuroraAround from "@/components/showcase/aurora-around/aurora-around";
import { Atom } from "lucide-react";
import { DotPattern } from "@/components/ui/dot-pattern";
import { cn } from "@/lib/utils";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
export default function AuroraAround_Ex_02() {
  const [showAurora, setShowAurora] = useState(false);
  return (
    <div className="">
      <AuroraAround
        colorStops={["#7429ff", "#08eb98", "#cc32ff"]}
        blend={1.2}
        amplitude={1.2}
        speed={0.6}
        direction="top"
        thickness={2}
        brightness={1}
        visible={true}
      >
        {" "}
        <div className="h-[500px] w-full  rounded-lg bg-linear-to-t from-card to-background">
          <div className=" w-full flex items-center justify-center h-full">
            <div className="space-y-5 flex items-center flex-col mx-auto  text-balance max-w-lg text-center">
              {" "}
              <h2 className="text-4xl tracking-tighter font-semibold">
                Cooming Soon
              </h2>
              <p className="text-muted-foreground ">
                We are working hard to launch our new website. Stay tuned!
              </p>
              <div className="flex w-full max-w-md gap-2">
                <Input
                  placeholder="Your email address"
                  className="w-full md:w-96"
                />
                <Button
                  variant="secondary"
                  onClick={() => setShowAurora(!showAurora)}
                >
                  Notify Me
                </Button>
              </div>
            </div>
          </div>
        </div>
      </AuroraAround>
    </div>
  );
}

"use client";

import AuroraAround from "@/components/showcase/aurora-around/aurora-around";
import { Atom } from "lucide-react";
import { DotPattern } from "@/components/ui/dot-pattern";
import { cn } from "@/lib/utils";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
export default function AuroraAround_Ex_02() {
  const [showAurora, setShowAurora] = useState(false);
  return (
    <div className="">
      <AuroraAround
        colorStops={["#7429ff", "#08eb98", "#cc32ff"]}
        blend={1.2}
        amplitude={1.2}
        speed={0.6}
        direction="top"
        thickness={2}
        brightness={1}
        visible={true}
      >
        {" "}
        <div className="h-[500px] w-full  rounded-lg bg-linear-to-t from-card to-background">
          <div className=" w-full flex items-center justify-center h-full">
            <div className="space-y-5 flex items-center flex-col mx-auto  text-balance max-w-lg text-center">
              {" "}
              <h2 className="text-4xl tracking-tighter font-semibold">
                Cooming Soon
              </h2>
              <p className="text-muted-foreground ">
                We are working hard to launch our new website. Stay tuned!
              </p>
              <div className="flex w-full max-w-md gap-2">
                <Input
                  placeholder="Your email address"
                  className="w-full md:w-96"
                />
                <Button
                  variant="secondary"
                  onClick={() => setShowAurora(!showAurora)}
                >
                  Notify Me
                </Button>
              </div>
            </div>
          </div>
        </div>
      </AuroraAround>
    </div>
  );
}

Aurora Around

Examples

As a background effect

On this page