Add src/app/niche-analyzer/page.tsx

2026-05-28 05:48:05 +00:00
parent 517044a790
commit 39e0554786
1 changed files with 99 additions and 0 deletions
--- a/src/app/niche-analyzer/page.tsx
+++ b/src/app/niche-analyzer/page.tsx
@@ -0,0 +1,99 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import TextBox from '@/components/Textbox';
+import Textarea from '@/components/form/Textarea';
+import ButtonHoverMagnetic from '@/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic';
+import { useState } from 'react';
+import { Search } from "lucide-react";
+
+export default function NicheAnalyzerPage() {
+  const [nicheInput, setNicheInput] = useState('');
+  const handleAnalyze = () => {
+    console.log("Analyzing niche:", nicheInput);
+    // Placeholder for API call or data processing
+  };
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Features", id: "#features" },
+    { name: "Niche Analyzer", id: "/niche-analyzer" },
+    { name: "Low Competition Topics", id: "/low-competition-topics" },
+    { name: "Insights", id: "#insights" },
+    { name: "FAQ", id: "#faq" },
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="largeSmall"
+        background="aurora"
+        cardStyle="solid"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={navItems}
+            brandName="Yt Mugi"
+            button={{ text: "Reset / Change API Key", href: "#" }}
+          />
+        </div>
+
+        <div className="min-h-screen flex flex-col justify-center items-center py-20 px-4">
+          <div className="max-w-3xl w-full text-center">
+            <TextBox
+              title="Niche Analyzer"
+              description="Enter a broad topic or keyword, and our AI will identify profitable and underserved niches within it, complete with competition analysis and audience potential."
+              textboxLayout="default"
+              tag="AI-Powered Discovery"
+              tagIcon={Search}
+            />
+            <div className="mt-8 flex flex-col items-center gap-4">
+              <Textarea
+                value={nicheInput}
+                onChange={setNicheInput}
+                placeholder="e.g., 'gaming', 'cooking', 'finance for beginners'"
+                rows={5}
+                className="w-full max-w-lg"
+              />
+              <ButtonHoverMagnetic
+                text="Analyze Niche"
+                onClick={handleAnalyze}
+                className="mt-4"
+              />
+            </div>
+            <div className="mt-12 p-6 bg-card rounded-lg shadow-lg">
+              <h3 className="text-2xl font-semibold mb-4">Analysis Results (Placeholder)</h3>
+              <p className="text-foreground/80">
+                Detailed insights on market demand, competition levels, and potential content angles will appear here after analysis.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/3d-network-data-communications-background-with-plexus-design_1048-17880.jpg"
+            imageAlt="Abstract tech background"
+            logoText="Yt Mugi"
+            columns={[
+              { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Integrations", href: "#" }] },
+              { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Careers", href: "#" }, { label: "Contact", href: "#" }] },
+              { title: "Resources", items: [{ label: "Blog", href: "#blog" }, { label: "Support", href: "#" }, { label: "Help Center", href: "#faq" }] },
+              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
+            ]}
+            copyrightText="© 2025 | Yt Mugi. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}