@newschools/sdk 0.2.4 → 0.2.5

package/README.md

@@ -8,7 +8,7 @@ Nuxt module for integrating New Schools learning content into your applications
 🎨 **Automatic theming** - Organization brand colors applied as CSS variables  
 🔒 **Type-safe** - Full TypeScript support with entity types  
 ⚡ **SSR-compatible** - Built on Nuxt's `useAsyncData`  
-🎯 **Ready-to-use components** - OrganizationHero, EntityBentoGrid, EntityCard  
+🎯 **Ready-to-use components** - EntityHero, EntityBentoGrid, EntityCard  
 📐 **Smart layouts** - EntityBentoGrid automatically generates responsive layouts  
 🔑 **API key authentication** - Secure access to your organization's content
 
@@ -139,13 +139,15 @@ const organization = useOrganization();
 
 ### Pre-built Components
 
-#### OrganizationHero
+#### EntityHero
 
-Display organization header with cover image and branding:
+Display entity header with cover image and branding. Supports 4 layout variants:
+
+**Basic Usage:**
 
 ```vue
 <template>
-  <OrganizationHero :org="organization">
+  <EntityHero :org="organization" variant="left">
     <template #sub-title>
       <p>Welcome to our learning platform</p>
     </template>
@@ -153,7 +155,7 @@ Display organization header with cover image and branding:
     <template #content>
       <div>Custom content area for CTAs, forms, etc.</div>
     </template>
-  </OrganizationHero>
+  </EntityHero>
 </template>
 
 <script setup lang="ts">
@@ -161,6 +163,48 @@ const organization = useOrganization();
 </script>
 ```
 
+**Layout Variants:**
+
+- `variant="left"` (default) - Image on left, content on right (grid on tablet+, stacked on mobile)
+- `variant="right"` - Content on left, image on right (grid on tablet+, stacked on mobile)
+- `variant="fullscreen"` - Full screen image with content overlay at bottom left (all screen sizes)
+- `variant="horizontal"` - Image on top (50vh with clamp), content below (stacked on all sizes)
+
+**Variant Examples:**
+
+```vue
+<!-- Fullscreen: Content overlays image -->
+<EntityHero :org="organization" variant="fullscreen">
+  <template #sub-title>Journey subtitle</template>
+  <template #content>
+    <p>This content appears over the image, under the title.</p>
+  </template>
+</EntityHero>
+
+<!-- Horizontal: Image top, content bottom -->
+<EntityHero :org="organization" variant="horizontal">
+  <template #sub-title>Course overview</template>
+  <template #content>
+    <div>Course details and enrollment form</div>
+  </template>
+</EntityHero>
+
+<!-- Right: Reversed grid layout -->
+<EntityHero :org="organization" variant="right">
+  <template #sub-title>Featured content</template>
+  <template #content>
+    <button>Get Started</button>
+  </template>
+</EntityHero>
+```
+
+**Responsive Behavior:**
+
+- Title and subtitle always overlay the image (all variants)
+- `left` and `right` variants stack vertically on mobile (<768px)
+- `fullscreen` maintains overlay layout on all screen sizes
+- `horizontal` uses flexible image height: `clamp(40vh, 50vh, 60vh)`
+
 #### EntityBentoGrid (Recommended)
 
 Display entities in a responsive bento grid with automatic layout:
@@ -452,19 +496,26 @@ const journey = await client.get<Journey>("/journeys/my-slug");
 
 ## Components Reference
 
-### `<OrganizationHero>`
+### `<EntityHero>`
 
-Display organization header with cover image and branding
+Display entity header with cover image and branding
 
 **Props:**
 
 - `org: Organisation` - Organization object (required)
+- `variant?: 'left' | 'right' | 'fullscreen' | 'horizontal'` - Layout variant (default: 'left')
 
 **Slots:**
 
