astryx-dracula 0.1.3 → 0.2.0

package/templates/blank.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'Blank',
+  description: 'Empty layout shell for a new page',
+  category: 'tooling',
+};

package/templates/blank.tsx

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {Layout, LayoutContent} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function BlankPage() {
+  return (
+    <Layout
+      content={
+        <LayoutContent>
+          <Text type="large">A blank crypt awaits its story</Text>
+        </LayoutContent>
+      }
+    />
+  );
+}

package/templates/centered-hero.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'Centered Hero',
+  description: 'Headline, CTAs, and hero visual',
+  category: 'marketing',
+};

package/templates/centered-hero.tsx

@@ -0,0 +1,188 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import type {CSSProperties} from 'react';
+import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
+import {Text, Heading} from '@astryxdesign/core/Text';
+import {Button} from '@astryxdesign/core/Button';
+import {Icon} from '@astryxdesign/core/Icon';
+import {AspectRatio} from '@astryxdesign/core/AspectRatio';
+import {Section} from '@astryxdesign/core/Section';
+import {ArrowRight} from 'lucide-react';
+
+const heroImage: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  display: 'block',
+};
+const heroFrame: CSSProperties = {
+  maxWidth: 1200,
+  marginInline: 'auto',
+  borderRadius: 'var(--radius-page)',
+  border: 'var(--border-width) solid var(--color-separator)',
+  overflow: 'clip',
+};
+
+function NightCastleScene() {
+  return (
+    <svg
+      style={heroImage}
+      viewBox="0 0 800 450"
+      role="img"
+      aria-label="Moonlit castle on a hill in Dracula theme colors">
+      <title>Castle under a harvest moon</title>
+      <rect width="800" height="450" fill="var(--dracula-bg-dark)" />
+      {/* Stars */}
+      <g fill="var(--dracula-purple)">
+        <circle cx="60" cy="60" r="2.5" />
+        <circle cx="180" cy="120" r="2" />
+        <circle cx="330" cy="50" r="2.5" />
+        <circle cx="470" cy="90" r="2" />
+        <circle cx="700" cy="200" r="2.5" />
+        <circle cx="750" cy="80" r="2" />
+      </g>
+      <g fill="var(--dracula-cyan)">
+        <circle cx="120" cy="90" r="2" />
+        <circle cx="270" cy="70" r="2.5" />
+        <circle cx="540" cy="50" r="2" />
+        <circle cx="660" cy="160" r="2" />
+      </g>
+      <g fill="var(--dracula-pink)">
+        <circle cx="90" cy="170" r="2" />
+        <circle cx="400" cy="130" r="2.5" />
+        <circle cx="590" cy="200" r="2" />
+        <circle cx="730" cy="260" r="2" />
+      </g>
+      {/* Harvest moon */}
+      <circle cx="620" cy="110" r="56" fill="var(--dracula-yellow)" />
+      <circle
+        cx="600"
+        cy="95"
+        r="10"
+        fill="var(--dracula-orange)"
+        opacity={0.5}
+      />
+      <circle
+        cx="638"
+        cy="125"
+        r="7"
+        fill="var(--dracula-orange)"
+        opacity={0.5}
+      />
+      {/* Bats */}
+      <g
+        fill="none"
+        stroke="var(--dracula-purple)"
+        strokeWidth={4}
+        strokeLinecap="round">
+        <path d="M120 130 q12 -12 24 0 q12 -12 24 0" />
+        <path d="M210 90 q9 -9 18 0 q9 -9 18 0" />
+        <path d="M470 160 q9 -9 18 0 q9 -9 18 0" />
+      </g>
+      {/* Hills */}
+      <path
+        d="M0 330 Q200 260 400 320 T800 300 V450 H0 Z"
+        fill="var(--dracula-selection)"
+      />
+      <path
+        d="M0 385 Q240 320 480 375 T800 360 V450 H0 Z"
+        fill="var(--dracula-bg-light)"
+      />
+      {/* Castle */}
+      <g>
+        <rect
+          x="150"
+          y="225"
+          width="120"
+          height="120"
+          rx={4}
+          fill="var(--dracula-bg-lighter)"
+        />
+        <rect
+          x="130"
+          y="185"
+          width="44"
+          height="160"
+          rx={4}
+          fill="var(--dracula-bg-lighter)"
+        />
+        <rect
+          x="246"
+          y="185"
+          width="44"
+          height="160"
+          rx={4}
+          fill="var(--dracula-bg-lighter)"
+        />
+        <g fill="var(--dracula-bg-lighter)">
+          <rect x="130" y="175" width="12" height="14" rx={2} />
+          <rect x="149" y="175" width="12" height="14" rx={2} />
+          <rect x="246" y="175" width="12" height="14" rx={2} />
+          <rect x="265" y="175" width="12" height="14" rx={2} />
+          <rect x="150" y="215" width="14" height="16" rx={2} />
+          <rect x="173" y="215" width="14" height="16" rx={2} />
+          <rect x="196" y="215" width="14" height="16" rx={2} />
+          <rect x="219" y="215" width="14" height="16" rx={2} />
+          <rect x="242" y="215" width="14" height="16" rx={2} />
+        </g>
+        <g fill="var(--dracula-yellow)">
+          <rect x="168" y="255" width="14" height="20" rx={2} />
+          <rect x="203" y="255" width="14" height="20" rx={2} />
+          <rect x="238" y="255" width="14" height="20" rx={2} />
+          <rect x="143" y="215" width="10" height="14" rx={2} />
+          <rect x="259" y="215" width="10" height="14" rx={2} />
+        </g>
+        <path
+          d="M195 345 v-30 a15 15 0 0 1 30 0 v30 Z"
+          fill="var(--dracula-bg-dark)"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default function CenteredHero() {
+  return (
+    <Layout
+      content={
+        <LayoutContent padding={6}>
+          <VStack gap={10}>
+            <VStack gap={6} hAlign="center">
+              <VStack gap={3} hAlign="center">
+                <Heading
+                  level={1}
+                  type="display-2"
+                  justify="center"
+                  textWrap="balance">
+                  Small joys for creatures of the night
+                </Heading>
+                <Text
+                  type="body"
+                  color="secondary"
+                  justify="center"
+                  textWrap="balance">
+                  Sometimes all it takes is one small ritual to turn the whole
+                  night around.
+                </Text>
+              </VStack>
+              <HStack gap={3} wrap="wrap" justify="center">
+                <Button
+                  label="Embrace the night"
+                  variant="primary"
+                  endContent={
+                    <Icon icon={ArrowRight} size="sm" color="inherit" />
+                  }
+                />
+                <Button label="Read the lore" variant="secondary" />
+              </HStack>
+            </VStack>
+            <Section variant="transparent" padding={0}>
+              <AspectRatio ratio={16 / 9} style={heroFrame}>
+                <NightCastleScene />
+              </AspectRatio>
+            </Section>
+          </VStack>
+        </LayoutContent>
+      }
+    />
+  );
+}

package/templates/classic-gallery.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'Classic Gallery',
+  description: 'Filterable image wall with category tabs',
+  category: 'marketing',
+};

package/templates/classic-gallery.tsx

@@ -0,0 +1,181 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {useState, type CSSProperties} from 'react';
+import {VStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
+import {Center} from '@astryxdesign/core/Center';
+import {Card} from '@astryxdesign/core/Card';
+import {AspectRatio} from '@astryxdesign/core/AspectRatio';
+import {Text, Heading} from '@astryxdesign/core/Text';
+import {Grid} from '@astryxdesign/core/Grid';
+import {Section} from '@astryxdesign/core/Section';
+import {TabList, Tab} from '@astryxdesign/core/TabList';
+
+// ─── Styles ─────────────────────────────────────────────────────────────────
+
+const outer: CSSProperties = {
+  maxWidth: 1200,
+  width: '100%',
+  paddingInline: 'var(--space-viewport)',
+  paddingBlock: 'var(--space-viewport)',
+};
+const frameClip: CSSProperties = {
+  overflow: 'clip',
+};
+const artImage: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  display: 'block',
+};
+const textCenter: CSSProperties = {
+  textAlign: 'center',
+};
+
+// ─── Gallery Data ───────────────────────────────────────────────────────────
+
+type Category = 'all' | 'lifestyle' | 'scene' | 'home';
+
+interface GalleryImage {
+  alt: string;
+  category: Exclude<Category, 'all'>;
+}
+
+// Dracula accent per gallery shelf.
+const CATEGORY_HUES: Record<Exclude<Category, 'all'>, string> = {
+  scene: 'var(--dracula-cyan)',
+  lifestyle: 'var(--dracula-pink)',
+  home: 'var(--dracula-yellow)',
+};
+
+const GALLERY_IMAGES: GalleryImage[] = [
+  {alt: 'Moonlit ridge trail under a harvest moon', category: 'scene'},
+  {alt: 'Late portrait in violet lamplight', category: 'lifestyle'},
+  {alt: 'Lamplit reading nook after midnight', category: 'home'},
+  {alt: 'Fog rolling over the night pines', category: 'scene'},
+  {alt: 'Dancer caught mid-step in stage pink', category: 'lifestyle'},
+  {alt: 'Kitchen table set for a midnight feast', category: 'lifestyle'},
+  {alt: 'Castle silhouette over sleeping hills', category: 'scene'},
+  {alt: 'Attic window glowing amber at 2am', category: 'home'},
+  {alt: 'Cellar shelves lined with bottled dusk', category: 'home'},
+  {alt: 'Bats crossing a violet harvest moon', category: 'scene'},
+];
+
+// ─── Gallery Art ────────────────────────────────────────────────────────────
+
+function GalleryArt({image, index}: {image: GalleryImage; index: number}) {
+  const hue = CATEGORY_HUES[image.category];
+  const moonX = 90 + ((index * 53) % 220);
+  const moonY = 62 + ((index * 29) % 60);
+  const hillA = 190 + ((index * 13) % 40);
+  const hillB = 215 + ((index * 17) % 40);
+  return (
+    <svg
+      viewBox="0 0 400 300"
+      preserveAspectRatio="xMidYMid slice"
+      style={artImage}
+      role="img"
+      aria-label={image.alt}>
+      <rect width="400" height="300" fill="var(--dracula-bg-light)" />
+      <g fill="var(--dracula-purple)" opacity={0.55}>
+        <circle cx={40 + ((index * 37) % 320)} cy={30} r={2} />
+        <circle cx={120 + ((index * 23) % 200)} cy={52} r={1.6} />
+        <circle cx={260 + ((index * 11) % 110)} cy={26} r={2.2} />
+        <circle cx={330} cy={70 + ((index * 7) % 30)} r={1.6} />
+      </g>
+      <circle cx={moonX} cy={moonY} r={34} fill={hue} opacity={0.9} />
+      <circle
+        cx={moonX - 12}
+        cy={moonY - 8}
+        r={28}
+        fill="var(--dracula-bg-light)"
+        opacity={0.55}
+      />
+      <path
+        d={`M0 ${hillA} Q100 ${hillA - 50} 200 ${hillA - 10} T400 ${hillA - 30} V300 H0 Z`}
+        fill="var(--dracula-current-line)"
+      />
+      <path
+        d={`M0 ${hillB} Q120 ${hillB - 40} 240 ${hillB} T400 ${hillB - 20} V300 H0 Z`}
+        fill="var(--dracula-bg)"
+      />
+      <g
+        transform={`translate(${60 + ((index * 41) % 280)} ${hillB - 34})`}
+        fill="none"
+        stroke={hue}
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round">
+        <rect x="-22" y="-22" width="44" height="44" rx="5" />
+        <circle cx="9" cy="-9" r="2" fill={hue} stroke="none" />
+        <path d="M-17 15 L-4 0 L5 9 L10 4 L17 12" />
+      </g>
+    </svg>
+  );
+}
+
+// ─── Main Page ──────────────────────────────────────────────────────────────
+
+export default function ClassicGallery() {
+  const [filter, setFilter] = useState<Category>('all');
+
+  const filteredImages =
+    filter === 'all'
+      ? GALLERY_IMAGES
+      : GALLERY_IMAGES.filter(img => img.category === filter);
+
+  return (
+    <Layout
+      height="fill"
+      content={
+        <LayoutContent padding={0}>
+          <Center axis="horizontal">
+            <VStack gap={8} style={outer}>
+              {/* Header */}
+              <Center axis="horizontal">
+                <Section variant="transparent" maxWidth={680} padding={0}>
+                  <VStack gap={4} hAlign="center" style={textCenter}>
+                    <VStack gap={2} hAlign="center">
+                      <Heading level={1}>Hung after dark</Heading>
+                      <Text type="body" color="secondary">
+                        A coven-curated wall of moonlit ridges, late portraits,
+                        and lamplit rooms. Filter by haunt and stay a while —
+                        the gallery never sleeps.
+                      </Text>
+                    </VStack>
+
+                    <TabList
+                      value={filter}
+                      onChange={v => setFilter(v as Category)}>
+                      <Tab value="all" label="All" />
+                      <Tab value="lifestyle" label="Lifestyle" />
+                      <Tab value="scene" label="Scenery" />
+                      <Tab value="home" label="Home" />
+                    </TabList>
+                    <Text
+                      type="supporting"
+                      color="secondary"
+                      hasTabularNumbers>
+                      {filteredImages.length}{' '}
+                      {filteredImages.length === 1 ? 'piece' : 'pieces'} on the
+                      wall
+                    </Text>
+                  </VStack>
+                </Section>
+              </Center>
+
+              {/* Gallery Grid */}
+              <Grid columns={{minWidth: 260, repeat: 'fit'}} gap={4}>
+                {filteredImages.map((image, i) => (
+                  <Card key={image.alt} padding={0} style={frameClip}>
+                    <AspectRatio ratio={3 / 2}>
+                      <GalleryArt image={image} index={i} />
+                    </AspectRatio>
+                  </Card>
+                ))}
+              </Grid>
+            </VStack>
+          </Center>
+        </LayoutContent>
+      }
+    />
+  );
+}

package/templates/contact-form.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'Contact Form',
+  description: 'Lead capture form with goals and budget',
+  category: 'forms',
+};