diff --git a/docusaurus.config.js b/docusaurus.config.js index 5c016ecd..8547fe31 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -163,50 +163,32 @@ const DOCS_URL = process.env.DOCS_URL || 'https://docs.epilot.io'; style: 'light', links: [ { - title: 'Docs', - items: [ - { - label: 'Documentation', - to: '/docs/intro', - }, - { - label: 'REST API Docs', - to: '/api', - }, - { - label: 'SDK', - to: '/docs/architecture/sdk', - }, - { - label: 'Open Source', - to: '/docs/architecture/open-source', - }, - ], + label: 'Documentation', + to: '/docs/intro', }, { - title: 'Links', - items: [ - { - label: 'GitHub', - href: 'https://github.com/epilot-dev', - }, - { - label: 'Blog', - href: 'https://dev.to/epilot', - }, - { - label: 'Tech Radar', - href: `${DOCS_URL}/techradar`, - }, - { - label: 'Engineering Principles', - href: 'https://github.com/epilot-dev/engineering-principles', - }, - { - label: 'Careers', - href: 'https://www.epilot.cloud/en/company/careers', - }, - ], + label: 'REST API', + to: '/api', + }, + { + label: 'SDK', + to: '/docs/architecture/sdk', + }, + { + label: 'GitHub', + href: 'https://github.com/epilot-dev', + }, + { + label: 'Blog', + href: 'https://dev.to/epilot', + }, + { + label: 'Changelog', + to: '/api/changelog', + }, + { + label: 'Careers', + href: 'https://www.epilot.cloud/en/company/careers', }, ], copyright: `© epilot.cloud ${new Date().getFullYear()}`, diff --git a/src/components/ExplorePlatform.module.css b/src/components/ExplorePlatform.module.css new file mode 100644 index 00000000..4b702aa0 --- /dev/null +++ b/src/components/ExplorePlatform.module.css @@ -0,0 +1,101 @@ +.section { + padding: 4rem 2rem; + background: var(--ifm-background-surface-color); +} + +html[data-theme='dark'] .section { + background: rgba(255, 255, 255, 0.02); +} + +.sectionTitle { + font-size: 1.5rem; + font-weight: 600; + text-align: center; + margin-bottom: 0.5rem; +} + +.sectionSubtitle { + text-align: center; + color: var(--ifm-font-color-secondary); + margin-bottom: 2.5rem; + font-size: 1rem; +} + +.groupGrid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; + max-width: 1000px; + margin: 0 auto; +} + +.groupTitle { + font-size: 0.8rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--ifm-font-color-secondary); + margin-bottom: 0.75rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid var(--ifm-color-emphasis-200); +} + +.itemList { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.item { + display: flex; + align-items: flex-start; + gap: 0.75rem; + padding: 0.625rem 0.75rem; + border-radius: 0.5rem; + text-decoration: none; + color: inherit; + transition: background-color 0.15s; +} + +.item:hover { + background: rgba(76, 76, 255, 0.04); + text-decoration: none; + color: inherit; +} + +html[data-theme='dark'] .item:hover { + background: rgba(76, 140, 255, 0.08); +} + +.itemIcon { + flex-shrink: 0; + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + color: var(--ifm-color-primary); + margin-top: 1px; +} + +.itemLabel { + display: block; + font-weight: 600; + font-size: 0.95rem; +} + +.itemDesc { + display: block; + font-size: 0.82rem; + color: var(--ifm-font-color-secondary); + line-height: 1.4; +} + +@media (max-width: 768px) { + .groupGrid { + grid-template-columns: 1fr; + } +} diff --git a/src/components/ExplorePlatform.tsx b/src/components/ExplorePlatform.tsx new file mode 100644 index 00000000..f0fc33fa --- /dev/null +++ b/src/components/ExplorePlatform.tsx @@ -0,0 +1,389 @@ +import Link from '@docusaurus/Link'; +import React from 'react'; + +import styles from './ExplorePlatform.module.css'; + +/* Inline SVG icons — Lucide-style, 24x24, currentColor */ + +const LayersIcon = () => ( + + + + + +); + +const ShieldIcon = () => ( + + + +); + +const DatabaseIcon = () => ( + + + + + +); + +const RouteIcon = () => ( + + + + + +); + +const GlobeIcon = () => ( + + + + + +); + +const MailIcon = () => ( + + + + +); + +const FileTextIcon = () => ( + + + + + + +); + +const ZapIcon = () => ( + + + +); + +const GitBranchIcon = () => ( + + + + + + +); + +const CopyIcon = () => ( + + + + +); + +const TagIcon = () => ( + + + + +); + +const PlugIcon = () => ( + + + + + +); + +const GridSmallIcon = () => ( + + + + + + +); + +const PencilIcon = () => ( + + + + +); + +interface PlatformItem { + label: string; + href: string; + description: string; + icon: React.ReactNode; +} + +interface PlatformGroup { + title: string; + items: PlatformItem[]; +} + +const groups: PlatformGroup[] = [ + { + title: 'Core Platform', + items: [ + { + label: 'Architecture', + href: '/docs/architecture/overview', + description: 'Microservices, SDK, and system design', + icon: , + }, + { + label: 'Auth & Security', + href: '/docs/auth/access-tokens', + description: 'Access tokens, SSO, and permissions', + icon: , + }, + { + label: 'Entities', + href: '/docs/entities/flexible-entities', + description: 'Flexible data model with schemas and relations', + icon: , + }, + ], + }, + { + title: 'Customer Experience', + items: [ + { + label: 'Journeys', + href: '/docs/journeys/embedding', + description: 'Embeddable forms and multi-step flows', + icon: , + }, + { + label: 'Portals', + href: '/docs/portals/customer-portal', + description: 'Self-service portals for end customers', + icon: , + }, + { + label: 'Messaging', + href: '/docs/messaging/email-settings', + description: 'Email, threads, and inbox management', + icon: , + }, + { + label: 'Templates', + href: '/docs/templates/document-templates', + description: 'Document and email template engine', + icon: , + }, + ], + }, + { + title: 'Process & Automation', + items: [ + { + label: 'Automation', + href: '/docs/automation/architecture', + description: 'Triggers, actions, and entity mapping', + icon: , + }, + { + label: 'Workflows', + href: '/docs/workflows/intro', + description: 'Stateful business processes and phases', + icon: , + }, + { + label: 'Blueprints', + href: '/docs/blueprints/intro', + description: 'Reusable configuration packages', + icon: , + }, + ], + }, + { + title: 'Commerce & Integrations', + items: [ + { + label: 'Pricing', + href: '/docs/pricing/entities', + description: 'Products, catalogs, and pricing models', + icon: , + }, + { + label: 'Integrations', + href: '/docs/integrations/webhooks', + description: 'Webhooks, events, and third-party APIs', + icon: , + }, + { + label: 'Apps', + href: '/docs/apps', + description: 'Custom apps for the epilot marketplace', + icon: , + }, + { + label: 'Notes', + href: '/docs/notes/intro', + description: 'Structured notes and annotations', + icon: , + }, + ], + }, +]; + +export default function ExplorePlatform(): JSX.Element { + return ( +
+
+

Explore the platform

+

Dive into the building blocks of epilot

+
+ {groups.map((group) => ( +
+

{group.title}

+
    + {group.items.map((item) => ( +
  • + + {item.icon} +
    + {item.label} + {item.description} +
    + +
    • + ))} +
+
+ ))} +
+
+
+ ); +} diff --git a/src/components/HeroSection.module.css b/src/components/HeroSection.module.css new file mode 100644 index 00000000..9a624a2f --- /dev/null +++ b/src/components/HeroSection.module.css @@ -0,0 +1,153 @@ +.hero { + padding: 5rem 2rem 4rem; + text-align: center; + position: relative; + overflow: hidden; + background: linear-gradient( + 170deg, + rgba(76, 76, 255, 0.04) 0%, + rgba(0, 165, 255, 0.06) 50%, + rgba(255, 255, 255, 0) 100% + ); +} + +html[data-theme='dark'] .hero { + background: linear-gradient(170deg, #1a1a2e 0%, #232340 40%, #1e3a4a 100%); +} + +.heroInner { + max-width: 720px; + margin: 0 auto; +} + +/* Logo container */ +.logoWrap { + display: flex; + justify-content: center; + margin-bottom: 1.5rem; +} + +.logo { + width: 80px; + height: 80px; + transform-origin: center center; + animation: logoEntry 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; +} + +/* Each blade fades in + slides from center with stagger */ +.blade1, +.blade2, +.blade3 { + opacity: 0; + transform-origin: 37px 35px; /* center of the 73.9x70.3 viewBox */ + animation: bladeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} + +.blade1 { + animation-delay: 0.15s; +} + +.blade2 { + animation-delay: 0.3s; +} + +.blade3 { + animation-delay: 0.45s; +} + +@keyframes bladeIn { + from { + opacity: 0; + transform: scale(0.5) rotate(-60deg); + } + to { + opacity: 1; + transform: scale(1) rotate(0deg); + } +} + +@keyframes logoEntry { + from { + opacity: 0; + transform: translateY(8px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.logo { + transition: filter 0.4s ease; +} + +.logo:hover { + filter: drop-shadow(0 0 12px rgba(0, 165, 255, 0.35)); +} + +html[data-theme='dark'] .logo:hover { + filter: drop-shadow(0 0 14px rgba(0, 215, 255, 0.4)); +} + +/* Title, subtitle, actions */ +.title { + font-size: 3.5rem; + font-weight: 700; + color: var(--epilot-dark, #161616); + margin-bottom: 1rem; + letter-spacing: -0.02em; +} + +html[data-theme='dark'] .title { + color: #ffffff; +} + +.subtitle { + font-size: 1.2rem; + color: #555; + max-width: 560px; + margin: 0 auto 2rem; + line-height: 1.6; +} + +html[data-theme='dark'] .subtitle { + color: rgba(255, 255, 255, 0.75); +} + +.actions { + display: flex; + gap: 0.75rem; + justify-content: center; + flex-wrap: wrap; +} + +@media (max-width: 768px) { + .hero { + padding: 3rem 1.5rem 2.5rem; + } + + .logo { + width: 64px; + height: 64px; + } + + .title { + font-size: 2.2rem; + } + + .subtitle { + font-size: 1.05rem; + } +} + +/* Respect reduced motion */ +@media (prefers-reduced-motion: reduce) { + .logo, + .blade1, + .blade2, + .blade3 { + animation: none; + opacity: 1; + transform: none; + } +} diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx new file mode 100644 index 00000000..b57b8a65 --- /dev/null +++ b/src/components/HeroSection.tsx @@ -0,0 +1,65 @@ +import Link from '@docusaurus/Link'; +import React from 'react'; + +import styles from './HeroSection.module.css'; + +function EpilotLogo() { + return ( +
+ + + + + + + + + + + + + + + + + + + +
+ ); +} + +export default function HeroSection(): JSX.Element { + return ( +
+
+ +

epilot dev center

+

Build on the Energy XRM. Explore our APIs, SDKs, and platform docs.

+
+ + Read the Docs + + + Browse APIs + +
+
+
+ ); +} diff --git a/src/components/HomepageFeatures.module.css b/src/components/HomepageFeatures.module.css deleted file mode 100644 index aaad0b84..00000000 --- a/src/components/HomepageFeatures.module.css +++ /dev/null @@ -1,23 +0,0 @@ -.features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; -} - -.featureImage { - display: flex; - width: 100%; - height: 150px; - min-height: 150px; - margin: 2rem 0; - align-items: center; - justify-content: center; -} - -.featureImage>* { - display: block; - object-fit: contain; - width: 100px; - filter: hue-rotate(-30deg) saturate(1.2); -} diff --git a/src/components/HomepageFeatures.tsx b/src/components/HomepageFeatures.tsx deleted file mode 100644 index 82623333..00000000 --- a/src/components/HomepageFeatures.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import Link from '@docusaurus/Link'; -import clsx from 'clsx'; -import React from 'react'; - -import styles from './HomepageFeatures.module.css'; - -type FeatureItem = { - title: string; - image: string; - description: JSX.Element; -}; - -const FeatureList: FeatureItem[] = [ - { - title: 'Entities', - image: '/img/devs.webp', - description: ( - <> - A standard data model with flexible schemas and attributes. Build on{' '} - core entities like contacts, orders, products and contracts — or - define your own. - - ), - }, - { - title: 'APIs', - image: '/img/cogwheel.webp', - description: ( - <> - All platform features available via REST APIs documented with OpenAPI specs. Subscribe to - platform events through Webhooks with standardized{' '} - event schemas. - - ), - }, - { - title: 'SDK', - image: '/img/epilot.png', - description: ( - <> - Use the epilot SDK for TypeScript and JavaScript. All APIs just one{' '} - npm install away. - - ), - }, -]; - -function Feature({ title, image, description }: FeatureItem) { - return ( -
-
-
- {title} -
-
-
-

{title}

-

{description}

-
-
- ); -} - -export default function HomepageFeatures(): JSX.Element { - return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
- ); -} diff --git a/src/components/QuickStartCards.module.css b/src/components/QuickStartCards.module.css new file mode 100644 index 00000000..65b158e9 --- /dev/null +++ b/src/components/QuickStartCards.module.css @@ -0,0 +1,106 @@ +.section { + padding: 4rem 2rem; +} + +.sectionTitle { + font-size: 1.5rem; + font-weight: 600; + text-align: center; + margin-bottom: 2rem; + color: var(--ifm-font-color-base); +} + +.grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.25rem; + max-width: 1100px; + margin: 0 auto; +} + +.card { + display: flex; + flex-direction: column; + padding: 1.5rem; + border: 1px solid var(--ifm-color-emphasis-200); + border-radius: 0.75rem; + text-decoration: none; + color: inherit; + transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; + position: relative; +} + +.card:hover { + border-color: var(--ifm-color-primary); + box-shadow: 0 4px 12px rgba(76, 76, 255, 0.08); + transform: translateY(-2px); + text-decoration: none; + color: inherit; +} + +html[data-theme='dark'] .card { + border-color: rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.02); +} + +html[data-theme='dark'] .card:hover { + border-color: var(--ifm-color-primary); + box-shadow: 0 4px 12px rgba(76, 140, 255, 0.15); +} + +.cardIcon { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 0.5rem; + background: rgba(76, 76, 255, 0.08); + color: var(--ifm-color-primary); + margin-bottom: 1rem; +} + +html[data-theme='dark'] .cardIcon { + background: rgba(76, 140, 255, 0.12); +} + +.cardTitle { + font-size: 1.1rem; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.cardDescription { + font-size: 0.9rem; + color: var(--ifm-font-color-secondary); + line-height: 1.5; + flex: 1; + margin-bottom: 0; +} + +.cardArrow { + font-size: 1.1rem; + color: var(--ifm-color-primary); + margin-top: 0.75rem; + transition: transform 0.15s; +} + +.card:hover .cardArrow { + transform: translateX(4px); +} + +@media (max-width: 996px) { + .grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 576px) { + .grid { + grid-template-columns: 1fr; + } + + .section { + padding: 3rem 1rem; + } +} diff --git a/src/components/QuickStartCards.tsx b/src/components/QuickStartCards.tsx new file mode 100644 index 00000000..494b97c7 --- /dev/null +++ b/src/components/QuickStartCards.tsx @@ -0,0 +1,119 @@ +import Link from '@docusaurus/Link'; +import React from 'react'; + +import styles from './QuickStartCards.module.css'; + +const BookIcon = () => ( + + + + +); + +const TerminalIcon = () => ( + + + + +); + +const PackageIcon = () => ( + + + + + + +); + +const GridIcon = () => ( + + + + + + +); + +const items = [ + { + title: 'Documentation', + description: 'Guides, concepts, and references for the epilot platform.', + href: '/docs/intro', + icon: , + }, + { + title: 'REST API', + description: 'OpenAPI specs for every service. Authentication, entities, webhooks.', + href: '/api', + icon: , + }, + { + title: 'SDK', + description: 'Typed TypeScript clients for every API. One npm install away.', + href: '/docs/architecture/sdk', + icon: , + }, + { + title: 'Apps', + description: 'Build and publish custom apps for the epilot marketplace.', + href: '/docs/apps', + icon: , + }, +]; + +export default function QuickStartCards(): JSX.Element { + return ( +
+
+

Get started

+
+ {items.map((item) => ( + +
{item.icon}
+

{item.title}

+

{item.description}

+ → + + ))} +
+
+
+ ); +} diff --git a/src/components/ResourcesFooter.module.css b/src/components/ResourcesFooter.module.css new file mode 100644 index 00000000..d6288e8f --- /dev/null +++ b/src/components/ResourcesFooter.module.css @@ -0,0 +1,64 @@ +.section { + padding: 1.5rem 2rem; + border-top: 1px solid var(--ifm-color-emphasis-200); +} + +.inner { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 0.5rem 0.75rem; +} + +.dot { + width: 3px; + height: 3px; + border-radius: 50%; + background: var(--ifm-color-emphasis-400); + flex-shrink: 0; +} + +.link { + display: inline-flex; + align-items: center; + gap: 0.375rem; + padding: 0.25rem 0.375rem; + border-radius: 0.375rem; + font-size: 0.84rem; + font-weight: 500; + color: var(--ifm-font-color-secondary); + text-decoration: none; + transition: color 0.15s, background-color 0.15s; +} + +.link:hover { + color: var(--ifm-color-primary); + background: rgba(76, 76, 255, 0.04); + text-decoration: none; +} + +html[data-theme='dark'] .link:hover { + background: rgba(76, 140, 255, 0.08); +} + +.linkIcon { + display: flex; + align-items: center; + color: var(--ifm-color-emphasis-500); + transition: color 0.15s; +} + +.link:hover .linkIcon { + color: var(--ifm-color-primary); +} + +@media (max-width: 576px) { + .section { + padding: 1.25rem 1rem; + } + + .link { + font-size: 0.8rem; + } +} diff --git a/src/components/ResourcesFooter.tsx b/src/components/ResourcesFooter.tsx new file mode 100644 index 00000000..58f181eb --- /dev/null +++ b/src/components/ResourcesFooter.tsx @@ -0,0 +1,106 @@ +import React from 'react'; + +import styles from './ResourcesFooter.module.css'; + +const GitHubIcon = () => ( + + + +); + +const PenIcon = () => ( + + + + + + +); + +const CompassIcon = () => ( + + + + +); + +const ClockIcon = () => ( + + + + +); + +const StoreIcon = () => ( + + + + +); + +const resources = [ + { label: 'GitHub', href: 'https://github.com/epilot-dev', icon: }, + { label: 'Blog', href: 'https://dev.to/epilot', icon: }, + { label: 'Tech Radar', href: 'https://docs.epilot.io/techradar', icon: }, + { label: 'API Changelog', href: '/api/changelog', icon: }, + { label: 'Marketplace', href: 'https://marketplace.epilot.cloud/en', icon: }, +]; + +export default function ResourcesFooter(): JSX.Element { + return ( +
+
+ {resources.map((r, i) => ( + + {i > 0 && + ))} +
+
+ ); +} diff --git a/src/css/custom.css b/src/css/custom.css index 8bcda8cd..ec82c759 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -188,4 +188,51 @@ html[data-theme='dark'] .button.button--primary { [data-theme='dark'] .aa-DetachedSearchButtonIcon, [data-theme='dark'] .aa-DetachedSearchButtonPlaceholder { color: #a0a8b4; +} + +/* Compact inline footer */ +.footer { + padding: 1.5rem 2rem; + border-top: 1px solid var(--ifm-color-emphasis-200); + background: transparent; +} + +.footer--dark { + background: transparent; +} + +.footer .container { + max-width: 1200px; +} + +.footer__links.text--center { + margin-bottom: 0.5rem; +} + +.footer__link-item { + font-size: 0.84rem; + font-weight: 500; + color: var(--ifm-font-color-secondary); + transition: color 0.15s; +} + +.footer__link-item:hover { + color: var(--ifm-color-primary); + text-decoration: none; +} + +.footer__link-separator { + color: var(--ifm-color-emphasis-300); + margin: 0 0.5rem; +} + +.footer__bottom { + padding-top: 0; +} + +.footer__copyright { + font-size: 0.78rem; + color: var(--ifm-font-color-secondary); + opacity: 0.6; + margin-top: 0.25rem; } \ No newline at end of file diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 2f21bebd..d3aaee4f 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -1,91 +1 @@ -/** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. - */ - -.heroBanner { - padding: 5rem 0; - padding-bottom: 4rem; - text-align: center; - position: relative; - overflow: hidden; - background: url('/img/hero-gradient.png') center/cover no-repeat; - color: #1a1a3e; -} - -.heroBanner>* { - z-index: 1; -} - -html[data-theme='dark'] .heroBanner { - background: linear-gradient(135deg, #1a1a2e 0%, #232340 30%, #2a2a50 60%, #1e3a4a 100%); - color: white; -} - -.heroBannerTitle { - font-size: 4.5rem; - font-weight: 600; - color: #161616; -} - -html[data-theme='dark'] .heroBannerTitle { - color: white; -} - -.heroBannerSubtitle { - font-size: 1.6rem; - max-width: 730px; - margin: 0 auto; - padding-bottom: 30px; - letter-spacing: 0px; - padding-top: 5px; - font-weight: 400; - color: #444; -} - -html[data-theme='dark'] .heroBannerSubtitle { - color: rgba(255, 255, 255, 0.8); -} - -@media screen and (max-width: 966px) { - .heroBanner { - padding: 2rem; - } -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; -} - -.mainLogoContainer { - display: flex; - justify-content: center; - padding-bottom: 2rem; -} - -.mainLogoContainer>img { - max-width: 8rem; -} - -@media screen and (max-width: 1200px) { - .heroBannerTitle { - font-size: 3.5rem; - } - - .graphic { - opacity: .2; - } -} - -@media screen and (max-width: 966px) { - .heroBannerTitle { - font-size: 2.5rem; - } - - .graphic { - display: none; - } -} \ No newline at end of file +/* Homepage styles moved to individual section CSS Modules */ diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 6c860b3a..78a3945e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,42 +1,18 @@ -import Link from '@docusaurus/Link'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Layout from '@theme/Layout'; -import clsx from 'clsx'; import React from 'react'; -import HomepageFeatures from '../components/HomepageFeatures'; - -import styles from './index.module.css'; - -function HomepageHeader() { - const { siteConfig } = useDocusaurusContext(); - - return ( -
-
-
- epilot-logo -
-

{siteConfig.title}

-

{siteConfig.tagline}

-
- - Read the Docs - - - Browse APIs - -
-
-
- ); -} +import ExplorePlatform from '../components/ExplorePlatform'; +import HeroSection from '../components/HeroSection'; +import QuickStartCards from '../components/QuickStartCards'; +import ResourcesFooter from '../components/ResourcesFooter'; export default function Home(): JSX.Element { return ( - - + + + + ); }