-- `sub-title` - Content below organization name
-- `content` - Right-side content area
-- `background` - Custom background component
+- `sub-title` - Content below entity name (overlays image)
+- `content` - Main content area (position varies by variant)
+
+**Layout Behavior:**
+
+- `left`: Grid layout (image left, content right) on tablet+, stacks on mobile
+- `right`: Grid layout (content left, image right) on tablet+, stacks on mobile
+- `fullscreen`: Content overlays image at bottom left (all screen sizes)
+- `horizontal`: Image top with flexible height, content below (all screen sizes)
 
 ### `<EntityBentoGrid>`
 

package/nuxt/src/runtime/components/EntityCard.vue

@@ -1,16 +1,21 @@
 <template>
-  <motion.div
+  <component
+    :is="isLink ? NuxtLinkEl : motion.div"
+    v-bind="rootAttrs"
     class="ns-entity-card"
-    :initial="{ opacity: 0, y: 20 }"
-    :animate="{ opacity: 1, y: 0 }"
-    :transition="{ duration: 0.6, ease: [0.19, 1, 0.22, 1] }"
+    :initial="{ opacity: 0, scale: 0.95 }"
+    :whileInView="{ opacity: 1, scale: 1 }"
+    :transition="{ duration: 0.8, delay: 0.2, ease: [0.19, 1, 0.22, 1] }"
   >
     <!-- Image Container -->
     <div class="ns-entity-card__image">
-      <FlickeringGridBackground :max-opacity="0.05" color="#FFFFFF" />
+      <EntityImage
+        v-if="imageUrl"
+        :src="imageUrl"
+        :alt="imageAlt || 'Card image'"
+      />
 
-      <!-- Cover image if available -->
-      <EntityImage :src="imageUrl" :alt="imageAlt || 'Card image'" />
+      <FlickeringGridBackground v-else :max-opacity="0.05" color="#FFFFFF" />
     </div>
 
     <!-- Content overlay at bottom -->
@@ -22,7 +27,7 @@
         <slot name="description" />
       </p>
     </div>
