bender/1b4ef74f-1203-4b6b-9ec9-242c858e96b8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3 into main #5

Merged
bender merged 3 commits from version_3 into main 2026-03-08 06:26:48 +00:00
Conversation 0 Commits 3 Files Changed 3 +128 -22
3 changed files with 128 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/app/app/page.tsx Normal file
View File

@@ -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>
);
}

26
src/app/layout.tsx
View File

@@ -1,11 +1,14 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import "./styles/variables.css";
import "./styles/base.css";
const inter = Inter({ subsets: ["latin"] });
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
export const metadata: Metadata = {
title: "EquationFlow", description: "Instantly convert plain-text equations into professionally formatted formulas."};
title: "EquationFlow - Fast Equation Formatter", description: "Convert plain-text equations into professionally formatted formulas. Real-time preview, zero friction, offline-ready."};
export default function RootLayout({
children,
@@ -13,8 +16,21 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}
<html lang="en" suppressHydrationWarning>
<body className={inter.variable}>
{children}
<script
dangerouslySetInnerHTML={{
__html: `
if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
`,
}}
/>
<script
dangerouslySetInnerHTML={{
__html: `

26
src/app/page.tsx
View File

@@ -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"
@@ -58,23 +59,17 @@ export default function LandingPage() {
description="Everything you need to format equations fast—no bloat, no sign-ups, no distractions."
features={[
{
id: "real-time-preview", title: "Real-Time Preview", description: "See your formula rendered as you type. Inline validation catches errors instantly with zero layout shift.", imageSrc: "http://img.b2bpic.net/free-vector/web-design-background_53876-90537.jpg?_wi=2", imageAlt: "Real-time equation preview"
},
id: "real-time-preview", title: "Real-Time Preview", description: "See your formula rendered as you type. Inline validation catches errors instantly with zero layout shift.", imageSrc: "http://img.b2bpic.net/free-vector/web-design-background_53876-90537.jpg?_wi=2", imageAlt: "Real-time equation preview"},
{
id: "copy-latex", title: "Copy Clean LaTeX", description: "One-click export of valid LaTeX for seamless integration into Markdown, documents, and technical writing.", imageSrc: "http://img.b2bpic.net/free-photo/view-school-items-arrangement_23-2149001115.jpg", imageAlt: "LaTeX code export"
},
id: "copy-latex", title: "Copy Clean LaTeX", description: "One-click export of valid LaTeX for seamless integration into Markdown, documents, and technical writing.", imageSrc: "http://img.b2bpic.net/free-photo/view-school-items-arrangement_23-2149001115.jpg", imageAlt: "LaTeX code export"},
{
id: "png-export", title: "High-Resolution PNG Export", description: "Export professionally typeset equations as high-resolution images for presentations, blogs, and papers.", imageSrc: "http://img.b2bpic.net/free-vector/web-design-background_53876-90537.jpg?_wi=3", imageAlt: "PNG image export"
},
id: "png-export", title: "High-Resolution PNG Export", description: "Export professionally typeset equations as high-resolution images for presentations, blogs, and papers.", imageSrc: "http://img.b2bpic.net/free-vector/web-design-background_53876-90537.jpg?_wi=3", imageAlt: "PNG image export"},
{
id: "offline-support", title: "Works Offline", description: "No internet required. KaTeX rendering runs entirely in your browser with full offline support.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-terrace_23-2148103942.jpg?_wi=1", imageAlt: "Offline functionality"
},
id: "offline-support", title: "Works Offline", description: "No internet required. KaTeX rendering runs entirely in your browser with full offline support.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-terrace_23-2148103942.jpg?_wi=1", imageAlt: "Offline functionality"},
{
id: "mobile-ready", title: "Sub-100ms on Mobile", description: "Lightning-fast rendering even on mid-range devices. Optimized for performance without compromise.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-terrace_23-2148103942.jpg?_wi=2", imageAlt: "Mobile performance"
},
id: "mobile-ready", title: "Sub-100ms on Mobile", description: "Lightning-fast rendering even on mid-range devices. Optimized for performance without compromise.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-terrace_23-2148103942.jpg?_wi=2", imageAlt: "Mobile performance"},
{
id: "zero-complexity", title: "No Accounts. No Overhead.", description: "Zero setup. No login. No configuration. Just open and start typing—truly frictionless equation formatting.", imageSrc: "http://img.b2bpic.net/free-vector/web-design-background_53876-90537.jpg?_wi=4", imageAlt: "Simple interface"
},
id: "zero-complexity", title: "No Accounts. No Overhead.", description: "Zero setup. No login. No configuration. Just open and start typing—truly frictionless equation formatting.", imageSrc: "http://img.b2bpic.net/free-vector/web-design-background_53876-90537.jpg?_wi=4", imageAlt: "Simple interface"},
]}
gridVariant="two-columns-alternating-heights"
animationType="slide-up"
@@ -106,10 +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" },
{ text: "See Example", href: "#features" },
]}
buttons={[{ text: "Try the App", href: "/app" }]}
/>
</div>