Skip to content

Commit 4001eea

Browse files
mkopcinsMateusz Kopciński
mkopcins
and
Mateusz Kopciński
authored
docs: implement changes suggested by marketing team (#577)
## Description Implement various changes, mainly to the landing page to improve seo and added carousel with our AI blogs. ### Introduces a breaking change? - [ ] Yes - [x] No ### Type of change - [ ] Bug fix (change which fixes an issue) - [ ] New feature (change which adds functionality) - [x] Documentation update (improves or adds clarity to existing documentation) - [ ] Other (chores, tests, code style improvements etc.) ### Tested on - [ ] iOS - [ ] Android ### Testing instructions <!-- Provide step-by-step instructions on how to test your changes. Include setup details if necessary. --> ### Screenshots <!-- Add screenshots here, if applicable --> ### Related issues <!-- Link related issues here using #issue-number --> ### Checklist - [ ] I have performed a self-review of my code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have updated the documentation accordingly - [ ] My changes generate no new warnings ### Additional notes <!-- Include any additional information, assumptions, or context that reviewers might need to understand this PR. --> --------- Co-authored-by: Mateusz Kopciński <mateusz.kopcinski@swmansnion.com>
1 parent b31c32f commit 4001eea

20 files changed

Lines changed: 754 additions & 38 deletions

File tree

‎docs/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
"clsx": "^2.1.0",
2424
"prism-react-renderer": "^2.1.0",
2525
"react": "^18.2.0",
26-
"react-dom": "^18.2.0"
26+
"react-dom": "^18.2.0",
27+
"swiper": "^11.2.10"
2728
},
2829
"devDependencies": {
2930
"@docusaurus/module-type-aliases": "3.7.0",

‎docs/src/components/Carousel/SlideButton.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import styles from './styles.module.css';
2+
3+
export const SlideButton = ({
4+
forward,
5+
onClick,
6+
}: {
7+
forward: boolean;
8+
onClick: () => void;
9+
}) => {
10+
const aria = forward ? 'Next slide' : 'Previous slide';
11+
12+
return (
13+
<div style={{ display: 'flex' }}>
14+
<button
15+
onClick={onClick}
16+
className={forward ? styles.nextButton : styles.prevButton}
17+
aria-label={aria}
18+
>
19+
{forward ? (
20+
<svg
21+
className={styles.icon}
22+
fill="none"
23+
stroke="currentColor"
24+
viewBox="0 0 24 24"
25+
>
26+
<path
27+
strokeLinecap="round"
28+
strokeLinejoin="round"
29+
strokeWidth={2}
30+
d="M9 5l7 7-7 7"
31+
/>
32+
</svg>
33+
) : (
34+
<svg
35+
className={styles.icon}
36+
fill="none"
37+
stroke="currentColor"
38+
viewBox="0 0 24 24"
39+
>
40+
<path
41+
strokeLinecap="round"
42+
strokeLinejoin="round"
43+
strokeWidth={2}
44+
d="M15 19l-7-7 7-7"
45+
/>
46+
</svg>
47+
)}
48+
</button>
49+
</div>
50+
);
51+
};

‎docs/src/components/Carousel/SlideContent.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import styles from './styles.module.css';
2+
3+
export const SlideContent = ({
4+
slide,
5+
}: {
6+
slide: {
7+
id: number;
8+
title: string;
9+
link: string;
10+
imageUrl: string;
11+
};
12+
}) => {
13+
return (
14+
<a href={slide.link}>
15+
<div className={styles.slideContainer}>
16+
{slide.imageUrl && (
17+
<div className={styles.imageContainer}>
18+
<img
19+
src={slide.imageUrl}
20+
alt={slide.title}
21+
className={styles.image}
22+
/>
23+
</div>
24+
)}
25+
<div className={styles.overlay}>
26+
<div className={styles.content}>
27+
<p className={styles.slideTitle}>{slide.title}</p>
28+
</div>
29+
</div>
30+
</div>
31+
</a>
32+
);
33+
};

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

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import 'swiper/css';
2+
import 'swiper/css/navigation';
3+
import 'swiper/css/pagination';
4+
import 'swiper/css/effect-fade';
5+
import { Swiper, SwiperSlide } from 'swiper/react';
6+
import { Autoplay, Pagination } from 'swiper/modules';
7+
import { useState, useEffect, useRef } from 'react';
8+
import styles from './styles.module.css';
9+
import { SlideButton } from './SlideButton';
10+
import { SlideContent } from './SlideContent';
11+
import slides from '@site/static/data/blogPosts.json';
12+
13+
function getWindowDimensions() {
14+
const { innerWidth: width, innerHeight: height } = window;
15+
return {
16+
width,
17+
height,
18+
};
19+
}
20+
21+
export default function useWindowDimensions() {
22+
const [windowDimensions, setWindowDimensions] = useState(
23+
getWindowDimensions()
24+
);
25+
26+
useEffect(() => {
27+
function handleResize() {
28+
setWindowDimensions(getWindowDimensions());
29+
}
30+
31+
window.addEventListener('resize', handleResize);
32+
return () => window.removeEventListener('resize', handleResize);
33+
}, []);
34+
35+
return windowDimensions;
36+
}
37+
38+
export const Carousel = ({ ...props }) => {
39+
const swiperRef = useRef(null);
40+
41+
return (
42+
<div>
43+
<div className={styles.titleContainer}>
44+
<h2 className={styles.title}>
45+
Learn more about React Native ExecuTorch
46+
</h2>
47+
</div>
48+
<div className={styles.container}>
49+
<SlideButton
50+
forward={false}
51+
onClick={() => swiperRef.current?.swiper?.slidePrev()}
52+
/>
53+
<Swiper
54+
modules={[Pagination, Autoplay]}
55+
ref={swiperRef}
56+
spaceBetween={20}
57+
slidesPerView={1}
58+
pagination={{
59+
clickable: true,
60+
dynamicBullets: true,
61+
}}
62+
breakpoints={{
63+
768: { slidesPerView: 2 },
64+
1280: { slidesPerView: 3 },
65+
}}
66+
autoplay={{
67+
delay: 4000,
68+
disableOnInteraction: false,
69+
}}
70+
loop={true}
71+
className={styles.swiper}
72+
{...props}
73+
>
74+
{slides.map((slide) => (
75+
<SwiperSlide key={slide.id}>
76+
<SlideContent slide={slide} />
77+
</SwiperSlide>
78+
))}
79+
</Swiper>
80+
<SlideButton
81+
forward={true}
82+
onClick={() => swiperRef.current?.swiper?.slideNext()}
83+
/>
84+
</div>
85+
</div>
86+
);
87+
};

‎docs/src/components/Carousel/styles.module.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
.container {
2+
display: flex;
3+
flex-direction: row;
4+
max-width: 100%;
5+
margin: 0 auto;
6+
}
7+
8+
.prevButton {
9+
margin: auto;
10+
margin-right: 2rem;
11+
width: 48px;
12+
height: 48px;
13+
background-color: #2563eb;
14+
color: white;
15+
border-radius: 50%;
16+
display: flex;
17+
align-items: center;
18+
justify-content: center;
19+
border: none;
20+
cursor: pointer;
21+
}
22+
23+
.imageContainer {
24+
height: 14rem;
25+
}
26+
27+
.prevButton:hover {
28+
background-color: #1d4ed8;
29+
}
30+
31+
.nextButton {
32+
margin: auto;
33+
margin-left: 2rem;
34+
width: 48px;
35+
height: 48px;
36+
background-color: #2563eb;
37+
color: white;
38+
border-radius: 50%;
39+
display: flex;
40+
align-items: center;
41+
justify-content: center;
42+
border: none;
43+
cursor: pointer;
44+
}
45+
46+
.nextButton:hover {
47+
background-color: #1d4ed8;
48+
}
49+
50+
.icon {
51+
width: 20px;
52+
height: 20px;
53+
}
54+
55+
.slideContainer {
56+
position: relative;
57+
height: 100%;
58+
}
59+
60+
.overlay {
61+
display: flex;
62+
align-items: center;
63+
}
64+
65+
.title {
66+
font-size: var(--swm-h2-font-size);
67+
}
68+
69+
.titleContainer {
70+
padding-bottom: 3rem;
71+
}
72+
73+
.content {
74+
color: white;
75+
}
76+
77+
.swiper {
78+
height: fit-content;
79+
width: 100%;
80+
}
81+
82+
.slideTitle {
83+
font-size: 16px;
84+
margin-bottom: 1rem;
85+
}
86+
87+
[data-theme='light'] .slideTitle {
88+
font-size: 20px;
89+
margin-bottom: 1rem;
90+
color: var(--swm-navy-light-100);
91+
}
92+
93+
.description {
94+
margin-bottom: 1.5rem;
95+
}
96+
97+
.link {
98+
display: inline-block;
99+
padding: 0.75rem 1.5rem;
100+
background-color: #2563eb;
101+
color: white;
102+
border-radius: 0.5rem;
103+
font-weight: 500;
104+
transition: background-color 0.15s ease-in-out;
105+
text-decoration: none;
106+
}
107+
108+
.link:hover {
109+
background-color: #1d4ed8;
110+
}
111+
112+
.image {
113+
height: 100%;
114+
width: 100%;
115+
object-fit: cover;
116+
}
117+
118+
@media (max-width: 996px) {
119+
.slideTitle {
120+
font-size: 20px;
121+
}
122+
.imageContainer {
123+
height: 10rem;
124+
}
125+
}
126+
127+
.swiper :global(.swiper-pagination-bullet) {
128+
background-color: #6b7280;
129+
opacity: 0.5;
130+
}
131+
132+
.swiper :global(.swiper-pagination-bullet-active) {
133+
background-color: #2563eb;
134+
opacity: 1;
135+
}
136+
137+
@media (max-width: 768px) {
138+
.nextButton {
139+
display: none;
140+
}
141+
.prevButton {
142+
display: none;
143+
}
144+
.imageContainer {
145+
height: 14rem;
146+
}
147+
}

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

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎docs/src/components/Hero/StartScreen/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ const StartScreen = () => {
1515
<span>ExecuTorch</span>
1616
</h1>
1717
<h2 className={styles.subheadingLabel}>
18-
Declarative way to run AI models in React Native on device,
19-
powered by ExecuTorch.
18+
Declarative way to run AI models and LLMs in React Native on
19+
device, powered by ExecuTorch.
2020
</h2>
2121
</div>
2222
<BrowserOnly>{() => <Logo />}</BrowserOnly>

‎docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ const items = [
1111
title: 'cost effective',
1212
body: "The on-device computing nature of React Native ExecuTorch means you don't have to worry about cloud infrastructure. This approach reduces server costs and minimizes latency.",
1313
},
14+
{
15+
title: 'model variety',
16+
body: 'We support a wide variety of models, including LLMs, such as Qwen 3, Llama 3.2, SmolLM 2, and Hammer 2.1, as well as CLIP for image embedding, Whisper for ASR, and a selection of computer vision models.',
17+
},
1418
{
1519
title: 'developer friendly',
1620
body: "There's no need for deep AI expertise, we handle the complexities of AI models on the native side, making it simple for developers to use these models in React Native.",

‎docs/src/components/ReactNativeExecuTorchFeatures/ReactNativeExecuTorchFeatureList/styles.module.css‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
11
.featureList {
2-
display: flex;
2+
display: grid;
33
gap: 1.5rem;
4+
grid-template-columns: repeat(4, 1fr);
45
}
56

6-
@media (max-width: 996px) {
7+
@media (max-width: 1280px) {
78
.featureList {
9+
grid-template-columns: repeat(2, 1fr);
10+
flex-direction: column;
11+
}
12+
}
13+
14+
@media (max-width: 768px) {
15+
.featureList {
16+
grid-template-columns: 1fr;
817
flex-direction: column;
918
}
1019
}

0 commit comments

Comments
 (0)