1+ import React from 'react'
12import Link from '@docusaurus/Link'
23import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
34import HomepageFeatures from '@site/src/components/HomepageFeatures'
45import Heading from '@theme/Heading'
56import Layout from '@theme/Layout'
67import clsx from 'clsx'
8+ import Slider from 'react-slick'
79import styles from './index.module.css'
810
911function HomepageHeader ( ) {
1012 const { siteConfig } = useDocusaurusContext ( )
13+
14+ const settings = {
15+ dots : true ,
16+ infinite : true ,
17+ speed : 500 ,
18+ slidesToShow : 1 ,
19+ slidesToScroll : 1 ,
20+ autoplay : true ,
21+ autoplaySpeed : 3000 ,
22+ // centerPadding: '100px',
23+ arrows : true ,
24+ centerMode : true ,
25+ adaptiveHeight : true ,
26+ responsive : [
27+ {
28+ breakpoint : 1200 ,
29+ settings : {
30+ slidesToShow : 2 ,
31+ slidesToScroll : 1 ,
32+ } ,
33+ } ,
34+ {
35+ breakpoint : 1000 ,
36+ settings : {
37+ slidesToShow : 2 ,
38+ slidesToScroll : 1 ,
39+ } ,
40+ } ,
41+ {
42+ breakpoint : 500 ,
43+ settings : {
44+ slidesToShow : 2 ,
45+ slidesToScroll : 1 ,
46+ } ,
47+ } ,
48+ {
49+ breakpoint : 300 ,
50+ settings : {
51+ slidesToShow : 1 ,
52+ slidesToScroll : 1 ,
53+ } ,
54+ } ,
55+ ] ,
56+ }
57+
1158 return (
1259 < header className = { clsx ( 'hero hero--primary padding-vert--xl' , styles . heroBanner ) } >
1360 < div className = "container padding-vert--xl" >
@@ -20,27 +67,37 @@ function HomepageHeader() {
2067 See docs
2168 </ Link >
2269 </ div >
23- < div className = { styles . imageContainer } >
24- < img
25- src = "/img/iphone_signup_draft_light.png"
26- alt = "First iPhone draft"
27- className = { styles . image }
28- />
29- < img
30- src = "/img/iphone_signup_draft_dark.png"
31- alt = "Second iPhone draft"
32- className = { styles . image }
33- />
34- < img
35- src = "/img/iphone_settings_draft_light.png"
36- alt = "Third iPhone draft"
37- className = { styles . image }
38- />
39- < img
40- src = "/img/iphone_settings_draft_dark.png"
41- alt = "Fourth iPhone draft"
42- className = { styles . image }
43- />
70+ < div className = { styles . sliderContainer } >
71+ < Slider { ...settings } >
72+ < div className = { styles . imageWrapper } >
73+ < img
74+ src = "/img/iphone_signup_draft_light.png"
75+ alt = "First iPhone draft"
76+ className = { styles . image }
77+ />
78+ </ div >
79+ < div className = { styles . imageWrapper } >
80+ < img
81+ src = "/img/iphone_signup_draft_dark.png"
82+ alt = "Second iPhone draft"
83+ className = { styles . image }
84+ />
85+ </ div >
86+ < div className = { styles . imageWrapper } >
87+ < img
88+ src = "/img/iphone_settings_draft_light.png"
89+ alt = "Third iPhone draft"
90+ className = { styles . image }
91+ />
92+ </ div >
93+ < div className = { styles . imageWrapper } >
94+ < img
95+ src = "/img/iphone_settings_draft_dark.png"
96+ alt = "Fourth iPhone draft"
97+ className = { styles . image }
98+ />
99+ </ div >
100+ </ Slider >
44101 </ div >
45102 </ div >
46103 </ header >
@@ -58,3 +115,99 @@ export default function Home(): JSX.Element {
58115 </ Layout >
59116 )
60117}
118+
119+ // import React from 'react'
120+ // import Link from '@docusaurus/Link'
121+ // import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
122+ // import HomepageFeatures from '@site/src/components/HomepageFeatures'
123+ // import Heading from '@theme/Heading'
124+ // import Layout from '@theme/Layout'
125+ // import clsx from 'clsx'
126+ // import Slider from 'react-slick'
127+ // import styles from './index.module.css'
128+
129+ // function HomepageHeader() {
130+ // const { siteConfig } = useDocusaurusContext()
131+
132+ // const settings = {
133+ // dots: true,
134+ // infinite: true,
135+ // speed: 500,
136+ // slidesToShow: 1,
137+ // centerMode: true,
138+ // slidesToScroll: 1,
139+ // centerPadding: '400px',
140+ // autoplay: true,
141+ // draggable: true,
142+ // autoplaySpeed: 2500,
143+ // responsive: [
144+ // {
145+ // breakpoint: 996, //996
146+ // settings: {
147+ // slidesToShow: 1,
148+ // slidesToScroll: 1,
149+ // },
150+ // },
151+ // ],
152+ // }
153+
154+ // return (
155+ // <header className={clsx('hero hero--primary padding-vert--xl', styles.heroBanner)}>
156+ // <div className="container padding-vert--xl">
157+ // <Heading as="h1" className="hero__title">
158+ // {siteConfig.title}
159+ // </Heading>
160+ // <p className="hero__subtitle">{siteConfig.tagline}</p>
161+ // <div className={styles.buttons}>
162+ // <Link className="button button--secondary button--lg" to="/docs/overview">
163+ // See docs
164+ // </Link>
165+ // </div>
166+ // <div className={styles.sliderContainer}>
167+ // <Slider {...settings}>
168+ // <div>
169+ // <img
170+ // src="/img/iphone_signup_draft_light.png"
171+ // alt="First iPhone draft"
172+ // className={styles.image}
173+ // />
174+ // </div>
175+ // <div>
176+ // <img
177+ // src="/img/iphone_signup_draft_dark.png"
178+ // alt="Second iPhone draft"
179+ // className={styles.image}
180+ // />
181+ // </div>
182+ // <div>
183+ // <img
184+ // src="/img/iphone_settings_draft_light.png"
185+ // alt="Third iPhone draft"
186+ // className={styles.image}
187+ // />
188+ // </div>
189+ // <div>
190+ // <img
191+ // src="/img/iphone_settings_draft_dark.png"
192+ // alt="Fourth iPhone draft"
193+ // className={styles.image}
194+ // />
195+ // </div>
196+ // </Slider>
197+ // </div>
198+ // </div>
199+ // </header>
200+ // )
201+ // }
202+
203+ // export default function Home(): JSX.Element {
204+ // const { siteConfig } = useDocusaurusContext()
205+ // return (
206+ // <Layout title={siteConfig.title} description="Description will go into a meta tag in <head />">
207+ // <HomepageHeader />
208+ // <main>
209+ // <HomepageFeatures />
210+ // </main>
211+ // </Layout>
212+ // )
213+ // }
0 commit comments