feat: hero svg components

deco-sites · Jan 4, 2024 · 15d1740 · 15d1740
1 parent 72d7fcd
commit 15d1740
Show file tree

Hide file tree

Showing 16 changed files with 6,329 additions and 786 deletions.
diff --git a/components/nrf/editor/Analytics.tsx b/components/nrf/editor/Analytics.tsx
diff --git a/components/nrf/editor/AppsIntegrations.tsx b/components/nrf/editor/AppsIntegrations.tsx
@@ -2,8 +2,7 @@
 export const AppsIntegrations = () => {
 
     return (
-
-<svg width="1090" height="745" viewBox="0 0 1090 745" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+<svg class="editor-feature" width="1090" height="745" viewBox="0 0 1090 745" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
 <g clip-path="url(#clip0_50_2260)">
 <g clip-path="url(#clip1_50_2260)">
 <rect x="50" width="1040" height="684.114" rx="16.5957" fill="black"/>

diff --git a/components/nrf/editor/ComponentLibrary.tsx b/components/nrf/editor/ComponentLibrary.tsx
diff --git a/components/nrf/editor/DesignSystem.tsx b/components/nrf/editor/DesignSystem.tsx
@@ -1,8 +1,4 @@
 import { AnimationTimeline } from "deco-sites/starting/animations/utils.ts";
-import {
-  DesignSystemCursor,
-  DesignSystemCursorPath,
-} from "deco-sites/starting/animations/assets/Cursors.tsx";
 
 export const DESIGN_SYSTEM_SEQUENCE: AnimationTimeline = [
   [
@@ -56,7 +52,7 @@ export const DESIGN_SYSTEM_SEQUENCE: AnimationTimeline = [
   [
     "#cursor-design-system",
     {
-      scale: ["1.0", "1.3", "1.0"],
+      scale: ["1.0", "1.2", "1.0"],
       x: "171px",
       y: "414px",
     },
@@ -80,7 +76,7 @@ export const DESIGN_SYSTEM_SEQUENCE: AnimationTimeline = [
   [
     "#cursor-design-system",
     {
-      scale: ["1.0", "1.3", "1.0"],
+      scale: ["1.0", "1.2", "1.0"],
 
         },
     {
@@ -103,7 +99,7 @@ export const DESIGN_SYSTEM_SEQUENCE: AnimationTimeline = [
   [
     "#cursor-design-system",
     {
-      scale: ["1.0", "1.3", "1.0"],
+      scale: ["1.0", "1.2", "1.0"],
 
         },
     {
@@ -126,7 +122,7 @@ export const DESIGN_SYSTEM_SEQUENCE: AnimationTimeline = [
   [
     "#cursor-design-system",
     {
-      scale: ["1.0", "1.3", "1.0"],
+      scale: ["1.0", "1.2", "1.0"],
 
         },
     {

diff --git a/components/nrf/editor/RealtimeEditor.tsx b/components/nrf/editor/RealtimeEditor.tsx
@@ -15,29 +15,19 @@ export const REALTIME_EDITOR_SEQUENCE: AnimationTimeline = [
     { width: ["291.5px", "20px"] },
     {
       at: 1.14,
-      duration: 0.06,
+      duration: 0.2,
       easing: "ease-out",
     },
   ],
   [
-    "#product-name-frame-tr",
+    "#product-name-frame-tr, #product-name-frame-br",
     { transform: ["translateX(0)", "translateX(-271px)"] },
     {
       at: 1.14,
-      duration: 0.06,
+      duration: 0.2,
       easing: "ease-out",
     },
   ],
-  [
-    "#product-name-frame-br",
-    { transform: ["translateX(0)", "translateX(-271px)"] },
-    {
-      at: 1.14,
-      duration: 0.06,
-      easing: "ease-out",
-    },
-  ],
-
   [
     "#product-name-placeholder",
     { opacity: 0 },
@@ -51,7 +41,25 @@ export const REALTIME_EDITOR_SEQUENCE: AnimationTimeline = [
     "#product-name",
     { width: ["0%", "160px"], opacity: 1 },
     {
-      at: 1.20,
+      at: 1.4,
+      duration: 1,
+      easing: "steps(12, end)",
+    },
+  ],
+  [
+    "#product-name-frame-br, #product-name-frame-tr",
+    { transform: ["translateX(-271px)", "translateX(0)"] },
+    {
+      at: 1.4,
+      duration: 1,
+      easing: "steps(12, end)",
+    },
+  ],
+  [
+    "#product-name-border",
+    { width: ["20px", "291.5px"] },
+    {
+      at: 1.4,
       duration: 1,
       easing: "steps(12, end)",
     },
@@ -301,7 +309,7 @@ export const RealtimeEditor = () => {
                   width="1040"
                   height="643.02"
                   transform="translate(50 41.0941)"
-                  fill="url(#pattern0)"
+                  fill="url(#realtime-p0)"
                   fill-opacity="0.25"
                 />
                 <g id="Product Header / 1 /">
@@ -332,7 +340,7 @@ export const RealtimeEditor = () => {
                             width="404"
                             height="551"
                             rx="6.44444"
-                            fill="url(#pattern1)"
+                            fill="url(#realtime-p1)"
                           />
                         </g>
                       </g>
@@ -413,7 +421,7 @@ export const RealtimeEditor = () => {
                               <text
                                 id="product-name"
                                 fill="white"
-                                xml:space="preserve"
+                                xmlSpace="preserve"
                                 style="white-space: pre"
                                 font-family="Albert Sans"
                                 font-size="48"
@@ -594,7 +602,7 @@ export const RealtimeEditor = () => {
       </g>
       <defs>
         <pattern
-          id="pattern0"
+          id="realtime-p0"
           patternContentUnits="objectBoundingBox"
           width="1"
           height="1"
@@ -605,7 +613,7 @@ export const RealtimeEditor = () => {
           />
         </pattern>
         <pattern
-          id="pattern1"
+          id="realtime-p1"
           patternContentUnits="objectBoundingBox"
           width="1"
           height="1"

diff --git a/components/nrf/editor/Segmentation.tsx b/components/nrf/editor/Segmentation.tsx
@@ -1,5 +1,5 @@
 export const Segmentation = () => {
-    return (
+return (
 <svg class="editor-feature" width="1090" height="745" viewBox="0 0 1090 745" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
 <g clip-path="url(#clip0_35_14022)">
 <g clip-path="url(#clip1_35_14022)">

diff --git a/components/nrf/hero/WebAnalytics.tsx b/components/nrf/hero/WebAnalytics.tsx
diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx
@@ -67,7 +67,15 @@ export type AvailableIcons =
   | "Visa"
   | "WhatsApp"
   | "WhatsApp"
-  | "WhiteArrow";
+  | "WhiteArrow"
+  /* NRF Icons */
+  | "RocketLaunch"
+  | "Sparkle"
+  | "Gauge"
+  | "Plugs"
+  | "FileSvg";
+
+
 
 interface Props extends JSX.SVGAttributes<SVGSVGElement> {
   /**

diff --git a/islands/NRF/Editor.tsx b/islands/NRF/Editor.tsx
@@ -4,35 +4,34 @@ import { useEffect } from "preact/hooks";
 import { animate, inView, stagger, timeline } from "motion";
 import { useSignal } from "@preact/signals";
 
-import { ComponentLibrary } from "deco-sites/starting/components/nrf/editor/ComponentLibrary.tsx";
-import { RealtimeEditor, REALTIME_EDITOR_SEQUENCE } from "deco-sites/starting/components/nrf/editor/RealtimeEditor.tsx";
-import { DesignSystem, DESIGN_SYSTEM_SEQUENCE} from "../../components/nrf/editor/DesignSystem.tsx";
+import { ComponentLibrary,
+COMPONENT_LIBRARY_SEQUENCE } from "deco-sites/starting/components/nrf/editor/ComponentLibrary.tsx";
+import {
+  RealtimeEditor,
+  REALTIME_EDITOR_SEQUENCE,
+} from "deco-sites/starting/components/nrf/editor/RealtimeEditor.tsx";
+import {
+  DesignSystem,
+  DESIGN_SYSTEM_SEQUENCE,
+} from "../../components/nrf/editor/DesignSystem.tsx";
 import { FullCode } from "../../components/nrf/editor/FullCode.tsx";
 import { AppsIntegrations } from "../../components/nrf/editor/AppsIntegrations.tsx";
 import { Segmentation } from "../../components/nrf/editor/Segmentation.tsx";
-import { Analytics } from "../../components/nrf/editor/Analytics.tsx";
-import { DesignSystemCursor, DesignSystemCursorPath } from "deco-sites/starting/animations/assets/Cursors.tsx";
+import { Analytics, ANALYTICS_SEQUENCE } from "../../components/nrf/editor/Analytics.tsx";
 
+/**
+ * @title {{{key}}}
+ **/
 export interface EditorFeature {
   title: string;
   subtitle: string;
-  image?: ImageWidget;
+  key: string;
 }
 
 export interface Props {
   features: EditorFeature[];
 }
 
-const sections: string[] = [
-  "Component Library",
-  "No-code editing",
-  "Natural Language",
-  "Themes",
-  "Code editing",
-  "Integrate & Extend",
-  // "Multivariate Testing",
-];
-
 const svgs = [
   ComponentLibrary,
   RealtimeEditor,
@@ -41,6 +40,17 @@ const svgs = [
   AppsIntegrations,
   Segmentation,
   Analytics,
+];
+
+const ANIMATION_TIMELINES = [
+  COMPONENT_LIBRARY_SEQUENCE,
+  REALTIME_EDITOR_SEQUENCE,
+  DESIGN_SYSTEM_SEQUENCE,
+  DESIGN_SYSTEM_SEQUENCE,
+  DESIGN_SYSTEM_SEQUENCE,
+  DESIGN_SYSTEM_SEQUENCE,
+  ANALYTICS_SEQUENCE,
+  DESIGN_SYSTEM_SEQUENCE,
 ]
 
 export default function Editor({ features }: Props) {
@@ -95,7 +105,8 @@ export default function Editor({ features }: Props) {
         { duration: 0.3 }
       );
 
-      timeline(DESIGN_SYSTEM_SEQUENCE)
+      timeline(ANIMATION_TIMELINES[index]);
+
       animate(
         `#feature-title-${index}`,
         { color: colorValue, transform: scaleValue },
@@ -190,7 +201,7 @@ export default function Editor({ features }: Props) {
           <div class="sticky h-screen top-0 flex items-center justify-center">
             <ul class="text-[#52525B] whitespace-nowrap space-y-2">
               <li class="text-[#02F67C]">How it Works</li>
-              {sections.map((section, idx) => (
+              {features.map(({ key: section }, idx) => (
                 <li id={`feature-title-${idx}`} key={idx}>
                   {section}
                 </li>

diff --git a/islands/NRF/Features.tsx b/islands/NRF/Features.tsx
@@ -20,40 +20,50 @@ export interface Props {
 
 function FeatureCard({ icon, title, text }: Card) {
   return (
-    <div class="feature-card transform translate-y-16 group border-l border-transparent duration-200 hover:border-[#02F67C] w-full flex flex-col gap-8 px-8 whitespace-pre-line opacity-0">
-      {icon && <Icon id={icon} size={32} />}
-      <div class="space-y-4">
+    <div class="feature-card transform translate-y-16 group border-l border-transparent duration-200 w-full flex flex-col gap-8 py-10 px-12 whitespace-pre-line opacity-0">
+      {icon && (
+        <div class="p-6 rounded-full bg-[#113032] text-[#02F67C]">
+          <Icon id={icon} size={48} />
+        </div>
+      )}
+      <div class="space-y-4 text-center">
         <div
           class="text-2xl font-semibold leading-[110%]"
           dangerouslySetInnerHTML={{ __html: title }}
         />
-        <p class="leading-[120%] text-zinc-400" dangerouslySetInnerHTML={{ __html: text }} />
+        <p
+          class="leading-[120%]"
+          dangerouslySetInnerHTML={{ __html: text }}
+        />
       </div>
     </div>
   );
 }
 
 export default function Features({ title, cards }: Props) {
   useEffect(() => {
-    inView(".features", ({ target }) => {
-      console.log("in view");
-      animate(
-        target.querySelectorAll(".feature-card"),
-        { opacity: 1, transform: "translateY(0px)" },
-        { delay: stagger(0.1), duration: 1, easing: "ease-out" }
-      );
-    }, {
-      margin: "0px 0px -100px 0px",
-    });
+    inView(
+      ".features",
+      ({ target }) => {
+        animate(
+          target.querySelectorAll(".feature-card"),
+          { opacity: 1, transform: "translateY(0px)" },
+          { delay: stagger(0.1), duration: 1, easing: "ease-out" }
+        );
+      },
+      {
+        margin: "0px 0px -100px 0px",
+      }
+    );
   }, []);
 
   return (
     <section class="bg-black text-white py-20">
       <div class="lg:container mx-auto flex justify-center items-center flex-col gap-20">
-        <h2 class="font-semibold text-[40px] leading-[1.18] text-center">
+        <h2 class="font-medium text-[72px] leading-[100%] text-center max-w-4xl">
           {title}
         </h2>
-        <div class="features relative grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div class="features">
           {cards?.map((card) => (
             <FeatureCard {...card} />
           ))}