Improve homepage

LinwoodDev · Dec 28, 2023 · 615253f · 615253f
1 parent f57ccd2
commit 615253f
Show file tree

Hide file tree

Showing 8 changed files with 297 additions and 143 deletions.
diff --git a/docs/src/components/DownloadButton.tsx b/docs/src/components/DownloadButton.tsx
@@ -1,7 +1,76 @@
+import Link from '@docusaurus/Link';
+import Translate from '@docusaurus/Translate';
+import clsx from 'clsx';
 import React from 'react'
+import UAParser from 'ua-parser-js';
 
+export function DownloadAppButton({className} : {className?: string}) {
+    const [platform, setPlatform] = React.useState('');
+    React.useEffect(() => {
+      const parser = new UAParser();
+      const uaPlatform = parser.getOS().name;
+      // Test if it is a linux distro
+      if (['Raspbian', 'Debian', 'Ubuntu', 'Linux Mint', 'Fedora', 'Arch', 'CentOS', 'Red Hat', 'Manjaro'].includes(uaPlatform)) {
+        setPlatform('Linux');
+      } else {
+        setPlatform(uaPlatform);
+      }
+    }, []);
+    return (<div className="dropdown dropdown--hoverable">
+        <a href="/downloads" className={clsx("button button--primary button--lg", className)}>Download</a>
+        <ul className="dropdown__menu">
+            <li>
+                {platform === 'Windows' &&
+                    <Link
+                        className="dropdown__link"
+                        to="/downloads/windows">
+                        <Translate description="homepage windows button">
+                            Download for Windows
+                        </Translate>
+                    </Link>
+                }
+                {platform === 'Linux' &&
+                    <Link
+                        className="dropdown__link"
+                        to="/downloads/linux">
+                        <Translate description="homepage linux button">
+                            Download for Linux
+                        </Translate>
+                    </Link>
+                }
+                {platform === 'Android' &&
+                    <Link
+                        className="dropdown__link"
+                        to="/downloads/android">
+                        <Translate description="homepage android button">
+                            Download for Android
+                        </Translate>
+                    </Link>
+                }
+            </li>
+            <li>
+                <Link
+                    className="dropdown__link"
+                    to="https://butterfly.linwood.dev">
+                    <Translate description="homepage web button">
+                        Open the web app
+                    </Translate>
+                </Link>
+            </li>
+            <li>
+                <Link
+                    className="dropdown__link"
+                    to="/downloads">
+                    <Translate description="homepage downloads button">
+                        Downloads
+                    </Translate>
+                </Link>
+            </li>
+        </ul>
+    </div>);
+}
 
