Schema added to components

app/components/Footer.js

@@ -2,7 +2,25 @@ import Logo from "./Logo";
 import Separator from "./Separator";
 
 export default function Footer() {
+  // Schema markup for organization information
+  const schemaData = {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name: "Media Economies Design Lab",
+    email: "medlab@colorado.edu",
+    url: "https://communityrule.com",
+    sameAs: [
+      "https://bsky.app/profile/medlabboulder",
+      "https://gitlab.com/medlabboulder",
+    ],
+  };
+
   return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
+      />
       <footer className="bg-[var(--color-surface-default-primary)] w-full">
         <div
           className="flex flex-col items-start mx-auto max-w-[1920px]
@@ -134,5 +152,6 @@ export default function Footer() {
           </div>
         </div>
       </footer>
+    </>
   );
 }

app/components/Header.js

@@ -6,6 +6,18 @@ import AvatarContainer from "./AvatarContainer";
 import Avatar from "./Avatar";
 
 export default function Header({ onToggle }) {
+  // Schema markup for site navigation
+  const schemaData = {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name: "CommunityRule",
+    url: "https://communityrule.com",
+    potentialAction: {
+      "@type": "SearchAction",
+      target: "https://communityrule.com/search?q={search_term_string}",
+      "query-input": "required name=search_term_string",
+    },
+  };
   const navigationItems = [
     { href: "#", text: "Use cases", extraPadding: true },
     { href: "#", text: "Learn" },
@@ -88,6 +100,11 @@ export default function Header({ onToggle }) {
   };
 
   return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
+      />
       <header
         className="bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]"
         role="banner"
@@ -123,7 +140,9 @@ export default function Header({ onToggle }) {
             </div>
 
             <div className="hidden md:block lg:hidden">
-            <MenuBar size="default">{renderNavigationItems("xsmall")}</MenuBar>
+              <MenuBar size="default">
+                {renderNavigationItems("xsmall")}
+              </MenuBar>
             </div>
 
             <div className="hidden lg:block xl:hidden">
@@ -179,5 +198,6 @@ export default function Header({ onToggle }) {
           </div>
         </nav>
       </header>
+    </>
   );
 }

app/components/HeaderTab.js

@@ -22,7 +22,7 @@ export default function HeaderTab({
       <img
         src="/assets/Union_sm_md_lg.svg"
         alt="Union"
-        className="absolute -bottom-[3.5px] -right-[53px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block xl:hidden -z-10"
+        className="absolute -bottom-[3.7px] -right-[53px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block xl:hidden -z-10"
       />
       <img
         src="/assets/Union_xlg.svg"

app/components/HomeHeader.js

@@ -13,6 +13,20 @@ import Header from "./Header";
 export default function HomeHeader() {
   const [showRegularHeader, setShowRegularHeader] = useState(false);
 
+  // Schema markup for site navigation (home page specific)
+  const schemaData = {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name: "CommunityRule",
+    url: "https://communityrule.com",
+    description: "Build operating manuals for successful communities",
+    potentialAction: {
+      "@type": "SearchAction",
+      target: "https://communityrule.com/search?q={search_term_string}",
+      "query-input": "required name=search_term_string",
+    },
+  };
+
   const navigationItems = [
     { href: "#", text: "Use cases", extraPadding: true },
     { href: "#", text: "Learn" },
@@ -139,6 +153,11 @@ export default function HomeHeader() {
   }
 
   return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
+      />
       <header
         className="w-full bg-transparent overflow-hidden"
         role="banner"
@@ -225,5 +244,6 @@ export default function HomeHeader() {
           </div>
         </nav>
       </header>
+    </>
   );
 }

app/components/NumberedCards.js

@@ -5,7 +5,26 @@ import SectionHeader from "./SectionHeader";
 import Button from "./Button";
 
 const NumberedCards = ({ title, subtitle, cards }) => {
+  // Schema markup for SEO
+  const schemaData = {
+    "@context": "https://schema.org",
+    "@type": "HowTo",
+    name: title,
+    description: subtitle,
+    step: cards.map((card, index) => ({
+      "@type": "HowToStep",
+      position: index + 1,
+      name: card.text,
+      text: card.text,
+    })),
+  };
+
   return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
+      />
       <section className="bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] sm:py-[var(--spacing-scale-048)] sm:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)] xl:px-[var(--spacing-scale-064)]">
         <div className="max-w-[var(--spacing-measures-max-width-lg)] mx-auto">
           <div className="grid grid-cols-1 gap-y-[var(--spacing-scale-032)] lg:gap-y-[var(--spacing-scale-056)]">
@@ -49,6 +68,7 @@ const NumberedCards = ({ title, subtitle, cards }) => {
           </div>
         </div>
       </section>
+    </>
   );
 };