From 15d17404aa9298aee2f0ca630f7274da42504ea1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ricles=20Emanuel?= Date: Thu, 4 Jan 2024 17:55:47 -0300 Subject: [PATCH] feat: hero svg components --- components/nrf/editor/Analytics.tsx | 3299 +++++++++++++++++--- components/nrf/editor/AppsIntegrations.tsx | 3 +- components/nrf/editor/ComponentLibrary.tsx | 1267 +++++++- components/nrf/editor/DesignSystem.tsx | 12 +- components/nrf/editor/RealtimeEditor.tsx | 46 +- components/nrf/editor/Segmentation.tsx | 2 +- components/nrf/hero/WebAnalytics.tsx | 1998 ++++++++++++ components/ui/Icon.tsx | 10 +- islands/NRF/Editor.tsx | 47 +- islands/NRF/Features.tsx | 42 +- manifest.gen.ts | 190 +- sections/NRF/BlogPosts.tsx | 121 + sections/NRF/Hero.tsx | 38 +- static/sprites.svg | 15 + static/tailwind.css | 2 +- tailwind.css | 23 +- 16 files changed, 6329 insertions(+), 786 deletions(-) create mode 100644 components/nrf/hero/WebAnalytics.tsx create mode 100644 sections/NRF/BlogPosts.tsx diff --git a/components/nrf/editor/Analytics.tsx b/components/nrf/editor/Analytics.tsx index 6a34cf01..35bb3264 100644 --- a/components/nrf/editor/Analytics.tsx +++ b/components/nrf/editor/Analytics.tsx @@ -1,447 +1,2856 @@ -export const Analytics = () => { - - return ( +import { AnimationTimeline } from "deco-sites/starting/animations/utils.ts"; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +export const ANALYTICS_SEQUENCE: AnimationTimeline = [ + [ + "#cursor-analytics", + { + opacity: [0, 0, 1], + x: ["-40px", "120px"], + y: ["200px", "80px"], + }, + { + at: 0.08, + duration: 1, + easing: "ease", + }, + ], + [ + "#cursor-analytics", + { + scale: ["1.0", "1.1", "1.0"], + }, + { + at: 1.08, + duration: 0.2, + easing: "ease", + }, + ], + [ + "#analytics-plausible", + { + opacity: [0, 1], + y: ["50px", "0"], + }, + { + duration: 0.5, + }, + ], + [ + "#cursor-analytics", + { + x: "720px", + y: "80px", + }, + { + at: 1.28, + duration: 1, + easing: "ease", + }, + ], + [ + "#cursor-analytics", + { + scale: ["1.0", "1.1", "1.0"], + }, + { + at: 2.28, + duration: 0.2, + easing: "ease", + }, + ], + [ + "#analytics-hyperdx", + { + opacity: [0, 1], + y: ["50px", "0"], + }, + { + duration: 0.5, + }, + ], + [ + "#cursor-analytics", + { + x: "750px", + y: "430px", + }, + { + at: 2.48, + duration: 1, + easing: "ease", + }, + ], + [ + "#cursor-analytics", + { + scale: ["1.0", "1.1", "1.0"], + }, + { + at: 3.48, + duration: 0.2, + easing: "ease", + }, + ], + [ + "#analytics-cwv", + { + opacity: [0, 1], + y: ["50px", "0"], + }, + { + duration: 0.5, + }, + ], -)} \ No newline at end of file +]; +export const Analytics = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/components/nrf/editor/AppsIntegrations.tsx b/components/nrf/editor/AppsIntegrations.tsx index 07b6ddc5..a843a120 100644 --- a/components/nrf/editor/AppsIntegrations.tsx +++ b/components/nrf/editor/AppsIntegrations.tsx @@ -2,8 +2,7 @@ export const AppsIntegrations = () => { return ( - - + diff --git a/components/nrf/editor/ComponentLibrary.tsx b/components/nrf/editor/ComponentLibrary.tsx index 44607e9c..a8a7f8de 100644 --- a/components/nrf/editor/ComponentLibrary.tsx +++ b/components/nrf/editor/ComponentLibrary.tsx @@ -1,159 +1,1112 @@ +import { AnimationTimeline } from "deco-sites/starting/animations/utils.ts"; -export const ComponentLibrary = () => { - -return ( +export const COMPONENT_LIBRARY_SEQUENCE: AnimationTimeline = [ + [ + "#library", + { + opacity: [0,1], + scale: [0.3, 1], + }, + { + at: "1.05", + duration: 0.5, + easing: "ease-out", + }, + ], + [ + "#library-product-image", + { + opacity: [0, 0.3], + scale: 0.5, + x: [370, 120], + y: [430, 100], + transformOrigin: "0 0" + }, { + at: "2.0", + duration: 1 + } + ], + [ + "#library-product-image", + { + transformOrigin: "-60px -50px", + opacity: [0.4, 0], + scale: [0.5, 0.6], + }, { + at: "3.0", + duration: 0.2 + } + ], + [ + "#library-product-image", + { + opacity: [0, 0, 1], + scale: 1, + x: 0, + y: 0, + transformOrigin: "201px 188px" + }, { + at: "3.2", + duration: 0.5, + } + ], + [ + "#library-product-description", + { + opacity: [0, 0.3], + scale: 0.5, + x: [0, 320], + y: [430, 100], + transformOrigin: "0 0" + }, { + at: "3.0", + duration: 1 + } + ], + [ + "#library-product-description", + { + transformOrigin: "-160px -60px", + opacity: [0.4, 0], + scale: [0.5, 0.6], + }, { + at: "4.0", + duration: 0.2 + } + ], + [ + "#library-product-description", + { + opacity: [0, 0, 1], + scale: 1, + x: 0, + y: 0, + transformOrigin: "182px 110px" + }, { + at: "4.2", + duration: 0.5, + } + ], + [ + "#library-product-form", + { + opacity: [0, 0.3], + scale: 0.5, + x: [240, 320], + y: [430, 200], + transformOrigin: "0 0" + }, { + at: "3.0", + duration: 1 + } + ], + [ + "#library-product-form", + { + transformOrigin: "-160px -60px", + opacity: [0.4, 0], + scale: [0.5, 0.6], + }, { + at: "4.0", + duration: 0.2 + } + ], + [ + "#library-product-form", + { + opacity: [0, 0, 1], + scale: 1, + x: 0, + y: 0, + transformOrigin: "182px 110px" + }, { + at: "4.2", + duration: 0.5, + } + ], +]; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -)}; +export const ComponentLibrary = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/components/nrf/editor/DesignSystem.tsx b/components/nrf/editor/DesignSystem.tsx index e48a9017..c821eca7 100644 --- 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 index 7cf730d9..12476189 100644 --- 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" /> @@ -332,7 +340,7 @@ export const RealtimeEditor = () => { width="404" height="551" rx="6.44444" - fill="url(#pattern1)" + fill="url(#realtime-p1)" /> @@ -413,7 +421,7 @@ export const RealtimeEditor = () => { { { /> { - return ( +return ( diff --git a/components/nrf/hero/WebAnalytics.tsx b/components/nrf/hero/WebAnalytics.tsx new file mode 100644 index 00000000..bded9a1b --- /dev/null +++ b/components/nrf/hero/WebAnalytics.tsx @@ -0,0 +1,1998 @@ +export const WebAnalytics = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx index 54097c9f..614d7730 100644 --- 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 { /** diff --git a/islands/NRF/Editor.tsx b/islands/NRF/Editor.tsx index 3915658d..52716dd1 100644 --- 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) {