move all components to components dir

src/components/SitesSplashCard.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ArrowRight, DockIcon as Docker, Globe, Server, X } from "lucide-react";
+import Link from "next/link";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useTranslations } from 'next-intl';
+
+export const SitesSplashCard = () => {
+    const [isDismissed, setIsDismissed] = useState(true);
+    const { env } = useEnvContext();
+
+    const key = "sites-splash-card-dismissed";
+    const t = useTranslations();
+
+    useEffect(() => {
+        const dismissed = localStorage.getItem(key);
+        if (dismissed === "true") {
+            setIsDismissed(true);
+        } else {
+            setIsDismissed(false);
+        }
+    }, []);
+
+    const handleDismiss = () => {
+        setIsDismissed(true);
+        localStorage.setItem(key, "true");
+    };
+
+    if (isDismissed) {
+        return null;
+    }
+
+    return (
+        <Card className="w-full mx-auto overflow-hidden mb-8 hidden md:block relative">
+            <button
+                onClick={handleDismiss}
+                className="absolute top-2 right-2 p-2"
+                aria-label={t('dismiss')}
+            >
+                <X className="w-5 h-5" />
+            </button>
+            <CardContent className="grid gap-6 p-6 sm:grid-cols-2">
+                <div className="space-y-4">
+                    <h3 className="text-xl font-semibold flex items-center gap-2">
+                        <Globe className="text-blue-500" />
+                        Newt ({t('recommended')})
+                    </h3>
+                    <p className="text-sm">
+                        {t('siteNewtDescription')}
+                    </p>
+                    <ul className="text-sm text-muted-foreground space-y-2">
+                        <li className="flex items-center gap-2">
+                            <Server className="text-green-500 w-4 h-4" />
+                            {t('siteRunsInDocker')}
+                        </li>
+                        <li className="flex items-center gap-2">
+                            <Server className="text-green-500 w-4 h-4" />
+                            {t('siteRunsInShell')}
+                        </li>
+                    </ul>
+
+                    <div className="mt-4">
+                        <Link
+                            href="https://docs.digpangolin.com/manage/sites/install-site"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <Button
+                                className="w-full flex items-center"
+                                variant="secondary"
+                            >
+                                {t('siteInstallNewt')}{" "}
+                                <ArrowRight className="ml-2 w-4 h-4" />
+                            </Button>
+                        </Link>
+                    </div>
+                </div>
+                <div className="space-y-4">
+                    <h3 className="text-xl font-semibold flex items-center gap-2">
+                        {t('siteWg')}
+                    </h3>
+                    <p className="text-sm">
+                        {t('siteWgAnyClients')}
+                    </p>
+                    <ul className="text-sm text-muted-foreground space-y-2">
+                        <li className="flex items-center gap-2">
+                            <Docker className="text-purple-500 w-4 h-4" />
+                            {t('siteWgCompatibleAllClients')}
+                        </li>
+                        <li className="flex items-center gap-2">
+                            <Server className="text-purple-500 w-4 h-4" />
+                            {t('siteWgManualConfigurationRequired')}
+                        </li>
+                    </ul>
+                </div>
+            </CardContent>
+        </Card>
+    );
+};
+
+export default SitesSplashCard;