<div className="flex flex-col items-center justify-center py-24 text-center"><h1 className="text-4xl font-bold">We'll be back soon!</h1><p className="text-muted-foreground mt-4 max-w-md">Sorry for the inconvenience. We're performing some maintenance at the moment. We'll be back online shortly!</p></div>

"use client";

import React, { useState } from "react";

interface MaintStandardProps {
  className?: string;
  children?: React.ReactNode;
}

export default function MaintStandard({
  className = "",
  children,
}: MaintStandardProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="flex flex-col items-center justify-center py-24 text-center"><h1 className="text-4xl font-bold">We'll be back soon!</h1><p className="text-muted-foreground mt-4 max-w-md">Sorry for the inconvenience. We're performing some maintenance at the moment. We'll be back online shortly!</p></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedMaintStandard() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex flex-col items-center justify-center py-24 text-center"><h1 className="text-4xl font-bold">We'll be back soon!</h1><p className="text-muted-foreground mt-4 max-w-md">Sorry for the inconvenience. We're performing some maintenance at the moment. We'll be back online shortly!</p></div>
    </motion.div>
  );
}

<div className="flex flex-col items-center justify-center py-24 text-center"><h1 className="text-3xl font-bold">Coming Soon</h1><p className="text-muted-foreground mt-4 max-w-md mb-8">We are building something amazing. Get notified when we launch.</p><div className="flex w-full max-w-sm space-x-2"><input className="flex h-10 w-full rounded-md border border-input px-3" placeholder="Email address" /><button className="bg-primary text-primary-foreground px-4 rounded-md">Notify Me</button></div></div>

"use client";

import React, { useState } from "react";

interface MaintNewsletterProps {
  className?: string;
  children?: React.ReactNode;
}

export default function MaintNewsletter({
  className = "",
  children,
}: MaintNewsletterProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="flex flex-col items-center justify-center py-24 text-center"><h1 className="text-3xl font-bold">Coming Soon</h1><p className="text-muted-foreground mt-4 max-w-md mb-8">We are building something amazing. Get notified when we launch.</p><div className="flex w-full max-w-sm space-x-2"><input className="flex h-10 w-full rounded-md border border-input px-3" placeholder="Email address" /><button className="bg-primary text-primary-foreground px-4 rounded-md">Notify Me</button></div></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedMaintNewsletter() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex flex-col items-center justify-center py-24 text-center"><h1 className="text-3xl font-bold">Coming Soon</h1><p className="text-muted-foreground mt-4 max-w-md mb-8">We are building something amazing. Get notified when we launch.</p><div className="flex w-full max-w-sm space-x-2"><input className="flex h-10 w-full rounded-md border border-input px-3" placeholder="Email address" /><button className="bg-primary text-primary-foreground px-4 rounded-md">Notify Me</button></div></div>
    </motion.div>
  );
}

<div className="max-w-md mx-auto py-24"><h1 className="text-2xl font-bold mb-2">System Update</h1><p className="text-muted-foreground text-sm mb-6">Updating database schema...</p><div className="w-full bg-muted rounded-full h-2.5"><div className="bg-primary h-2.5 rounded-full" style="width: 45%"></div></div><p className="text-right text-xs text-muted-foreground mt-2">45% Complete</p></div>

"use client";

import React, { useState } from "react";

interface MaintProgressProps {
  className?: string;
  children?: React.ReactNode;
}

export default function MaintProgress({
  className = "",
  children,
}: MaintProgressProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="max-w-md mx-auto py-24"><h1 className="text-2xl font-bold mb-2">System Update</h1><p className="text-muted-foreground text-sm mb-6">Updating database schema...</p><div className="w-full bg-muted rounded-full h-2.5"><div className="bg-primary h-2.5 rounded-full" style="width: 45%"></div></div><p className="text-right text-xs text-muted-foreground mt-2">45% Complete</p></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedMaintProgress() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="max-w-md mx-auto py-24"><h1 className="text-2xl font-bold mb-2">System Update</h1><p className="text-muted-foreground text-sm mb-6">Updating database schema...</p><div className="w-full bg-muted rounded-full h-2.5"><div className="bg-primary h-2.5 rounded-full" style="width: 45%"></div></div><p className="text-right text-xs text-muted-foreground mt-2">45% Complete</p></div>
    </motion.div>
  );
}

<div className="py-24 border-t-4 border-primary px-8 bg-muted/30"><h1 className="text-xl font-medium">Temporarily Unavailable</h1><p className="text-sm text-muted-foreground mt-2">Scheduled maintenance is currently in progress.</p></div>

"use client";

import React, { useState } from "react";

interface MaintMinimalProps {
  className?: string;
  children?: React.ReactNode;
}

export default function MaintMinimal({
  className = "",
  children,
}: MaintMinimalProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="py-24 border-t-4 border-primary px-8 bg-muted/30"><h1 className="text-xl font-medium">Temporarily Unavailable</h1><p className="text-sm text-muted-foreground mt-2">Scheduled maintenance is currently in progress.</p></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedMaintMinimal() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="py-24 border-t-4 border-primary px-8 bg-muted/30"><h1 className="text-xl font-medium">Temporarily Unavailable</h1><p className="text-sm text-muted-foreground mt-2">Scheduled maintenance is currently in progress.</p></div>
    </motion.div>
  );
}

<div className="flex flex-col items-center justify-center py-24 text-center"><h1 className="text-3xl font-bold">Down for Maintenance</h1><p className="text-muted-foreground mt-4">We are currently upgrading our systems.</p><p className="mt-8 text-sm">Need urgent help? <a href="#" className="text-primary underline">Contact Support</a></p></div>

"use client";

import React, { useState } from "react";

interface MaintContactProps {
  className?: string;
  children?: React.ReactNode;
}

export default function MaintContact({
  className = "",
  children,
}: MaintContactProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="flex flex-col items-center justify-center py-24 text-center"><h1 className="text-3xl font-bold">Down for Maintenance</h1><p className="text-muted-foreground mt-4">We are currently upgrading our systems.</p><p className="mt-8 text-sm">Need urgent help? <a href="#" className="text-primary underline">Contact Support</a></p></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedMaintContact() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex flex-col items-center justify-center py-24 text-center"><h1 className="text-3xl font-bold">Down for Maintenance</h1><p className="text-muted-foreground mt-4">We are currently upgrading our systems.</p><p className="mt-8 text-sm">Need urgent help? <a href="#" className="text-primary underline">Contact Support</a></p></div>
    </motion.div>
  );
}