@spacemade/ui 0.0.1

package/src/components/common/home/block/GetStarted.tsx

@@ -0,0 +1,17 @@
+import Link from 'next/link'
+
+export const GetStarted = () => {
+	return (
+		<div className='container'>
+			<div className='col-lg-5 mx-auto pb-3 mb-3 mb-md-5 text-md-center'>
+				<div className='d-inline-block mb-3 bg-primary p-3 text-white rounded-md'>
+					<span className='bi bi-code fs-2 bi'></span>
+				</div>
+				<h2 className='display-5 mb-3 fw-semibold'>Get started with Osirus</h2>
+				<p className='lead fw-normal'>
+					In minutes, you can install Osirus AI to your website or app via CDN, npm package manager, or by downloading the source code.
+				</p>
+			</div>
+		</div>
+	)
+}

package/src/components/common/home/block/Hero.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable @next/next/no-img-element */
+import { AWSLogo, AmazonBedrockLogo, AmazonSagemakerLogo, HuggingFaceLogo, MLflowLogo, OsirusHeroHomepage } from '@helpers/images'
+import Link from 'next/link'
+
+export const Hero = () => {
+	return (
+		<div className='bg-network-red'>
+			<div className='container'>
+				<div className='row'>
+					<div className='col-lg-6 col-xxl-5 text-center text-lg-start'>
+						<h1 className='fw-bold pt-7 display-3 mb-4 pe-xl-5'>Ask Osirus AI?</h1>
+						<p className='lead-md mb-4 pb-3'>The platform for building, training, and hosting custom AI models and apps in the cloud.</p>
+						<Link href='/signup' className='btn btn-primary text-white fw-bold w-xs-180p'>Start for Free</Link>
+					</div>
+					<div className='col-lg-6 col-xxl-7 text-center'>
+						<img
+							src={OsirusHeroHomepage}
+							alt='Osirus showing an app'
+							className='img-fluid mw-md-450p mw-lg-500p mw-xxl-650p mt-5'
+						/>
+					</div>
+				</div>
+				<div className='d-flex flex-wrap justify-content-center align-items-center gap-5 gap-xxl-8 mt-8'>
+					<img src={HuggingFaceLogo} alt='Hugging Face Logo' className='img-fluid w-xs-150p w-xl-180p' />
+					<img src={MLflowLogo} alt='ML Flow Logo' className='img-fluid w-xs-120p w-xl-150p' />
+					<img src={AWSLogo} alt='AWS Logo' className='img-fluid w-xs-85p w-xl-110p' />
+					<img src={AmazonBedrockLogo} alt='Amazon Bedrock Logo' className='img-fluid w-xs-170p w-xl-200p' />
+					<img src={AmazonSagemakerLogo} alt='Amazon Sagemaker Logo' className='img-fluid w-xs-170p w-xl-200p' />
+				</div>
+			</div>
+		</div>
+	)
+}

package/src/components/common/home/block/InstallShortcut.tsx

@@ -0,0 +1,41 @@
+import dynamic from 'next/dynamic'
+
+const CodeSnippet = dynamic(
+	() => import('@components/common/blocks/CodeSnippet'),
+	{
+		ssr: false,
+	}
+)
+
+export const InstallShortcut = () => {
+	return (
+		<div className='container'>
+			<section className='row g-3 g-md-5 mb-6 justify-content-center'>
+				<div className='col-lg-6 py-lg-4 pe-lg-5'>
+					<span className='bi bi-box fs-2'></span>
+					<h3 className='fw-semibold mt-3'>Install via package manager</h3>
+					<p className='pe-lg-5'>
+						{`You can easily install Osirus AI source files using npm. Note that package managed installs don't include documentation or our full build scripts.`}
+					</p>
+					<CodeSnippet
+						code='npm i @osirus/bot'
+						lang='bash'
+					/>
+				</div>
+				<div className='col-lg-6 py-lg-4 ps-lg-5 border-lg-start'>
+					<span className='bi bi-diagram-3 fs-2'></span>
+					<h3 className='fw-semibold mt-3'>Include via CDN</h3>
+					<p className='pe-lg-5'>
+						{`If you only need to include Osirus AI's compiled package, you can do it easily via our Content Delivery Network (CDN) using the script below.`}
+					</p>
+					<CodeSnippet
+						code='<script src="https://agent.osirus.ai/lib/umd/osirusai.min.js" type="text/javascript"></script>'
+						lang='html'
+					/>
+				</div>
+			</section>
+		</div>
+	)
+}
+
+

