@ossy/booking 1.15.6 → 1.16.0

package/src/home.page.jsx

@@ -1,373 +1,56 @@
 import React from 'react'
-import { View, Title, Text, Button, Icon2, PageSection } from '@ossy/design-system'
+import { useLocale } from '@ossy/design-system'
+import SalesSection from './SalesSection.jsx'
 
 export const metadata = {
   id: 'booking/home',
-  title: 'Bokningskalender – Ossy',
-  description: 'Låt kunder boka tid direkt. Dela en länk, kunder väljer tid, du fokuserar på jobbet.',
   path: { sv: '/boka', en: '/booking' },
 }
 
-// ─── Pain points ─────────────────────────────────────────────────────────────
-
-const painPoints = [
-  {
-    icon: 'email',
-    title: 'E-postpingpong',
-    text: 'Fram och tillbaka i flera dagar bara för att hitta ett gemensamt tidslucka.',
-  },
-  {
-    icon: 'warning',
-    title: 'Dubbelbokningar',
-    text: 'En kalender här, en länk där – det är lätt att råka boka samma tid två gånger.',
-  },
-  {
-    icon: 'alert',
-    title: 'Missade bokningar',
-    text: 'Påminnelser glöms bort. Kunden dyker inte upp. Tid och pengar går till spillo.',
-  },
-]
-
-// ─── Features ────────────────────────────────────────────────────────────────
-
-const features = [
-  {
-    icon: 'share',
-    title: 'Din bokningssida',
-    text: 'En personlig sida på ossy.se/boka/ditt-namn. Dela länken med kunder – det är allt som krävs.',
-  },
-  {
-    icon: 'check-circle',
-    title: 'Automatiska bekräftelser',
-    text: 'Kunden får en bekräftelse med kalenderinbjudan direkt. Inga manuella steg från din sida.',
-  },
-  {
-    icon: 'calendar',
-    title: 'Hantera din tid',
-    text: 'Ange när du är tillgänglig. Vi visar bara lediga tider – aldrig dubbelbokade.',
-  },
-]
-
-// ─── Personas ─────────────────────────────────────────────────────────────────
-
-const personas = [
-  { icon: 'person', label: 'Coach', text: 'Boka coachingsessioner utan mellanhänder.' },
-  { icon: 'code', label: 'IT-konsult', text: 'Låt kunder boka möten direkt i din kalender.' },
-  { icon: 'brush', label: 'Designer', text: 'Fyll din agenda med kundmöten på dina villkor.' },
-]
-
-// ─── Pricing ─────────────────────────────────────────────────────────────────
-
-const included = [
-  { icon: 'infinity', text: 'Obegränsade bokningar' },
-  { icon: 'bell', text: 'Automatiska påminnelser' },
-  { icon: 'calendar', text: 'Kalenderinbjudningar' },
-  { icon: 'link', text: 'Din personliga bokningssida' },
-]
-
-// ─── Page ─────────────────────────────────────────────────────────────────────
-
-export default function BookingHomePage() {
-  return (
-    <>
-      <style href="@ossy/booking-sales-page" precedence="high">{`
-        .bsp-hero {
-          min-height: min(52vh, 560px);
-          padding: var(--space-xl) var(--space-m);
-          background: linear-gradient(
-            155deg,
-            hsl(200, 100%, 97%) 0%,
-            hsl(170, 60%, 94%) 60%,
-            hsl(160, 70%, 90%) 100%
-          );
-          border-radius: var(--space-m);
-          text-align: center;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          gap: var(--space-l);
-          overflow: hidden;
-        }
-
-        .bsp-section {
-          padding: var(--space-xl) var(--space-m);
-        }
-
-        .bsp-grid-3 {
-          display: grid;
-          grid-template-columns: repeat(3, 1fr);
-          gap: var(--space-m);
-        }
-
-        .bsp-grid-2 {
-          display: grid;
-          grid-template-columns: repeat(3, 1fr);
-          gap: var(--space-m);
-        }
-
-        @media (max-width: 860px) {
-          .bsp-grid-3,
-          .bsp-grid-2 {
-            grid-template-columns: 1fr;
-          }
-          .bsp-hero {
-            padding: var(--space-l) var(--space-s);
-          }
-        }
-
-        @media (min-width: 860px) and (max-width: 1100px) {
-          .bsp-grid-3 {
-            grid-template-columns: repeat(3, 1fr);
-          }
-        }
-      `}</style>
-
-      <PageSection maxWidth="l" gap="l" style={{ padding: 'var(--space-m) var(--space-m) var(--space-xl)' }}>
-
-        {/* ── Hero ─────────────────────────────────────────────────────── */}
-        <div className="bsp-hero">
-          <View gap="m" alignItems="center" style={{ maxWidth: 680 }}>
-            <Title as="h1" variant="display" style={{ textWrap: 'balance', letterSpacing: '-0.5px' }}>
-              Låt kunder boka tid direkt
-            </Title>
-            <Text style={{ fontSize: '1.2rem', lineHeight: 1.6, opacity: 0.8 }}>
-              Dela en länk. Kunder väljer tid. Du fokuserar på jobbet.
-            </Text>
-          </View>
-
-          <View layout="row" gap="m" justifyContent="center" style={{ flexWrap: 'wrap' }}>
-            <Button variant="cta" href="/sign-up" style={{ padding: '12px 32px', fontSize: '1rem' }}>
-              Kom igång gratis
-            </Button>
-            <Button variant="secondary" href="/boka/demo" style={{ padding: '12px 32px', fontSize: '1rem' }}>
-              Se ett exempel
-            </Button>
-          </View>
-        </div>
-
-        {/* ── Problem ──────────────────────────────────────────────────── */}
-        <View gap="l" className="bsp-section" style={{ textAlign: 'center' }}>
-          <View gap="s" alignItems="center">
-            <Title as="h2" variant="secondary">
-              Trött på e-postpingpong för att hitta en tid som passar?
-            </Title>
-            <Text style={{ maxWidth: 560, opacity: 0.75 }}>
-              Du är inte ensam. De flesta konsulter och frilansare slösar timmar i veckan på att koordinera möten.
-            </Text>
-          </View>
-
-          <div className="bsp-grid-3">
-            {painPoints.map(({ icon, title, text }) => (
-              <View
-                key={title}
-                gap="m"
-                inset="l"
-                roundness="m"
-                style={{
-                  border: '1px solid var(--separator)',
-                  background: 'hsl(0, 0%, 99%)',
-                  textAlign: 'left',
-                }}
-              >
-                <View
-                  style={{
-                    width: 44,
-                    height: 44,
-                    borderRadius: 12,
-                    background: 'hsl(0, 80%, 95%)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
-                  <Icon2 name={icon} size="s" />
-                </View>
-                <Title as="h3" variant="tertiary">{title}</Title>
-                <Text variant="small" style={{ opacity: 0.8, lineHeight: 1.6 }}>{text}</Text>
-              </View>
-            ))}
-          </div>
-        </View>
-
-        {/* ── Features ─────────────────────────────────────────────────── */}
-        <View
-          gap="l"
-          inset="l"
-          roundness="m"
-          className="bsp-section"
-          style={{
-            background: 'hsl(170, 30%, 97%)',
-            border: '1px solid hsl(170, 30%, 90%)',
-          }}
-        >
-          <View gap="s" alignItems="center" style={{ textAlign: 'center' }}>
-            <Title as="h2" variant="secondary">Allt du behöver, inget du inte behöver</Title>
-            <Text style={{ opacity: 0.75 }}>Enkelt att komma igång. Kraftfullt nog att lita på varje dag.</Text>
-          </View>
-
-          <div className="bsp-grid-3">
-            {features.map(({ icon, title, text }) => (
-              <View
-                key={title}
-                gap="m"
-                inset="l"
-                roundness="m"
-                style={{
-                  background: 'hsl(0, 0%, 100%)',
-                  border: '1px solid hsl(170, 20%, 88%)',
-                  boxShadow: '0 2px 8px hsl(170, 30%, 88%)',
-                }}
-              >
-                <View
-                  style={{
-                    width: 48,
-                    height: 48,
-                    borderRadius: 14,
-                    background: 'hsl(167, 89%, 43%)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
-                  <Icon2 name={icon} size="s" style={{ color: 'white' }} />
-                </View>
-                <Title as="h3" variant="tertiary">{title}</Title>
-                <Text variant="small" style={{ opacity: 0.8, lineHeight: 1.6 }}>{text}</Text>
-              </View>
-            ))}
-          </div>
-        </View>
-
-        {/* ── Social proof ─────────────────────────────────────────────── */}
-        <View gap="l" className="bsp-section" style={{ textAlign: 'center' }}>
-          <View gap="s" alignItems="center">
-            <Title as="h2" variant="secondary">Byggd för konsulter och frilansare</Title>
-            <Text style={{ opacity: 0.75, maxWidth: 500 }}>
-              Oavsett vad du jobbar med – om du säljer din tid, passar Ossy.
-            </Text>
-          </View>
-
-          <div className="bsp-grid-3">
-            {personas.map(({ icon, label, text }) => (
-              <View
-                key={label}
-                gap="m"
-                inset="l"
-                roundness="m"
-                alignItems="center"
-                style={{
-                  border: '1px solid var(--separator)',
-                  textAlign: 'center',
-                }}
-              >
-                <View
-                  style={{
-                    width: 52,
-                    height: 52,
-                    borderRadius: '50%',
-                    background: 'hsl(200, 60%, 93%)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
-                  <Icon2 name={icon} size="m" />
-                </View>
-                <Title as="h3" variant="tertiary">{label}</Title>
-                <Text variant="small" style={{ opacity: 0.75, lineHeight: 1.6 }}>{text}</Text>
-              </View>
-            ))}
-          </div>
-        </View>
-
-        {/* ── Pricing ──────────────────────────────────────────────────── */}
-        <View gap="l" className="bsp-section" alignItems="center" style={{ textAlign: 'center' }}>
-          <View gap="s" alignItems="center">
-            <Title as="h2" variant="secondary">Enkel och transparent prissättning</Title>
-            <Text style={{ opacity: 0.75 }}>Inga överraskningar. Avsluta när du vill.</Text>
-          </View>
-
-          <View
-            gap="l"
-            inset="xl"
-            roundness="m"
-            alignItems="center"
-            style={{
-              background: 'hsl(0, 0%, 100%)',
-              border: '2px solid hsl(167, 89%, 43%)',
-              boxShadow: '0 4px 24px hsl(167, 89%, 88%)',
-              maxWidth: 420,
-              width: '100%',
-            }}
-          >
-            <View gap="xs" alignItems="center">
-              <Text variant="small" style={{ opacity: 0.6, letterSpacing: 1, textTransform: 'uppercase' }}>
-                Bokningskalender
-              </Text>
-              <Title as="p" variant="display" style={{ lineHeight: 1, letterSpacing: '-1px' }}>
-                299
-                <span style={{ fontSize: '1.2rem', fontWeight: 500, opacity: 0.7 }}> SEK/mån</span>
-              </Title>
-            </View>
-
-            <View gap="s" style={{ width: '100%', textAlign: 'left' }}>
-              {included.map(({ icon, text }) => (
-                <View key={text} layout="row" gap="s" alignItems="center">
-                  <Icon2 name={icon} size="xs" style={{ color: 'hsl(167, 89%, 43%)', flexShrink: 0 }} />
-                  <Text variant="small">{text}</Text>
-                </View>
-              ))}
-            </View>
-
-            <Button
-              variant="cta"
-              href="/sign-up"
-              style={{ width: '100%', padding: '14px 0', fontSize: '1rem', textAlign: 'center' }}
-            >
-              Starta din bokningssida
-            </Button>
-
-            <Text variant="small" style={{ opacity: 0.5 }}>
-              Inget betalkort krävs för att komma igång.
-            </Text>
-          </View>
-        </View>
-
-        {/* ── Footer CTA ───────────────────────────────────────────────── */}
-        <View
-          gap="l"
-          inset="xl"
-          roundness="m"
-          alignItems="center"
-          style={{
-            background: 'linear-gradient(135deg, hsl(200, 100%, 17%) 0%, hsl(170, 70%, 22%) 100%)',
-            textAlign: 'center',
-          }}
-        >
-          <View gap="m" alignItems="center" style={{ maxWidth: 540 }}>
-            <Title
-              as="h2"
-              variant="secondary"
-              style={{ color: 'hsl(0, 0%, 98%)', letterSpacing: '-0.25px' }}
-            >
-              Redo att sluta jaga tider?
-            </Title>
-            <Text style={{ color: 'hsl(0, 0%, 80%)', fontSize: '1.05rem', lineHeight: 1.6 }}>
-              Kom igång på under fem minuter. Din bokningssida är live direkt.
-            </Text>
-          </View>
-
-          <Button
-            variant="cta"
-            href="/sign-up"
-            style={{ padding: '14px 40px', fontSize: '1.05rem' }}
-          >
-            Kom igång gratis
-          </Button>
-        </View>
+function useBookingHomeContent () {
+  const { t } = useLocale()
+
+  const cover = {
+    title: t('booking.home.cover.title'),
+    text: t('booking.home.cover.text'),
+    actions: [
+      { label: t('booking.home.cover.ctaPrimary'), variant: 'cta', href: '/sign-up' },
+      { label: t('booking.home.cover.ctaSecondary'), variant: 'secondary', href: '/boka/demo' },
+    ],
+  }
+
+  const features = [
+    {
+      title: t('booking.home.features.page.title'),
+      icon: 'share',
+      text: t('booking.home.features.page.text'),
+    },
+    {
+      title: t('booking.home.features.confirmations.title'),
+      icon: 'check-circle',
+      text: t('booking.home.features.confirmations.text'),
+    },
+    {
+      title: t('booking.home.features.availability.title'),
+      icon: 'calendar',
+      text: t('booking.home.features.availability.text'),
+    },
+    {
+      title: t('booking.home.features.email.title'),
+      icon: 'mail',
+      text: t('booking.home.features.email.text'),
+    },
+    {
+      title: t('booking.home.features.doubleBook.title'),
+      icon: 'warning',
+      text: t('booking.home.features.doubleBook.text'),
+    },
+  ]
+
+  return { cover, features }
+}
 
-      </PageSection>
-    </>
-  )
+export default function BookingHomePage () {
+  const { cover, features } = useBookingHomeContent()
+  return <SalesSection cover={cover} features={features} />
 }