-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9a67b0a
commit 96b6d77
Showing
7 changed files
with
204 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { ReviewQuoteFragment } from '~/components/quote/graphql'; | ||
| import { ResponsiveImageFragment } from '~/components/ResponsiveImage/graphql'; | ||
| import { TagFragment } from '~/lib/datocms/commonFragments'; | ||
| import { graphql } from '~/lib/datocms/graphql'; | ||
|
|
||
| export const query = graphql( | ||
| /* GraphQL */ ` | ||
| query Features { | ||
| page: aboutPage { | ||
| _seoMetaTags { | ||
| ...TagFragment | ||
| } | ||
| } | ||
| members: allTeamMembers { | ||
| name | ||
| role | ||
| avatar { | ||
| responsiveImage(imgixParams: { auto: format, w: 480, h: 360, fit: crop }) { | ||
| ...ResponsiveImageFragment | ||
| } | ||
| } | ||
| } | ||
| review1: review(filter: { name: { eq: "Jeff Escalante" } }) { | ||
| __typename | ||
| ...ReviewQuoteFragment | ||
| } | ||
| review2: review(filter: { name: { eq: "Marc Ammann" } }) { | ||
| __typename | ||
| ...ReviewQuoteFragment | ||
| } | ||
| } | ||
| `, | ||
| [ResponsiveImageFragment, TagFragment, ReviewQuoteFragment], | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| .membersWrapper { | ||
| align-items: center; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| padding: var(--page-margin); | ||
| } | ||
|
|
||
| .members { | ||
| display: grid; | ||
| gap: 40px 25px; | ||
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | ||
| max-width: var(--page-width-with-margin); | ||
| width: 100%; | ||
| } | ||
|
|
||
| .memberImage { | ||
| border-radius: 4px; | ||
| box-shadow: var(--smaller-box-shadow); | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .memberInfo { | ||
| font-size: 14px; | ||
| margin-top: 10px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| --- | ||
| import { notFoundResponse, avoidAstroTypeCheckBug } from '~/lib/notFoundResponse'; | ||
| import { executeQuery } from '~/lib/datocms/executeQuery'; | ||
| import { Wrapper } from '~/components/Wrapper'; | ||
| import { Svg } from '~/components/Svg'; | ||
| import { Space } from '~/components/Space'; | ||
| import { SingleQuote } from '~/components/quote/SingleQuote'; | ||
| import { ResponsiveImage } from '~/components/ResponsiveImage'; | ||
| import { LogosBar } from '~/components/LogosBar'; | ||
| import { Layout } from '~/layouts/Layout'; | ||
| import { Hero } from '~/components/Hero'; | ||
| import { Flag } from '~/components/Flag'; | ||
| import { query } from './_graphql'; | ||
| import s from './_style.module.css'; | ||
| const { page, members, review1, review2 } = await executeQuery(Astro, query); | ||
| if (!page || members.length === 0 || !review1 || !review2) { | ||
| avoidAstroTypeCheckBug(notFoundResponse); | ||
| return notFoundResponse(); | ||
| } | ||
| --- | ||
|
|
||
| <Layout additionalSeo={page._seoMetaTags}> | ||
| <Hero> | ||
| <Fragment slot="kicker">Meet our team</Fragment> | ||
| <Fragment slot="title"> | ||
| We build tools that work <mark>the way you do</mark> | ||
| </Fragment> | ||
| <Fragment slot="subtitle"> | ||
| Our mission? Help you create projects that truly feel yours | ||
| </Fragment> | ||
| </Hero> | ||
|
|
||
| <Space top={2} bottom={2}> | ||
| <LogosBar | ||
| title="We power experiences for over half a billion users" | ||
| clients={[ | ||
| 'svg/logos/deutsche-telekom', | ||
| 'svg/logos/hashicorp', | ||
| 'svg/logos/verizon', | ||
| 'svg/logos/polestar', | ||
| 'svg/logos/vercel', | ||
| ]} | ||
| /> | ||
| </Space> | ||
|
|
||
| <Wrapper> | ||
| <Flag style="good"> | ||
| <Fragment slot="visual"> | ||
| <Svg name="svg/illustrations/team" /> | ||
| </Fragment> | ||
| <Fragment slot="title"> | ||
| Designed by an agency <mark>with your needs in mind</mark> | ||
| </Fragment> | ||
| <p> | ||
| DatoCMS started in 2015 as an internal tool for our italian{' '} | ||
| <a href="https://www.leanpanda.com/" target="_blank">web agency</a>. | ||
| <strong> | ||
| We understand the needs of your clients and partners because they are just like ours. | ||
| </strong> | ||
| We know what worries you, because we too choke up the night before that deploy. | ||
| </p> | ||
| <p> | ||
| We don’t follow trends and we keep our things simple; we design every feature from the | ||
| practical, real-world needs we see every day in our job. | ||
| </p> | ||
| <p> | ||
| Since 2019, DatoCMS is an independent, profitable company with a fully dedicated team behind | ||
| it, committed in giving you the best headless CMS in the market. | ||
| </p> | ||
| </Flag> | ||
|
|
||
| <Space top={3}> | ||
| <SingleQuote quote={review1} size="big" /> | ||
| </Space> | ||
|
|
||
| <Space top={3}> | ||
| <Flag style="good"> | ||
| <Fragment slot="visual"> | ||
| <Svg name="svg/illustrations/growing" /> | ||
| </Fragment> | ||
| <Fragment slot="title"> | ||
| Slowly and <mark>steadily</mark> | ||
| </Fragment> | ||
| <p> | ||
| You can call us a bootstrap company, big enough to serve customers all over the world, | ||
| small enough for a Friday evening spritz together. | ||
| </p> | ||
| <p> | ||
| <strong>We’re healthy, happy and — excuse our language — profitable.</strong> | ||
| </p> | ||
| <p> | ||
| We don’t want venture capital funding. We don’t have an outbound sales team. We like dogs | ||
| more than unicorns, sharing instead of disrupting and we’re here to stay. We owe only our | ||
| best efforts to you and ourselves. We've put down our roots and we want them to grow. | ||
| Slowly but steadily. | ||
| </p> | ||
| </Flag> | ||
| </Space> | ||
| </Wrapper> | ||
|
|
||
| <Space top={3}> | ||
| <div class={s.membersWrapper}> | ||
| <div class={s.members}> | ||
| { | ||
| members.map((member) => ( | ||
| <div class={s.member}> | ||
| <div class={s.memberImage}> | ||
| <ResponsiveImage data={member.avatar.responsiveImage} /> | ||
| </div> | ||
| <div class={s.memberInfo}> | ||
| <h3>{member.name}</h3> | ||
| <p>{member.role}</p> | ||
| </div> | ||
| </div> | ||
| )) | ||
| } | ||
| </div> | ||
| </div> | ||
| </Space> | ||
|
|
||
| <Wrapper> | ||
| <Space top={3}> | ||
| <SingleQuote quote={review2} size="big" /> | ||
| </Space> | ||
| </Wrapper> | ||
| </Layout> |