This is an automated email from the ASF dual-hosted git repository. leonardcs pushed a commit to branch feature/homepage in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
commit a057e6c0b531d9209f085fae577f23d2c9fd096f Author: Leonard <[email protected]> AuthorDate: Tue Jul 4 15:51:48 2023 +0200 Update homepage --- src/pages/index.mdx | 98 +++++++++++++++++++++++++++++++++++++++------- src/pages/index.module.css | 73 ++++++++++++++++++++++++++++++++++ 2 files changed, 157 insertions(+), 14 deletions(-) diff --git a/src/pages/index.mdx b/src/pages/index.mdx index f0a322a..5f0f5a9 100644 --- a/src/pages/index.mdx +++ b/src/pages/index.mdx @@ -9,11 +9,28 @@ import { faListCheck, faVectorSquare, faEarthAmericas, - faPeopleGroup + faPeopleGroup, + faFillDrip } from '@fortawesome/free-solid-svg-icons'; import Map from '@/components/map'; import { Features, Feature } from '@/components/features'; import { IconTitle } from '@/components/titles/IconTitle'; +import { Copyright } from '@/components/copyright'; + +import styles from './index.module.css'; + +export function OSMCopyright() { + return ( + <Copyright + copyrights={[ + { + name: 'OpenStreetMap', + url: 'https://www.openstreetmap.org/' + } + ]} + /> + ); +} <div className="home-content"> <div className="content-container"> @@ -25,7 +42,7 @@ import { IconTitle } from '@/components/titles/IconTitle'; online maps. </div> <div className="subtitle"> - <Link href="/documentation"> + <Link href="/documentation" className={styles.cta}> Get started <span>→</span> </Link> </div> @@ -33,10 +50,32 @@ import { IconTitle } from '@/components/titles/IconTitle'; <div className="features-container"> <div className="content-container"> <Features> - <Feature index={0} plain large style={{ height: 600 }}> - <Map styleSelect /> + <Feature index={0} centered> + <IconTitle icon={faVectorSquare}> + <h3>Vector Tiles</h3> + </IconTitle> + <div> + Baremaps allows you to easily serve and publish custom vector tiles + from PostGIS. Whether you need to create maps for web or mobile + applications, Baremaps makes it simple and efficient. Additionally, + we are continuously working on developing a high-quality base map. + </div> </Feature> - <Feature index={0}> + <Feature index={1} squareLarge> + <Link href="/map" className={styles['demo-link']}> + <h3>Explore Map ↗</h3> + <p>Click to view the map</p> + </Link> + <OSMCopyright /> + <Image + src="/images/map_eu.png" + alt="Background" + loading="eager" + layout="fill" + objectFit="cover" + /> + </Feature> + <Feature index={2} centered> <IconTitle icon={faListCheck}> <h3>Data Pipeline</h3> </IconTitle> @@ -48,18 +87,28 @@ import { IconTitle } from '@/components/titles/IconTitle'; workflows. </div> </Feature> - <Feature index={0}> - <IconTitle icon={faVectorSquare}> - <h3>Vector Tiles</h3> + <Feature index={3} large style={{ height: 450 }} href="/map"> + <OSMCopyright /> + <Image + src="/images/map_styles.png" + alt="Background" + loading="eager" + layout="fill" + objectFit="cover" + /> + </Feature> + <Feature index={4} centered> + <IconTitle icon={faFillDrip}> + <h3>Themes</h3> </IconTitle> <div> - Baremaps allows you to easily serve and publish custom vector tiles - from PostGIS. Whether you need to create maps for web or mobile - applications, Baremaps makes it simple and efficient. Additionally, - we are continuously working on developing a high-quality base map. + Baremaps provides a set of themes that can be used to style your + maps. The themes are customizable and can be easily integrated into + your existing applications. With hot reloading, you can quickly + iterate on your design and see the results in real-time. </div> </Feature> - <Feature index={0}> + <Feature index={5} centered> <IconTitle icon={faEarthAmericas}> <h3>Geocoder</h3> </IconTitle> @@ -71,7 +120,28 @@ import { IconTitle } from '@/components/titles/IconTitle'; results. </div> </Feature> - <Feature index={0}> + <Feature index={6} large style={{ height: 450 }} href="/map"> + <OSMCopyright /> + <Image + src="/images/geocoder.gif" + alt="Background" + loading="eager" + layout="fill" + objectFit="cover" + objectPosition="0% 0%" + /> + </Feature> + <Feature index={7} large style={{ height: 450 }} href="/map"> + <OSMCopyright /> + <Image + src="/images/map_vector_view.png" + alt="Background" + loading="eager" + layout="fill" + objectFit="cover" + /> + </Feature> + <Feature index={8} centered> <IconTitle icon={faPeopleGroup}> <h3>Contributing</h3> </IconTitle> diff --git a/src/pages/index.module.css b/src/pages/index.module.css index e69de29..213d465 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -0,0 +1,73 @@ +a.cta { + display: inline-block; + background: linear-gradient(to bottom, #238aff, #0077ff); + text-decoration: none; + border-radius: 0.75rem; + color: white; + padding: 0.75rem 1.5rem; + margin-top: 0.5rem; + text-shadow: 0 1px 1px #00387838; + box-shadow: 0 1px 2px #00295738; + transition: all 0.2s ease; + -webkit-user-drag: none; + user-select: none; + -webkit-tap-highlight-color: transparent; +} + +a.cta span { + display: inline-block; + transition: all 0.2s ease; +} + +a.cta:hover span { + transform: translateX(3px); +} + +a.cta:hover { + box-shadow: 0 0 0 5px rgba(0, 120, 255, 0.35); + filter: brightness(1.05); +} + +a.cta:active { + box-shadow: 0 1px 3px #00295738; + filter: brightness(0.95); +} + +a.cta:active span { + transform: translateX(5px); +} + +a.cta:focus-visible { + outline: 2px solid hsl(var(--nextra-primary-hue) 100% 77%); + outline-offset: 2px; +} + +a.cta:focus-visible span { + transform: translateX(3px); +} + +.demo-link { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + color: white; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)); + z-index: 2; + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: 2rem; + opacity: 0; + transition: opacity 0.25s ease; +} + +.demo-link:hover { + opacity: 1; +} + +.demo-link h3 { + text-align: start; + font-size: 3rem; +}
