Skip to content

Commit

Permalink
Add basic Aerie landing page (#82)
Browse files Browse the repository at this point in the history 
* Add basic Aerie landing page

* update content feature section and header

* add feature images

* update hero alignment and button styles

* update secondary color palette and font

* add feature cards

* add testimonials

* generalize features component, add get started

* tighten max width

* add and organize images

* add logos section

* add video section

* add more homepage sections

* style and image tweaks

* add learn more section

* update images and spacing

* update logos

* add logos and light dark variants and adjust responsive styles

* swap placeholder links in cards

* add footer links and styles

* hero typography updates

* remove bullets from lists

* fix transparency issue

* add ammos info to footer

* update header copy and contact link

* hide testimonials section and duplicate links

* reduce spacing between sections

* clean up comments

* update ui screenshot

* copy editing per feedback

* fix video layout bugs and improve responsiveness

* update site description and title, add video

* remove unused assets

* update order of tagline

* remove comments

* fix how video is imported

* hide video, remove more comments and assets

* Add promo video and still image for preview

* adjust padding for logo sections

---------

Co-authored-by: Lyle Klyne <[email protected]>
  • Loading branch information
@camargo @lklyne
camargo and lklyne authored Mar 5, 2024
1 parent 9032f8e commit 42ad72f
Show file tree
Hide file tree
Showing 55 changed files with 1,227 additions and 3 deletions.
1 change: 1 addition & 0 deletions .gitattributes
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
*.png filter=lfs diff=lfs merge=lfs -text
*.webm filter=lfs diff=lfs merge=lfs -text
*.mov filter=lfs diff=lfs merge=lfs -text
*.mp4 filter=lfs diff=lfs merge=lfs -text
280 changes: 280 additions & 0 deletions src/components/HomepageCards/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,280 @@
import React from 'react';
import clsx from 'clsx';
import styles from './styles.module.css';
import { useColorMode } from '@docusaurus/theme-common';

const FeatureList = [
{
title: 'Seamless workflow from planning to commanding',
Img: require('@site/static/img/cards/aerie-feature-planning-commanding-light.png').default,
ImgDark: require('@site/static/img/cards/aerie-feature-planning-commanding-dark.png').default,
size: 'col--8',
description: (
<>
Build sequences and commands that execute on-board a spacecraft directly from activities in your plans. Author
and refine sequences derived from your command dictionary.
</>
),
},
{
title: 'Extensible mission modeling and simulation',
Img: require('@site/static/img/cards/aerie-feature-mission-modeling-light.png').default,
ImgDark: require('@site/static/img/cards/aerie-feature-mission-modeling-dark.png').default,
size: 'col--4',
description: (
<>
Model your system with access to the entire Java ecosystem. Validate plans against your models using Aerie's
discrete event simulator through the user interface or Aerie API.
</>
),
},
{
title: 'Real-time collaboration and versioning',
Img: require('@site/static/img/cards/aerie-feature-collaboration-light.png').default,
ImgDark: require('@site/static/img/cards/aerie-feature-collaboration-dark.png').default,
size: 'col--4',
description: (
<>
Create, modify, and test out plans together in real time from across the world. Or make branches, edit them
asynchronously, and merge them together when you're ready.
</>
),
},
{
title: 'Low-code scheduling and rule checking',
Img: require('@site/static/img/cards/aerie-feature-rule-checking-light.png').default,
ImgDark: require('@site/static/img/cards/aerie-feature-rule-checking-dark.png').default,
size: 'col--8',
description: (
<>
Automate plan creation with prioritized scheduling goals. Author constraints, evaluate them against a simulation
of your plan, and visualize violations on the plan timeline.
</>
),
},
];

const GetStartedList = [
{
title: 'For Mission Planners',
Img: require('@site/static/img/cards/aerie-getstarted-mission-planners-light.png').default,
ImgDark: require('@site/static/img/cards/aerie-getstarted-mission-planners-dark.png').default,
size: 'col--4',
link: '/aerie-docs/category/planning/',
linkTitle: 'Planning docs',
description: (
<>
Create a viable plan that meets mission objectives while adhering to all constraints throughout the project
lifecycle.
</>
),
},
{
title: 'For Systems Engineers',
Img: require('@site/static/img/cards/aerie-getstarted-systems-engineers-light.png').default,
ImgDark: require('@site/static/img/cards/aerie-getstarted-systems-engineers-dark.png').default,
size: 'col--4',
// link: '/aerie-docs/category/planning/',
// linkTitle: 'Planning docs',
description: <>Analyze and inform spacecraft design and architecture during development.</>,
},
{
title: 'For Spacecraft Operators',
Img: require('@site/static/img/cards/aerie-getstarted-spacecraftops-light.png').default,
ImgDark: require('@site/static/img/cards/aerie-getstarted-spacecraftops-dark.png').default,
size: 'col--4',
// link: '/aerie-docs/category/planning/',
// linkTitle: 'Planning docs',
description: (
<>
Build and collaboratively iterate on an integrated plan and set of commands that meets plan goals and
constraints.
</>
),
},
{
title: 'Open source and zero cost',
Img: require('@site/static/img/cards/aerie-getstarted-opensource-light.png').default,
ImgDark: require('@site/static/img/cards/aerie-getstarted-opensource-dark.png').default,
size: 'col--4',
link: 'https://opensource.org/license/mit/',
linkTitle: 'MIT License',
description: (
<>Community driven flexible workspace designed to support flagship missions to exploratory proposals.</>
),
},
{
title: 'Quick set up and customization',
Img: require('@site/static/img/cards/aerie-getstarted-customize-light.png').default,
ImgDark: require('@site/static/img/cards/aerie-getstarted-customize-dark.png').default,
size: 'col--8',
link: '/aerie-docs/introduction/#fast-track',
linkTitle: 'Aerie quick start',
description: (
<>
Aerie was designed from the ground up to be easily installed and used to get your mission up and running
quickly. Aerie lets you focus on your mission, and we'll do the chores.
</>
),
},
];

const LearnMoreList = [
{
title: 'Ask a question on Slack',
Img: require('@site/static/img/cards/aerie-learn-slack.png').default,
ImgDark: require('@site/static/img/cards/aerie-learn-slack-dark.png').default,
size: 'col--4',
link: 'https://join.slack.com/t/nasa-ammos/shared_invite/zt-1mlgmk5c2-MgqVSyKzVRUWrXy87FNqPw',
linkTitle: 'Join Slack',
description: (
<>Say hi or get help by joining our Slack conversations or posting a question in our GitHub discussions.</>
),
},
{
title: 'Discuss or contribute on Github',
Img: require('@site/static/img/cards/aerie-learn-github.png').default,
ImgDark: require('@site/static/img/cards/aerie-learn-github-dark.png').default,
size: 'col--4',
link: 'https://github.com/NASA-AMMOS/aerie',
linkTitle: 'Aerie on Github',
description: (
<>Post a question in GitHub discussions, or contribute back and help make Aerie even better than it is today.</>
),
},
{
title: 'Sign up for news and updates',
Img: require('@site/static/img/cards/aerie-learn-googlegroup.png').default,
ImgDark: require('@site/static/img/cards/aerie-learn-googlegroup-dark.png').default,
size: 'col--4',
link: 'https://groups.google.com/u/3/g/aerie-users',
linkTitle: 'Aerie Users Group',
description: <>Stay up-to-date on the latest news and releases by joining the Aerie Users Google Group.</>,
},
{
title: 'Dive into the docs',
size: 'col--4',
links: [
{ url: '/aerie-docs/overview/concept-of-operations/', text: 'Concept of Operations' },
{ url: '/aerie-docs/overview/software-design-document/', text: 'Software Design Document' },
{ url: '/aerie-docs/mission-modeling/introduction/', text: 'Mission Modeling' },
{ url: '/aerie-docs/category/planning/', text: 'Planning' },
{ url: '/aerie-docs/constraints/introduction/', text: 'Constraints' },
{ url: '/aerie-docs/java-docs/introduction/', text: 'Java Docs' },
],
description: <>See the details of how different components work in Aerie.</>,
},
{
title: 'Explore a universe of extensions',
Img: require('@site/static/img/cards/aerie-learn-extensions.png').default,
ImgDark: require('@site/static/img/cards/aerie-learn-extensions-dark.png').default,
size: 'col--4',
link: '/aerie-docs/introduction/#fast-track',
linkTitle: 'Coming soon',
description: (
<>
Project and community members have begun to build a marketplace of extensions you can use to jump start your
modeling and ground system integration efforts.
</>
),
},
{
title: 'Something else?',
size: 'col--4',
link: '[email protected]',
linkTitle: '[email protected]',
description: (
<>
Have a specific quesion that you'd like help with? Curious to speak with someone directly? Send us an email and
we can find to chat or demo Aerie.
</>
),
},
];

function Feature({ Img, ImgDark, title, description, size, link, linkTitle, links }) {
const { colorMode } = useColorMode();

return (
<div className={clsx(`col ${styles.featureSection}`, size)}>
<div className={styles.card}>
<div className="card__header">
<h3>{title}</h3>
</div>
<div className={clsx(`card__body ${styles.cardBody}`)}>
<div className={styles.cardDescription}>
<p>{description}</p>
{links && (
<ul className={styles.linksList}>
{links.map((linkItem, index) => (
<li key={index}>
<a href={linkItem.url} target={linkItem.newTab ? '_blank' : '_self'} rel="noopener noreferrer">
{linkItem.text}
</a>
</li>
))}
</ul>
)}
</div>

{Img && <img src={colorMode === 'light' ? Img : ImgDark} className={styles.cardImg} alt={title} />}

{link && (
<div className={styles.cardFooter}>
{linkTitle === 'Coming soon' ? (
<p style={{ marginBottom: 0 }}>Coming soon</p>
) : (
<a href={link}>
{linkTitle}
<span className={styles.linkArrow}>→</span>
</a>
)}
</div>
)}
</div>
</div>
</div>
);
}

export function HomepageFeatures() {
return (
<section className={styles.cardSection}>
<div className="container">
<div className="row">
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</div>
</section>
);
}

export function HomepageGetStarted() {
return (
<section className={styles.cardSection}>
<div className="container">
<div className="row">
{GetStartedList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</div>
</section>
);
}

export function HomepageLearnMore() {
return (
<section className={styles.cardSection}>
<div className="container">
<div className="row">
{LearnMoreList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</div>
</section>
);
}
72 changes: 72 additions & 0 deletions src/components/HomepageCards/styles.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
.cardSection {
display: flex;
align-items: center;
padding: 1rem;
width: 100%;
background-color: var(--ifm-hero-background-color);
}

.featureSection {
margin-bottom: 2rem;
}

.card {
height: 100%;
background-color: var(--ifm-color-secondary-lightest);
border: 1px solid var(--ifm-color-secondary-light);
border-radius: 0.25rem;
margin-bottom: 1rem;
overflow: hidden;
box-shadow: var(--card-shadow);
position: relative;
margin-bottom: 2rem;
}

.cardBody {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
padding-bottom: 0;
color: var(--ifm-color-secondary-dark);
}

.cardBody > :last-child {
align-self: flex-end;
}

.cardImg {
height: auto;
width: calc(100% + 2rem);
margin: -6rem -1rem -1rem -1rem;
padding-bottom: 2rem;
object-fit: scale-down;
max-width: none;
max-height: 300px;
}

.cardFooter {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
background-color: var(--ifm-color-secondary-lightest);
border-top: 1px solid var(--ifm-color-secondary-light);
position: absolute;
opacity: 0.8;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
backdrop-filter: blur(10px);
}

.cardDescription {
max-width: 32rem;
}

.linksList {
list-style-type: none;
margin: 0;
padding: 0;
}
Loading

0 comments on commit 42ad72f

Please sign in to comment.