import { DynamicSquareBackground } from "./components/Dynamicsquare";

export default function Page() {
  return (
    <div className="w-full mx-auto h-[560px] flex items-center justify-center my-auto">
      <DynamicSquareBackground
        buttonHref="#"
        buttonText="Join Now"
        description="UI Forge version 2.0 is here."
        tag="2.0"
        title="UIForge"
      />
    </div>
  );
}

"use client";
import dynamic from "next/dynamic";
const DynamicSquareBackground2 = dynamic(
  () => import("./components/Dynamicsquare2"),
  { ssr: false }
);

export default function Page() {
  return (
    <div className="w-full mx-auto h-[560px] flex items-center justify-center my-auto">
      <DynamicSquareBackground2
        title="UIForge"
        tag="2.0"
        description="UI Forge version 2.0 is here with enhanced features and a brand new design system."
        primaryButtonText="Join Now"
        primaryButtonHref="#"
        secondaryButtonText="Learn More"
        secondaryButtonHref="/learn-more"
        width="w-96"
        height="h-auto"
      />
    </div>
  );
}

"use client";
import {
  Card,
  CardContent,
  CardDescription,
  CardTitle,
} from "@/components/ui/card";
import dynamic from "next/dynamic";
const WarpAnimationContainer = dynamic(
  () => import("./components/Dynamicsquare3"),
  { ssr: false }
);

export default function Page() {
  return (
    <div className="w-full mx-auto h-[560px] flex items-center justify-center my-auto">
      <div className="grid place-items-center">
        <WarpAnimationContainer>
          <Card className="w-80">
            <CardContent className="flex flex-col gap-2 p-4">
              <CardTitle>Introducing UI Forge 2.0!</CardTitle>
              <CardDescription>
                We are excited to announce the release of UI Forge 2.0. With
                improved components, faster performance, and a more customizable
                design system, its never been easier to create stunning,
                responsive UIs. Start building with UI Forge 2.0 today!
              </CardDescription>
            </CardContent>
          </Card>
        </WarpAnimationContainer>
      </div>
    </div>
  );
}