Merge version_3 into main

Merge version_3 into main

src/app/app/page.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import { useState } from "react";
+
+export default function AppPage() {
+  const [equation, setEquation] = useState("");
+  const [latex, setLatex] = useState("");
+
+  const handleFormatEquation = () => {
+    // Placeholder for equation formatting logic
+    setLatex(`\\text{Formatted: } ${equation}`);
+  };
+
+  const handleCopyLatex = () => {
+    navigator.clipboard.writeText(latex);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="compact"
+      sizing="largeSmallSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="outline"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="EquationFlow"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Features", id: "/#features" },
+            { name: "How It Works", id: "/#how-it-works" },
+            { name: "GitHub", id: "https://github.com" },
+            { name: "Docs", id: "https://docs.example.com" },
+          ]}
+          button={{ text: "Home", href: "/" }}
+        />
+      </div>
+
+      <div className="min-h-screen w-full flex items-center justify-center py-20 px-4">
+        <div className="w-full max-w-2xl">
+          <div className="text-center mb-12">
+            <h1 className="text-5xl md:text-6xl font-bold mb-4 text-foreground">
+              Equation Formatter
+            </h1>
+            <p className="text-lg text-foreground/70">
+              Type your equation and watch it format in real-time
+            </p>
+          </div>
+
+          <div className="space-y-6">
+            <div>
+              <label className="block text-sm font-medium text-foreground mb-2">
+                Enter your equation:
+              </label>
+              <textarea
+                value={equation}
+                onChange={(e) => setEquation(e.target.value)}
+                placeholder="e.g., x^2 + y^2 = r^2"
+                className="w-full p-4 border-2 border-accent rounded-lg focus:outline-none focus:border-primary-cta bg-card text-foreground"
+                rows={4}
+              />
+            </div>
+
+            <button
+              onClick={handleFormatEquation}
+              className="w-full py-3 px-6 bg-primary-cta text-primary-cta-text font-semibold rounded-lg hover:opacity-90 transition-opacity"
+            >
+              Format Equation
+            </button>
+
+            {latex && (
+              <div className="bg-card border-2 border-accent rounded-lg p-6">
+                <h3 className="text-sm font-medium text-foreground mb-2">
+                  LaTeX Output:
+                </h3>
+                <code className="text-foreground/80 break-all">{latex}</code>
+                <button
+                  onClick={handleCopyLatex}
+                  className="mt-4 w-full py-2 px-4 bg-secondary-cta text-secondary-cta-text font-medium rounded-lg hover:opacity-90 transition-opacity"
+                >
+                  Copy LaTeX
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -28,6 +28,7 @@ export default function LandingPage() {
           navItems={[
             { name: "Features", id: "features" },
             { name: "How It Works", id: "how-it-works" },
+            { name: "App", id: "/app" },
             { name: "GitHub", id: "https://github.com" },
             { name: "Docs", id: "https://docs.example.com" },
           ]}
@@ -44,7 +45,7 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           background={{ variant: "canvas-reveal" }}
           buttons={[
-            { text: "Start Formatting", href: "#features" },
+            { text: "Start Formatting", href: "/app" },
             { text: "View on GitHub", href: "https://github.com" },
           ]}
           imageSrc="http://img.b2bpic.net/free-vector/web-design-background_53876-90537.jpg?_wi=1"
@@ -100,7 +101,7 @@ export default function LandingPage() {
               title: "Export & Share",              description: "Copy clean LaTeX for Markdown or export high-resolution PNG images in one click. Ready for any platform.",              icon: Download,
             },
           ]}
-          buttons={[{ text: "Start Formatting", href: "#hero" }]}
+          buttons={[{ text: "Try the App", href: "/app" }]}
         />
       </div>