Skip to content

Commit 5209c8e

Browse files
MateuszRostkowskiMateuszRostkowski
authored
Merge pull request #64 from binarapps/feat/pics-mainpage-docs
Feat/Docs main page
2 parents 176ea28 + 147e718 commit 5209c8e

14 files changed

Lines changed: 223 additions & 29 deletions

‎docs/docusaurus.config.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import type { Config } from '@docusaurus/types'
33
import { themes as prismThemes } from 'prism-react-renderer'
44

55
const repoLink = 'https://github.com/binarapps/baca-react-native-template'
6+
const docsLink = '/docs/overview'
7+
const demoLink = 'https://binarapps.online/sign-in'
68

79
const config: Config = {
810
title: 'BACA - react native starter',
@@ -58,12 +60,23 @@ const config: Config = {
5860
src: 'img/logo-light.png',
5961
srcDark: 'img/logo-dark.png',
6062
},
63+
hideOnScroll: true,
6164
items: [
6265
{
6366
href: repoLink,
6467
label: 'GitHub',
6568
position: 'right',
6669
},
70+
{
71+
to: docsLink,
72+
label: 'Docs',
73+
position: 'left',
74+
},
75+
{
76+
to: demoLink,
77+
label: 'Demo',
78+
position: 'left',
79+
},
6780
],
6881
},
6982
footer: {

‎docs/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@
2222
"clsx": "^2.0.0",
2323
"prism-react-renderer": "^2.3.0",
2424
"react": "^18.0.0",
25-
"react-dom": "^18.0.0"
25+
"react-dom": "^18.0.0",
26+
"react-slick": "^0.30.2",
27+
"slick-carousel": "^1.8.1"
2628
},
2729
"devDependencies": {
2830
"@docusaurus/module-type-aliases": "3.1.0",

‎docs/src/components/HomepageFeatures/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const FeatureList: FeatureItem[] = [
3333
title: 'Powered by React Native and Expo',
3434
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
3535
description: (
36-
<>We are using the newest tools to acheive the best performance and developer experience.</>
36+
<>We are using the newest tools to achieve the best performance and developer experience.</>
3737
),
3838
},
3939
]

‎docs/src/css/custom.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66

77
/* You can override the default Infima variables here. */
88

