@promakeai/cli 0.0.5

package/template/src/components/Footer.tsx

@@ -0,0 +1,100 @@
+import { useMemo } from "react";
+import { Link } from "react-router";
+import { Facebook, Twitter, Instagram, Linkedin } from "lucide-react";
+import constants from "@/constants/constants.json";
+import { useTranslation } from "react-i18next";
+
+const socialIcons: Record<string, React.ElementType> = {
+  facebook: Facebook,
+  twitter: Twitter,
+  instagram: Instagram,
+  linkedin: Linkedin,
+};
+
+export function Footer() {
+  const { t } = useTranslation("footer");
+
+  const socialLinks = useMemo(() => {
+    const socialMedia = constants?.socialMedia as
+      | Record<string, string>
+      | undefined;
+    if (!socialMedia) return [];
+    return Object.entries(socialMedia)
+      .filter(([platform, url]) => url && socialIcons[platform])
+      .map(([platform, url]) => ({
+        platform,
+        url,
+        Icon: socialIcons[platform],
+      }));
+  }, []);
+
+  // Loading state
+  if (!constants) {
+    return (
+      <footer className="bg-muted/30 border-t">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="animate-pulse text-center">
+            <div className="h-4 bg-muted rounded w-48 mx-auto"></div>
+          </div>
+        </div>
+      </footer>
+    );
+  }
+
+  return (
+    <footer className="bg-muted/30 border-t">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Centered Content */}
+        <div className="text-center space-y-4">
+          {/* Social Media Links */}
+          {socialLinks.length > 0 && (
+            <div className="flex justify-center gap-2">
+              {socialLinks.map(({ platform, url, Icon }) => (
+                <a
+                  key={platform}
+                  href={url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="h-9 w-9 flex items-center justify-center rounded-md text-muted-foreground hover:text-primary hover:bg-accent transition-colors"
+                >
+                  <Icon className="h-4 w-4" />
+                </a>
+              ))}
+            </div>
+          )}
+
+          {/* Copyright */}
+          <div>
+            <p className="text-sm text-muted-foreground">
+              {t("copyright", {
+                siteName: constants?.site?.name,
+              })}
+            </p>
+          </div>
+
+          {/* Legal Links */}
+          <div className="flex flex-wrap justify-center gap-6">
+            <Link
+              to="/privacy"
+              className="text-sm text-muted-foreground hover:text-primary transition-colors"
+            >
+              {t("privacyPolicy", "Privacy")}
+            </Link>
+            <Link
+              to="/terms"
+              className="text-sm text-muted-foreground hover:text-primary transition-colors"
+            >
+              {t("termsOfService", "Terms")}
+            </Link>
+            <Link
+              to="/cookies"
+              className="text-sm text-muted-foreground hover:text-primary transition-colors"
+            >
+              {t("cookiePolicy", "Cookies")}
+            </Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/template/src/components/Header.tsx

@@ -0,0 +1,79 @@
+import { useState } from "react";
+import { Link } from "react-router";
+import { Menu } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetHeader,
+  SheetTitle,
+  SheetContent,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { Logo } from "@/components/Logo";
+import { useTranslation } from "react-i18next";
+
+export function Header() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const { t } = useTranslation("header");
+
+  const navigation = [
+    { name: t("home", "Home"), href: "/" },
+    { name: t("about", "About"), href: "/about" },
+    { name: t("contact", "Contact"), href: "/contact" },
+  ];
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-border/20 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex h-16 sm:h-20 items-center justify-between">
+          {/* Logo */}
+          <div className="flex-shrink-0 min-w-0">
+            <Logo size="sm" className="text-base sm:text-xl lg:text-2xl" />
+          </div>
+
+          {/* Desktop Navigation - Right Aligned */}
+          <nav className="hidden lg:flex items-center space-x-8">
+            {navigation.map((item) => (
+              <Link
+                key={item.name}
+                to={item.href}
+                className="text-base font-medium transition-colors hover:text-primary relative group py-2"
+              >
+                {item.name}
+                <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
+              </Link>
+            ))}
+          </nav>
+
+          {/* Mobile Menu - Right Aligned */}
+          <div className="lg:hidden flex-shrink-0">
+            <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+              <SheetTrigger asChild>
+                <Button variant="ghost" size="icon">
+                  <Menu className="h-5 w-5" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="right" className="w-[300px] sm:w-[400px]">
+                <SheetHeader>
+                  <SheetTitle>{t("menu")}</SheetTitle>
+                </SheetHeader>
+                <div className="flex flex-col space-y-4 mt-8">
+                  {navigation.map((item) => (
+                    <Link
+                      key={item.name}
+                      to={item.href}
+                      className="text-lg font-medium hover:text-primary transition-colors"
+                      onClick={() => setMobileMenuOpen(false)}
+                    >
+                      {item.name}
+                    </Link>
+                  ))}
+                </div>
+              </SheetContent>
+            </Sheet>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

package/template/src/components/Hero.tsx

@@ -0,0 +1,69 @@
+import { useTranslation } from "react-i18next";
+import constants from "@/constants/constants.json";
+export function Hero() {
+  const { t } = useTranslation("hero");
+
+  if (!constants) {
+    return (
+      <section className="relative overflow-hidden bg-gradient-to-br from-background via-muted/20 to-background">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 relative">
+          <div className="text-center space-y-8">
+            <div className="animate-pulse">
+              <div className="h-16 bg-muted rounded w-96 mx-auto mb-4"></div>
+              <div className="h-6 bg-muted rounded w-64 mx-auto mb-8"></div>
+              <div className="h-12 bg-muted rounded w-32 mx-auto"></div>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="relative min-h-[60vh] flex items-center overflow-hidden bg-gradient-to-br from-background via-muted/10 to-background">
+      {/* Background Image */}
+      <div className="absolute inset-0">
+        {/* Background image will be placed here */}
+        <img
+          src="/images/hero-bg.jpg"
+          alt="Hero Background"
+          className="w-full h-full object-cover"
+          onError={(e) => {
+            // Hide broken image and keep gradient background
+            e.currentTarget.style.display = "none";
+          }}
+        />
+
+        {/* Dark overlay for text readability */}
+        <div className="absolute inset-0 bg-gradient-to-r from-black/60 via-black/30 to-transparent"></div>
+
+        {/* Fallback gradient background */}
+        <div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-transparent to-primary/5"></div>
+      </div>
+
+      {/* Content - Left Aligned with better contrast */}
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="max-w-2xl text-left">
+          {/* Main Headline */}
+          <div className="space-y-6 mb-8">
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-normal text-white drop-shadow-lg pb-1">
+              <span>{t("discover", "Discover")} </span>
+              <span className="bg-gradient-to-r from-primary to-primary/80 bg-clip-text text-transparent">
+                {t("amazing", "Inspiring")}
+              </span>
+              <br />
+              <span>{t("content", "Stories")}</span>
+            </h1>
+
+            <p className="text-xl text-white/90 max-w-lg leading-relaxed drop-shadow-md">
+              {t(
+                "subtitle",
+                "Dive into a world of captivating narratives, expert insights, and thought-provoking content that inspires and educates.",
+              )}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/template/src/components/LanguageSwitcher.tsx

@@ -0,0 +1,47 @@
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { changeLanguage } from "@/lang";
+import { cn } from "@/lib/utils";
+import constants from "@/constants/constants.json";
+
+const languages: Record<string, string> =
+  constants?.site?.availableLanguages || {};
+
+export function LanguageSwitcher() {
+  const { i18n } = useTranslation();
+  const currentLang = i18n.language;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-9 px-2 text-sm font-medium"
+        >
+          {languages?.[currentLang] || currentLang.toUpperCase()}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {Object.entries(languages).map(([lang, label]) => (
+          <DropdownMenuItem
+            key={lang}
+            onClick={() => changeLanguage(lang)}
+            className={cn(
+              currentLang === lang ? "bg-accent" : "",
+              "hover:text-primary focus:text-primary",
+            )}
+          >
+            {label || lang.toUpperCase()}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/template/src/components/Layout.tsx

@@ -0,0 +1,25 @@
+import { type ReactNode, useEffect } from "react";
+import { useLocation } from "react-router";
+import { Header } from "./Header";
+import { Footer } from "./Footer";
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+export function Layout({ children }: LayoutProps) {
+  const location = useLocation();
+
+  // Scroll to top when route changes
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location.pathname]);
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <main className="flex-1">{children}</main>
+      <Footer />
+    </div>
+  );
+}

package/template/src/components/Logo.tsx

@@ -0,0 +1,64 @@
+import { Link } from "react-router";
+import constants from "@/constants/constants.json";
+
+interface LogoProps {
+  className?: string;
+  size?: "sm" | "md" | "lg" | "xl";
+  variant?: "default" | "light" | "dark";
+}
+
+export function Logo({
+  className = "",
+  size = "md",
+  variant = "default",
+}: LogoProps) {
+  // Text boyutları
+  const textSizes = {
+    sm: "text-base sm:text-lg",
+    md: "text-lg sm:text-xl",
+    lg: "text-xl sm:text-2xl",
+    xl: "text-2xl sm:text-3xl",
+  };
+
+  // Image boyutları
+  const imageSizes = {
+    sm: "h-6 sm:h-8",
+    md: "h-8 sm:h-10",
+    lg: "h-10 sm:h-12",
+    xl: "h-12 sm:h-16",
+  };
+
+  // Renk varyantları
+  const variants = {
+    default: "text-primary",
+    light: "text-white",
+    dark: "text-foreground",
+  };
+
+  const currentVariant = variants[variant];
+  const siteName = constants.site.name;
+  const logoImage = constants.site.logo;
+
+  return (
+    <Link
+      to="/"
+      className={`flex items-center gap-1.5 sm:gap-2 md:gap-3 ${className}`}
+    >
+      {/* Logo Image (if exists) */}
+      {logoImage && (
+        <img
+          src={logoImage}
+          alt={`${siteName} Logo`}
+          className={`${imageSizes[size]} w-auto object-contain flex-shrink-0`}
+        />
+      )}
+
+      {/* Site Name */}
+      <span
+        className={`${textSizes[size]} font-bold ${currentVariant} truncate`}
+      >
+        {siteName}
+      </span>
+    </Link>
+  );
+}

package/template/src/components/ThemeSwitcher.tsx

@@ -0,0 +1,58 @@
+import { Moon, Sun, Monitor } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useTheme, type Theme } from "@/hooks/use-theme";
+import { cn } from "@/lib/utils";
+
+const themes: {
+  value: Theme;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+}[] = [
+  { value: "light", label: "Light", icon: Sun },
+  { value: "dark", label: "Dark", icon: Moon },
+  { value: "system", label: "System", icon: Monitor },
+];
+
+export function ThemeSwitcher() {
+  const { theme, setTheme, effectiveTheme } = useTheme();
+
+  const currentTheme = themes.find((t) => t.value === theme);
+  const CurrentIcon =
+    theme === "system"
+      ? effectiveTheme === "dark"
+        ? themes[1].icon
+        : themes[0].icon
+      : currentTheme?.icon || Sun;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="h-9 w-9 px-0">
+          <CurrentIcon className="h-4 w-4" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {themes.map(({ value, label, icon: Icon }) => (
+          <DropdownMenuItem
+            key={value}
+            onClick={() => setTheme(value)}
+            className={cn(
+              theme === value ? "bg-accent" : "",
+              "hover:text-primary focus:text-primary flex items-center gap-2 group",
+            )}
+          >
+            <Icon className="h-4 w-4 transition-colors group-hover:text-primary" />
+            <span>{label}</span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/template/src/components/ui/accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/template/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,155 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};