feat: add IconLogo feature with routing, page, and navigation updates

Author: codeaashu

next.config.ts

@@ -1,6 +1,19 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  async rewrites() {
+    if (process.env.NODE_ENV !== "development") {
+      return [];
+    }
+
+    return [
+      {
+        source: "/iconlogo-app/:path*",
+        destination: "http://127.0.0.1:5173/:path*",
+      },
+    ];
+  },
+
   async headers() {
     return [
       {

src/app/iconlogo/page.tsx

@@ -0,0 +1,40 @@
+import type { Metadata } from "next";
+import TopNavbar from "@/components/TopNavbar";
+
+export const metadata: Metadata = {
+  title: "IconLogo Studio | RemoveBanana",
+  description:
+    "Create icon-based logos with the integrated IconLogo studio. Launch the cloned iconlogo app directly inside RemoveBanana.",
+};
+
+export default function IconLogoPage() {
+  const iframeSrc =
+    process.env.NODE_ENV === "development"
+      ? "http://127.0.0.1:5173"
+      : process.env.NEXT_PUBLIC_ICONLOGO_URL;
+
+  return (
+    <main className="min-h-screen bg-black text-white overflow-hidden">
+      <TopNavbar />
+
+      {iframeSrc ? (
+        <iframe
+          src={iframeSrc}
+          title="IconLogo Studio"
+          className="block w-full h-screen pt-14 md:pt-16 border-0"
+          allow="clipboard-read; clipboard-write"
+        />
+      ) : (
+        <section className="pt-32 px-6">
+          <div className="max-w-3xl mx-auto rounded-2xl border border-amber-400/20 bg-amber-500/5 p-6 text-amber-100/90">
+            <p className="text-base font-semibold">IconLogo deployment URL is not configured.</p>
+            <p className="mt-2 text-sm text-amber-100/70">
+              Set NEXT_PUBLIC_ICONLOGO_URL to your deployed IconLogo app URL.
+            </p>
+          </div>
+        </section>
+      )}
+
+    </main>
+  );
+}

src/app/page.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import Link from "next/link";
-import Image from "next/image";
 import { motion } from "framer-motion";
-import { Image as ImageIcon, Video, Eraser, Brain, QrCode, Sparkles } from "lucide-react";
+import { Image as ImageIcon, Video, Eraser, Brain, QrCode, Shapes } from "lucide-react";
 import TopNavbar from "@/components/TopNavbar";
 import Footer from "@/components/Footer";
 import Loader from "@/components/Loader";
@@ -45,6 +44,13 @@ const tools = [
     href: "/qr-code-generator",
     color: "from-cyan-600 to-blue-500",
   },
+  {
+    name: "IconLogo",
+    description: "Create icon-based logos with a full studio workflow and quick exports.",
+    icon: Shapes,
+    href: "/iconlogo",
+    color: "from-orange-600 to-amber-500",
+  },
 ];
 
 export default function LandingPage() {

src/app/sitemap.ts

@@ -41,6 +41,12 @@ export default function sitemap(): MetadataRoute.Sitemap {
       changeFrequency: "weekly",
       priority: 0.9,
     },
+    {
+      url: `${baseUrl}/iconlogo`,
+      lastModified,
+      changeFrequency: "weekly",
+      priority: 0.9,
+    },
     {
       url: `${baseUrl}/about`,
       lastModified,

src/app/svg-logo-editor/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function LegacySvgLogoEditorPage() {
+  redirect("/iconlogo");
+}

src/components/Footer.tsx

@@ -39,6 +39,11 @@ export default function Footer() {
                   QR Generator
                 </Link>
               </li>
+              <li>
+                <Link href="/iconlogo" className="hover:text-white transition-colors">
+                  IconLogo
+                </Link>
+              </li>
             </ul>
           </div>
 

src/components/TopNavbar.tsx

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
-import { Image as ImageIcon, Video, Eraser, Github, Twitter, Brain, House, QrCode } from "lucide-react";
+import { Image as ImageIcon, Video, Eraser, Github, Twitter, Brain, House, QrCode, Shapes } from "lucide-react";
 
 export default function TopNavbar() {
   const pathname = usePathname();
@@ -14,6 +14,7 @@ export default function TopNavbar() {
   const isBackgroundPage = pathname === "/background-remover";
   const isAIDetectorPage = pathname === "/ai-image-detector";
   const isQrCodePage = pathname === "/qr-code-generator";
+  const isIconLogoPage = pathname === "/iconlogo";
 
   return (
     <nav
@@ -133,6 +134,19 @@ export default function TopNavbar() {
                 <QrCode className="w-5 h-5" />
                 <span className="hidden sm:inline">QR Generator</span>
               </Link>
+
+              <Link
+                href="/iconlogo"
+                aria-label="IconLogo"
+                aria-current={isIconLogoPage ? "page" : undefined}
+                className={`relative flex items-center justify-center gap-2 px-3 sm:px-5 py-2.5 rounded-xl text-sm transition-all duration-300 whitespace-nowrap ${isIconLogoPage
+                    ? "text-white shadow-lg bg-gradient-to-r from-orange-600 to-amber-500"
+                    : "text-gray-400 hover:text-gray-200 hover:bg-white/5"
+                  }`}
+              >
+                <Shapes className="w-5 h-5" />
+                <span className="hidden sm:inline">IconLogo</span>
+              </Link>
             </div>
           )}