9+
@import '~slick-carousel/slick/slick.css';
10+
@import '~slick-carousel/slick/slick-theme.css';
11+
912
:root {
1013
--ifm-color-primary: #531fa5;
1114
--ifm-color-primary-dark: #4b1c95;

‎docs/src/pages/HomepageHeader.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
2+
import { HeaderButtons } from './components/HeaderButtons'
3+
import { ImageSlider } from './components/ImageSlider'
4+
import styles from './index.module.css'
5+
import Heading from '@theme/Heading'
6+
import clsx from 'clsx'
7+
8+
export function HomepageHeader() {
9+
const { siteConfig } = useDocusaurusContext()
10+
11+
return (
12+
<header className={clsx('hero hero--primary padding-vert--xl', styles.heroBanner)}>
13+
<div className="container padding-vert--xl">
14+
<Heading as="h1" className="hero__title">
15+
{siteConfig.title}
16+
</Heading>
17+
<p className="hero__subtitle">{siteConfig.tagline}</p>
18+
<HeaderButtons />
19+
<ImageSlider />
20+
</div>
21+
</header>
22+
)
23+
}

‎docs/src/pages/components/HeaderButtons.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import styles from '../index.module.css'
2+
import Link from '@docusaurus/Link'
3+
import clsx from 'clsx'
4+
5+
export const HeaderButtons = () => (
6+
<div className={styles.buttonsContainer}>
7+
<Link
8+
className={clsx('button button--secondary button--lg', styles.button, styles.buttonReadDocs)}
9+
to="/docs/overview"
10+
>
11+
Read docs
12+
</Link>
13+
<Link
14+
className={clsx('button button--secondary button--lg', styles.button, styles.buttonTryIt)}
15+
to="https://binarapps.online/sign-in"
16+
>
17+
Try it
18+
</Link>
19+
</div>
20+
)

‎docs/src/pages/components/ImageSlider.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import styles from '../index.module.css'
2+
import Slider from 'react-slick'
3+
4+
const sliderSettings = {
5+
adaptiveHeight: true,
6+
arrows: true,
7+
autoplay: true,
8+
autoplaySpeed: 3000,
9+
dots: true,
10+
infinite: true,
11+
responsive: [
12+
{
13+
breakpoint: 1000,
14+
settings: {
15+
slidesToShow: 2,
16+
slidesToScroll: 1,
17+
},
18+
},
19+
{
20+
breakpoint: 550,
21+
settings: {
22+
slidesToShow: 1,
23+
slidesToScroll: 1,
24+
},
25+
},
26+
],
27+
slidesToScroll: 1,
28+
slidesToShow: 3,
29+
speed: 500,
30+
}
31+
32+
const sliderImages = [
33+
{
34+
src: '/img/iphone_signup_draft_light.png',
35+
alt: 'First iPhone draft',
36+
},
37+
{
38+
src: '/img/iphone_signup_draft_dark.png',
39+
alt: 'Second iPhone draft',
40+
},
41+
{
42+
src: '/img/iphone_settings_draft_light.png',
43+
alt: 'Third iPhone draft',
44+
},
45+
{
46+
src: '/img/iphone_settings_draft_dark.png',
47+
alt: 'Fourth iPhone draft',
48+
},
49+
]
50+
51+
export const ImageSlider = () => (
52+
<div className={styles.sliderContainer}>
53+
<Slider {...sliderSettings}>
54+
{sliderImages.map((image, index) => (
55+
<div key={index} className={styles.imageWrapper}>
56+
<img src={image.src} alt={image.alt} className={styles.image} />
57+
</div>
58+
))}
59+
</Slider>
60+
</div>
61+
)

‎docs/src/pages/index.module.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,48 @@
2121
align-items: center;
2222
justify-content: center;
2323
}
24+
25+
.sliderContainer {
26+
margin-top: 86px;
27+
}
28+
29+
.imageWrapper {
30+
padding: 0 16px;
31+
}
32+
33+
.image {
34+
width: 100%;
35+
max-width: 400px;
36+
height: auto;
37+
border-radius: 12px;
38+
}
39+
40+
.buttonsContainer {
41+
display: flex;
42+
justify-content: center;
43+
gap: 3rem;
44+
}
45+
46+
.button {
47+
width: 160px;
48+
height: 48px;
49+
display: flex;
50+
align-items: center;
51+
justify-content: center;
52+
}
53+
54+
.buttonTryIt {
55+
background-color: #2f2f2f;
56+
color: #ffffff !important;
57+
}
58+
59+
@media screen and (max-width: 600px) {
60+
.buttonsContainer {
61+
flex-direction: column;
62+
gap: 1rem;
63+
}
64+
65+
.button {
66+
width: 100%;
67+
}
68+
}

‎docs/src/pages/index.tsx‎

Lines changed: 2 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,7 @@
1-
/* eslint-disable react-native/no-raw-text */
2-
import Link from '@docusaurus/Link'
3-
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
41
import HomepageFeatures from '@site/src/components/HomepageFeatures'
5-
import Heading from '@theme/Heading'
2+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
3+
import { HomepageHeader } from './HomepageHeader'
64
import Layout from '@theme/Layout'
7-
import clsx from 'clsx'
8-
9-
import styles from './index.module.css'
10-
11-
function HomepageHeader() {
12-
const { siteConfig } = useDocusaurusContext()
13-
return (
14-
<header className={clsx('hero hero--primary padding-vert--xl', styles.heroBanner)}>
15-
<div className="container padding-vert--xl">
16-
<Heading as="h1" className="hero__title">
17-
{siteConfig.title}
18-
</Heading>
19-
<p className="hero__subtitle">{siteConfig.tagline}</p>
20-
<div className={styles.buttons}>
21-
<Link className="button button--secondary button--lg" to="/docs/overview">
22-
See docs
23-
</Link>
24-
</div>
25-
</div>
26-
</header>
27-
)
28-
}
295

306
export default function Home(): JSX.Element {
317
const { siteConfig } = useDocusaurusContext()

‎docs/static/img/iphone_settings_draft_dark.png‎

190 KB
Loading

0 commit comments

Comments
 (0)