@spacemade/ui 0.0.1

package/src/pages/index.tsx

@@ -0,0 +1,309 @@
+import type { GetServerSideProps, NextPage } from 'next'
+import { useRouter } from 'next/router'
+import { FormEvent, useMemo, useState } from 'react'
+
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import Spinner from '@components/common/loading/Spinner'
+import ProjectPickerNav from '@components/projects/ProjectPickerNav'
+import { useAppSelector } from '@store/hooks'
+import { selectAccountState } from '@store/slice/api/accountSlice'
+
+const HomePage: NextPage = () => {
+  const router = useRouter()
+  const { isConnected, isDataLoaded } = useAppSelector(selectAccountState)
+  const [documentPrompt, setDocumentPrompt] = useState('')
+
+  const isLoggedIn = isDataLoaded && isConnected
+  const canGenerate = useMemo(() => documentPrompt.trim().length > 0, [documentPrompt])
+
+  const handleGenerate = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    const nextPrompt = documentPrompt.trim()
+    if (!nextPrompt) return
+    router.push({
+      pathname: '/docs',
+      query: { q: nextPrompt },
+    })
+  }
+
+  return (
+    <SideNavLayout
+      useMainContentAreaId={false}
+      sidebarTopContent={
+        isLoggedIn
+          ? (isCollapsed) => <ProjectPickerNav isCollapsed={isCollapsed} appPath="/" />
+          : undefined
+      }
+    >
+      {!isDataLoaded ? (
+        <main className="w-100">
+          <section className="container py-5">
+            <div className="d-flex justify-content-center py-5">
+              <Spinner />
+            </div>
+          </section>
+        </main>
+      ) : (
+        <main className="doc-home w-100">
+          <div className="home-surface">
+            <section className="hero-wrap bg-white p-4 p-lg-5" aria-labelledby="doc-home-title">
+              <div className="hero-main">
+                <h1 id="doc-home-title">AI Website Builder</h1>
+                <p>Generate HTML pages and render crawl-ready site pages.</p>
+
+                <form className="generator-form" onSubmit={handleGenerate}>
+                  <label htmlFor="documentRequest" className="visually-hidden">
+                    Enter requested website page
+                  </label>
+
+                  <div className="input-icon" aria-hidden>
+                    <i className="bi bi-search" />
+                  </div>
+
+                  <input
+                    id="documentRequest"
+                    type="text"
+                    value={documentPrompt}
+                    onChange={(event) => setDocumentPrompt(event.target.value)}
+                    placeholder="Describe the page you want to generate and crawl..."
+                    autoComplete="off"
+                  />
+
+                  <button type="submit" disabled={!canGenerate}>
+                    Generate HTML <span aria-hidden>✨</span>
+                  </button>
+                </form>
+
+                <div className="capability-row" aria-label="Homepage capabilities">
+                  <span>HTML Page Generation</span>
+                  <span>Crawl Page Rendering</span>
+                  <span>Live Site Preview</span>
+                </div>
+              </div>
+
+              <p className="policy-copy">
+                By entering your request, you agree to our{' '}
+                <a href="/terms">Terms</a> and <a href="/privacy">Privacy Policy</a>.
+              </p>
+            </section>
+          </div>
+
+          <style jsx>{`
+            .doc-home {
+              min-height: 100vh;
+              color: #111827;
+              background: #ffffff;
+              font-family: 'Manrope', 'Segoe UI', sans-serif;
+            }
+
+            .home-surface {
+              min-height: 100vh;
+              width: 100%;
+              padding: 1.5rem;
+              display: flex;
+              justify-content: center;
+              align-items: stretch;
+            }
+
+            .hero-wrap {
+              width: 100%;
+              max-width: 600px;
+              min-height: calc(100vh - 3rem);
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              text-align: center;
+            }
+
+            .hero-main {
+              width: 100%;
+              margin-top: clamp(1rem, 6vh, 4rem);
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+            }
+
+            .hero-wrap h1 {
+              margin: 0;
+              color: #111827;
+              font-size: clamp(2.05rem, 4.85vw, 3.6rem);
+              line-height: 1.08;
+              letter-spacing: -0.03em;
+              font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
+              font-weight: 700;
+            }
+
+            .hero-main > p {
+              margin: 1.2rem 0 0;
+              color: #4b5563;
+              font-size: clamp(1rem, 1.3vw, 1.25rem);
+              font-weight: 500;
+            }
+
+            .generator-form {
+              margin-top: clamp(2rem, 5.6vw, 3.2rem);
+              width: 100%;
+              border-radius: 999px;
+              background: #ffffff;
+              border: 1px solid #d1d5db;
+              display: flex;
+              align-items: center;
+              padding: 0.8rem;
+              box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
+            }
+
+            .input-icon {
+              width: 42px;
+              height: 42px;
+              border-radius: 999px;
+              flex-shrink: 0;
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              color: #4b5563;
+              background: #f3f4f6;
+              margin-right: 0.9rem;
+              font-size: 1rem;
+            }
+
+            .generator-form input {
+              flex: 1;
+              border: none;
+              outline: none;
+              background: transparent;
+              color: #111827;
+              min-width: 0;
+              font-size: 1.05rem;
+              letter-spacing: 0.01em;
+              font-family: 'Manrope', 'Segoe UI', sans-serif;
+            }
+
+            .generator-form input::placeholder {
+              color: #9ca3af;
+            }
+
+            .generator-form button {
+              border: 1px solid #111827;
+              border-radius: 999px;
+              background: #111827;
+              color: #ffffff;
+              padding: 0.68rem 1.2rem;
+              font-size: 1rem;
+              font-weight: 700;
+              font-family: 'Manrope', 'Segoe UI', sans-serif;
+              white-space: nowrap;
+              transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
+            }
+
+            .generator-form button:hover:not(:disabled) {
+              transform: translateY(-1px);
+              filter: brightness(1.03);
+            }
+
+            .generator-form button:disabled {
+              opacity: 0.62;
+              cursor: not-allowed;
+            }
+
+            .policy-copy {
+              margin: 0;
+              padding-top: 2.4rem;
+              margin-top: auto;
+              font-size: 0.98rem;
+              color: #6b7280;
+            }
+
+            .capability-row {
+              margin-top: 1.15rem;
+              width: 100%;
+              display: flex;
+              justify-content: center;
+              flex-wrap: wrap;
+              gap: 0.58rem;
+            }
+
+            .capability-row span {
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              border-radius: 999px;
+              border: 1px solid #d1d5db;
+              background: #f9fafb;
+              color: #374151;
+              font-size: 0.82rem;
+              font-weight: 600;
+              padding: 0.42rem 0.72rem;
+            }
+
+            .policy-copy a {
+              color: #111827;
+              text-decoration: underline;
+              text-underline-offset: 2px;
+            }
+
+            @media (max-width: 767.98px) {
+              .home-surface {
+                padding: 1rem;
+              }
+
+              .hero-wrap {
+                min-height: calc(100vh - 2rem);
+              }
+
+              .hero-main {
+                margin-top: 0.5rem;
+              }
+
+              .generator-form {
+                border-radius: 26px;
+                align-items: stretch;
+                flex-wrap: wrap;
+                row-gap: 0.78rem;
+                padding: 0.7rem;
+              }
+
+              .input-icon {
+                width: 38px;
+                height: 38px;
+                margin-right: 0.55rem;
+                align-self: center;
+              }
+
+              .generator-form input {
+                width: calc(100% - 48px);
+                font-size: 1rem;
+                min-height: 38px;
+              }
+
+              .generator-form button {
+                width: 100%;
+                min-height: 42px;
+                padding: 0.66rem 0.95rem;
+              }
+
+              .policy-copy {
+                padding-top: 1.6rem;
+                font-size: 0.92rem;
+              }
+
+              .capability-row {
+                margin-top: 1.05rem;
+                gap: 0.52rem;
+              }
+
+              .hero-wrap {
+                max-width: 100%;
+              }
+            }
+          `}</style>
+        </main>
+      )}
+    </SideNavLayout>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  return { props: {} }
+}
+
+export default HomePage