-  </motion.div>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -36,9 +41,18 @@ interface Props {
 
   /** Image alt text */
   imageAlt?: string;
+
+  /** Navigation link (optional - makes card a NuxtLink) */
+  to?: string;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+
+const NuxtLinkEl = resolveComponent("NuxtLink");
+const isLink = computed(() => !!props.to);
+
+// Only pass valid attributes to the rendered root
+const rootAttrs = computed(() => (isLink.value ? { to: props.to } : {}));
 </script>
 
 <style scoped>
@@ -49,9 +63,8 @@ defineProps<Props>();
  */
 
 .ns-entity-card {
-  /* Glassmorphism effect - same as OrganizationHero glass container */
+  position: relative;
   background: rgba(255, 255, 255, 0.08);
-  backdrop-filter: blur(20px);
   border-radius: var(--ns-border-radius-md);
   border: 1px solid rgba(255, 255, 255, 0.15);
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
@@ -67,7 +80,6 @@ defineProps<Props>();
   cursor: pointer;
 }
 
-/* Hover effect */
 .ns-entity-card:hover {
   background: rgba(255, 255, 255, 0.12);
   border-color: rgba(255, 255, 255, 0.25);
@@ -75,7 +87,6 @@ defineProps<Props>();
   transform: translateY(-4px);
 }
 
-/* Active state */
 .ns-entity-card:active {
   transform: translateY(-2px);
 }
@@ -88,7 +99,8 @@ defineProps<Props>();
   position: relative;
   width: 100%;
   height: 100%; /* Fill parent height (works for bento grid cells) */
-  border-radius: var(--ns-border-radius-md);
+  border-radius: var(--ns-border-radius-sm);
+  overflow: hidden;
 
   /* Layout */
   display: flex;

package/nuxt/src/runtime/components/EntityHero.vue

@@ -0,0 +1,236 @@
+<template>
+  <!-- Glass Container with Layout Variants -->
+  <motion.div
+    class="ns-entity-hero__glass-container"
+    :class="`ns-entity-hero--${variant}`"
+    :initial="{ opacity: 0, scale: 0.95 }"
+    :animate="{ opacity: 1, scale: 1 }"
+    :transition="{ duration: 0.8, delay: 0.2, ease: [0.19, 1, 0.22, 1] }"
+  >
+    <!-- Image Container -->
+    <div class="ns-entity-hero__image">
+      <!-- Cover image if available -->
+      <EntityImage
+        v-if="org.coverImageUrl"
+        :src="org.coverImageUrl"
+        :alt="`${org.name} cover image`"
+      />
+
+      <FlickeringGridBackground v-else :max-opacity="0.05" color="#FFFFFF" />
+
+      <!-- Title and subtitle overlay (always over image) -->
+      <div class="ns-entity-hero__image-content">
+        <h1 class="ns-entity-hero__image-title">{{ org.name }}</h1>
+
+        <p class="ns-entity-hero__sub-title" v-if="$slots['sub-title']">
+          <slot name="sub-title" />
+        </p>
+
+        <!-- Content slot for fullscreen variant (under title) -->
+        <div
+          v-if="variant === 'fullscreen' && $slots['content']"
+          class="ns-entity-hero__content-overlay"
+        >
+          <slot name="content" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Content Area (for non-fullscreen variants) -->
+    <div
+      v-if="variant !== 'fullscreen' && $slots['content']"
+      class="ns-entity-hero__content"
+    >
+      <slot name="content" />
+    </div>
+  </motion.div>
+</template>
+
+<script setup lang="ts">
+import { motion } from "motion-v";
+import FlickeringGridBackground from "../internal/components/FlickeringGridBackground.vue";
+import EntityImage from "./EntityImage.vue";
+import type { Organisation } from "../../types/entities";
+
+interface Props {
+  /** Organization object */
+  org: Organisation;
+
+  /** Layout variant */
+  variant?: "left" | "right" | "fullscreen" | "horizontal";
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: "left",
+});
+</script>
+
+<style scoped>
+/**
+ * Entity Hero Component Styles
+ * Glassy container with multiple layout variants
+ * Uses New Schools SDK tokens (--ns-*)
+ */
+
+/* ============================================ */
+/* GLASS CONTAINER - BASE */
+/* ============================================ */
+
+.ns-entity-hero__glass-container {
+  position: relative;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: var(--ns-border-radius-md);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+
+  /* Mobile first: flex column (stack) */
+  display: flex;
+  flex-direction: column;
+  gap: var(--ns-spacing-md);
+  padding: var(--ns-spacing-md);
+}
+
+/* ============================================ */
+/* VARIANT: FULLSCREEN */
+/* ============================================ */
+
+.ns-entity-hero--fullscreen {
+  height: calc(100dvh - var(--ns-spacing-2xl));
+}
+
+.ns-entity-hero--fullscreen .ns-entity-hero__image {
+  flex: 1;
+  height: 100%;
+}
+
+/* ============================================ */
+/* VARIANT: LEFT (Default) */
+/* ============================================ */
+
+/* Mobile: stacked (default flex-column) */
+.ns-entity-hero--left {
+  height: calc(100dvh - var(--ns-spacing-2xl));
+}
+
+/* Tablet+: Grid with image left */
+@media (min-width: 768px) {
+  .ns-entity-hero--left {
+    display: grid;
+    grid-template-columns: 1.5fr 1fr;
+    gap: var(--ns-spacing-xl);
+  }
+}
+
+/* ============================================ */
+/* VARIANT: RIGHT */
+/* ============================================ */
+
+/* Mobile: stacked (default flex-column) */
+.ns-entity-hero--right {
+  height: calc(100dvh - var(--ns-spacing-2xl));
+}
+
+/* Tablet+: Grid with image right */
+@media (min-width: 768px) {
+  .ns-entity-hero--right {
+    display: grid;
+    grid-template-columns: 1fr 1.5fr;
+    gap: var(--ns-spacing-xl);
+  }
+
+  .ns-entity-hero--right .ns-entity-hero__image {
+    order: 2;
+  }
+
+  .ns-entity-hero--right .ns-entity-hero__content {
+    order: 1;
+  }
+}
+
+/* ============================================ */
+/* VARIANT: HORIZONTAL */
+/* ============================================ */
+
+.ns-entity-hero--horizontal {
+  min-height: calc(100dvh - var(--ns-spacing-2xl));
+}
+
+.ns-entity-hero--horizontal .ns-entity-hero__image {
+  height: clamp(40vh, 50vh, 60vh);
+}
+
+.ns-entity-hero--horizontal .ns-entity-hero__content {
+  flex: 1;
+}
+
+/* ============================================ */
+/* IMAGE CONTAINER */
+/* ============================================ */
+
+.ns-entity-hero__image {
+  border-radius: var(--ns-border-radius-md);
+  overflow: hidden;
+  position: relative;
+  min-height: 50vh;
+
+  background: linear-gradient(
+    180deg,
+    var(--ns-color-grey-900, #2d3748) 0%,
+    var(--ns-color-black, #1a202c) 100%
+  );
+
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+}
+
+/* Tablet+: auto height for grid layouts */
+@media (min-width: 768px) {
+  .ns-entity-hero--left .ns-entity-hero__image,
+  .ns-entity-hero--right .ns-entity-hero__image {
+    min-height: auto;
+  }
+}
+
+/* ============================================ */
+/* IMAGE CONTENT OVERLAY */
+/* ============================================ */
+
+.ns-entity-hero__image-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--ns-spacing-xl);
+  z-index: 3;
+}
+
+.ns-entity-hero__image-title {
+  margin: 0 0 var(--ns-spacing-sm) 0;
+  color: var(--ns-color-white);
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.ns-entity-hero__sub-title {
+  margin: 0 0 var(--ns-spacing-md) 0;
+  color: var(--ns-color-white);
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* Content overlay for fullscreen variant (under title/subtitle) */
+.ns-entity-hero__content-overlay {
+  margin-top: var(--ns-spacing-lg);
+}
+
+/* ============================================ */
+/* CONTENT AREA (Non-fullscreen variants) */
+/* ============================================ */
+
+.ns-entity-hero__content {
+  display: flex;
+  flex-direction: column;
+  padding: var(--ns-spacing-md);
+}
+</style>

package/nuxt/src/runtime/components/EntityImage.vue

@@ -37,8 +37,8 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  blurLayers: 5,
-  blurIntensity: 0.2,
+  blurLayers: 4,
+  blurIntensity: 0.3,
 });
 
 const segmentSize = 1 / (props.blurLayers + 1);