-export default function DownloadButton({className, href, children, after}) {
+export default function DownloadButton({ className, href, children, after }) {
     function onClick() {
         // Open thank you page after download
         console.log('Downloading...')

diff --git a/docs/src/components/HomepageDescription.module.css b/docs/src/components/HomepageDescription.module.css
@@ -0,0 +1,10 @@
+/* stylelint-disable docusaurus/copyright-header */
+
+.description {
+  max-width: 600px;
+  margin: 0 auto;
+  text-align: center;
+}
+.description span {
+    font-size: 1.5rem;
+}
diff --git a/docs/src/components/HomepageDescription.tsx b/docs/src/components/HomepageDescription.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './HomepageDescription.module.css';
+import Translate from '@docusaurus/Translate';
+
+export default function HomepageDescription() {
+  return (
+    <section className={`${styles.description} margin-vert--xl padding--md`}>
+      <span>
+        <Translate description="Features simple description">
+            Create and manage your notes with ease in a simple, beautiful and powerful application.
+        </Translate>
+      </span>
+    </section>
+  );
+}
diff --git a/docs/src/components/HomepageFeatures.module.css b/docs/src/components/HomepageFeatures.module.css
@@ -4,10 +4,46 @@
   display: flex;
   align-items: center;
   padding: 2rem 0;
-  width: 100%;
+}
+
+.features h2 {
+  font-size: 2rem;
+  text-align: center;
+  margin-bottom: 2rem;
+  margin-top: 5rem;
 }
 
 .featureSvg {
   height: 200px;
   width: 200px;
 }
+
+.showcase {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.showcaseImg {
+    width: 100%;
+    height: auto;
+    position: sticky;
+    padding: 1rem;
+    top: 50%;
+    margin-top: 50%;
+    transform: translateY(-50%);
+}
+
+.showcaseText {
+    text-align: center;
+    margin: 5rem 0;
+    list-style-type: none;
+    min-height: 50vh;
+    vertical-align: middle;
+}
+
+.showcaseButton {
+    text-align: center;
+    margin: 5rem 0;
+    list-style-type: none;
+    min-height: 100vh;
+}
diff --git a/docs/src/components/HomepageFeatures.tsx b/docs/src/components/HomepageFeatures.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from './HomepageFeatures.module.css';
 import Translate from '@docusaurus/Translate';
+import { DownloadAppButton } from './DownloadButton';
 
-const FeatureList = [
+const Principals = [
     {
         title: (<Translate description="Features cross-platform title">Cross platform</Translate>),
         Svg: require('../../static/img/undraw_progressive_app_m-9-ms.svg').default,
@@ -26,53 +27,118 @@ const FeatureList = [
             </Translate>
         ),
     },
-  {
-    title: (<Translate description="Features customizable title">Customizable</Translate>),
-    Svg: require('../../static/img/undraw_options_re_9vxh.svg').default,
-    description: (
-      <Translate description="Features customizable description">
-          Change everything to your needs.
-          Choose your custom color, create a palette and add your pages to the paper.
-          The paper has an infinite size, perfect for your ideas and notes.
-      </Translate>
-    ),
-  },
-  {
-    title: (<Translate description="Features local title">Choose where your data is stored</Translate>),
-    Svg: require('../../static/img/undraw_sweet_home_dkhr.svg').default,
-    description: (
-      <Translate description="Features local description">
-          You can choose to store your data locally or in your favorite cloud (webdav).
-          You can also export your data to a file and import it again.
-      </Translate>
-    ),
-  },
+    {
+        title: (<Translate description="Features customizable title">Customizable</Translate>),
+        Svg: require('../../static/img/undraw_options_re_9vxh.svg').default,
+        description: (
+            <Translate description="Features customizable description">
+                Change everything to your needs.
+                Choose your custom color, create a palette and add your pages to the paper.
+                The paper has an infinite size, perfect for your ideas and notes.
+            </Translate>
+        ),
+    },
+    {
+        title: (<Translate description="Features local title">Choose where your data is stored</Translate>),
+        Svg: require('../../static/img/undraw_sweet_home_dkhr.svg').default,
+        description: (
+            <Translate description="Features local description">
+                You can choose to store your data locally or in your favorite cloud (webdav).
+                You can also export your data to a file and import it again.
+            </Translate>
+        ),
+    },
+];
+
+const Features = [
+    {
+        description: (
+            <Translate description="Features infinite-canvas">
+                Use the infinite canvas to illustrate your ideas
+            </Translate>
+        ),
+    },
+    {
+        description: (
+            <Translate description="Features elements">
+                Use your pen, markdown or rich text to let your ideas flow
+            </Translate>
+        ),
+    },
+    {
+        Svg: require('../../static/img/undraw_progressive_app_m-9-ms.svg').default,
+        description: (
+            <Translate description="Features imports">
+                Load PDF, SVG, PNG and more files into your notes or take pictures from the camera
+            </Translate>
+        ),
+    },
+    {
+        Svg: require('../../static/img/undraw_progressive_app_m-9-ms.svg').default,
+        description: (
+            <Translate description="Features structure">
+                Structure your notes by adding areas and waypoints or use multiple pages
+            </Translate>
+        ),
+    },
 ];
 
-function Feature({Svg, title, description}) {
-  return (
-    <div className={clsx('col col--3')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} alt={title} />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
+function Principal({ Svg, title, description }) {
+    return (
+        <div className={clsx('col col--3')}>
+            <div className="text--center">
+                <Svg className={styles.featureSvg} alt={title} />
+            </div>
+            <div className="text--center padding-horiz--md">
+                <h3>{title}</h3>
+                <p>{description}</p>
+            </div>
+        </div>
+    );
 }
 
 export default function HomepageFeatures() {
-  return (
-    <section data-aos="fade-up" className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
+    return (
+        <section data-aos="fade-up" className={styles.features}>
+            <div className="container">
+                <h2>
+                    <Translate description="Principals title">
+                        Principals
+                    </Translate>
+                </h2>
+                <div className="row">
+                    {Principals.map((props, idx) => (
+                        <Principal key={idx} {...props} />
+                    ))}
+                </div>
+                <h2>
+                    <Translate description="Showcase title">
+                        Features
+                    </Translate>
+                </h2>
+                <div className="row">
+                    <div className="col col--6">
+                        <img
+                            src={require('../../static/img/main.png').default}
+                            className={styles.showcaseImg}
+                            alt="Screenshot"
+                        />
+                    </div>
+                    <ul className="col col--6">
+                        {Features.map((props, idx) => (
+                            <li key={idx} className={`text-large vertical-center ${styles.showcaseText}`}>{props.description}</li>
+                        ))}
+                        <li className={`text-large ${styles.showcaseButton}`}>
+                            <h2>
+                                <Translate description="Download title">
+                                    Download Butterfly today
+                                </Translate>
+                            </h2>
+                            <DownloadAppButton />
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+    );
 }