feat: preview templates, thumbnail features, 2 new org templates

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

@@ -2,7 +2,6 @@
   import type { OrgLandingPageProps } from '../types';
   import SecondaryActionButton from '../secondary-action-button.svelte';
   import { Button } from '../../../base/button';
-  import { BlurFade } from '../../animation/blurfade';
   import { BlurIn } from '../../animation/blurin';
   import { DotPattern } from '../../animation/dot-pattern';
   import EditableLandingSection from '../editable-section.svelte';
@@ -16,7 +15,7 @@
 
 <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"
+    class="ui:relative ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)] 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">
@@ -30,28 +29,24 @@
       >
         {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>
+      <p class="ui:text-lg ui:sm:text-xl ui:text-[var(--landing-bg)]/80 ui:mb-10">{hero.subheading}</p>
+      <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>
     </div>
   </section>
 </EditableLandingSection>