maintenancePage

maintenance.tsx

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
import { Mail, Clock, AlertTriangle } from 'lucide-react'

export default function MaintenancePage() {
  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <Card className="w-full max-w-lg">
        <CardHeader>
          <CardTitle className="text-3xl font-bold text-center">Site Under Maintenance</CardTitle>
          <CardDescription className="text-center">We're making some improvements and will be back soon</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <Alert>
            <AlertTriangle className="h-4 w-4" />
            <AlertTitle>Reason for Maintenance</AlertTitle>
            <AlertDescription>
              We are upgrading our systems to enhance your service experience.
            </AlertDescription>
          </Alert>
          
          <div className="flex items-center space-x-2">
            <Clock className="h-5 w-5 text-muted-foreground" />
            <p>Expected maintenance period: March 15, 2024, 18:00 - March 16, 2024, 06:00 UTC</p>
          </div>
          
          <div className="flex items-center space-x-2">
            <Mail className="h-5 w-5 text-muted-foreground" />
            <p>For any inquiries, please contact: [email protected]</p>
          </div>
          
          <div className="flex justify-center">
            <Button variant="outline" onClick={() => window.location.reload()}>
              Refresh Page
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

maintenancePage.tsx

import { AlertTriangle } from 'lucide-react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

export default function Component() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-background p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <div className="flex items-center justify-center mb-4">
            <AlertTriangle className="h-12 w-12 text-yellow-500" />
          </div>
          <CardTitle className="text-2xl font-bold text-center">Website under maintenance</CardTitle>
          <CardDescription className="text-center">We are currently undergoing system maintenance.</CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-center text-muted-foreground">
        We are working hard to improve our service. Please come back later to check, thank you for your patience.
          </p>
          <p className="mt-4 text-center text-sm text-muted-foreground">
            Estimated recovery time: within 2 hours
          </p>
        </CardContent>
      </Card>
    </div>
  )
}