Schema added to components
This commit is contained in:
adilallo
+126
-107
@@ -2,10 +2,28 @@ import Logo from "./Logo";
|
|||||||
import Separator from "./Separator";
|
import Separator from "./Separator";
|
||||||
|
|
||||||
export default function Footer() {
|
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 (
|
return (
|
||||||
<footer className="bg-[var(--color-surface-default-primary)] w-full">
|
<>
|
||||||
<div
|
<script
|
||||||
className="flex flex-col items-start mx-auto max-w-[1920px]
|
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]
|
||||||
px-[var(--spacing-measures-spacing-016)]
|
px-[var(--spacing-measures-spacing-016)]
|
||||||
py-[var(--spacing-measures-spacing-040)]
|
py-[var(--spacing-measures-spacing-040)]
|
||||||
gap-[var(--spacing-measures-spacing-040)]
|
gap-[var(--spacing-measures-spacing-040)]
|
||||||
@@ -15,124 +33,125 @@ export default function Footer() {
|
|||||||
lg:px-[var(--spacing-measures-spacing-120,120px)]
|
lg:px-[var(--spacing-measures-spacing-120,120px)]
|
||||||
lg:py-[var(--spacing-measures-spacing-096,96px)]
|
lg:py-[var(--spacing-measures-spacing-096,96px)]
|
||||||
lg:gap-[var(--spacing-measures-spacing-060,60px)]"
|
lg:gap-[var(--spacing-measures-spacing-060,60px)]"
|
||||||
>
|
>
|
||||||
{/* Logo*/}
|
{/* Logo*/}
|
||||||
<div className="block sm:hidden">
|
<div className="block sm:hidden">
|
||||||
<Logo />
|
<Logo />
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden sm:block lg:hidden">
|
<div className="hidden sm:block lg:hidden">
|
||||||
<Logo size="footer" />
|
<Logo size="footer" />
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden lg:block">
|
<div className="hidden lg:block">
|
||||||
<Logo size="footerLg" />
|
<Logo size="footerLg" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Content section */}
|
{/* Content section */}
|
||||||
<div className="flex flex-col items-start w-full gap-[var(--spacing-measures-spacing-048,48px)] sm:flex-row sm:justify-between sm:gap-0">
|
<div className="flex flex-col items-start w-full gap-[var(--spacing-measures-spacing-048,48px)] sm:flex-row sm:justify-between sm:gap-0">
|
||||||
{/* Branding Section */}
|
{/* Branding Section */}
|
||||||
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-064,64px)] order-2 sm:order-1">
|
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-064,64px)] order-2 sm:order-1">
|
||||||
{/* Contact info */}
|
{/* Contact info */}
|
||||||
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]">
|
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]">
|
||||||
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
|
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
|
||||||
Media Economies Design Lab
|
Media Economies Design Lab
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="mailto:medlab@colorado.edu"
|
||||||
|
className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||||
|
>
|
||||||
|
medlab@colorado.edu
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Social media links */}
|
||||||
|
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group"
|
||||||
|
aria-label="Follow us on Bluesky"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/assets/Bluesky_Logo.svg"
|
||||||
|
alt="Bluesky"
|
||||||
|
width={24}
|
||||||
|
height={22}
|
||||||
|
className="flex-shrink-0 group-hover:scale-110 transition-transform"
|
||||||
|
/>
|
||||||
|
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
|
||||||
|
medlabboulder
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group"
|
||||||
|
aria-label="Follow us on GitLab"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/assets/GitLab_Icon.png"
|
||||||
|
alt="GitLab"
|
||||||
|
width={22}
|
||||||
|
height={22}
|
||||||
|
className="flex-shrink-0 grayscale group-hover:scale-110 transition-transform"
|
||||||
|
/>
|
||||||
|
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
|
||||||
|
medlabboulder
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation Section */}
|
||||||
|
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] order-1 sm:order-2 sm:items-end">
|
||||||
<a
|
<a
|
||||||
href="mailto:medlab@colorado.edu"
|
href="#"
|
||||||
className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||||
>
|
>
|
||||||
medlab@colorado.edu
|
Use cases
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Social media links */}
|
|
||||||
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]">
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group"
|
|
||||||
aria-label="Follow us on Bluesky"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/assets/Bluesky_Logo.svg"
|
|
||||||
alt="Bluesky"
|
|
||||||
width={24}
|
|
||||||
height={22}
|
|
||||||
className="flex-shrink-0 group-hover:scale-110 transition-transform"
|
|
||||||
/>
|
|
||||||
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
|
|
||||||
medlabboulder
|
|
||||||
</div>
|
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group"
|
className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||||
aria-label="Follow us on GitLab"
|
|
||||||
>
|
>
|
||||||
<img
|
Learn
|
||||||
src="/assets/GitLab_Icon.png"
|
</a>
|
||||||
alt="GitLab"
|
<a
|
||||||
width={22}
|
href="#"
|
||||||
height={22}
|
className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||||
className="flex-shrink-0 grayscale group-hover:scale-110 transition-transform"
|
>
|
||||||
/>
|
About
|
||||||
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
|
|
||||||
medlabboulder
|
|
||||||
</div>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Navigation Section */}
|
<Separator />
|
||||||
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] order-1 sm:order-2 sm:items-end">
|
|
||||||
<a
|
{/* Bottom section */}
|
||||||
href="#"
|
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] sm:flex-row sm:justify-between sm:items-center w-full">
|
||||||
className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
<div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium sm:text-xs sm:leading-4 lg:text-sm lg:leading-5 lg:font-normal">
|
||||||
>
|
© All right reserved
|
||||||
Use cases
|
</div>
|
||||||
</a>
|
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-040,40px)] sm:flex-row sm:gap-[var(--spacing-measures-spacing-040,40px)]">
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||||
>
|
>
|
||||||
Learn
|
Privacy Policy
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||||
>
|
>
|
||||||
About
|
Terms of Service
|
||||||
</a>
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||||
|
>
|
||||||
|
Cookies Settings
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</footer>
|
||||||
<Separator />
|
</>
|
||||||
|
|
||||||
{/* Bottom section */}
|
|
||||||
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] sm:flex-row sm:justify-between sm:items-center w-full">
|
|
||||||
<div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium sm:text-xs sm:leading-4 lg:text-sm lg:leading-5 lg:font-normal">
|
|
||||||
© All right reserved
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-040,40px)] sm:flex-row sm:gap-[var(--spacing-measures-spacing-040,40px)]">
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
|
||||||
>
|
|
||||||
Privacy Policy
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
|
||||||
>
|
|
||||||
Terms of Service
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
|
||||||
>
|
|
||||||
Cookies Settings
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+94
-74
@@ -6,6 +6,18 @@ import AvatarContainer from "./AvatarContainer";
|
|||||||
import Avatar from "./Avatar";
|
import Avatar from "./Avatar";
|
||||||
|
|
||||||
export default function Header({ onToggle }) {
|
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 = [
|
const navigationItems = [
|
||||||
{ href: "#", text: "Use cases", extraPadding: true },
|
{ href: "#", text: "Use cases", extraPadding: true },
|
||||||
{ href: "#", text: "Learn" },
|
{ href: "#", text: "Learn" },
|
||||||
@@ -88,96 +100,104 @@ export default function Header({ onToggle }) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header
|
<>
|
||||||
className="bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]"
|
<script
|
||||||
role="banner"
|
type="application/ld+json"
|
||||||
aria-label="Main navigation header"
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
|
||||||
>
|
/>
|
||||||
<nav
|
<header
|
||||||
className="flex items-center justify-between mx-auto max-w-[1920px] h-[40px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]"
|
className="bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]"
|
||||||
role="navigation"
|
role="banner"
|
||||||
aria-label="Main navigation"
|
aria-label="Main navigation header"
|
||||||
>
|
>
|
||||||
{/* Logo - Consistent left positioning across all breakpoints */}
|
<nav
|
||||||
<div className="flex items-center">
|
className="flex items-center justify-between mx-auto max-w-[1920px] h-[40px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]"
|
||||||
{logoConfig.map((config, index) => (
|
role="navigation"
|
||||||
<div key={index} className={config.breakpoint}>
|
aria-label="Main navigation"
|
||||||
{renderLogo(config.size, config.showText)}
|
>
|
||||||
|
{/* Logo - Consistent left positioning across all breakpoints */}
|
||||||
|
<div className="flex items-center">
|
||||||
|
{logoConfig.map((config, index) => (
|
||||||
|
<div key={index} className={config.breakpoint}>
|
||||||
|
{renderLogo(config.size, config.showText)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation Links - Consistent center positioning */}
|
||||||
|
<div className="flex items-center">
|
||||||
|
{/* XSmall breakpoint - Navigation items moved to right section */}
|
||||||
|
<div className="block sm:hidden">
|
||||||
|
{/* Empty for XSmall - navigation moved to right */}
|
||||||
</div>
|
</div>
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Navigation Links - Consistent center positioning */}
|
{/* Small breakpoint - All items grouped together, centered */}
|
||||||
<div className="flex items-center">
|
<div className="hidden sm:block md:hidden">
|
||||||
{/* XSmall breakpoint - Navigation items moved to right section */}
|
<MenuBar size="default">
|
||||||
<div className="block sm:hidden">
|
{renderNavigationItems("xsmall")}
|
||||||
{/* Empty for XSmall - navigation moved to right */}
|
{renderLoginButton("xsmall")}
|
||||||
</div>
|
</MenuBar>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Small breakpoint - All items grouped together, centered */}
|
<div className="hidden md:block lg:hidden">
|
||||||
<div className="hidden sm:block md:hidden">
|
<MenuBar size="default">
|
||||||
<MenuBar size="default">
|
{renderNavigationItems("xsmall")}
|
||||||
{renderNavigationItems("xsmall")}
|
</MenuBar>
|
||||||
{renderLoginButton("xsmall")}
|
</div>
|
||||||
</MenuBar>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="hidden md:block lg:hidden">
|
<div className="hidden lg:block xl:hidden">
|
||||||
<MenuBar size="default">{renderNavigationItems("xsmall")}</MenuBar>
|
<MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="hidden lg:block xl:hidden">
|
<div className="hidden xl:block">
|
||||||
<MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
|
<MenuBar size="large">{renderNavigationItems("xlarge")}</MenuBar>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="hidden xl:block">
|
|
||||||
<MenuBar size="large">{renderNavigationItems("xlarge")}</MenuBar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Authentication Elements - Consistent right alignment across all breakpoints */}
|
|
||||||
<div className="flex items-center">
|
|
||||||
{/* XSmall breakpoint - All navigation items + Create Rule button */}
|
|
||||||
<div className="block sm:hidden">
|
|
||||||
<div className="flex items-center gap-[var(--spacing-scale-001)]">
|
|
||||||
{renderNavigationItems("xsmall")}
|
|
||||||
{renderLoginButton("xsmall")}
|
|
||||||
{renderCreateRuleButton("xsmall", "small", "small")}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Small breakpoint - Only Create Rule button */}
|
{/* Authentication Elements - Consistent right alignment across all breakpoints */}
|
||||||
<div className="hidden sm:block md:hidden">
|
<div className="flex items-center">
|
||||||
<div className="flex items-center gap-[var(--spacing-scale-004)]">
|
{/* XSmall breakpoint - All navigation items + Create Rule button */}
|
||||||
{renderCreateRuleButton("xsmall", "small", "small")}
|
<div className="block sm:hidden">
|
||||||
|
<div className="flex items-center gap-[var(--spacing-scale-001)]">
|
||||||
|
{renderNavigationItems("xsmall")}
|
||||||
|
{renderLoginButton("xsmall")}
|
||||||
|
{renderCreateRuleButton("xsmall", "small", "small")}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Medium breakpoint */}
|
{/* Small breakpoint - Only Create Rule button */}
|
||||||
<div className="hidden md:block lg:hidden">
|
<div className="hidden sm:block md:hidden">
|
||||||
<div className="flex items-center gap-[var(--spacing-measures-spacing-010)]">
|
<div className="flex items-center gap-[var(--spacing-scale-004)]">
|
||||||
{renderLoginButton("xsmall")}
|
{renderCreateRuleButton("xsmall", "small", "small")}
|
||||||
{renderCreateRuleButton("xsmall", "medium", "medium")}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Large breakpoint */}
|
{/* Medium breakpoint */}
|
||||||
<div className="hidden lg:block xl:hidden">
|
<div className="hidden md:block lg:hidden">
|
||||||
<div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
|
<div className="flex items-center gap-[var(--spacing-measures-spacing-010)]">
|
||||||
{renderLoginButton("large")}
|
{renderLoginButton("xsmall")}
|
||||||
{renderCreateRuleButton("large", "xlarge", "xlarge")}
|
{renderCreateRuleButton("xsmall", "medium", "medium")}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* XLarge breakpoint */}
|
{/* Large breakpoint */}
|
||||||
<div className="hidden xl:block">
|
<div className="hidden lg:block xl:hidden">
|
||||||
<div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
|
<div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
|
||||||
{renderLoginButton("xlarge")}
|
{renderLoginButton("large")}
|
||||||
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
|
{renderCreateRuleButton("large", "xlarge", "xlarge")}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* XLarge breakpoint */}
|
||||||
|
<div className="hidden xl:block">
|
||||||
|
<div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
|
||||||
|
{renderLoginButton("xlarge")}
|
||||||
|
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
</nav>
|
</header>
|
||||||
</header>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ export default function HeaderTab({
|
|||||||
<img
|
<img
|
||||||
src="/assets/Union_sm_md_lg.svg"
|
src="/assets/Union_sm_md_lg.svg"
|
||||||
alt="Union"
|
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
|
<img
|
||||||
src="/assets/Union_xlg.svg"
|
src="/assets/Union_xlg.svg"
|
||||||
|
|||||||
+100
-80
@@ -13,6 +13,20 @@ import Header from "./Header";
|
|||||||
export default function HomeHeader() {
|
export default function HomeHeader() {
|
||||||
const [showRegularHeader, setShowRegularHeader] = useState(false);
|
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 = [
|
const navigationItems = [
|
||||||
{ href: "#", text: "Use cases", extraPadding: true },
|
{ href: "#", text: "Use cases", extraPadding: true },
|
||||||
{ href: "#", text: "Learn" },
|
{ href: "#", text: "Learn" },
|
||||||
@@ -139,91 +153,97 @@ export default function HomeHeader() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header
|
<>
|
||||||
className="w-full bg-transparent overflow-hidden"
|
<script
|
||||||
role="banner"
|
type="application/ld+json"
|
||||||
aria-label="Home page navigation header"
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
|
||||||
>
|
/>
|
||||||
<nav
|
<header
|
||||||
className="relative flex items-center justify-between mx-auto max-w-[1920px] h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)] xl:pl-[var(--spacing-scale-048)] xl:pt-[var(--spacing-scale-024)] xl:pr-[var(--spacing-scale-056)]"
|
className="w-full bg-transparent overflow-hidden"
|
||||||
role="navigation"
|
role="banner"
|
||||||
aria-label="Main navigation"
|
aria-label="Home page navigation header"
|
||||||
>
|
>
|
||||||
<HeaderTab className="flex items-center self-end" stretch={true}>
|
<nav
|
||||||
{/* Logo - Consistent left positioning within HeaderTab */}
|
className="relative flex items-center justify-between mx-auto max-w-[1920px] h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)] xl:pl-[var(--spacing-scale-048)] xl:pt-[var(--spacing-scale-024)] xl:pr-[var(--spacing-scale-056)]"
|
||||||
<div>
|
role="navigation"
|
||||||
{logoConfig.map((config, index) => (
|
aria-label="Main navigation"
|
||||||
<div key={index} className={config.breakpoint}>
|
>
|
||||||
{renderLogo(config.size, config.showText)}
|
<HeaderTab className="flex items-center self-end" stretch={true}>
|
||||||
|
{/* Logo - Consistent left positioning within HeaderTab */}
|
||||||
|
<div>
|
||||||
|
{logoConfig.map((config, index) => (
|
||||||
|
<div key={index} className={config.breakpoint}>
|
||||||
|
{renderLogo(config.size, config.showText)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* XSmall menu bar - positioned next to logo */}
|
||||||
|
<div className="block sm:hidden -me-[2px]">
|
||||||
|
<MenuBar size="default">
|
||||||
|
{renderNavigationItems("xsmall")}
|
||||||
|
{renderLoginButton("xsmall")}
|
||||||
|
</MenuBar>
|
||||||
|
</div>
|
||||||
|
</HeaderTab>
|
||||||
|
|
||||||
|
{/* Navigation Links - Centered in header for SM and up */}
|
||||||
|
<div className="absolute left-1/2 transform -translate-x-1/2 hidden sm:block">
|
||||||
|
<div className="hidden sm:block md:hidden">
|
||||||
|
<MenuBar size="default">
|
||||||
|
{renderNavigationItems("xsmall")}
|
||||||
|
{renderLoginButton("xsmall")}
|
||||||
|
</MenuBar>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hidden md:block lg:hidden">
|
||||||
|
<MenuBar size="medium">{renderNavigationItems("homeMd")}</MenuBar>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hidden lg:block xl:hidden">
|
||||||
|
<MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hidden xl:block">
|
||||||
|
<MenuBar size="large">
|
||||||
|
{renderNavigationItems("homeXlarge")}
|
||||||
|
</MenuBar>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Authentication Elements - Consistent right alignment outside HeaderTab */}
|
||||||
|
<div className="flex items-center">
|
||||||
|
{/* XSmall and Small breakpoints - create rule button outside HeaderTab */}
|
||||||
|
<div className="block md:hidden">
|
||||||
|
{renderCreateRuleButton("xsmall", "small", "small")}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Medium breakpoint - login outside HeaderTab, create rule outside */}
|
||||||
|
<div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
|
||||||
|
<div className="flex items-center gap-[var(--spacing-scale-010)]">
|
||||||
|
{renderLoginButton("homeMd")}
|
||||||
|
{renderCreateRuleButton("small", "medium", "medium")}
|
||||||
</div>
|
</div>
|
||||||
))}
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* XSmall menu bar - positioned next to logo */}
|
{/* Large breakpoint */}
|
||||||
<div className="block sm:hidden -me-[2px]">
|
<div className="hidden lg:flex xl:hidden items-center">
|
||||||
<MenuBar size="default">
|
<div className="flex items-center gap-[var(--spacing-scale-004)]">
|
||||||
{renderNavigationItems("xsmall")}
|
{renderLoginButton("large")}
|
||||||
{renderLoginButton("xsmall")}
|
{renderCreateRuleButton("large", "large", "large")}
|
||||||
</MenuBar>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</HeaderTab>
|
|
||||||
|
|
||||||
{/* Navigation Links - Centered in header for SM and up */}
|
{/* XLarge breakpoint */}
|
||||||
<div className="absolute left-1/2 transform -translate-x-1/2 hidden sm:block">
|
<div className="hidden xl:flex items-center">
|
||||||
<div className="hidden sm:block md:hidden">
|
<div className="flex items-center gap-[var(--spacing-scale-004)]">
|
||||||
<MenuBar size="default">
|
{renderLoginButton("homeXlarge")}
|
||||||
{renderNavigationItems("xsmall")}
|
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
|
||||||
{renderLoginButton("xsmall")}
|
</div>
|
||||||
</MenuBar>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="hidden md:block lg:hidden">
|
|
||||||
<MenuBar size="medium">{renderNavigationItems("homeMd")}</MenuBar>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="hidden lg:block xl:hidden">
|
|
||||||
<MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="hidden xl:block">
|
|
||||||
<MenuBar size="large">
|
|
||||||
{renderNavigationItems("homeXlarge")}
|
|
||||||
</MenuBar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Authentication Elements - Consistent right alignment outside HeaderTab */}
|
|
||||||
<div className="flex items-center">
|
|
||||||
{/* XSmall and Small breakpoints - create rule button outside HeaderTab */}
|
|
||||||
<div className="block md:hidden">
|
|
||||||
{renderCreateRuleButton("xsmall", "small", "small")}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Medium breakpoint - login outside HeaderTab, create rule outside */}
|
|
||||||
<div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
|
|
||||||
<div className="flex items-center gap-[var(--spacing-scale-010)]">
|
|
||||||
{renderLoginButton("homeMd")}
|
|
||||||
{renderCreateRuleButton("small", "medium", "medium")}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</nav>
|
||||||
{/* Large breakpoint */}
|
</header>
|
||||||
<div className="hidden lg:flex xl:hidden items-center">
|
</>
|
||||||
<div className="flex items-center gap-[var(--spacing-scale-004)]">
|
|
||||||
{renderLoginButton("large")}
|
|
||||||
{renderCreateRuleButton("large", "large", "large")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* XLarge breakpoint */}
|
|
||||||
<div className="hidden xl:flex items-center">
|
|
||||||
<div className="flex items-center gap-[var(--spacing-scale-004)]">
|
|
||||||
{renderLoginButton("homeXlarge")}
|
|
||||||
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,50 +5,70 @@ import SectionHeader from "./SectionHeader";
|
|||||||
import Button from "./Button";
|
import Button from "./Button";
|
||||||
|
|
||||||
const NumberedCards = ({ title, subtitle, cards }) => {
|
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 (
|
return (
|
||||||
<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">
|
<script
|
||||||
<div className="grid grid-cols-1 gap-y-[var(--spacing-scale-032)] lg:gap-y-[var(--spacing-scale-056)]">
|
type="application/ld+json"
|
||||||
{/* Section Header */}
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
|
||||||
<div>
|
/>
|
||||||
<SectionHeader
|
<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)]">
|
||||||
title={title}
|
<div className="max-w-[var(--spacing-measures-max-width-lg)] mx-auto">
|
||||||
subtitle={subtitle}
|
<div className="grid grid-cols-1 gap-y-[var(--spacing-scale-032)] lg:gap-y-[var(--spacing-scale-056)]">
|
||||||
titleLg="How CommunityRule helps"
|
{/* Section Header */}
|
||||||
/>
|
<div>
|
||||||
</div>
|
<SectionHeader
|
||||||
|
title={title}
|
||||||
{/* Cards Container */}
|
subtitle={subtitle}
|
||||||
<div className="grid grid-cols-1 gap-y-[var(--spacing-scale-024)] lg:grid-cols-3 lg:gap-[var(--spacing-scale-024)]">
|
titleLg="How CommunityRule helps"
|
||||||
{cards.map((card, index) => (
|
|
||||||
<NumberedCard
|
|
||||||
key={index}
|
|
||||||
number={index + 1}
|
|
||||||
text={card.text}
|
|
||||||
iconShape={card.iconShape}
|
|
||||||
iconColor={card.iconColor}
|
|
||||||
/>
|
/>
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Call to Action Button */}
|
|
||||||
<div className="text-center sm:text-left lg:text-center">
|
|
||||||
{/* Default button for xsm and sm breakpoints */}
|
|
||||||
<div className="block lg:hidden">
|
|
||||||
<Button variant="default" size="large">
|
|
||||||
Create CommunityRule
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
{/* Outlined button for lg and xlg breakpoints */}
|
|
||||||
<div className="hidden lg:block">
|
{/* Cards Container */}
|
||||||
<Button variant="outlined" size="large">
|
<div className="grid grid-cols-1 gap-y-[var(--spacing-scale-024)] lg:grid-cols-3 lg:gap-[var(--spacing-scale-024)]">
|
||||||
See how it works
|
{cards.map((card, index) => (
|
||||||
</Button>
|
<NumberedCard
|
||||||
|
key={index}
|
||||||
|
number={index + 1}
|
||||||
|
text={card.text}
|
||||||
|
iconShape={card.iconShape}
|
||||||
|
iconColor={card.iconColor}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Call to Action Button */}
|
||||||
|
<div className="text-center sm:text-left lg:text-center">
|
||||||
|
{/* Default button for xsm and sm breakpoints */}
|
||||||
|
<div className="block lg:hidden">
|
||||||
|
<Button variant="default" size="large">
|
||||||
|
Create CommunityRule
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{/* Outlined button for lg and xlg breakpoints */}
|
||||||
|
<div className="hidden lg:block">
|
||||||
|
<Button variant="outlined" size="large">
|
||||||
|
See how it works
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user