package/src/components/common/home/block/MarketplaceBlock.tsx

@@ -0,0 +1,34 @@
+import { ProductCard } from '@components/marketplace/card/ProductCard'
+import { useGetProductsQuery } from '@store/slice/api/productsApiSlice'
+import Link from 'next/link'
+import React from 'react'
+
+export const MarketplaceBlock = () => {
+	const {
+		data: apps,
+	} = useGetProductsQuery({
+		limit: 4,
+		orderBy: 'rank',
+		sort: 'asc',
+	})
+
+	return (
+		<div className='container'>
+			<div className='text-center'>
+				<h2 className='display-6 mb-3'>Products</h2>
+				<p>Browse installable products for your workspace</p>
+			</div>
+			<div className='d-flex flex-wrap gap-4 gap-xl-5 mt-5'>
+				{apps?.results.map((app) => (
+					<ProductCard
+						key={app.id}
+						product={app}
+						basePath='/marketplace'
+						buttonLabel='Install'
+					/>
+				))}
+			</div>
+			<Link href='/marketplace' className='text-primary text-center mt-6 d-block'>{`Browse the Marketplace >`}</Link>
+		</div>
+	)
+}

package/src/components/common/home/block/OriginStoryBanner.tsx

@@ -0,0 +1,17 @@
+import Link from 'next/link'
+
+export const OriginStoryBanner = () => {
+	return (
+		<div className='container'>
+			<div className='bg-origin-story-banner px-3 px-lg-5 py-5 py-lg-0'>
+				<div className='row text-white h-lg-380p text-center text-lg-start'>
+					<div className='col-xl-6 align-self-center'>
+						<h2 className='fw-bold mb-3 display-6 mt-4 mt-lg-0'>Osirus AI: Now and Zen</h2>
+						<p className='mb-4 pb-3 lead'>Explore the beginnings of Osirus, where the future meets the past...</p>
+						<Link href='/origin-story' className='btn btn-pink text-white fw-bold px-4'>Read the origin story</Link>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}

package/src/components/common/home/block/OsirusCTABlock.tsx

@@ -0,0 +1,21 @@
+import Link from 'next/link'
+
+export const OsirusCTABlock = ({
+	title,
+	description,
+	link,
+	buttonLabel,
+} : {
+	title: string
+	description: string
+	link: string
+	buttonLabel: string
+}) => {
+	return (
+		<div className='bg-colored-gradient d-flex flex-column justify-content-center align-items-center py-6 gap-2'>
+			<h2 className='text-white h1 fw-bold mb-1'>{ title }</h2>
+			<p className='text-white'>{ description }</p>
+			<Link href={ link } className='btn btn-white text-primary fw-bold h-xs-50p w-xs-170p d-flex align-items-center justify-content-center'>{ buttonLabel }</Link>
+		</div>
+	)
+}

package/src/components/common/home/block/PromoFeatureSlider.tsx

@@ -0,0 +1,260 @@
+import Link from 'next/link'
+import { useState } from 'react'
+
+export type PromoSlide = {
+  id: string
+  eyebrow?: string
+  title: string
+  description: string
+  ctaLabel: string
+  href: string
+  imageSrc: string
+}
+
+type PromoFeatureSliderProps = {
+  title: string
+  subtitle?: string
+  slides: PromoSlide[]
+}
+
+const PromoFeatureSlider = ({ title, subtitle, slides }: PromoFeatureSliderProps) => {
+  const [activeIndex, setActiveIndex] = useState(0)
+
+  if (!slides.length) return null
+
+  const active = slides[activeIndex]
+  const prevIndex = (activeIndex - 1 + slides.length) % slides.length
+  const nextIndex = (activeIndex + 1) % slides.length
+  const prev = slides[prevIndex]
+  const next = slides[nextIndex]
+
+  return (
+    <section className="promo-slider-section">
+      <div className="promo-heading text-center">
+        <h2>{title}</h2>
+        {subtitle ? <p>{subtitle}</p> : null}
+      </div>
+
+      <div className="promo-slider-shell">
+        <button
+          type="button"
+          className="promo-arrow promo-arrow-left"
+          onClick={() => setActiveIndex(prevIndex)}
+          aria-label="Previous slide"
+        >
+          <i className="bi bi-chevron-left" />
+        </button>
+
+        <div className="promo-side promo-side-left" style={{ backgroundImage: `url(${prev.imageSrc})` }} />
+
+        <article
+          className="promo-main-card"
+          style={{ backgroundImage: `url(${active.imageSrc})` }}
+          aria-label={active.title}
+        >
+          <div className="promo-main-overlay">
+            {active.eyebrow ? <p className="promo-eyebrow">{active.eyebrow}</p> : null}
+            <h3>{active.title}</h3>
+            <p>{active.description}</p>
+            <Link href={active.href} className="promo-main-cta">
+              {active.ctaLabel}
+            </Link>
+          </div>
+        </article>
+
+        <div className="promo-side promo-side-right" style={{ backgroundImage: `url(${next.imageSrc})` }} />
+
+        <button
+          type="button"
+          className="promo-arrow promo-arrow-right"
+          onClick={() => setActiveIndex(nextIndex)}
+          aria-label="Next slide"
+        >
+          <i className="bi bi-chevron-right" />
+        </button>
+      </div>
+
+      <div className="promo-dots" role="tablist" aria-label="Promo slides">
+        {slides.map((slide, index) => (
+          <button
+            key={slide.id}
+            type="button"
+            className={`promo-dot ${index === activeIndex ? 'active' : ''}`}
+            onClick={() => setActiveIndex(index)}
+            aria-label={`Go to ${slide.title}`}
+          />
+        ))}
+      </div>
+
+      <style jsx>{`
+        .promo-slider-section {
+          border-radius: 1.25rem;
+          padding: 2.25rem 1rem 1.5rem;
+          background: radial-gradient(circle at 20% 15%, rgba(44, 88, 158, 0.34), transparent 40%),
+            radial-gradient(circle at 88% 10%, rgba(199, 162, 72, 0.24), transparent 36%),
+            #0d0f14;
+          color: #f2f4fb;
+          overflow: hidden;
+        }
+
+        .promo-heading h2 {
+          margin: 0;
+          font-family: 'Cormorant Garamond', Georgia, serif;
+          font-size: clamp(2rem, 4.5vw, 4rem);
+          line-height: 0.98;
+          font-weight: 600;
+          letter-spacing: -0.01em;
+        }
+
+        .promo-heading p {
+          margin: 0.85rem auto 0;
+          max-width: 760px;
+          font-size: clamp(1rem, 1.45vw, 1.25rem);
+          color: rgba(242, 244, 251, 0.86);
+        }
+
+        .promo-slider-shell {
+          margin-top: 1.5rem;
+          display: grid;
+          grid-template-columns: 44px 1fr minmax(0, 980px) 1fr 44px;
+          gap: 0.75rem;
+          align-items: center;
+        }
+
+        .promo-arrow {
+          width: 44px;
+          height: 44px;
+          border-radius: 999px;
+          border: 1px solid rgba(255, 255, 255, 0.26);
+          background: rgba(12, 16, 24, 0.58);
+          color: #f7f8ff;
+          font-size: 1.25rem;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          transition: transform 0.15s ease, background 0.15s ease;
+        }
+
+        .promo-arrow:hover {
+          transform: translateY(-1px);
+          background: rgba(22, 27, 38, 0.8);
+        }
+
+        .promo-side {
+          height: clamp(210px, 28vw, 360px);
+          border-radius: 1rem;
+          background-size: cover;
+          background-position: center;
+          opacity: 0.52;
+          filter: saturate(0.9) blur(0.2px);
+        }
+
+        .promo-main-card {
+          min-height: clamp(320px, 42vw, 520px);
+          border-radius: 1rem;
+          background-size: cover;
+          background-position: center;
+          position: relative;
+          overflow: hidden;
+          border: 1px solid rgba(255, 255, 255, 0.14);
+          box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
+        }
+
+        .promo-main-card::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(180deg, rgba(7, 11, 17, 0.15) 0%, rgba(7, 11, 17, 0.72) 100%);
+        }
+
+        .promo-main-overlay {
+          position: absolute;
+          z-index: 2;
+          left: 1.2rem;
+          right: 1.2rem;
+          bottom: 1.2rem;
+          max-width: 540px;
+          border: 1px solid rgba(255, 255, 255, 0.26);
+          border-radius: 1rem;
+          padding: 1rem;
+          background: rgba(10, 14, 24, 0.6);
+          backdrop-filter: blur(6px);
+        }
+
+        .promo-eyebrow {
+          margin: 0 0 0.25rem;
+          font-size: 0.78rem;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: rgba(242, 244, 251, 0.76);
+        }
+
+        .promo-main-overlay h3 {
+          margin: 0;
+          font-size: clamp(1.55rem, 2.5vw, 2.4rem);
+          font-weight: 700;
+          line-height: 1.07;
+          color: #fcfcff;
+        }
+
+        .promo-main-overlay p {
+          margin: 0.65rem 0 1rem;
+          color: rgba(242, 244, 251, 0.88);
+          line-height: 1.5;
+        }
+
+        :global(a.promo-main-cta) {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 999px;
+          padding: 0.62rem 1.4rem;
+          font-weight: 700;
+          text-decoration: none;
+          color: #151823 !important;
+          background: linear-gradient(180deg, #f6e97a 0%, #e6ca45 100%);
+          border: 1px solid rgba(255, 255, 255, 0.24);
+          box-shadow: 0 8px 18px rgba(230, 202, 69, 0.26);
+        }
+
+        .promo-dots {
+          margin-top: 0.9rem;
+          display: flex;
+          justify-content: center;
+          gap: 0.45rem;
+        }
+
+        .promo-dot {
+          width: 9px;
+          height: 9px;
+          border-radius: 999px;
+          border: none;
+          background: rgba(255, 255, 255, 0.35);
+          padding: 0;
+        }
+
+        .promo-dot.active {
+          background: #f6e97a;
+          width: 23px;
+        }
+
+        @media (max-width: 992px) {
+          .promo-slider-shell {
+            grid-template-columns: 36px minmax(0, 1fr) 36px;
+          }
+
+          .promo-side {
+            display: none;
+          }
+
+          .promo-arrow {
+            width: 36px;
+            height: 36px;
+          }
+        }
+      `}</style>
+    </section>
+  )
+}
+
+export default PromoFeatureSlider

package/src/components/common/layout/DetailHero.tsx

@@ -0,0 +1,87 @@
+import type { ReactNode } from 'react'
+import Link from 'next/link'
+import { useRouter } from '@lib/next-router'
+import SharerActionBox from '@components/common/button/SharerActionBox'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+
+type DetailHeroProps = {
+	logoSrc: string
+	logoAlt: string
+	title: string
+	description?: string | null
+	backHref: string
+	backLabel: string
+	titleBadge?: ReactNode
+	shareUrl?: string
+	shareImageUrl?: string | null
+	extraContent?: ReactNode
+	actions?: ReactNode
+}
+
+export const DetailHero = ({
+	logoSrc,
+	logoAlt,
+	title,
+	description,
+	backHref,
+	backLabel,
+	titleBadge,
+	shareUrl,
+	shareImageUrl,
+	extraContent,
+	actions,
+}: DetailHeroProps) => {
+	const router = useRouter()
+	const resolvedShareUrl = (shareUrl || router.asPath || '').split('?')[0]
+
+	return (
+		<div
+			className='px-4 py-5 rounded-3 border-0'
+			style={{ background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)' }}
+		>
+			<div className='row align-items-center g-4'>
+				<div className='col-9'>
+					<div className='d-flex'>
+						<div>
+							<div className='bg-white d-flex align-items-center justify-content-center w-xs-120p h-xs-120p shadow'>
+								<OptimizedImage
+									src={logoSrc}
+									alt={logoAlt}
+									width={120}
+									height={120}
+									className='w-100 h-100 object-fit-contain'
+								/>
+							</div>
+						</div>
+						<div className='ms-6'>
+							<Link
+								href={backHref}
+								className='text-uppercase small fw-semibold mb-2 text-decoration-none'
+							>
+								<i className='bi bi-arrow-left me-2' />
+								{backLabel}
+							</Link>
+								<div className='d-flex align-items-center gap-2 mb-3'>
+									<h1 className='display-6 fw-bold mb-0'>{title}</h1>
+									{titleBadge}
+									{resolvedShareUrl ? (
+										<SharerActionBox
+											name={title}
+											imageUrl={shareImageUrl || logoSrc}
+											shareUrl={resolvedShareUrl}
+											iconSize='lg'
+										/>
+									) : null}
+								</div>
+							{description?.trim() ? <p className='lead mb-0'>{description}</p> : null}
+							{extraContent}
+						</div>
+					</div>
+				</div>
+				<div className='col-lg-3 d-flex align-items-center justify-content-end'>
+					{actions}
+				</div>
+			</div>
+		</div>
+	)
+}