feat(docs): Created WebExtensionSection

WIP morfeojs#707

examples/nextra/package.json

@@ -18,6 +18,7 @@
     "@morfeo/web": "workspace:*",
     "@types/node": "18.15.3",
     "clsx": "^1.2.1",
+    "framer-motion": "^10.12.7",
     "next": "13.2.4",
     "nextra": "2.4.0",
     "nextra-theme-docs": "2.4.0",

examples/nextra/src/components/FadeInBox/FadeInBox.tsx

@@ -0,0 +1,24 @@
+import { motion, MotionProps } from 'framer-motion';
+import { PropsWithChildren, RefObject } from 'react';
+
+type Props = {
+  ref?: RefObject<HTMLDivElement>;
+} & React.HTMLAttributes<HTMLDivElement> &
+  MotionProps;
+
+export const FadeInBox: React.FC<PropsWithChildren<Props>> = ({
+  children,
+  ...rest
+}) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 100 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ margin: '-35%', once: true }}
+      transition={{ duration: 0.6 }}
+      {...rest}
+    >
+      {children}
+    </motion.div>
+  );
+};

examples/nextra/src/components/FadeInBox/index.ts

@@ -0,0 +1 @@
+export * from './FadeInBox';

examples/nextra/src/components/WebExtensionSection/WebExtensionSection.tsx

@@ -0,0 +1,145 @@
+import { morfeo } from '@morfeo/css';
+import Image from 'next/image';
+import Link from 'next/link';
+import { WebExtensionStepProps } from './types';
+import { WebExtensionStep } from './WebExtensionStep';
+import { FadeInBox } from '../FadeInBox';
+
+const stepList: WebExtensionStepProps[] = [
+  {
+    title: 'Your design system, directly on your browser',
+    body: 'Lorem ipsum dolor sit amet consectetur. Varius commodo tempus adipiscing pharetra quis euismod. ',
+    image: {
+      src: '/web_extension.png',
+      alt: 'Morfeo web extension',
+    },
+  },
+  {
+    title: 'Copy alias and code in just one click',
+    body: 'Lorem ipsum dolor sit amet consectetur. Varius commodo tempus adipiscing pharetra quis euismod. ',
+    image: {
+      src: '/web_extension.png',
+      alt: 'Morfeo web extension',
+    },
+  },
+  {
+    title: 'Your theme and components will be automagically documented',
+    body: 'Lorem ipsum dolor sit amet consectetur. Varius commodo tempus adipiscing pharetra quis euismod. ',
+    image: {
+      src: '/web_extension.png',
+      alt: 'Morfeo web extension',
+    },
+  },
+  {
+    title: 'Easily find all you need',
+    body: 'Lorem ipsum dolor sit amet consectetur. Varius commodo tempus adipiscing pharetra quis euismod. Varius commodo tempus adipiscing pharetra quis euismod.',
+    image: {
+      src: '/web_extension.png',
+      alt: 'Morfeo web extension',
+    },
+  },
+];
+
+const classes = morfeo.css({
+  mainContainer: {
+    w: '100',
+    textAlign: 'center',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    mb: {
+      default: '3xl',
+      sm: 'xl',
+    },
+  },
+  title: {
+    componentName: 'Typography',
+    variant: 'display',
+    lineHeight: 'none',
+    mb: 'xs',
+    '& span': {
+      textGradient: 'text.primary',
+    },
+  },
+  imageCover: {
+    w: '100',
+    h: {
+      default: 'raw:200px',
+      sm: 'raw: 600px',
+    },
+    position: 'relative',
+  },
+  image: {
+    w: '100',
+    h: '100',
+    objectFit: 'contain',
+  },
+  textContainer: {
+    maxW: 'raw:800px',
+    mb: 'm',
+  },
+  badge: {
+    mb: 'xl',
+  },
+  stepContainer: {
+    w: '100',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: {
+      default: '5xl',
+      sm: 'xl',
+    },
+    '& > div:nth-child(odd)': {
+      flexDirection: {
+        default: 'column',
+        sm: 'row',
+      },
+    },
+  },
+});
+
+export const WebExtensionSection: React.FC = () => {
+  return (
+    <section>
+      <FadeInBox className={classes.mainContainer}>
+        <div className={classes.textContainer}>
+          <h1 className={classes.title}>
+            The web extension you have always <span>dreamed</span> of
+          </h1>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem
+            necessitatibus hic dolor rerum minus blanditiis consectetur, eos
+            architecto repellat recusandae deserunt sint ratione placeat
+            voluptate quae
+          </p>
+        </div>
+        <Link
+          href="https://chrome.google.com/webstore/detail/morfeo/phhhjdmeicikchjnpepljcdgbmipipcl"
+          passHref={true}
+        >
+          <Image
+            width={220}
+            height={100}
+            src="/chrome_market_badge.png"
+            alt="Chrome Web Store badge"
+            className={classes.badge}
+          />
+        </Link>
+        <div className={classes.imageCover}>
+          <Image
+            src="/web_extension.png"
+            alt="Morfeo screenshot"
+            className={classes.image}
+            fill
+          />
+        </div>
+      </FadeInBox>
+      <div className={classes.stepContainer}>
+        {stepList.map(step => (
+          <WebExtensionStep key={step.title} {...step} />
+        ))}
+      </div>
+    </section>
+  );
+};

