add new create site workflow

src/components/CopyTextBox.tsx

@@ -4,7 +4,11 @@ import { useState, useRef } from "react";
 import { Button } from "@/components/ui/button";
 import { Copy, Check } from "lucide-react";
 
-export default function CopyTextBox({ text = "", wrapText = false }) {
+export default function CopyTextBox({
+    text = "",
+    wrapText = false,
+    outline = true
+}) {
     const [isCopied, setIsCopied] = useState(false);
     const textRef = useRef<HTMLPreElement>(null);
 
@@ -23,7 +27,9 @@ export default function CopyTextBox({ text = "", wrapText = false }) {
     };
 
     return (
-        <div className="relative w-full border rounded-md bg-card">
+        <div
+            className={`relative w-full border rounded-md ${!outline ? "bg-muted" : "bg-card"}`}
+        >
             <pre
                 ref={textRef}
                 className={`p-4 pr-16 text-sm w-full ${

src/components/CopyToClipboard.tsx

@@ -20,18 +20,32 @@ const CopyToClipboard = ({ text, isLink }: CopyToClipboardProps) => {
     };
 
     return (
-        <div className="flex items-center">
+        <div className="flex items-center space-x-2 max-w-full">
             {isLink ? (
                 <Link
                     href={text}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="hover:underline mr-2"
+                    className="truncate hover:underline"
+                    style={{ maxWidth: "100%" }} // Ensures truncation works within parent
+                    title={text} // Shows full text on hover
                 >
                     {text}
                 </Link>
             ) : (
-                <span className="mr-2">{text}</span>
+                <span
+                    className="truncate"
+                    style={{
+                        maxWidth: "100%",
+                        display: "block",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis"
+                    }}
+                    title={text} // Full text tooltip
+                >
+                    {text}
+                </span>
             )}
             <button
                 type="button"

src/components/Settings.tsx

@@ -3,11 +3,11 @@ export function SettingsContainer({ children }: { children: React.ReactNode }) {
 }
 
 export function SettingsSection({ children }: { children: React.ReactNode }) {
-    return <div className="border rounded-md bg-card p-4">{children}</div>
+    return <div className="border rounded-lg bg-card p-5">{children}</div>
 }
 
 export function SettingsSectionHeader({ children }: { children: React.ReactNode }) {
-    return <div className="space-y-0.5 pb-6">{children}</div>
+    return <div className="text-lg space-y-0.5 pb-6">{children}</div>
 }
 
 export function SettingsSectionForm({ children }: { children: React.ReactNode }) {

src/components/SettingsSectionTitle.tsx

@@ -1,13 +1,13 @@
 type SettingsSectionTitleProps = {
     title: string | React.ReactNode;
-    description: string | React.ReactNode;
+    description?: string | React.ReactNode;
     size?: "2xl" | "1xl";
 };
 
 export default function SettingsSectionTitle({
     title,
     description,
-    size,
+    size
 }: SettingsSectionTitleProps) {
     return (
         <div
@@ -20,7 +20,9 @@ export default function SettingsSectionTitle({
             >
                 {title}
             </h2>
-            <p className="text-muted-foreground">{description}</p>
+            {description && (
+                <p className="text-muted-foreground">{description}</p>
+            )}
         </div>
     );
 }

src/components/StrategySelect.tsx

@@ -2,42 +2,59 @@
 
 import { cn } from "@app/lib/cn";
 import { RadioGroup, RadioGroupItem } from "./ui/radio-group";
+import { useState } from "react";
 
 interface StrategyOption {
     id: string;
     title: string;
     description: string;
+    disabled?: boolean; // New optional property
 }
 
 interface StrategySelectProps {
     options: StrategyOption[];
     defaultValue?: string;
     onChange?: (value: string) => void;
+    cols?: number;
 }
 
 export function StrategySelect({
     options,
     defaultValue,
-    onChange
+    onChange,
+    cols
 }: StrategySelectProps) {
+    const [selected, setSelected] = useState(defaultValue);
+
     return (
         <RadioGroup
             defaultValue={defaultValue}
-            onValueChange={onChange}
-            className="grid gap-4"
+            onValueChange={(value) => {
+                setSelected(value);
+                onChange?.(value);
+            }}
+            className={`grid md:grid-cols-${cols ? cols : 1} gap-4`}
         >
             {options.map((option) => (
                 <label
                     key={option.id}
                     htmlFor={option.id}
+                    data-state={
+                        selected === option.id ? "checked" : "unchecked"
+                    }
                     className={cn(
-                        "relative flex cursor-pointer rounded-lg border-2 p-4",
-                        "data-[state=checked]:border-primary data-[state=checked]:bg-primary/10 data-[state=checked]:text-primary"
+                        "relative flex rounded-lg border-2 p-4 transition-colors cursor-pointer",
+                        option.disabled
+                            ? "border-input text-muted-foreground cursor-not-allowed opacity-50"
+                            : selected === option.id
+                              ? "border-primary bg-primary/10 text-primary"
+                              : "border-input hover:bg-accent"
                     )}
                 >
                     <RadioGroupItem
                         value={option.id}
                         id={option.id}
+                        disabled={option.disabled}
                         className="absolute left-4 top-5 h-4 w-4 border-primary text-primary"
                     />
                     <div className="pl-7">

src/components/ui/button.tsx

@@ -21,20 +21,26 @@ const buttonVariants = cva(
                 secondary:
                     "bg-secondary border border-input border-2 text-secondary-foreground hover:bg-secondary/80",
                 ghost: "hover:bg-accent hover:text-accent-foreground",
+                squareOutlinePrimary:
+                    "border-2 border-primary bg-card hover:bg-primary/10 text-primary rounded-md",
+                squareOutline:
+                    "border-2 border-input bg-card hover:bg-accent hover:text-accent-foreground rounded-md",
+                squareDefault:
+                    "bg-primary text-primary-foreground hover:bg-primary/90 rounded-md",
                 text: "",
-                link: "text-primary underline-offset-4 hover:underline",
+                link: "text-primary underline-offset-4 hover:underline"
             },
             size: {
                 default: "h-9 px-4 py-2",
                 sm: "h-8 rounded-md px-3",
                 lg: "h-10 rounded-md px-8",
-                icon: "h-9 w-9",
+                icon: "h-9 w-9"
             }
         },
         defaultVariants: {
             variant: "default",
-            size: "default",
-        },
+            size: "default"
+        }
     }
 );
 

src/components/ui/table.tsx

@@ -3,7 +3,7 @@ import * as React from "react"
 import { cn } from "@app/lib/cn"
 
 export function TableContainer({ children }: { children: React.ReactNode }) {
-    return <div className="border rounded-md bg-card">{children}</div>
+    return <div className="border rounded-lg bg-card">{children}</div>
 }
 
 const Table = React.forwardRef<