docs: update dcousarus libraries

app.json

@@ -33,6 +33,7 @@
     "version": "2.3.0",
     "plugins": [
       "@react-native-google-signin/google-signin",
+      "expo-asset",
       "expo-apple-authentication",
       "expo-font",
       "expo-localization",

docs/docusaurus.config.ts

@@ -3,6 +3,8 @@ import type { Config } from '@docusaurus/types'
 import { themes as prismThemes } from 'prism-react-renderer'
 
 const repoLink = 'https://github.com/binarapps/baca-react-native-template'
+const docsLink = '/docs/overview'
+const demoLink = 'https://binarapps.online/sign-in'
 
 const config: Config = {
   title: 'BACA - react native starter',
@@ -58,12 +60,23 @@ const config: Config = {
         src: 'img/logo-light.png',
         srcDark: 'img/logo-dark.png',
       },
+      hideOnScroll: true,
       items: [
         {
           href: repoLink,
           label: 'GitHub',
           position: 'right',
         },
+        {
+          to: docsLink,
+          label: 'Docs',
+          position: 'left',
+        },
+        {
+          to: demoLink,
+          label: 'Demo',
+          position: 'left',
+        },
       ],
     },
     footer: {

docs/package.json

@@ -16,13 +16,15 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "3.1.0",
-    "@docusaurus/preset-classic": "3.1.0",
+    "@docusaurus/core": "^3.3.2",
+    "@docusaurus/preset-classic": "^3.3.2",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.1.0",

docs/src/components/HomepageFeatures/index.tsx

@@ -33,7 +33,7 @@ const FeatureList: FeatureItem[] = [
     title: 'Powered by React Native and Expo',
     Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
     description: (
-      <>We are using the newest tools to acheive the best performance and developer experience.</>
+      <>We are using the newest tools to achieve the best performance and developer experience.</>
     ),
   },
 ]

docs/src/css/custom.css

@@ -6,6 +6,9 @@
 
 /* You can override the default Infima variables here. */
 
+@import '~slick-carousel/slick/slick.css';
+@import '~slick-carousel/slick/slick-theme.css';
+
 :root {
   --ifm-color-primary: #531fa5;
   --ifm-color-primary-dark: #4b1c95;

docs/src/pages/HomepageHeader.tsx

@@ -0,0 +1,23 @@
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import { HeaderButtons } from './components/HeaderButtons'
+import { ImageSlider } from './components/ImageSlider'
+import styles from './index.module.css'
+import Heading from '@theme/Heading'
+import clsx from 'clsx'
+
+export function HomepageHeader() {
+  const { siteConfig } = useDocusaurusContext()
+
+  return (
+    <header className={clsx('hero hero--primary padding-vert--xl', styles.heroBanner)}>
+      <div className="container padding-vert--xl">
+        <Heading as="h1" className="hero__title">
+          {siteConfig.title}
+        </Heading>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <HeaderButtons />
+        <ImageSlider />
+      </div>
+    </header>
+  )
+}

docs/src/pages/components/HeaderButtons.tsx

@@ -0,0 +1,20 @@
+import styles from '../index.module.css'
+import Link from '@docusaurus/Link'
+import clsx from 'clsx'
+
+export const HeaderButtons = () => (
+  <div className={styles.buttonsContainer}>
+    <Link
+      className={clsx('button button--secondary button--lg', styles.button, styles.buttonReadDocs)}
+      to="/docs/overview"
+    >
+      Read docs
+    </Link>
+    <Link
+      className={clsx('button button--secondary button--lg', styles.button, styles.buttonTryIt)}
+      to="https://binarapps.online/sign-in"
+    >
+      Try it
+    </Link>
+  </div>
+)

docs/src/pages/components/ImageSlider.tsx

@@ -0,0 +1,61 @@
+import styles from '../index.module.css'
+import Slider from 'react-slick'
+
+const sliderSettings = {
+  adaptiveHeight: true,
+  arrows: true,
+  autoplay: true,
+  autoplaySpeed: 3000,
+  dots: true,
+  infinite: true,
+  responsive: [
+    {
+      breakpoint: 1000,
+      settings: {
+        slidesToShow: 2,
+        slidesToScroll: 1,
+      },
+    },
+    {
+      breakpoint: 550,
+      settings: {
+        slidesToShow: 1,
+        slidesToScroll: 1,
+      },
+    },
+  ],
+  slidesToScroll: 1,
+  slidesToShow: 3,
+  speed: 500,
+}
+
+const sliderImages = [
+  {
+    src: '/img/iphone_signup_draft_light.png',
+    alt: 'First iPhone draft',
+  },
+  {
+    src: '/img/iphone_signup_draft_dark.png',
+    alt: 'Second iPhone draft',
+  },
+  {
+    src: '/img/iphone_settings_draft_light.png',
+    alt: 'Third iPhone draft',
+  },
+  {
+    src: '/img/iphone_settings_draft_dark.png',
+    alt: 'Fourth iPhone draft',
+  },
+]
+
+export const ImageSlider = () => (
+  <div className={styles.sliderContainer}>
+    <Slider {...sliderSettings}>
+      {sliderImages.map((image, index) => (
+        <div key={index} className={styles.imageWrapper}>
+          <img src={image.src} alt={image.alt} className={styles.image} />
+        </div>
+      ))}
+    </Slider>
+  </div>
+)

docs/src/pages/index.module.css

@@ -21,3 +21,48 @@
   align-items: center;
   justify-content: center;
 }
+
+.sliderContainer {
+  margin-top: 86px;
+}
+
+.imageWrapper {
+  padding: 0 16px;
+}
+
+.image {
+  width: 100%;
+  max-width: 400px;
+  height: auto;
+  border-radius: 12px;
+}
+
+.buttonsContainer {
+  display: flex;
+  justify-content: center;
+  gap: 3rem;
+}
+
+.button {
+  width: 160px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.buttonTryIt {
+  background-color: #2f2f2f;
+  color: #ffffff !important;
+}
+
+@media screen and (max-width: 600px) {
+  .buttonsContainer {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .button {
+    width: 100%;
+  }
+}

docs/src/pages/index.tsx

@@ -1,31 +1,7 @@
-/* eslint-disable react-native/no-raw-text */
-import Link from '@docusaurus/Link'
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import HomepageFeatures from '@site/src/components/HomepageFeatures'
-import Heading from '@theme/Heading'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import { HomepageHeader } from './HomepageHeader'
 import Layout from '@theme/Layout'
-import clsx from 'clsx'
-
-import styles from './index.module.css'
-
-function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext()
-  return (
-    <header className={clsx('hero hero--primary padding-vert--xl', styles.heroBanner)}>
-      <div className="container padding-vert--xl">
-        <Heading as="h1" className="hero__title">
-          {siteConfig.title}
-        </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link className="button button--secondary button--lg" to="/docs/overview">
-            See docs
-          </Link>
-        </div>
-      </div>
-    </header>
-  )
-}
 
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext()