@press2ai/theme-specialist-glossy 0.3.0

package/README.md

@@ -0,0 +1,70 @@
+# @press2ai/theme-specialist-glossy
+
+Classless, AI-first theme. Semantic HTML + Schema.org + JSON-LD. Works with **Hono**, **Astro**, or any framework that outputs HTML.
+
+## Install
+
+```bash
+npm install @press2ai/theme-specialist-glossy
+```
+
+## Usage — Hono / Cloudflare Workers
+
+```ts
+import { layout, profileCard, profileArticle } from '@press2ai/theme-specialist-glossy/templates';
+
+app.get('/', (c) => c.html(layout({ title: 'Katalog' }, cards)));
+app.get('/:slug', (c) => c.html(layout({ title: name }, profileArticle(profile))));
+```
+
+## Usage — Astro
+
+```astro
+---
+import Layout from '@press2ai/theme-specialist-glossy/Layout.astro';
+import ProfileArticle from '@press2ai/theme-specialist-glossy/ProfileArticle.astro';
+import '@press2ai/theme-specialist-glossy/styles/glossy.css';
+---
+<Layout title={name}>
+  <ProfileArticle profile={profile} />
+</Layout>
+```
+
+## Exports
+
+| Path | What |
+|---|---|
+| `@press2ai/theme-specialist-glossy` | `profileSchema`, `Profile` type, `getJsonLd`, `getAiManifest` |
+| `@press2ai/theme-specialist-glossy/templates` | `layout`, `hero`, `profileCard`, `profileArticle` |
+| `@press2ai/theme-specialist-glossy/styles/glossy.css` | Classless CSS (~12 KB, no JS) |
+| `@press2ai/theme-specialist-glossy/*.astro` | Astro wrappers (thin, call templates internally) |
+
+## Architecture
+
+```
+CSS (stripe.css) ← classless, styles by semantic tags
+        ↑
+  templates/*.ts  ← pure functions → HTML strings (single source of truth)
+        ↑
+  components/*.astro ← thin wrappers for Astro DX
+```
+
+One set of templates, zero divergence between frameworks.
+
+## Hosting compatibility
+
+| Platform | Runtime | What you get |
+|---|---|---|
+| **GitHub Pages** (Astro) | Static / SSG | Pre-built HTML + CSS. Zero cost, zero backend. Profile pages generated at build time from `profile.json`. |
+| **Cloudflare Workers** (Hono) | Edge SSR | Dynamic HTML from D1/KV. Database queries, opt-out forms, API endpoints (`catalog.json`, `llms.txt`). Free tier: 100k req/day. |
+| **Cloudflare Pages** (Astro SSR) | Edge SSR | Astro with `@astrojs/cloudflare` adapter. D1/KV bindings via `Astro.locals`. Middle ground — Astro DX + edge database. |
+
+**GitHub Pages** = static profiles, no server needed. Good for claimed/verified personal pages.
+
+**Cloudflare Workers** = full SSR, database, forms, API. Good for catalogs, directories, dynamic listings. Templates work directly — `c.html(layout(...))`.
+
+**Cloudflare Pages** = if you want Astro's routing/islands AND server-side data. Same templates under the hood, Astro components on top.
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@press2ai/theme-specialist-glossy",
+  "version": "0.3.0",
+  "description": "Classless, AI-first theme inspired by Stripe. Framework-agnostic templates (Hono, Astro, raw HTML). Semantic HTML, Schema.org microdata, JSON-LD — built for LLM crawlers.",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://github.com/press2ai/theme-specialist-glossy",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/press2ai/theme-specialist-glossy.git"
+  },
+  "keywords": [
+    "astro",
+    "hono",
+    "cloudflare-workers",
+    "classless",
+    "semantic",
+    "ai",
+    "llm",
+    "schema-org",
+    "jsonld"
+  ],
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./templates": "./src/templates/index.ts",
+    "./Layout.astro": "./src/components/Layout.astro",
+    "./ProfileArticle.astro": "./src/components/ProfileArticle.astro",
+    "./ProfileCard.astro": "./src/components/ProfileCard.astro",
+    "./Hero.astro": "./src/components/Hero.astro",
+    "./styles/glossy.css": "./src/styles/glossy.css",
+    "./schema": "./src/schema.ts",
+    "./ai": "./src/ai.ts"
+  },
+  "peerDependencies": {
+    "astro": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "astro": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "zod": "^3.23.0",
+    "zod-to-json-schema": "^3.25.2"
+  }
+}

package/src/ai.ts

@@ -0,0 +1,111 @@
+import { zodToJsonSchema } from 'zod-to-json-schema';
+import { profileSchema, type Profile } from './schema.ts';
+
+/**
+ * AI + Human first hybrid layer.
+ *
+ * Generates the machine-facing manifests that sit alongside the HTML
+ * and make every site equally consumable by humans and AI agents.
+ */
+
+export function getJsonSchema() {
+  return zodToJsonSchema(profileSchema, {
+    name: 'Profile',
+    $refStrategy: 'none',
+  });
+}
+
+/**
+ * /.well-known/ai-profile — discovery manifest for AI agents.
+ * Tells an LLM crawler what this site offers and where to find it.
+ */
+export function getAiManifest(opts: {
+  baseUrl: string;
+  profile: Profile;
+}) {
+  const { baseUrl, profile } = opts;
+  const base = baseUrl.replace(/\/$/, '');
+  const fullName = `${profile.firstName} ${profile.lastName}`;
+
+  return {
+    $schema: 'https://press2ai.dev/schemas/ai-profile/v1.json',
+    version: 1,
+    name: fullName,
+    type: 'Person',
+    summary: profile.tagline ?? profile.jobTitle,
+    locale: 'pl',
+
+    representations: [
+      { mediaType: 'text/html', href: `${base}/`, role: 'human' },
+      { mediaType: 'application/json', href: `${base}/.well-known/ai-profile.json`, role: 'manifest' },
+      { mediaType: 'application/json', href: `${base}/profile.json`, role: 'data' },
+      { mediaType: 'application/schema+json', href: `${base}/schema.json`, role: 'schema' },
+      { mediaType: 'text/plain', href: `${base}/llms.txt`, role: 'llm-pointer' },
+      { mediaType: 'application/xml', href: `${base}/sitemap-index.xml`, role: 'sitemap' },
+    ],
+
+    schema: `${base}/schema.json`,
+    data: `${base}/profile.json`,
+
+    contact: {
+      email: profile.email,
+      phone: profile.phone,
+      website: profile.website,
+    },
+
+    actions: [
+      // v0.3.0 will add MCP-style action endpoints here
+    ],
+
+    powered_by: {
+      name: '@press2ai/theme-specialist-glossy',
+      version: '0.3.0',
+      homepage: 'https://github.com/press2ai/theme-specialist-glossy',
+    },
+
+    updated_at: profile.updatedAt ?? new Date().toISOString(),
+  };
+}
+
+/**
+ * Build a JSON-LD Schema.org Person object from a profile.
+ */
+export function getJsonLd(profile: Profile, baseUrl: string) {
+  const base = baseUrl.replace(/\/$/, '');
+  const fullName = `${profile.firstName} ${profile.lastName}`;
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Person',
+    '@id': `${base}/#person`,
+    name: fullName,
+    jobTitle: profile.jobTitle,
+    description: profile.bio,
+    image: profile.photo,
+    address: profile.city
+      ? {
+          '@type': 'PostalAddress',
+          addressLocality: profile.city,
+          addressCountry: profile.country,
+        }
+      : undefined,
+    knowsAbout: profile.specialties,
+    knowsLanguage: profile.languages,
+    telephone: profile.phone,
+    email: profile.email,
+    url: profile.website,
+    sameAs: Object.entries(profile.social ?? {})
+      .filter(([, v]) => v)
+      .map(([net, handle]) => {
+        const prefixes: Record<string, string> = {
+          linkedin: 'https://linkedin.com/in/',
+          youtube: 'https://youtube.com/@',
+          tiktok: 'https://tiktok.com/@',
+          facebook: 'https://facebook.com/',
+          twitter: 'https://x.com/',
+          instagram: 'https://instagram.com/',
+        };
+        return `${prefixes[net] ?? `https://${net}.com/`}${handle}`;
+      }),
+    mainEntityOfPage: `${base}/`,
+  };
+}

package/src/components/Hero.astro

@@ -0,0 +1,11 @@
+---
+import type { Profile } from '../schema.ts';
+import { hero } from '../templates/hero.ts';
+
+interface Props {
+  profile: Profile;
+}
+
+const html = hero(Astro.props.profile);
+---
+<Fragment set:html={html} />

package/src/components/Layout.astro

@@ -0,0 +1,14 @@
+---
+import { layout, type LayoutProps } from '../templates/layout.ts';
+
+interface Props extends LayoutProps {}
+
+const props = Astro.props;
+const body = await Astro.slots.render('default');
+const headExtra = Astro.slots.has('head') ? await Astro.slots.render('head') : props.headExtra;
+const navExtra = Astro.slots.has('nav') ? await Astro.slots.render('nav') : props.navExtra;
+const footerContent = Astro.slots.has('footer') ? await Astro.slots.render('footer') : props.footerContent;
+
+const html = layout({ ...props, headExtra, navExtra, footerContent }, body);
+---
+<Fragment set:html={html} />

package/src/components/ProfileArticle.astro

@@ -0,0 +1,11 @@
+---
+import type { Profile } from '../schema.ts';
+import { profileArticle } from '../templates/profile-article.ts';
+
+interface Props {
+  profile: Profile;
+}
+
+const html = profileArticle(Astro.props.profile);
+---
+<Fragment set:html={html} />

package/src/components/ProfileCard.astro

@@ -0,0 +1,12 @@
+---
+import type { Profile } from '../schema.ts';
+import { profileCard } from '../templates/profile-card.ts';
+
+interface Props {
+  profile: Profile;
+  href: string;
+}
+
+const html = profileCard(Astro.props.profile, Astro.props.href);
+---
+<Fragment set:html={html} />

package/src/index.ts

@@ -0,0 +1,11 @@
+export { profileSchema, type Profile } from './schema.ts';
+export { getJsonSchema, getAiManifest, getJsonLd } from './ai.ts';
+// Framework-agnostic templates (Hono, Cloudflare Workers, plain Node):
+//   import { layout, hero, profileCard, profileArticle } from '@press2ai/theme-specialist-glossy/templates';
+//
+// Astro components (thin wrappers over templates):
+//   import Layout from '@press2ai/theme-specialist-glossy/Layout.astro';
+//   import ProfileArticle from '@press2ai/theme-specialist-glossy/ProfileArticle.astro';
+//
+// CSS (classless, works with any framework):
+//   import '@press2ai/theme-specialist-glossy/styles/glossy.css';

package/src/schema.ts

@@ -0,0 +1,58 @@
+import { z } from 'zod';
+
+/**
+ * Generic Person profile schema for AI-first landing pages.
+ * Designed for trainers, doctors, lawyers, freelancers, coaches — anyone
+ * who has a personal brand and wants a semantic, machine-readable site.
+ */
+export const profileSchema = z.object({
+  // Core identity
+  firstName: z.string(),
+  lastName: z.string(),
+  jobTitle: z.string(),
+  tagline: z.string().optional(),
+  bio: z.string().optional(),
+  photo: z.string().url().optional(),
+
+  // Location
+  city: z.string().optional(),
+  country: z.string().default('PL'),
+
+  // Specialties / skills
+  specialties: z.array(z.string()).default([]),
+  languages: z.array(z.string()).default([]),
+
+  // Contact
+  phone: z.string().optional(),
+  email: z.string().email().optional(),
+  website: z.string().url().optional(),
+  social: z
+    .object({
+      instagram: z.string().optional(),
+      facebook: z.string().optional(),
+      linkedin: z.string().optional(),
+      twitter: z.string().optional(),
+      youtube: z.string().optional(),
+      tiktok: z.string().optional(),
+    })
+    .partial()
+    .default({}),
+
+  // Business
+  business: z
+    .object({
+      name: z.string().optional(),
+      taxId: z.string().optional(), // NIP
+      registryId: z.string().optional(), // REGON
+      classification: z.array(z.string()).default([]), // PKD
+    })
+    .partial()
+    .default({}),
+
+  // Metadata
+  source: z.enum(['manual', 'ceidg', 'claimed']).default('manual'),
+  verified: z.boolean().default(false),
+  updatedAt: z.string().optional(),
+});
+
+export type Profile = z.infer<typeof profileSchema>;

package/src/styles/glossy.css

@@ -0,0 +1,498 @@
+/* ============================================================
+   Otwarty Trener — theme: "stripe"
+   Classless. Stylowanie po tagach semantycznych.
+   Inspiracja: Stripe / Revolut — clean, bold, dużo whitespace.
+   ============================================================ */
+
+@import url('https://rsms.me/inter/inter.css');
+
+:root {
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-display: 'Inter', sans-serif;
+
+  --color-bg: #ffffff;
+  --color-bg-soft: #f6f9fc;
+  --color-text: #0a2540;
+  --color-text-soft: #425466;
+  --color-text-muted: #8898aa;
+  --color-border: #e3e8ee;
+  --color-border-strong: #cfd7df;
+
+  --color-accent: #635bff;
+  --color-accent-hover: #4f46e5;
+  --color-accent-soft: #f0f0ff;
+
+  --gradient-hero: linear-gradient(150deg, #f6f9fc 0%, #eef2ff 40%, #ffffff 100%);
+  --gradient-accent: linear-gradient(135deg, #635bff 0%, #00d4ff 100%);
+
+  --radius: 12px;
+  --radius-lg: 20px;
+  --shadow-sm: 0 1px 3px rgba(10, 37, 64, 0.05), 0 1px 2px rgba(10, 37, 64, 0.03);
+  --shadow-md: 0 4px 12px rgba(10, 37, 64, 0.06), 0 2px 4px rgba(10, 37, 64, 0.04);
+  --shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.08), 0 4px 12px rgba(10, 37, 64, 0.04);
+
+  --container: 1100px;
+  --container-prose: 760px;
+  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+* { box-sizing: border-box; }
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scroll-behavior: smooth;
+  overflow-x: hidden;
+}
+
+body {
+  margin: 0;
+  overflow-x: clip;
+  font-family: var(--font-sans);
+  font-feature-settings: 'cv11', 'ss01', 'ss03';
+  color: var(--color-text);
+  background: var(--color-bg);
+  line-height: 1.6;
+}
+
+/* ---------- LAYOUT ---------- */
+
+body > header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: saturate(180%) blur(12px);
+  -webkit-backdrop-filter: saturate(180%) blur(12px);
+  border-bottom: 1px solid var(--color-border);
+}
+
+body > header nav {
+  max-width: var(--container);
+  margin: 0 auto;
+  padding: 1rem 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+}
+
+body > header nav a {
+  color: var(--color-text);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.95rem;
+  transition: color var(--transition);
+}
+
+body > header nav a:hover {
+  color: var(--color-accent);
+}
+
+body > header nav a strong {
+  font-size: 1.1rem;
+  font-weight: 700;
+  background: var(--gradient-accent);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+main {
+  max-width: var(--container);
+  margin: 0 auto;
+  padding: 3rem 1.5rem 5rem;
+}
+
+body > footer {
+  border-top: 1px solid var(--color-border);
+  background: var(--color-bg-soft);
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+}
+
+body > footer small {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+}
+
+body > footer a {
+  color: var(--color-accent);
+  text-decoration: none;
+}
+
+/* ---------- TYPOGRAPHY ---------- */
+
+h1, h2, h3, h4 {
+  font-family: var(--font-display);
+  color: var(--color-text);
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  margin: 0 0 1rem;
+}
+
+h1 {
+  font-size: clamp(2.25rem, 5vw, 3.5rem);
+  font-weight: 800;
+  letter-spacing: -0.035em;
+}
+
+h2 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin-top: 2.5rem;
+}
+
+h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+p {
+  color: var(--color-text-soft);
+  margin: 0 0 1rem;
+}
+
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+  transition: color var(--transition);
+}
+
+a:hover {
+  color: var(--color-accent-hover);
+}
+
+small {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+}
+
+strong {
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+/* ---------- HERO (hgroup) — Stripe-style mesh gradient ---------- */
+
+hgroup {
+  position: relative;
+  padding-top: 7rem;
+  padding-bottom: 9rem;
+  padding-left: max(1.5rem, calc((100vw - var(--container)) / 2));
+  padding-right: max(1.5rem, calc((100vw - var(--container)) / 2));
+  margin: -3rem calc(50% - 50vw) 4rem;
+  text-align: left;
+  overflow: hidden;
+  isolation: isolate;
+  background:
+    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(99, 91, 255, 0.18) 0%, transparent 60%),
+    radial-gradient(ellipse 60% 80% at 85% 30%, rgba(0, 212, 255, 0.15) 0%, transparent 55%),
+    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255, 87, 209, 0.12) 0%, transparent 60%),
+    linear-gradient(180deg, #f6f9fc 0%, #ffffff 100%);
+}
+
+hgroup::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(10, 37, 64, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(10, 37, 64, 0.04) 1px, transparent 1px);
+  background-size: 56px 56px;
+  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 75%);
+  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 75%);
+  z-index: -1;
+  pointer-events: none;
+}
+
+hgroup::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 80px;
+  background: linear-gradient(180deg, transparent 0%, #ffffff 100%);
+  pointer-events: none;
+  z-index: -1;
+}
+
+hgroup > * {
+  position: relative;
+}
+
+hgroup > p:first-child {
+  display: inline-flex;
+  margin-bottom: 2rem;
+  padding: 0;
+}
+
+hgroup > p:first-child small {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(8px);
+  border: 1px solid var(--color-border);
+  padding: 0.4rem 0.9rem;
+  border-radius: 999px;
+  color: var(--color-text-soft);
+  font-size: 0.8rem;
+  font-weight: 500;
+  box-shadow: var(--shadow-sm);
+}
+
+hgroup > p:first-child small::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #00d24a;
+  box-shadow: 0 0 0 3px rgba(0, 210, 74, 0.2);
+}
+
+hgroup h1 {
+  font-size: clamp(2.5rem, 6.5vw, 5rem);
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  line-height: 1.05;
+  margin: 0 0 1.5rem;
+  max-width: 900px;
+  background: linear-gradient(135deg, #0a2540 0%, #1a1a4e 40%, #635bff 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+hgroup h1 br { display: block; }
+
+hgroup p {
+  font-size: 1.2rem;
+  line-height: 1.55;
+  color: var(--color-text-soft);
+  max-width: 640px;
+  margin: 0 0 2rem;
+}
+
+hgroup > p:last-child {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  margin-top: 2.5rem;
+  margin-bottom: 0;
+}
+
+hgroup > p:last-child a {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.85rem 1.5rem;
+  border-radius: 999px;
+  font-weight: 600;
+  font-size: 0.95rem;
+  text-decoration: none;
+  transition: all var(--transition);
+}
+
+hgroup > p:last-child a:first-child {
+  background: var(--color-text);
+  color: white;
+  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.25);
+}
+
+hgroup > p:last-child a:first-child:hover {
+  background: var(--color-accent);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(99, 91, 255, 0.35);
+}
+
+hgroup > p:last-child a:last-child {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(8px);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+
+hgroup > p:last-child a:last-child:hover {
+  background: white;
+  border-color: var(--color-border-strong);
+}
+
+@media (max-width: 640px) {
+  hgroup { padding: 4rem 1.25rem 5rem; }
+  hgroup h1 br { display: none; }
+}
+
+/* ---------- SECTIONS ---------- */
+
+main > section {
+  margin-bottom: 3rem;
+}
+
+main > section > p:first-of-type {
+  font-size: 1.05rem;
+  max-width: var(--container-prose);
+}
+
+/* ---------- TRAINER CARDS (article in section) ---------- */
+
+main > section > article {
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: 1.75rem 2rem;
+  margin: 1rem 0;
+  box-shadow: var(--shadow-sm);
+  transition: all var(--transition);
+}
+
+main > section > article:hover {
+  border-color: var(--color-border-strong);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+main > section > article header {
+  margin-bottom: 0.75rem;
+}
+
+main > section > article h2 {
+  margin: 0 0 0.25rem;
+  font-size: 1.35rem;
+  font-weight: 700;
+}
+
+main > section > article h2 a {
+  color: var(--color-text);
+}
+
+main > section > article h2 a:hover {
+  color: var(--color-accent);
+}
+
+main > section > article header p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--color-text-muted);
+}
+
+main > section > article > p {
+  margin: 0.75rem 0 0.5rem;
+  color: var(--color-text-soft);
+}
+
+main > section > article small {
+  display: inline-block;
+  background: var(--color-accent-soft);
+  color: var(--color-accent-hover);
+  padding: 0.25rem 0.75rem;
+  border-radius: 999px;
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+/* ---------- TRAINER ARTICLE (single page) ---------- */
+
+main > article {
+  max-width: var(--container-prose);
+  margin: 0 auto;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 3rem;
+  box-shadow: var(--shadow-md);
+}
+
+main > article > header {
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+main > article > header h1 {
+  margin-bottom: 0.5rem;
+}
+
+main > article > header p {
+  font-size: 1.1rem;
+  color: var(--color-text-muted);
+  margin: 0;
+}
+
+main > article address {
+  font-style: normal;
+  display: inline-block;
+  background: var(--color-bg-soft);
+  padding: 0.75rem 1.25rem;
+  border-radius: var(--radius);
+  margin-bottom: 2rem;
+  color: var(--color-text-soft);
+  border: 1px solid var(--color-border);
+}
+
+main > article section {
+  margin: 2rem 0;
+}
+
+main > article section h2 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+main > article ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+main > article ul li {
+  background: var(--color-accent-soft);
+  color: var(--color-accent-hover);
+  padding: 0.4rem 0.9rem;
+  border-radius: 999px;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+main > article dl {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 0.75rem 1.5rem;
+  margin: 0;
+}
+
+main > article dt {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+main > article dd {
+  margin: 0;
+  color: var(--color-text);
+}
+
+main > article > footer {
+  margin-top: 2.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--color-border);
+  text-align: center;
+}
+
+/* ---------- RESPONSIVE ---------- */
+
+@media (max-width: 640px) {
+  main { padding: 2rem 1rem 3rem; }
+  hgroup { padding: 2.5rem 1rem 3rem; margin: -2rem -1rem 2rem; }
+  main > article { padding: 1.5rem; }
+  main > article dl { grid-template-columns: 1fr; gap: 0.25rem 0; }
+  main > article dt { margin-top: 0.75rem; }
+}

package/src/templates/helpers.ts

@@ -0,0 +1,10 @@
+import type { Profile } from '../schema.ts';
+
+export function esc(s: string | undefined | null): string {
+  if (!s) return '';
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+export function fullName(p: Profile): string {
+  return `${p.firstName} ${p.lastName}`;
+}

package/src/templates/hero.ts

@@ -0,0 +1,22 @@
+import type { Profile } from '../schema.ts';
+import { esc, fullName } from './helpers.ts';
+
+export function hero(p: Profile): string {
+  const name = fullName(p);
+
+  const badge = p.verified
+    ? `<p><small>Profil zweryfikowany &middot; ${esc(p.city ?? 'Polska')}</small></p>`
+    : '';
+
+  const ctas: string[] = [];
+  if (p.email) ctas.push(`<a href="mailto:${esc(p.email)}">Napisz wiadomość</a>`);
+  if (p.phone) ctas.push(`<a href="tel:${esc(p.phone.replace(/\s/g, ''))}">Zadzwoń</a>`);
+  const ctaBlock = ctas.length ? `<p>${ctas.join('\n')}</p>` : '';
+
+  return `<hgroup>
+${badge}
+<h1>${esc(name)}</h1>
+<p>${esc(p.tagline ?? p.jobTitle)}</p>
+${ctaBlock}
+</hgroup>`;
+}

package/src/templates/index.ts

@@ -0,0 +1,5 @@
+export { layout, type LayoutProps } from './layout.ts';
+export { hero } from './hero.ts';
+export { profileCard } from './profile-card.ts';
+export { profileArticle } from './profile-article.ts';
+export { esc, fullName } from './helpers.ts';

package/src/templates/layout.ts

@@ -0,0 +1,65 @@
+import { esc } from './helpers.ts';
+
+export interface LayoutProps {
+  title: string;
+  description?: string;
+  jsonLd?: object;
+  siteName?: string;
+  homeHref?: string;
+  baseUrl?: string;
+  headExtra?: string;
+  navExtra?: string;
+  footerContent?: string;
+}
+
+const THEME_VERSION = '0.3.0';
+
+export function layout(props: LayoutProps, body: string): string {
+  const {
+    title,
+    description,
+    jsonLd,
+    siteName = 'press2ai',
+    homeHref = '/',
+    baseUrl,
+    headExtra = '',
+    navExtra = '',
+    footerContent,
+  } = props;
+
+  const base = baseUrl ? baseUrl.replace(/\/$/, '') : '';
+
+  const footer = footerContent ??
+    `Powered by <a href="https://github.com/press2ai">press2ai</a> &middot;
+     <a href="https://www.npmjs.com/package/@press2ai/theme-specialist-glossy/v/${THEME_VERSION}">@press2ai/theme-specialist-glossy v${THEME_VERSION}</a>`;
+
+  return `<!doctype html>
+<html lang="pl">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${esc(title)}</title>
+${description ? `<meta name="description" content="${esc(description)}">` : ''}
+<meta property="og:title" content="${esc(title)}">
+${description ? `<meta property="og:description" content="${esc(description)}">` : ''}
+${jsonLd ? `<script type="application/ld+json">${JSON.stringify(jsonLd).replace(/</g, '\\u003c')}</script>` : ''}
+${base ? `<link rel="alternate" type="application/json" href="${esc(base)}/profile.json" title="Profile data (JSON)">
+<link rel="alternate" type="application/schema+json" href="${esc(base)}/schema.json" title="JSON Schema">
+<link rel="alternate" type="text/plain" href="${esc(base)}/llms.txt" title="LLM pointer">
+<link rel="describedby" href="${esc(base)}/.well-known/ai-profile.json" type="application/json">` : ''}
+${headExtra}
+</head>
+<body>
+<header>
+<nav>
+<a href="${esc(homeHref)}"><strong>${esc(siteName)}</strong></a>
+${navExtra}
+</nav>
+</header>
+<main>${body}</main>
+<footer>
+<small>${footer}</small>
+</footer>
+</body>
+</html>`;
+}

package/src/templates/profile-article.ts

@@ -0,0 +1,94 @@
+import type { Profile } from '../schema.ts';
+import { esc, fullName } from './helpers.ts';
+
+export function profileArticle(p: Profile): string {
+  const name = fullName(p);
+  const socials = Object.entries(p.social ?? {}).filter(([, v]) => v);
+
+  const verified = p.verified ? '<p><small>&#10003; Profil zweryfikowany</small></p>' : '';
+
+  const address = p.city
+    ? `<address itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
+<strong>Miasto: </strong>
+<span itemprop="addressLocality">${esc(p.city)}</span>,
+<span itemprop="addressCountry">${esc(p.country)}</span>
+</address>`
+    : '';
+
+  const bio = p.bio
+    ? `<section>
+<h2>O mnie</h2>
+<p itemprop="description">${esc(p.bio)}</p>
+</section>`
+    : '';
+
+  const specialties = p.specialties.length > 0
+    ? `<section>
+<h2>Specjalizacje</h2>
+<ul>
+${p.specialties.map(s => `<li itemprop="knowsAbout">${esc(s)}</li>`).join('\n')}
+</ul>
+</section>`
+    : '';
+
+  const languages = p.languages.length > 0
+    ? `<section>
+<h2>Języki</h2>
+<ul>
+${p.languages.map(l => `<li itemprop="knowsLanguage">${esc(l)}</li>`).join('\n')}
+</ul>
+</section>`
+    : '';
+
+  const contactItems: string[] = [];
+  if (p.phone) contactItems.push(`<dt>Telefon</dt><dd><a href="tel:${esc(p.phone.replace(/\s/g, ''))}" itemprop="telephone">${esc(p.phone)}</a></dd>`);
+  if (p.email) contactItems.push(`<dt>E-mail</dt><dd><a href="mailto:${esc(p.email)}" itemprop="email">${esc(p.email)}</a></dd>`);
+  if (p.website) contactItems.push(`<dt>Strona WWW</dt><dd><a href="${esc(p.website)}" itemprop="url" rel="noopener">${esc(p.website)}</a></dd>`);
+  const socialUrlPrefix: Record<string, string> = {
+    linkedin: 'https://linkedin.com/in/',
+    youtube: 'https://youtube.com/@',
+    tiktok: 'https://tiktok.com/@',
+    facebook: 'https://facebook.com/',
+    twitter: 'https://x.com/',
+    instagram: 'https://instagram.com/',
+  };
+  for (const [name, handle] of socials) {
+    const prefix = socialUrlPrefix[name] ?? `https://${esc(name)}.com/`;
+    contactItems.push(`<dt>${esc(name)}</dt><dd><a href="${prefix}${esc(handle as string)}" rel="noopener">@${esc(handle as string)}</a></dd>`);
+  }
+
+  const contact = contactItems.length > 0
+    ? `<section>
+<h2>Kontakt</h2>
+<dl>
+${contactItems.join('\n')}
+</dl>
+</section>`
+    : '';
+
+  const business = p.business?.name
+    ? `<section>
+<h2>Dane firmy</h2>
+<dl>
+<dt>Nazwa</dt><dd>${esc(p.business.name)}</dd>
+${p.business.taxId ? `<dt>NIP</dt><dd>${esc(p.business.taxId)}</dd>` : ''}
+${p.business.registryId ? `<dt>REGON</dt><dd>${esc(p.business.registryId)}</dd>` : ''}
+${(p.business.classification?.length ?? 0) > 0 ? `<dt>PKD</dt><dd>${p.business.classification!.map(c => esc(c)).join(', ')}</dd>` : ''}
+</dl>
+</section>`
+    : '';
+
+  return `<article itemscope itemtype="https://schema.org/Person">
+<header>
+<h1 itemprop="name">${esc(name)}</h1>
+<p itemprop="jobTitle">${esc(p.jobTitle)}</p>
+${verified}
+</header>
+${address}
+${bio}
+${specialties}
+${languages}
+${contact}
+${business}
+</article>`;
+}

package/src/templates/profile-card.ts

@@ -0,0 +1,23 @@
+import type { Profile } from '../schema.ts';
+import { esc, fullName } from './helpers.ts';
+
+export function profileCard(p: Profile, href: string): string {
+  const name = fullName(p);
+
+  const city = p.city ? ` &middot; <span itemprop="address" itemscope itemtype="https://schema.org/PostalAddress"><span itemprop="addressLocality">${esc(p.city)}</span></span>` : '';
+
+  const bio = p.bio ? `<p itemprop="description">${esc(p.bio)}</p>` : '';
+
+  const specs = p.specialties.length > 0
+    ? `<p><small>${p.specialties.map(s => esc(s)).join(' &middot; ')}</small></p>`
+    : '';
+
+  return `<article itemscope itemtype="https://schema.org/Person">
+<header>
+<h2><a href="${esc(href)}" itemprop="url"><span itemprop="name">${esc(name)}</span></a></h2>
+<p><span itemprop="jobTitle">${esc(p.jobTitle)}</span>${city}</p>
+</header>
+${bio}
+${specs}
+</article>`;
+}