Add About page navigation link to header

src/App.tsx

@@ -1,5 +1,7 @@
 import { Footer, Header } from "compositions";
 import { AllProviders } from "data";
+import { useState } from "react";
+import { About } from "./examples/About";
 import { Demo } from "./examples/Demo";
 import { FAQs } from "./examples/FAQs";
 import { PanelSections } from "./examples/PanelSections";
@@ -9,19 +11,35 @@ import { ProductGrid } from "./examples/ProductGrid";
 import { WelcomeHero } from "./examples/WelcomeHero";
 
 function App() {
-  return (
-    <AllProviders>
-      <Header />
-      <Demo />
-      <WelcomeHero />
-      <PanelSections />
-      <PricingGrid />
-      <FAQs />
-      <ProductDetails />
-      <ProductGrid />
-      <Footer />
-    </AllProviders>
-  );
+  const [currentPage, setCurrentPage] = useState("home");
+
+  // Simple routing function
+  const renderPage = () => {
+    switch (currentPage) {
+      case "about":
+        return <About />;
+      case "home":
+      default:
+        return (
+          <>
+            <Header />
+            <Demo />
+            <WelcomeHero />
+            <PanelSections />
+            <PricingGrid />
+            <FAQs />
+            <ProductDetails />
+            <ProductGrid />
+            <Footer />
+          </>
+        );
+    }
+  };
+
+  // Expose global navigation function for demo purposes
+  (window as any).navigateTo = setCurrentPage;
+
+  return <AllProviders>{renderPage()}</AllProviders>;
 }
 
 export default App;

src/examples/About.tsx

@@ -0,0 +1,129 @@
+import { Card, Footer, Header, Panel } from "compositions";
+import { useMediaQuery } from "hooks";
+import { Flex, FlexItem, Grid, Section } from "layout";
+import {
+  Button,
+  Image,
+  Text,
+  TextContentHeading,
+  TextContentTitle,
+} from "primitives";
+
+export function About() {
+  const { isMobile, isTabletDown } = useMediaQuery();
+  const flexGap = isMobile ? "600" : "1200";
+  const sectionPadding = isMobile ? "600" : "1600";
+  const heroTitleSize = isMobile ? "2400" : "4000";
+
+  return (
+    <>
+      {/* Header */}
+      <Header />
+
+      {/* Hero Section */}
+      <Section padding={heroTitleSize} variant="neutral">
+        <Flex container direction="column" alignSecondary="center" gap="200">
+          <TextContentTitle align="center" title="Title" subtitle="Subtitle" />
+        </Flex>
+      </Section>
+
+      {/* Image Panel Section */}
+      <Section padding={sectionPadding} variant="default">
+        <Panel type="half" gap={flexGap}>
+          <Image
+            src="https://cdn.builder.io/api/v1/image/assets%2F83db4d91283a4dbc9917f4be2689a9a3%2F3cc4bb157d7d44a28dfd1c85491e8190?format=webp&width=800"
+            alt="About us image 1"
+            aspectRatio="fill"
+            size="large"
+          />
+          <Image
+            src="https://cdn.builder.io/api/v1/image/assets%2F83db4d91283a4dbc9917f4be2689a9a3%2F3cc4bb157d7d44a28dfd1c85491e8190?format=webp&width=800"
+            alt="About us image 2"
+            aspectRatio="fill"
+            size="large"
+          />
+        </Panel>
+      </Section>
+
+      {/* Card Grid Content List Section */}
+      <Section padding={sectionPadding} variant="default">
+        <Flex container direction="column" alignSecondary="stretch" gap={flexGap}>
+          <TextContentHeading
+            align="start"
+            heading="Heading"
+            subheading="Subheading"
+          />
+          <Flex direction="column" gap="600">
+            {Array.from({ length: 3 }, (_, i) => (
+              <Card
+                key={i}
+                direction="horizontal"
+                variant="stroke"
+                padding="600"
+                asset={
+                  <Image
+                    src="https://cdn.builder.io/api/v1/image/assets%2F83db4d91283a4dbc9917f4be2689a9a3%2F3cc4bb157d7d44a28dfd1c85491e8190?format=webp&width=800"
+                    alt={`Feature ${i + 1}`}
+                    aspectRatio="1-1"
+                    size="medium"
+                  />
+                }
+              >
+                <Flex direction="column" gap="400">
+                  <Flex direction="column" gap="200">
+                    <Text elementType="h3">Title</Text>
+                    <Text>
+                      Body text for whatever you'd like to say. Add main takeaway
+                      points, quotes, anecdotes, or even a very very short story.
+                    </Text>
+                  </Flex>
+                  <Button variant="neutral">Button</Button>
+                </Flex>
+              </Card>
+            ))}
+          </Flex>
+        </Flex>
+      </Section>
+
+      {/* Card Grid Image Section */}
+      <Section padding={sectionPadding} variant="default">
+        <Flex container direction="column" alignSecondary="stretch" gap={flexGap}>
+          <TextContentHeading
+            align="start"
+            heading="Heading"
+            subheading="Subheading"
+          />
+          <Grid container type="third" gap={flexGap}>
+            {Array.from({ length: 6 }, (_, i) => (
+              <Card
+                key={i}
+                direction="horizontal"
+                variant="stroke"
+                padding="600"
+                asset={
+                  <Image
+                    src="https://cdn.builder.io/api/v1/image/assets%2F83db4d91283a4dbc9917f4be2689a9a3%2F3cc4bb157d7d44a28dfd1c85491e8190?format=webp&width=800"
+                    alt={`Feature ${i + 1}`}
+                    aspectRatio="1-1"
+                    size="medium"
+                  />
+                }
+              >
+                <Flex direction="column" gap="200">
+                  <Text elementType="h3">Title</Text>
+                  <Text>
+                    Body text for whatever you'd like to say. Add main takeaway
+                    points, quotes, anecdotes, or even a very very short story.
+                  </Text>
+                </Flex>
+              </Card>
+            ))}
+          </Grid>
+        </Flex>
+      </Section>
+
+      {/* Footer */}
+      <Footer />
+    </>
+  );
+}

src/ui/compositions/Headers/Headers.tsx

@@ -60,6 +60,7 @@ export function HeaderAuth() {
   const { isTabletDown } = useMediaQuery();
 
   const navItems = [
+    "About",
     "Pricing",
     "Solutions",
     "Community",
@@ -72,7 +73,16 @@ export function HeaderAuth() {
       {navItems.map((item) => (
         <NavigationPill
           key={item}
-          onPress={() => setPage(item.toLowerCase())}
+          onPress={() => {
+            const pageKey = item.toLowerCase();
+            setPage(pageKey);
+            // Connect to global navigation for About page
+            if (pageKey === "about" && (window as any).navigateTo) {
+              (window as any).navigateTo("about");
+            } else if (pageKey !== "about" && (window as any).navigateTo) {
+              (window as any).navigateTo("home");
+            }
+          }}
           isSelected={page === item.toLowerCase()}
         >
           {item}