package/src/pages/login.tsx

@@ -0,0 +1,75 @@
+import { useRouter } from 'next/router'
+import type { GetServerSideProps, NextPage } from 'next'
+import dynamic from 'next/dynamic'
+import Link from 'next/link'
+import { SiteLogoIcon } from '@helpers/images'
+import { PageProps } from '@helpers/types/page-props'
+import { APIHelpers } from '@helpers/api'
+
+const SignInForm = dynamic(() => import('@components/auth/form/SignInForm'), {
+  ssr: false,
+})
+
+const SignIn: NextPage<PageProps> = ({ }) => {
+  const router = useRouter()
+  const { redirect } = router.query
+
+  return (
+
+    <div className="d-flex justify-content-center align-items-center">
+      <div className="bg-white p-4 p-lg-5" style={{ maxWidth: '600px', width: '100%' }}>
+        <div className='text-center'>
+          <Link href='/' aria-label='Osirus AI home'>
+            <span className='d-block p-2 bg-primary w-fit-content rounded-md mx-auto'>
+              <img
+                alt='Osirus Logo'
+                src={SiteLogoIcon}
+                className='img-fluid w-xs-80p invert-filter'
+              />
+            </span>
+          </Link>
+        </div>
+        <h1 className="pb-1 text-center mt-4 pt-2 display-6">
+          Login
+        </h1>
+        <p className="lead text-center mt-3 mb-3 d-none d-md-block">
+          Osirus AI Research and Development Platform
+        </p>
+        <SignInForm redirect={typeof redirect === 'string' ? redirect : undefined} />
+      </div>
+    </div>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  // Single server-side check
+  const data = await APIHelpers.get(`/auth/user`, {
+    Cookie: context.req.headers.cookie || '',
+  })
+
+  const user: { name: string } | undefined = data.user
+
+  if (user) {
+    return {
+      redirect: {
+        destination: `/`,
+        permanent: false,
+      },
+    }
+  }
+
+  return {
+    props: {
+      pageTitle: 'Login to Osirus AI',
+      pageDescription: 'Login to Osirus AI',
+      excludeTopNav: false,
+      hideTopNavLinks: true,
+      excludeBottomNav: true,
+      breadcrumbSchema: [
+        { position: 2, name: 'Login', item: '/login' },
+      ],
+    },
+  }
+}
+
+export default SignIn

package/src/pages/marketplace/[slug].tsx

@@ -0,0 +1,171 @@
+import type { NextPage } from 'next'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import Button from '@components/common/button/Button'
+import Spinner from '@components/common/loading/Spinner'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import { DetailHero } from '@components/common/layout/DetailHero'
+import { SiteLogoIcon } from '@helpers/images'
+import { APIHelpers } from '@helpers/api'
+import { wrapper } from '@store/store'
+import {
+  productsApiSlice,
+  useGetOneProductQuery,
+} from '@store/slice/api/productsApiSlice'
+import type { ProductPlan } from '@store/model'
+
+type MarketplaceDetailProps = {
+  isLoggedIn: boolean
+}
+
+const ACTIVE_STATUSES = new Set(['active', 'trialing', 'past_due'])
+
+const MarketplaceDetail: NextPage<MarketplaceDetailProps> = ({ isLoggedIn }) => {
+  const router = useRouter()
+  const slug = typeof router.query.slug === 'string' ? router.query.slug : ''
+  const { data: product } = useGetOneProductQuery(
+    {
+      id: slug,
+      include: ['plans', 'plans.usageTiers', 'featureEntitlements'],
+    },
+    { skip: !slug }
+  )
+
+  if (!product) {
+    return (
+      <div className="w-100 h-100 d-flex justify-content-center align-items-center">
+        <Spinner color="primary" />
+      </div>
+    )
+  }
+
+  const plans: ProductPlan[] = Array.isArray((product as any).plans)
+    ? (product as any).plans
+    : []
+  const subscribedPlans = plans.filter((plan: any) => plan?.isSubscribed)
+  const subscriptions = subscribedPlans.flatMap((plan: any) =>
+    Array.isArray(plan?.subscriptions) ? plan.subscriptions : []
+  )
+  const activeSubscription = subscriptions.find((subscription: any) =>
+    ACTIVE_STATUSES.has(String(subscription?.status))
+  )
+  const isSubscribed = Boolean(product.isSubscribed || activeSubscription)
+  const firstPlan = plans[0] as any
+  const cartHref = firstPlan?.id
+    ? `/cart/${encodeURIComponent(firstPlan.slug || product.slug)}?planId=${encodeURIComponent(firstPlan.id)}`
+    : `/cart/${encodeURIComponent(product.slug)}`
+
+  return (
+    <SideNavLayout
+      useMainContentAreaId={false}
+      sidebarTopContent={() => (
+        <>
+          <h2 className="sidebar-heading">Marketplace</h2>
+          <ul className="sidebar-list mb-5">
+            <li className="sidebar-item" title="Back to Marketplace">
+              <Link href="/marketplace" className="sidebar-link">
+                <i className="bi bi-arrow-left" /> <span>Back</span>
+              </Link>
+            </li>
+          </ul>
+        </>
+      )}
+      renderMainNav={() => null}
+    >
+      <DetailHero
+        logoSrc={product.productIconMedia?.media?.sourceUrl || SiteLogoIcon}
+        logoAlt={product.productIconMedia?.media?.details?.altText || product.name}
+        title={product.name}
+        description={product.intro}
+        backHref="/marketplace"
+        backLabel="Marketplace"
+        shareImageUrl={product.productIconMedia?.media?.sourceUrl}
+        shareUrl={`/marketplace/${encodeURIComponent(product.slug)}`}
+        extraContent={
+          <div className="mt-3 d-flex gap-2 flex-wrap">
+            <span className="badge bg-dark text-uppercase">{product.type}</span>
+            {isSubscribed && <span className="badge bg-success">Subscribed</span>}
+          </div>
+        }
+        actions={
+          !isSubscribed ? (
+            <Button
+              color="success"
+              className="text-white fw-bold w-xs-150p"
+              onClick={() => router.push(isLoggedIn ? cartHref : '/signup')}
+            >
+              {isLoggedIn ? 'Subscribe' : 'Join'}
+            </Button>
+          ) : null
+        }
+      />
+
+      <div className="container py-5">
+        {product.description && (
+          <section className="mb-5">
+            <h2 className="fs-4 fw-bold">Overview</h2>
+            <div
+              className="ck-content mt-4"
+              dangerouslySetInnerHTML={{ __html: product.description }}
+            />
+          </section>
+        )}
+
+        {plans.length > 0 && (
+          <section>
+            <h2 className="fs-4 fw-bold">Plans</h2>
+            <div className="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mt-2">
+              {plans.map((plan: any) => (
+                <div className="col" key={plan.id ?? plan.slug}>
+                  <div className="border rounded p-4 h-100">
+                    <h3 className="h5 mb-2">{plan.name}</h3>
+                    {plan.description && <p className="text-muted small">{plan.description}</p>}
+                    <div className="fw-semibold">
+                      {Number(plan.amount || 0) > 0
+                        ? `$${Number(plan.amount).toFixed(2)}`
+                        : 'Included'}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+      </div>
+    </SideNavLayout>
+  )
+}
+
+export const getServerSideProps = wrapper.getServerSideProps((store) => async (ctx) => {
+  const cookie = ctx.req?.headers?.cookie || ''
+  const slug = String(ctx.params?.slug || '')
+  const session = await APIHelpers.get('/auth/user', { Cookie: cookie })
+
+  if (slug) {
+    const productPayload = await APIHelpers.get(
+      `/products/${encodeURIComponent(slug)}?include=plans,plans.usageTiers,featureEntitlements`,
+      { Cookie: cookie }
+    )
+    if (productPayload?.product) {
+      store.dispatch(
+        productsApiSlice.util.upsertQueryData(
+          'getOneProduct',
+          {
+            id: slug,
+            include: ['plans', 'plans.usageTiers', 'featureEntitlements'],
+          },
+          productPayload.product
+        )
+      )
+    }
+  }
+
+  return {
+    props: {
+      isLoggedIn: Boolean(session?.user),
+      pageTitle: 'Marketplace',
+    },
+  }
+})
+
+export default MarketplaceDetail

package/src/pages/marketplace/index.tsx

@@ -0,0 +1,92 @@
+import type { NextPage } from 'next'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import Spinner from '@components/common/loading/Spinner'
+import { ProductCard } from '@components/marketplace/card/ProductCard'
+import { APIHelpers } from '@helpers/api'
+import { wrapper } from '@store/store'
+import {
+  productsApiSlice,
+  useGetProductsQuery,
+} from '@store/slice/api/productsApiSlice'
+
+type MarketplaceProps = { isLoggedIn: boolean }
+
+const marketplaceQuery = {
+  showAll: true,
+  orderBy: 'rank',
+  sort: 'asc' as const,
+  include: ['plans', 'featureEntitlements'],
+}
+
+const Marketplace: NextPage<MarketplaceProps> = () => {
+  const { data, isFetching, isLoading } = useGetProductsQuery(marketplaceQuery)
+  const products = data?.results ?? []
+
+  return (
+    <SideNavLayout useMainContentAreaId={false}>
+      <div className="container py-5">
+        <div className="d-flex align-items-start justify-content-between gap-3 flex-wrap">
+          <div>
+            <h1 className="fw-bold mb-2">Marketplace</h1>
+            <p className="text-muted mb-0">
+              Browse every available product, plan, and add-on for your workspace.
+            </p>
+          </div>
+        </div>
+
+        {(isLoading || isFetching) && (
+          <div className="w-100 d-flex justify-content-center py-5">
+            <Spinner color="primary" />
+          </div>
+        )}
+
+        {!isLoading && !isFetching && products.length === 0 && (
+          <div className="text-center py-5">
+            <p className="mb-0">No marketplace products are available yet.</p>
+          </div>
+        )}
+
+        {products.length > 0 && (
+          <div className="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 g-4 mt-4">
+            {products.map((product) => (
+              <ProductCard
+                key={product.id}
+                product={product}
+                basePath="/marketplace"
+                type={product.type}
+                status={product.status}
+                buttonLabel={product.isSubscribed ? 'Subscribed' : 'View'}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </SideNavLayout>
+  )
+}
+
+export const getServerSideProps = wrapper.getServerSideProps((store) => async (ctx) => {
+  const cookie = ctx.req?.headers?.cookie || ''
+  const session = await APIHelpers.get('/auth/user', { Cookie: cookie })
+  const productsPayload = await APIHelpers.get(
+    '/products?showAll=true&orderBy=rank&sort=asc&include=plans,featureEntitlements',
+    { Cookie: cookie }
+  )
+
+  store.dispatch(
+    productsApiSlice.util.upsertQueryData(
+      'getProducts',
+      marketplaceQuery,
+      productsPayload
+    )
+  )
+
+  return {
+    props: {
+      isLoggedIn: Boolean(session?.user),
+      pageTitle: 'Marketplace',
+    },
+  }
+})
+
+export default Marketplace