@@ -70,18 +70,11 @@ const getBlurLayerStyle = (index: number) => {
  */
 
 .ns-entity-image {
-  position: absolute;
-  top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
-  z-index: 1;
 }
 
 .ns-entity-image__picture {
-  position: absolute;
-  top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newschools/sdk",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "New Schools SDK - Multi-framework components and modules for integrating New Schools learning content",
   "type": "module",
   "main": "./nuxt/src/module.ts",

package/nuxt/src/runtime/components/OrganizationHero.vue

@@ -1,162 +0,0 @@
-<template>
-  <!-- Glass Container with Grid Layout -->
-  <motion.div
-    class="ns-org-hero__glass-container"
-    :initial="{ opacity: 0, scale: 0.95 }"
-    :animate="{ opacity: 1, scale: 1 }"
-    :transition="{ duration: 0.8, delay: 0.2, ease: [0.19, 1, 0.22, 1] }"
-  >
-    <!-- Image Container (Left) -->
-    <div class="ns-org-hero__image">
-      <FlickeringGridBackground :max-opacity="0.05" color="#FFFFFF" />
-
-      <!-- Cover image if available -->
-      <EntityImage :src="org.coverImageUrl" :alt="`${org.name} cover image`" />
-
-      <!-- Organisation name overlay -->
-      <div class="ns-org-hero__image-content">
-        <h1 class="ns-org-hero__image-title">{{ org.name }}</h1>
-
-        <p class="ns-org-hero__sub-title">
-          <slot name="sub-title" v-if="$slots['sub-title']" />
-        </p>
-      </div>
-    </div>
-
-    <!-- Content Area (Right) -->
-    <div class="ns-org-hero__content" v-if="$slots['content']">
-      <slot name="content" />
-    </div>
-  </motion.div>
-</template>
-
-<script setup lang="ts">
-import { motion } from "motion-v";
-import FlickeringGridBackground from "../internal/components/FlickeringGridBackground.vue";
-import EntityImage from "./EntityImage.vue";
-import type { Organisation } from "../../types/entities";
-
-interface Props {
-  /** Organization object */
-  org: Organisation;
-}
-
-defineProps<Props>();
-</script>
-
-<style scoped>
-/**
- * Organization Hero Component Styles
- * Glassy container with grid layout
- * Uses New Schools SDK tokens (--ns-*)
- */
-
-/* ============================================ */
-/* GLASS CONTAINER WITH GRID LAYOUT */
-/* ============================================ */
-
-.ns-org-hero__glass-container {
-  width: 100%;
-  height: calc(100dvh - var(--ns-spacing-2xl));
-  /* Glassmorphism effect */
-  background: rgba(255, 255, 255, 0.08);
-  backdrop-filter: blur(20px);
-  border-radius: var(--ns-border-radius-md);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-
-  /* Mobile first: flex column */
-  display: flex;
-  flex-direction: column;
-  gap: var(--ns-spacing-md);
-  padding: var(--ns-spacing-md);
-  overflow: hidden;
-}
-
-/* Tablet and up: Grid layout */
-@media (min-width: 768px) {
-  .ns-org-hero__glass-container {
-    display: grid;
-    grid-template-columns: 1.5fr 1fr;
-    gap: var(--ns-spacing-xl);
-    padding: var(--ns-spacing-lg);
-  }
-}
-
-/* ============================================ */
-/* IMAGE CONTAINER (LEFT) */
-/* ============================================ */
-
-.ns-org-hero__image {
-  /* Apple card style - rounded corners */
-  border-radius: var(--ns-border-radius-md);
-  overflow: hidden;
-  position: relative;
-
-  /* Mobile: ensure minimum height for empty state */
-  min-height: 100%;
-
-  background: linear-gradient(
-    180deg,
-    var(--ns-color-grey-900, #2d3748) 0%,
-    var(--ns-color-black, #1a202c) 100%
-  );
-
-  /* Layout */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Tablet and up: auto height (grid handles it) */
-@media (min-width: 768px) {
-  .ns-org-hero__image {
-    min-height: auto;
-    flex: initial;
-  }
-}
-
-.ns-org-hero__image--no-image {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: white;
-  z-index: 2;
-}
-
-.ns-org-hero__image-content {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: var(--ns-spacing-xl);
-  z-index: 3;
-}
-
-.ns-org-hero__image-title {
-  margin: 0;
-  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-.ns-org-hero__sub-title,
-.ns-org-hero__image-title {
-  color: var(--ns-color-white);
-  color: var(--ns-color-white);
-}
-
-.ns-org-hero__sub-title {
-  margin: 0;
-}
-
-/* ============================================ */
-/* CONTENT AREA (RIGHT) */
-/* ============================================ */
-
-.ns-org-hero__content {
-  /* Content area for text, purchase form, etc. */
-  display: flex;
-  flex-direction: column;
-  padding: var(--ns-spacing-md);
-}
-</style>