examples/nextra/src/components/WebExtensionSection/WebExtensionStep.tsx

@@ -0,0 +1,83 @@
+import { morfeo } from '@morfeo/css';
+import Image from 'next/image';
+import { WebExtensionStepProps } from './types';
+import { FadeInBox } from '../FadeInBox';
+
+const classes = morfeo.css({
+  container: {
+    w: '100',
+    h: {
+      default: 'none',
+      sm: '75vh',
+    },
+    minH: {
+      default: '50vh',
+      sm: 'none',
+    },
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: {
+      default: 's',
+      sm: '5xl',
+    },
+    flexDirection: {
+      default: 'column',
+      sm: 'row-reverse',
+    },
+  },
+  textContainer: {
+    display: 'flex',
+    alignItems: {
+      default: 'center',
+      sm: 'flex-start',
+    },
+    justifyContent: 'center',
+    flex: {
+      default: 'none',
+      sm: '1',
+    },
+    flexDirection: 'column',
+  },
+  title: {
+    componentName: 'Typography',
+    variant: 'h1',
+    lineHeight: 'none',
+    mb: '2xs',
+  },
+  imageCover: {
+    h: {
+      default: 'raw:200px',
+      sm: '100',
+    },
+    w: '100',
+    flex: {
+      default: 'none',
+      sm: '2',
+    },
+    position: 'relative',
+  },
+  image: {
+    w: '100',
+    h: '100',
+    objectFit: 'contain',
+  },
+});
+
+export const WebExtensionStep: React.FC<WebExtensionStepProps> = ({
+  body,
+  image,
+  title,
+}) => {
+  return (
+    <FadeInBox className={classes.container}>
+      <div className={classes.textContainer}>
+        <h1 className={classes.title}>{title}</h1>
+        <p>{body}</p>
+      </div>
+      <div className={classes.imageCover}>
+        <Image src={image.src} alt={image.alt} fill className={classes.image} />
+      </div>
+    </FadeInBox>
+  );
+};

examples/nextra/src/components/WebExtensionSection/index.ts

@@ -0,0 +1 @@
+export * from './WebExtensionSection';

examples/nextra/src/components/WebExtensionSection/types.ts

@@ -0,0 +1,8 @@
+export type WebExtensionStepProps = {
+  title: string;
+  body: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+};

examples/nextra/src/pages/index.mdx

@@ -3,13 +3,16 @@ import { FeatureCards } from '@/components/FeatureCards';
 import { HowItWorks } from '@/components/HowItWorks';
 import { BundleSize } from '@/components/BundleSize';
 import { GetStartedSection } from '@/components/GetStartedSection';
+import { WebExtensionSection } from '@/components/WebExtensionSection';
 
 <Hero />
 
 <FeatureCards />
 
 <HowItWorks />
 
+<WebExtensionSection />
+
 <BundleSize />
 
 <GetStartedSection />