Merge version_3_1776869924938 into main

Merge version_3_1776869924938 into main

src/App.tsx

@@ -2,12 +2,14 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import HomePage from "@/pages/HomePage";
 import PricingFeaturesPage from "@/pages/PricingFeaturesPage";
 
+import SimpleAboutPage from "@/pages/SimpleAboutPage";
 export default function App() {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/pricing-features" element={<PricingFeaturesPage />} />
+        <Route path="/simple-about" element={<SimpleAboutPage />} />
       </Routes>
     </BrowserRouter>
   );

src/pages/SimpleAboutPage.tsx

@@ -0,0 +1,69 @@
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import Button from "@/components/ui/Button";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import { routes } from "@/routes";
+
+export default function SimpleAboutPage() {
+  const navItems = routes.map((r) => ({ name: r.label, href: r.path }));
+
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <NavbarCentered navItems={navItems} />
+      <main>
+        {/* Hero Section */}
+        <section className="py-20 md:py-32 text-center bg-background">
+          <div className="container mx-auto px-4 max-w-3xl">
+            <h1 className="text-5xl md:text-6xl font-bold mb-6">Our Story, Our Mission</h1>
+            <p className="text-xl text-muted-foreground mb-10">We are a dedicated team committed to creating innovative solutions that empower businesses and individuals alike.</p>
+            <div className="flex justify-center space-x-4">
+              <Button variant="primary" href="#about-us">Learn More</Button>
+              <Button variant="secondary" href="/contact">Contact Us</Button>
+            </div>
+          </div>
+        </section>
+
+        {/* About Section */}
+        <section id="about-us" className="py-20 md:py-32 bg-card text-card-foreground">
+          <div className="container mx-auto px-4 max-w-5xl">
+            <div className="grid md:grid-cols-2 gap-12 items-center">
+              <div>
+                <h2 className="text-4xl font-bold mb-6">Who We Are</h2>
+                <p className="text-lg text-muted-foreground mb-8">Founded on principles of innovation and user-centric design, our journey began with a simple goal: to make technology accessible and impactful. We believe in continuous improvement and fostering strong relationships with our community.</p>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                  <div className="p-4 bg-background rounded-lg border border-border">
+                    <h3 className="font-semibold text-lg mb-1">Innovation</h3>
+                    <p className="text-muted-foreground text-sm">Constantly exploring new ideas and technologies.</p>
+                  </div>
+                  <div className="p-4 bg-background rounded-lg border border-border">
+                    <h3 className="font-semibold text-lg mb-1">Quality</h3>
+                    <p className="text-muted-foreground text-sm">Delivering robust and reliable products.</p>
+                  </div>
+                  <div className="p-4 bg-background rounded-lg border border-border">
+                    <h3 className="font-semibold text-lg mb-1">Integrity</h3>
+                    <p className="text-muted-foreground text-sm">Operating with transparency and honesty.</p>
+                  </div>
+                  <div className="p-4 bg-background rounded-lg border border-border">
+                    <h3 className="font-semibold text-lg mb-1">Customer Success</h3>
+                    <p className="text-muted-foreground text-sm">Prioritizing our users' growth and satisfaction.</p>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <ImageOrVideo src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Our Team Working" className="rounded-lg shadow-xl" />
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Contact Section */}
+        <section className="py-20 md:py-32 text-center bg-background">
+          <div className="container mx-auto px-4 max-w-3xl">
+            <h2 className="text-4xl font-bold mb-6">Ready to Connect?</h2>
+            <p className="text-xl text-muted-foreground mb-10">Whether you have a question or just want to say hello, we'd love to hear from you.</p>
+            <Button variant="primary" href="/contact">Get in Touch</Button>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}

src/routes.ts

@@ -7,4 +7,5 @@ export interface Route {
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
   { path: '/pricing-features', label: 'Pricing Features', pageFile: 'PricingFeaturesPage' },
+  { path: '/simple-about', label: 'Simple About', pageFile: 'SimpleAboutPage' },
 ];