Feat/website improvements (#409)

* fix(ui): support href for links
* fix(website): fix duplicate data-hk attr
* fix(ui/website): fix ssr rendering for button/box/text components
* perf(website): hydration
* build(website): fix build
* fix(website): improvements
* feat(website): firefox editor steps improvements styles
* fix: colors for safari
* feat(website): header dynamic color
* feat(website): project showcase update image and styles
* fix(website): analytics card animation
* fix(website): analytics card styles improvements
* chore(website): lint and typecheck fix

Co-authored-by: Riccardo Perra <[email protected]>

Author: riccardoperra

apps/website/public/projects-showcase.png

@@ -27,15 +27,17 @@ export const card = style([
   },
   responsiveStyle({
     mobile: {
-      borderRadius: '32px',
+      borderRadius: [cardOuterRadius],
+      gap: '44px',
       minHeight: '512px',
       vars: {
-        [cardOuterRadius]: '32px',
+        [cardOuterRadius]: '24px',
+        [cardPadding]: '32px',
       },
     },
     desktop: {
+      gap: '96px',
       flexDirection: 'row',
-      borderRadius: '96px',
       minHeight: '564px',
       vars: {
         [cardOuterRadius]: '96px',
@@ -67,6 +69,9 @@ export const imageSection = style([
     opacity: 1,
     height: '300px',
     width: '100%',
+    // @ts-expect-error No present in types. This is for safari absolute + overflow hidden bug
+    '-webkitMaskImage':
+      '-webkit-radial-gradient(circle, white 100%, black 100%)',
   },
   responsiveStyle({
     mobile: {
@@ -83,7 +88,7 @@ export const imageSection = style([
 export const imageWrapper = style({
   aspectRatio: '2 / 1',
   flex: '0 0 auto',
-  borderRadius: '32px',
+  borderRadius: `16px`,
   height: '568px',
   left: '48px',
   overflow: 'hidden',

apps/website/public/projects-showcase.webp

@@ -1,4 +1,4 @@
-import {HStack, Link, Text, VStack} from '@codeimage/ui';
+import {HStack, Link, Text} from '@codeimage/ui';
 import {A} from '@solidjs/router';
 import * as styles from '~/components/Footer/Footer.css';
 
@@ -15,23 +15,20 @@ export default function Footer() {
             <Link
               class={styles.link}
               underline={true}
-              as={A}
               href={'https://github.com/riccardoperra/codeimage'}
               title="Github repository"
               children={'Github'}
             />
             <Link
               class={styles.link}
               underline={true}
-              as={A}
               href={'https://github.com/riccardoperra/codeimage/issues'}
               title="Issues"
               children={'Issues & Feedback'}
             />
             <Link
               class={styles.link}
               underline={true}
-              as={A}
               href={'https://github.com/riccardoperra/codeimage/releases'}
               title="Releases"
               children={'Releases'}

apps/website/src/components/FeatureCard/FeatureCard.css.ts

@@ -1,5 +1,4 @@
 import {themeVars} from '@codeimage/ui';
-import {darkGrayScale} from '@codeimage/ui/themes/darkTheme';
 import {createTheme, createVar, style} from '@vanilla-extract/css';
 
 export const [toolbarTheme, toolbarVars] = createTheme({
@@ -9,11 +8,14 @@ export const [toolbarTheme, toolbarVars] = createTheme({
 
 const headerBorderColor = createVar();
 
+export const headerBgColor = createVar();
+
 export const header = style([
   toolbarTheme,
   {
     vars: {
       [headerBorderColor]: 'rgba(0,0,0,0)',
+      [headerBgColor]: 'rgba(12, 12, 12, 0.6)',
     },
     display: 'flex',
     position: 'fixed',
@@ -24,7 +26,7 @@ export const header = style([
     transition: 'border-color 250ms ease-in-out',
     selectors: {
       '&[data-scrolled=true]': {
-        backgroundColor: `rgba(12, 12, 12, 0.6)`,
+        backgroundColor: headerBgColor,
         backdropFilter: 'saturate(180%) blur(20px)',
         // @ts-expect-error: Why not working
         '-webkitBackdropFilter': 'saturate(180%) blur(20px)',

apps/website/src/components/Footer/Footer.tsx

@@ -1,14 +1,15 @@
 import {Button} from '@codeimage/ui';
-import {A} from '@solidjs/router';
+import {assignInlineVars} from '@vanilla-extract/dynamic';
 import {createMemo, createSignal, onCleanup, onMount} from 'solid-js';
-import {injectBreakpoints} from '~/core/breakpoints';
+import {mainWebsiteLink} from '~/core/constants';
+import {getUiStore} from '~/ui';
 import {CodeImageLogoSvg} from '../CodeImageLogo/CodeImageLogoSvg';
 import {content} from '../Main/MainPage.css';
 import * as styles from './Header.css';
 
 export function Header() {
   const [scrolled, setScrolled] = createSignal(false);
-  const bp = injectBreakpoints();
+  const ui = getUiStore();
   onMount(() => {
     const contentEl = document.querySelector(`.${content}`) as HTMLElement;
     const observer = new IntersectionObserver(
@@ -25,15 +26,20 @@ export function Header() {
   const dataScrolled = createMemo(() => scrolled());
 
   return (
-    <div class={styles.header} data-scrolled={dataScrolled() ?? false}>
+    <div
+      class={styles.header}
+      style={assignInlineVars({
+        [styles.headerBgColor]: `${ui.value.navColor}20`,
+      })}
+      data-scrolled={dataScrolled() ?? false}
+    >
       <div class={styles.headerContent}>
         <div class={styles.headerContentInner}>
           <CodeImageLogoSvg height={32} width={164} />
           <div class={styles.headerActions}>
             <Button
               as={'a'}
-              link={true}
-              href="https://codeimage.dev"
+              href={mainWebsiteLink}
               variant="solid"
               theme="primary"
             >

apps/website/src/components/Header/Header.css.ts

@@ -133,15 +133,24 @@ export const rightCardAnalytics = style({
   gap: '24px',
 });
 
-export const analyticsCard = style({
-  width: '224px',
-  height: '140px',
-  boxSizing: 'content-box',
-  background: themeVars.backgroundColor.purple['200'],
-  padding: '24px',
-  borderRadius: '32px',
-  color: themeVars.textColor.gray['800'],
-});
+export const analyticsCard = style([
+  {
+    width: '224px',
+    height: '140px',
+    boxSizing: 'content-box',
+    background: themeVars.backgroundColor.purple['200'],
+    padding: '24px',
+    color: themeVars.textColor.gray['800'],
+  },
+  responsiveStyle({
+    mobile: {
+      borderRadius: `16px`,
+    },
+    desktop: {
+      borderRadius: '32px',
+    },
+  }),
+]);
 
 export const image = style({
   pointerEvents: 'none',

apps/website/src/components/Header/Header.tsx

@@ -1,6 +1,7 @@
 import {Badge, Box, SvgIconProps, Text} from '@codeimage/ui';
-import {animate, scroll} from 'motion';
-import {onMount} from 'solid-js';
+import {Motion} from '@motionone/solid';
+import {animate, inView, scroll} from 'motion';
+import {createSignal, FlowProps, onMount} from 'solid-js';
 import {
   FeatureCard,
   FeatureContent,
@@ -53,20 +54,27 @@ function DocumentText(props: SvgIconProps) {
 }
 
 export default function ComingSoon() {
-  let cardRef: HTMLDivElement;
+  let analyticsCardRef: HTMLDivElement;
   let themeBuilderRef: HTMLDivElement;
   let embedsRef: HTMLDivElement;
   const bp = injectBreakpoints();
 
+  const [analyticsInView, setAnalyticsInView] = createSignal(true);
+
   onMount(() => {
     if (!bp.isXs()) {
-      [cardRef, themeBuilderRef, embedsRef].forEach(ref => {
+      [analyticsCardRef, themeBuilderRef, embedsRef].forEach(ref => {
         scroll(animate(ref, {opacity: [0, 1, 1, 0], scale: [0.7, 1, 1, 1]}), {
           target: ref,
           offset: ['start end', 'end end', 'start start', 'end start'],
         });
       });
     }
+
+    inView(analyticsCardRef, () => {
+      setAnalyticsInView(true);
+      return () => setAnalyticsInView(false);
+    });
   });
 
   return (
@@ -120,11 +128,14 @@ export default function ComingSoon() {
           </FeatureCard>
         </Box>
         <Box marginTop={8}>
-          <FeatureCard ref={cardRef} class={styles.analyticsFeatureCard}>
+          <FeatureCard
+            ref={analyticsCardRef}
+            class={styles.analyticsFeatureCard}
+          >
             <FeatureImageContent bgColor={rootThemeVars.purple}>
               <div class={styles.analyticsCardContainer}>
                 <div class={styles.leftCardAnalytics}>
-                  <div class={styles.analyticsCard}>
+                  <AnalyticsCardBoxAnimation inView={analyticsInView()}>
                     <Text size={'lg'} weight={'bold'}>
                       Angular Change Detection
                     </Text>
@@ -139,8 +150,8 @@ export default function ComingSoon() {
                         views
                       </Box>
                     </Box>
-                  </div>
-                  <div class={styles.analyticsCard}>
+                  </AnalyticsCardBoxAnimation>
+                  <AnalyticsCardBoxAnimation inView={analyticsInView()}>
                     <Text size={'lg'} weight={'bold'}>
                       Solid Reactivity Example
                     </Text>
@@ -155,10 +166,10 @@ export default function ComingSoon() {
                         views
                       </Box>
                     </Box>
-                  </div>
+                  </AnalyticsCardBoxAnimation>
                 </div>
                 <div class={styles.rightCardAnalytics}>
-                  <div class={styles.analyticsCard}>
+                  <AnalyticsCardBoxAnimation inView={analyticsInView()}>
                     <Text size={'lg'} weight={'bold'}>
                       Rxjs operators
                     </Text>
@@ -173,8 +184,8 @@ export default function ComingSoon() {
                         views
                       </Box>
                     </Box>
-                  </div>
-                  <div class={styles.analyticsCard}>
+                  </AnalyticsCardBoxAnimation>
+                  <AnalyticsCardBoxAnimation inView={analyticsInView()}>
                     <Text size={'lg'} weight={'bold'}>
                       Jest vs Jasmine
                     </Text>
@@ -189,7 +200,7 @@ export default function ComingSoon() {
                         views
                       </Box>
                     </Box>
-                  </div>
+                  </AnalyticsCardBoxAnimation>
                 </div>
               </div>
             </FeatureImageContent>
@@ -199,7 +210,7 @@ export default function ComingSoon() {
               </Badge>
               <Box>
                 <Text size={'5xl'} weight={'bold'}>
-                  Measure your engagement
+                  Measure the engagement
                 </Text>
                 <Box marginY={4}>
                   <div class={styles.comingSoonBadge}>Coming in 2023</div>
@@ -220,3 +231,19 @@ export default function ComingSoon() {
     </div>
   );
 }
+
+function AnalyticsCardBoxAnimation(props: FlowProps<{inView: boolean}>) {
+  return (
+    <Motion.div
+      animate={{
+        transform: props.inView
+          ? 'translateY(0px) scale(1)'
+          : 'translateY(40px) scale(0.7)',
+        opacity: props.inView ? 1 : 0.4,
+      }}
+      class={styles.analyticsCard}
+    >
+      {props.children}
+    </Motion.div>
+  );
+}

apps/website/src/components/Landing/ComingSoon/ComingSoon.css.ts

@@ -30,14 +30,24 @@ export const backdrop = style({
   bottom: 0,
   left: 0,
   transform: 'translate3d(0px, -50%, 0) scale(0.90)',
-  filter: 'blur(500px) saturate(300%)',
+  filter: 'blur(500px) saturate(200%)',
   opacity: '0.7',
   transition: 'opacity 0.3s',
   borderRadius: '1.5rem',
   flex: 1,
   overflow: 'hidden',
   height: '500px',
   top: '50%',
+  '@media': {
+    '(min--moz-device-pixel-ratio:0)': {
+      // Trying to simulate Chrome/Safari blurry effect with firefox
+      transform: 'translate3d(0, 0, 0) scale(0.90)',
+      height: '100%',
+      top: 0,
+      opacity: 0.3,
+      filter: 'blur(200px)',
+    },
+  },
 });
 
 export const stickyContent = style([

apps/website/src/components/Landing/ComingSoon/ComingSoon.tsx

@@ -1,7 +1,7 @@
 import {backgroundColorVar} from '@codeimage/ui';
 import {assignInlineVars} from '@vanilla-extract/dynamic';
 import {inView, scroll} from 'motion';
-import {onMount} from 'solid-js';
+import {createEffect, onMount} from 'solid-js';
 import {
   gradientBlueBg,
   gradientPurpleBg,
@@ -12,10 +12,12 @@ import * as styles from './EditorSteps.css';
 import {injectEditorScene} from './scene';
 import {StepCardArea} from './StepCardScene/StepCardScene';
 
-export default function EditorSteps() {
+export default function EditorSteps(props: {test: number}) {
   const scene = injectEditorScene();
   let ref: HTMLElement;
 
+  createEffect(() => console.log(props.test, props));
+
   const backgrounds = {
     0: gradientBlueBg,
     1: gradientPurpleBg,

apps/website/src/components/Landing/EditorSteps/EditorSteps.css.ts

@@ -33,6 +33,12 @@ export const container = style([
         opacity: disabledOpacity,
       },
     },
+    '@media': {
+      '(min--moz-device-pixel-ratio:0)': {
+        // Trying to simulate Chrome/Safari blurry effect with firefox
+        backgroundColor: 'rgb(0 0 0 / 0.35)',
+      },
+    },
   },
   responsiveStyle({
     mobile: {

apps/website/src/components/Landing/EditorSteps/EditorSteps.tsx

@@ -33,14 +33,19 @@ export function createEditorScene() {
 
   const currentStep = createMemo(() => getStep(progress()));
 
+  const canAnimateNavbar = createMemo(() => progress() > 0);
+
   createEffect(
-    on([inView, currentStep], ([inView, currentStep]) => {
-      if (!inView) {
-        uiStore.set('navColor', undefined);
-      } else {
-        uiStore.set('navColor', stepsMainColors[currentStep]);
-      }
-    }),
+    on(
+      [inView, canAnimateNavbar, currentStep],
+      ([inView, canAnimateNavbar, currentStep]) => {
+        if (!inView) {
+          uiStore.set('navColor', undefined);
+        } else if (canAnimateNavbar) {
+          uiStore.set('navColor', stepsMainColors[currentStep]);
+        }
+      },
+    ),
   );
 
   return {