Skip to content

Commit

Permalink
content updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@pavjacko
pavjacko committed Jul 30, 2024
1 parent 83543a8 commit e6615ab
Show file tree
Hide file tree
Showing 7 changed files with 555 additions and 340 deletions.
28 changes: 14 additions & 14 deletions docusaurus.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,20 +137,20 @@ const config = {
// className: 'button button--secondary navbar_button padding--sm',
// },

{
href: 'https://www.flexn.io/',
position: 'left',
className: 'navbar_logo header-flexn-link',
title: 'Flexn',
'aria-label': 'Flexn',
},
{
href: '/',
position: 'left',
className: 'navbar_logo header-separator-link',
title: 'Separator',
'aria-label': 'Separator',
},
// {
// href: 'https://www.flexn.io/',
// position: 'left',
// className: 'navbar_logo header-flexn-link',
// title: 'Flexn',
// 'aria-label': 'Flexn',
// },
// {
// href: '/',
// position: 'left',
// className: 'navbar_logo header-separator-link',
// title: 'Separator',
// 'aria-label': 'Separator',
// },
{
href: '/',
position: 'left',
Expand Down
194 changes: 128 additions & 66 deletions src/components/HomepageFeatures.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,16 @@ const FeatureList = [
iconDark: '/img/dark/feature_icon3.svg',
description: (
<>
<span style={{ color: '#0A74E6' }}>Customize</span> your website layout using{' '}
<span style={{ color: '#0A74E6' }}>React</span>. Docusaurus allows you to extend it while keeping the
same header and footer.
<span style={{ color: '#0A74E6' }}>rnv CLI</span> is your entry point and control centre to building
multi-platform apps with just a few commands to learn.
</>
),
link: '/docs/guides/cli',
link: '/docs/api/cli',
children: (
<div>
<CodeBlock language="jsx">{'rnv --help'}</CodeBlock>
</div>
),
},
{
title: 'Minimalistic runtime',
Expand All @@ -70,7 +74,7 @@ const FeatureList = [
{`import { isPlatformTizen, isFactorTv, engine, platform } from "renative";\n\n<Text>{isFactorTv}</Text>; `}
</CodeBlock>
),
link: '/docs/guides/runtime',
link: '/docs/api/runtime',
},
{
title: 'Supercharged frameworks',
Expand Down Expand Up @@ -121,7 +125,17 @@ const FeatureList = [
),
children: (
<CodeBlock title="Terminal" language="jsx">
{`rnv new\n\n...\n\n? What template to use? => 'renative-template-hello-world'`}
{`rnv new
? What's your project Name? (folder will be created) hello-renative
? What workspace to use? rnv
? What template to use? @rnv/template-starter
? What @rnv/template-starter version to use? 1.0.0 (@latest)
? How to create config renative.json? Extend template (cleaner, overridable)
? What's your project Title? My Renative App
? What's your App ID? com.mycompany.hellorenative
? What's your project version? 0.1.0
? What platforms would you like to use? web, ios, android
? Do you want to set-up git in your new project? Yes`}
</CodeBlock>
),
link: '/docs/guides/templates',
Expand All @@ -137,57 +151,60 @@ const FeatureList = [
</>
),
children: (
<div className={clsx(styles.plugin_grid, styles.img_grid)}>
<ThemedImage
className={styles.feature_img}
sources={{
light: '/img/light/integration_logo1.svg',
dark: '/img/dark/integration_logo1.svg',
}}
/>
<ThemedImage
className={styles.feature_img}
sources={{
light: '/img/light/integration_logo2.svg',
dark: '/img/dark/integration_logo2.svg',
}}
/>
<ThemedImage
className={styles.feature_img}
sources={{
light: '/img/light/integration_logo3.svg',
dark: '/img/dark/integration_logo3.svg',
}}
/>
<ThemedImage
className={styles.feature_img}
sources={{
light: '/img/light/integration_logo4.svg',
dark: '/img/dark/integration_logo4.svg',
}}
/>
<ThemedImage
className={styles.feature_img}
sources={{
light: '/img/light/integration_logo5.svg',
dark: '/img/dark/integration_logo5.svg',
}}
/>
<ThemedImage
className={styles.feature_img}
sources={{
light: '/img/light/integration_logo6.svg',
dark: '/img/dark/integration_logo6.svg',
}}
/>
<ThemedImage
className={styles.feature_img}
sources={{
light: '/img/light/integration_logo7.svg',
dark: '/img/dark/integration_logo7.svg',
}}
/>
</div>
<>
<div className={clsx(styles.plugin_grid, styles.img_grid)}>
<ThemedImage
className={styles.feature_img}
sources={{
light: '/img/light/integration_logo1.svg',
dark: '/img/dark/integration_logo1.svg',
}}
/>
<ThemedImage
className={styles.feature_img}
sources={{
light: '/img/light/integration_logo2.svg',
dark: '/img/dark/integration_logo2.svg',
}}
/>
<ThemedImage
className={styles.feature_img}
sources={{
light: '/img/light/integration_logo3.svg',
dark: '/img/dark/integration_logo3.svg',
}}
/>
<ThemedImage
className={styles.feature_img}
sources={{
light: '/img/light/integration_logo4.svg',
dark: '/img/dark/integration_logo4.svg',
}}
/>
<ThemedImage
className={styles.feature_img}
sources={{
light: '/img/light/integration_logo5.svg',
dark: '/img/dark/integration_logo5.svg',
}}
/>
<ThemedImage
className={styles.feature_img}
sources={{
light: '/img/light/integration_logo6.svg',
dark: '/img/dark/integration_logo6.svg',
}}
/>
<ThemedImage
className={styles.feature_img}
sources={{
light: '/img/light/integration_logo7.svg',
dark: '/img/dark/integration_logo7.svg',
}}
/>
</div>
<div className={styles.main_paragraph}>Additionally you can build your own integrations with ease.</div>
</>
),
link: '/docs/integrations/aws',
},
Expand Down Expand Up @@ -294,21 +311,54 @@ export default function HomepageFeatures() {
<div className={clsx('container', styles.img_video_container)}>
<div className={styles.img_video_container_in}>
<div className={styles.main_img_title}>
<h2>Build react native app with ReNative framework</h2>
<h2>Bootstrap and build apps fast</h2>
</div>
<div className={styles.main_paragraph}>
ReNative allows developers to create multiplatform templates and reuse them to bootstrap full
E2E projects, freeing up time to focus on development
</div>
<div>
<CodeBlock language="jsx">{'rnv new'}</CodeBlock>
</div>
<div className={styles.feature_link_container}>
<a className={styles.feature_link} href={'/docs/overview/introduction'}>
Learn more
<img src="/img/link.svg" />
</a>
</div>
<ThemedImage
className={styles.main_img}
sources={{
light: '/img/light/rnv-light.svg',
dark: '/img/dark/rnv-dark.svg',
}}
/>
</div>
<div className={clsx(styles.img_video_container_in, styles.youtube_video)}>
<YoutubeVideo youtubeId="PLCJzCDSyDk" title="demo" />
</div>
</div>

<hr className={hrStyle}></hr>
<div className={clsx('container', styles.img_video_container)}>
<ThemedImage
className={styles.main_img}
sources={{
light: '/img/light/rnv-light.svg',
dark: '/img/dark/rnv-dark.svg',
}}
/>
<div className={styles.img_video_container_in}>
<div className={styles.main_img_title}>
<h2>Target any major platform</h2>
</div>
<div className={styles.main_paragraph}>
Run your project on one of 20 platforms with a single command
</div>
<div>
<CodeBlock language="jsx">{'rnv run -p <PLATFORM>'}</CodeBlock>
</div>
<div className={styles.feature_link_container}>
<a className={styles.feature_link} href={'/docs/platforms/android'}>
Explore more
<img src="/img/link.svg" />
</a>
</div>
</div>
</div>
<hr className={hrStyle}></hr>
<section className="container">
<SectionItemComponent
key="0"
Expand Down Expand Up @@ -339,6 +389,18 @@ export default function HomepageFeatures() {
})}
</div>
</section>
<hr className={hrStyle}></hr>
<div className={clsx('container', 'framework_container')}>
<div>
<h2>Used by</h2>
</div>
<div className="framework_container_img_grid">
<ThemedImage
className="framework_img"
sources={{ light: '/img/light/usedby.png', dark: '/img/dark/usedby.png' }}
/>
</div>
</div>
</>
);
}
14 changes: 12 additions & 2 deletions src/components/HomepageFeatures.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.img_video_container {
display: flex;
justify-content: space-between;
padding-bottom: 144px;
padding-bottom: 0px;
gap: 115px;
}

Expand All @@ -14,6 +14,16 @@
width: 616px;
}

.main_paragraph {

font-style: normal;
font-weight: 400;
line-height: 32px;
letter-spacing: 0em;
margin-bottom: 20px;
margin-top: 20px;
}

.main_img {
width: 100%;
object-fit: contain;
Expand Down Expand Up @@ -66,7 +76,7 @@
}

.bottom_element{
padding-bottom: 176px;
padding-bottom: 10px;
}

.features_line .feature_container {
Expand Down
13 changes: 13 additions & 0 deletions src/pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,19 @@ export default function Home() {
<HomepageHeader />
<main>
<HomepageFeatures />
<div className="homepage-codeline">
<div className={styles.buttons}>
<Link
className="button button--secondary button--lg homepage_button"
to="/docs/overview/quickstart"
>
Start developing now
</Link>
</div>
<div style={{ fontSize: '16px', width: '180px' }}>
<CodeBlock language="jsx">{`npx rnv new`}</CodeBlock>
</div>
</div>
</main>
<Footer />
</Layout>
Expand Down
Binary file added static/img/dark/usedby.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit e6615ab

Please sign in to comment.