feat: certificates, landing pages, ai tutor, website update, compliance

packages/ui/src/custom/org-landing-page/classic/hero.svelte

@@ -5,6 +5,7 @@
   import { BlurFade } from '../../animation/blurfade';
   import { BlurIn } from '../../animation/blurin';
   import { DotPattern } from '../../animation/dot-pattern';
+  import EditableLandingSection from '../editable-section.svelte';
 
   interface Props {
     hero: OrgLandingPageProps['hero'];
@@ -13,42 +14,44 @@
   let { hero }: Props = $props();
 </script>
 
-<section
-  class="ui:relative ui:bg-foreground ui:text-background ui:overflow-hidden ui:py-24 ui:sm:py-32 ui:px-6 ui:lg:px-8"
->
-  {#if hero.image}
-    <div class="ui:absolute ui:inset-0 ui:opacity-10">
-      <img src={hero.image} alt="Background" class="ui:w-full ui:h-full ui:object-cover ui:grayscale" />
-    </div>
-  {/if}
-  <DotPattern fillColor="rgb(255 255 255 / 0.35)" class="ui:opacity-[0.06]" />
-  <div class="ui:relative ui:max-w-3xl ui:mx-auto ui:text-center">
-    <BlurIn
-      class="ui:text-4xl ui:sm:text-5xl ui:lg:text-6xl ui:font-bold ui:tracking-tight ui:mb-6 ui:leading-tight ui:drop-shadow-none"
-    >
-      {hero.heading}
-    </BlurIn>
-    <BlurFade delay={0.15} once={true}>
-      <p class="ui:text-lg ui:sm:text-xl ui:text-background/80 ui:mb-10">{hero.subheading}</p>
-    </BlurFade>
-    <BlurFade delay={0.3} once={true}>
-      <div class="ui:flex ui:flex-col ui:sm:flex-row ui:justify-center ui:gap-4">
-        <Button
-          href={hero.primaryAction.href}
-          disabled={hero.primaryAction.disabled ?? false}
-          size="lg"
-          class="ui:px-8 ui:font-semibold"
-        >
-          {hero.primaryAction.label}
-        </Button>
-        {#if hero.secondaryAction}
-          <SecondaryActionButton
-            href={hero.secondaryAction.href}
-            label={hero.secondaryAction.label}
-            variant="classic"
-          />
-        {/if}
+<EditableLandingSection sectionKey="hero">
+  <section
+    class="ui:relative ui:bg-foreground ui:text-background ui:overflow-hidden ui:py-24 ui:sm:py-32 ui:px-6 ui:lg:px-8"
+  >
+    {#if hero.image}
+      <div class="ui:absolute ui:inset-0 ui:opacity-10">
+        <img src={hero.image} alt="Background" class="ui:w-full ui:h-full ui:object-cover ui:grayscale" />
       </div>
-    </BlurFade>
-  </div>
-</section>
+    {/if}
+    <DotPattern fillColor="rgb(255 255 255 / 0.35)" class="ui:opacity-[0.06]" />
+    <div class="ui:relative ui:max-w-3xl ui:mx-auto ui:text-center">
+      <BlurIn
+        class="ui:text-4xl ui:sm:text-5xl ui:lg:text-6xl ui:font-bold ui:tracking-tight ui:mb-6 ui:leading-tight ui:drop-shadow-none"
+      >
+        {hero.heading}
+      </BlurIn>
+      <BlurFade delay={0.15} once={true}>
+        <p class="ui:text-lg ui:sm:text-xl ui:text-background/80 ui:mb-10">{hero.subheading}</p>
+      </BlurFade>
+      <BlurFade delay={0.3} once={true}>
+        <div class="ui:flex ui:flex-col ui:sm:flex-row ui:justify-center ui:gap-4">
+          <Button
+            href={hero.primaryAction.href}
+            disabled={hero.primaryAction.disabled ?? false}
+            size="lg"
+            class="ui:px-8 ui:font-semibold"
+          >
+            {hero.primaryAction.label}
+          </Button>
+          {#if hero.secondaryAction}
+            <SecondaryActionButton
+              href={hero.secondaryAction.href}
+              label={hero.secondaryAction.label}
+              variant="classic"
+            />
+          {/if}
+        </div>
+      </BlurFade>
+    </div>
+  </section>
+</EditableLandingSection>