Add src/app/ai-image-generator/page.tsx

2026-06-03 17:13:36 +00:00
parent e32f96c6d2
commit f1b86ca7ba
1 changed files with 92 additions and 0 deletions
--- a/src/app/ai-image-generator/page.tsx
+++ b/src/app/ai-image-generator/page.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import { Wand2 } from "lucide-react";
+
+export default function AiImageGeneratorPage() {
+  const navItems = [
+    {
+      name: "Home",      id: "/"
+    },
+    {
+      name: "About",      id: "/#about"
+    },
+    {
+      name: "Features",      id: "/#features"
+    },
+    {
+      name: "Products",      id: "/#products"
+    },
+    {
+      name: "Pricing",      id: "/#pricing"
+    },
+    {
+      name: "Testimonials",      id: "/#testimonials"
+    },
+    {
+      name: "FAQ",      id: "/#faq"
+    },
+    {
+      name: "Contact",      id: "/#contact"
+    },
+    {
+      name: "AI Image Generator",      id: "/ai-image-generator"
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLarge"
+      background="noise"
+      cardStyle="solid"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="solid"
+      headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={navItems}
+            button={{ text: "Browse Templates", href: "/#products" }}
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ruakxa"
+            brandName="BuildDigital"
+          />
+        </div>
+
+        <div id="ai-tool" data-section="ai-tool" className="py-20 text-center">
+          <div className="container max-w-2xl mx-auto px-4">
+            <h1 className="text-5xl font-bold mb-6 flex items-center justify-center gap-4">
+              <Wand2 size={48} className="text-primary-cta" />
+              AI Image Generator
+            </h1>
+            <p className="text-xl text-foreground/70 mb-8">
+              Unleash your creativity with our cutting-edge AI image generation tool. Describe your vision, and let AI bring it to life in stunning visuals.
+            </p>
+            <div className="bg-card p-8 rounded-lg shadow-lg">
+              <p className="text-foreground/80 mb-4">
+                (Placeholder for AI Image Generation Interface)
+              </p>
+              <textarea
+                className="w-full p-3 mb-4 rounded-md bg-background-accent text-foreground border border-card-border focus:ring-2 focus:ring-primary-cta outline-none transition-all"
+                rows={4}
+                placeholder="Enter your prompt here, e.g., 'a futuristic city at sunset, cyberpunk style, highly detailed, 8k'"
+              ></textarea>
+              <button className="bg-primary-cta text-white px-6 py-3 rounded-md font-semibold hover:bg-primary-cta/90 transition-colors">
+                Generate Image
+              </button>
+            </div>
+            <p className="mt-8 text-sm text-foreground/50">
+              Please note: This is a placeholder. Full functionality coming soon!
+            </p>
+          </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}