├── .editorconfig ├── .env.example ├── .eslintignore ├── .eslintrc ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── config.yml │ └── other.md ├── dependabot.yml └── workflows │ └── tests.yml ├── .gitignore ├── .percy.json ├── .storybook ├── main.js ├── preview-head.html ├── preview.js └── webpack.config.js ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── assets ├── landing.png ├── meilisearch-landing-dark.png └── meilisearch-landing-light.png ├── bors.toml ├── cypress.config.js ├── cypress ├── e2e │ └── functional.js └── support │ ├── commands.js │ └── e2e.js ├── data ├── 404.js ├── about-us.js ├── footer.js ├── header.js ├── homepage.js ├── legal.js └── pricing.js ├── jsconfig.json ├── next.config.js ├── package.json ├── public ├── apple-touch-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── icons │ └── check.svg └── images │ ├── bjornftw.jpeg │ ├── danpastori.jpeg │ ├── david-boyne.png │ ├── decorator1.svg │ ├── decorator2.svg │ ├── decorator3.svg │ ├── decorator4.svg │ ├── decorator5.svg │ ├── decorator6.svg │ ├── decorator7.svg │ ├── developer.svg │ ├── dhigit9.jpeg │ ├── hero-desktop.svg │ ├── hero-mobile.svg │ ├── interactive-search-arrows.svg │ ├── jellevliet.jpeg │ ├── meili-logo.png │ ├── meili-logo.svg │ ├── meilisearch-full.svg │ ├── meilisearch.svg │ ├── miteshmetha.jpeg │ ├── og-image.png │ ├── orphikkkk.jpeg │ ├── pricing-hero-stars-left.svg │ ├── pricing-hero-stars-right.svg │ ├── step1-mobile.svg │ ├── step1.svg │ ├── step2.svg │ ├── step3-2-mobile.svg │ ├── step3-2.svg │ ├── step3-mobile.svg │ ├── step3.svg │ ├── teamMembers │ ├── alexia.png │ ├── amelie.png │ ├── bruno.png │ ├── carolina.png │ ├── charline.png │ ├── charlotte.png │ ├── clementine.png │ ├── dave.png │ ├── ferdinand.png │ ├── gui.png │ ├── guillaume.png │ ├── ingrid.png │ ├── jonathan.png │ ├── kero.png │ ├── laurene.png │ ├── loic.png │ ├── louis.png │ ├── luna.png │ ├── many.png │ ├── maryam.png │ ├── morgane-d.png │ ├── morgane-n.png │ ├── nico.png │ ├── olu.png │ ├── quentin.png │ ├── sam.png │ ├── tamo.png │ ├── thomas.png │ └── tommy.png │ ├── theraloss.jpeg │ └── timeline.png ├── snapshots.yml ├── src ├── blocks │ ├── AboutUsHero.js │ ├── Cards.js │ ├── Companies.js │ ├── ComparativeTable.js │ ├── Demo.js │ ├── Developer │ │ ├── Terminal │ │ │ ├── Head.js │ │ │ ├── LeftColumn.js │ │ │ ├── RightColumn.js │ │ │ └── index.js │ │ ├── Text.js │ │ ├── TitleSection.js │ │ └── index.js │ ├── FAQ.js │ ├── Footer │ │ ├── BottomSection.js │ │ ├── MenuSection.js │ │ ├── Newsletter.js │ │ └── index.js │ ├── Header │ │ ├── Ctas.js │ │ ├── DesktopHeader.js │ │ ├── Logo.js │ │ ├── MenuLinks.js │ │ ├── MobileHeader.js │ │ └── index.js │ ├── Hero.js │ ├── Investors.js │ ├── JobOffers.js │ ├── OpenSource.js │ ├── OurStory.js │ ├── OurTeam │ │ ├── Carousel.js │ │ ├── TeamMemberCard.js │ │ ├── TeamMemberList.js │ │ └── index.js │ ├── PerksAndBenefits.js │ ├── PricingHero.js │ ├── PricingPlans │ │ ├── Plan.js │ │ └── index.js │ ├── Step1.js │ ├── Step2.js │ ├── Step3 │ │ ├── FirstSection.js │ │ ├── SecondSection.js │ │ ├── TitleSection.js │ │ └── index.js │ ├── Testimonials.js │ ├── Values.js │ └── index.js ├── components │ ├── Accordion.js │ ├── Anchor.js │ ├── AnchorTitles.js │ ├── Banner.js │ ├── Bullets.js │ ├── Button.js │ ├── Card.js │ ├── Checkbox.js │ ├── Dialog │ │ ├── DialogBackdrop.js │ │ ├── DialogContent.js │ │ ├── DialogDisclosure.js │ │ └── index.js │ ├── Disclosure │ │ ├── Disclosure.js │ │ ├── DisclosureContent.js │ │ └── index.js │ ├── FullWidthCard.js │ ├── GithubButton.js │ ├── Grid.js │ ├── Head.js │ ├── IconCard.js │ ├── Image.js │ ├── Input.js │ ├── InteractiveSearch.js │ ├── Link.js │ ├── List.js │ ├── Lottie.js │ ├── Markdown.js │ ├── Menu │ │ ├── Menu.js │ │ ├── MenuDisclosure.js │ │ ├── MenuItem.js │ │ └── index.js │ ├── PageContent.js │ ├── PreTitle.js │ ├── PricingCard.js │ ├── Radio.js │ ├── RoundedIcon.js │ ├── Searchbox.js │ ├── Tab.js │ ├── Table.js │ ├── Tag.js │ ├── Testimonial.js │ ├── Tooltip.js │ ├── Typography.js │ └── icons │ │ ├── Angular.js │ │ ├── Api.js │ │ ├── ApiReference.js │ │ ├── Arrow.js │ │ ├── B2CApp.js │ │ ├── Blog.js │ │ ├── Chat.js │ │ ├── Code.js │ │ ├── Cross.js │ │ ├── Crv.js │ │ ├── Dart.js │ │ ├── Diamond.js │ │ ├── Discord.js │ │ ├── Documentation.js │ │ ├── Dotnet.js │ │ ├── Earth.js │ │ ├── Ecommerce.js │ │ ├── Excluded.js │ │ ├── Felicis.js │ │ ├── Filter.js │ │ ├── GeographicSearch.js │ │ ├── Github.js │ │ ├── GithubOutlined.js │ │ ├── Go.js │ │ ├── GoRails.js │ │ ├── Guides.js │ │ ├── Hellonext.js │ │ ├── HuggingFace.js │ │ ├── Included.js │ │ ├── Instantmeilisearch.js │ │ ├── Integrations.js │ │ ├── Java.js │ │ ├── Javascript.js │ │ ├── Juicebrothers.js │ │ ├── Key.js │ │ ├── KimaVentures.js │ │ ├── Laravel.js │ │ ├── Lightning.js │ │ ├── Linkedin.js │ │ ├── Literal.js │ │ ├── LocalGlobe.js │ │ ├── LouisVuitton.js │ │ ├── MagnifyingGlass.js │ │ ├── Mango.js │ │ ├── Media.js │ │ ├── NumericSorting.js │ │ ├── Other.js │ │ ├── Palmes.js │ │ ├── Php.js │ │ ├── PlatformSh.js │ │ ├── Plug.js │ │ ├── Puzzle.js │ │ ├── Python.js │ │ ├── Rails.js │ │ ├── React.js │ │ ├── RightArrow.js │ │ ├── Roadmap.js │ │ ├── Roadmap2.js │ │ ├── Rocket.js │ │ ├── Ruby.js │ │ ├── Rust.js │ │ ├── SaasApp.js │ │ ├── Seedcamp.js │ │ ├── SiteSearch.js │ │ ├── SortBy.js │ │ ├── Star.js │ │ ├── Swift.js │ │ ├── Symfony.js │ │ ├── TextualSearch.js │ │ ├── Twitter.js │ │ ├── Typo.js │ │ ├── Vercel.js │ │ ├── Vue.js │ │ ├── Wrench.js │ │ ├── index.js │ │ └── svg │ │ ├── API.svg │ │ ├── CRV.svg │ │ ├── Code.svg │ │ ├── angular.svg │ │ ├── arrow.svg │ │ ├── blog.svg │ │ ├── chat.svg │ │ ├── cross.svg │ │ ├── dart.svg │ │ ├── diamond.svg │ │ ├── discord.svg │ │ ├── documentation.svg │ │ ├── dotnet.svg │ │ ├── earth.svg │ │ ├── excluded.svg │ │ ├── felicis.svg │ │ ├── filter.svg │ │ ├── github.svg │ │ ├── github_outlined.svg │ │ ├── go.svg │ │ ├── go_rails.svg │ │ ├── guides.svg │ │ ├── hellonext.svg │ │ ├── hugging_face.svg │ │ ├── included.svg │ │ ├── instantmeilisearch.svg │ │ ├── java.svg │ │ ├── javascript.svg │ │ ├── juicebrothers.svg │ │ ├── key.svg │ │ ├── kima_ventures.svg │ │ ├── laravel.svg │ │ ├── lightning.svg │ │ ├── linkedin.svg │ │ ├── literal.svg │ │ ├── local_globe.svg │ │ ├── louis_vuitton.svg │ │ ├── magnifying_glass.svg │ │ ├── mango.svg │ │ ├── palmes.svg │ │ ├── php.svg │ │ ├── platform_sh.svg │ │ ├── plug.svg │ │ ├── puzzle.svg │ │ ├── python.svg │ │ ├── rails.svg │ │ ├── react.svg │ │ ├── right_arrow.svg │ │ ├── roadmap.svg │ │ ├── roadmap2.svg │ │ ├── rocket.svg │ │ ├── ruby.svg │ │ ├── rust.svg │ │ ├── seedcamp.svg │ │ ├── sort_by.svg │ │ ├── star.svg │ │ ├── swift.svg │ │ ├── symfony.svg │ │ ├── twitter.svg │ │ ├── typo.svg │ │ ├── vercel.svg │ │ ├── vue.svg │ │ └── wrench.svg ├── hooks │ └── useWindowSize.js ├── layouts │ ├── BaseLayout.js │ └── LegalLayout.js ├── lotties │ ├── animatedArrows.json │ ├── hamburgerMenu.json │ ├── hero-desktop.json │ ├── hero-mobile.json │ └── opensource.json ├── pages │ ├── 404.js │ ├── [legal].js │ ├── _app.js │ ├── _document.js │ ├── about-us.js │ ├── index.js │ ├── pricing.js │ ├── privacy-policy.mdx │ └── terms-of-use.mdx ├── stories │ ├── AboutUsHero.stories.js │ ├── Accordion.stories.js │ ├── Bullets.stories.js │ ├── Button.stories.js │ ├── Card.stories.js │ ├── Cards.stories.js │ ├── Checkbox.stories.js │ ├── Companies.stories.js │ ├── Demo.stories.js │ ├── Dialog.stories.js │ ├── Disclosure.stories.js │ ├── FAQ.stories.js │ ├── Footer.stories.js │ ├── GithubButton.stories.js │ ├── Header.stories.js │ ├── Hero.stories.js │ ├── Icons.stories.js │ ├── Input.stories.js │ ├── InteractiveSearch.stories.js │ ├── Investors.stories.js │ ├── JobOffers.stories.js │ ├── Link.stories.js │ ├── List.stories.js │ ├── Menu.stories.js │ ├── OpenSource.stories.js │ ├── OurStory.stories.js │ ├── OurTeam.stories.js │ ├── PerksAndBenefits.stories.js │ ├── PreTitle.stories.js │ ├── Pricing.stories.js │ ├── PricingCard.stories.js │ ├── PricingHero.stories.js │ ├── Radio.stories.js │ ├── RoundedIcon.stories.js │ ├── Searchbox.stories.js │ ├── Step1.stories.js │ ├── Step2.stories.js │ ├── Step3.stories.js │ ├── Tab.stories.js │ ├── Table.stories.js │ ├── TableComponent.stories.js │ ├── Tag.stories.js │ ├── Testimonial.stories.js │ ├── Testimonials.stories.js │ ├── Tooltip.stories.js │ ├── Typography.stories.js │ └── Values.stories.js ├── theme │ ├── GlobalStyle.js │ ├── breakpoints.js │ ├── colors.js │ ├── dracula.js │ ├── fontFamily.js │ ├── fontWeight.js │ └── index.js └── utils │ ├── colors.js │ ├── formatStargazers.js │ ├── get.js │ ├── getCodeSamples.js │ ├── getColorName.js │ ├── hexToRgb.js │ ├── isBreakpointSmaller.js │ └── shuffleArray.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # top-most EditorConfig file 2 | root = true 3 | 4 | # all files 5 | [*] 6 | end_of_line = lf 7 | insert_final_newline = true 8 | indent_style = space 9 | indent_size = 2 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | max_line_length = 80 13 | quote_type = single 14 | 15 | [*.{js,ts}] 16 | quote_type = single 17 | curly_bracket_next_line = false 18 | spaces_around_brackets = inside 19 | indent_brace_style = BSD KNF 20 | 21 | # HTML 22 | [*.html] 23 | quote_type = double 24 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_DEMO_MOVIES_HOST=http://0.0.0.0:7700 2 | NEXT_PUBLIC_DEMO_MOVIES_API_KEY=searchKey 3 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .cache 2 | build 3 | node_modules 4 | public 5 | storybook-static 6 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true, 5 | "node": true, 6 | "cypress/globals": true 7 | }, 8 | "extends": ["next", "prettier", "eslint:recommended", "plugin:cypress/recommended"], 9 | "parserOptions": { 10 | "ecmaFeatures": { 11 | "jsx": true 12 | }, 13 | "sourceType": "module", 14 | "ecmaVersion": 12 15 | }, 16 | "plugins": ["react", "prettier", "cypress"], 17 | "settings": { 18 | "react": { 19 | "version": "detect" 20 | } 21 | }, 22 | "rules": { 23 | "cypress/no-unnecessary-waiting": "off", 24 | "react/jsx-closing-bracket-location": [2, "tag-aligned"], 25 | "import/no-anonymous-default-export": "off", 26 | "no-unused-vars": [ 27 | "error", 28 | { 29 | "varsIgnorePattern": "^omit.*$" 30 | } 31 | ], 32 | "array-callback-return": "off", 33 | "arrow-parens": ["error", "as-needed"], 34 | "prettier/prettier": [ 35 | "error", 36 | { 37 | "quoteProps": "consistent", 38 | "semi": false, 39 | "arrowParens": "avoid", 40 | "singleQuote": true, 41 | "trailingComma": "es5", 42 | "tabWidth": 2 43 | } 44 | ] 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Landing Bug Report 🐞 3 | about: Create a report to help us improve. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | --- 8 | 9 | 10 | 11 | **Description** 12 | Description of what the bug is about. 13 | 14 | **Expected behavior** 15 | What you expected to happen. 16 | 17 | **Current behavior** 18 | What happened. 19 | 20 | **Screenshots or Logs** 21 | If applicable, add screenshots or logs to help explain your problem. 22 | 23 | **Environment (please complete the following information):** 24 | 25 | - Browser: [e.g. Chrome version 90.0] 26 | - Viewport: [e.g. 800px (width) x 480px (height)] 27 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Meilisearch Project Issues 4 | url: https://github.com/meilisearch/meilisearch/issues 5 | about: Please report Meilisearch issues here 6 | - name: Meilisearch Documentation Issues 7 | url: https://github.com/meilisearch/documentation/issues 8 | about: Please report documentation issues here 9 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/other.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Other 3 | about: Any other topic you want to talk about. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | --- 8 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: '/' 5 | schedule: 6 | interval: weekly 7 | time: '04:00' 8 | open-pull-requests-limit: 10 9 | labels: 10 | - skip-changelog 11 | - dependencies 12 | versioning-strategy: increase 13 | rebase-strategy: disabled 14 | ignore: 15 | - dependency-name: 'eslint*' 16 | - dependency-name: '*prettier*' 17 | - dependency-name: '*storybook*' 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | 36 | # cypress 37 | /cypress/plugins 38 | /cypress/screenshots 39 | /cypress/videos 40 | /cypress/fixtures 41 | 42 | # storybook 43 | /storybook-static 44 | -------------------------------------------------------------------------------- /.percy.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "snapshot": { 4 | "widths": [1440], 5 | "percy-css": ".hide-in-percy {\n visibility: hidden;\n}\n" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: [ 3 | '../src/stories/**/*.stories.mdx', 4 | '../src/stories/**/*.stories.@(js|jsx|ts|tsx)', 5 | ], 6 | addons: [ 7 | '@storybook/addon-links', 8 | '@storybook/addon-essentials', 9 | 'storybook-addon-next-router', 10 | ], 11 | staticDirs: ['../public'], 12 | }; 13 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ThemeProvider } from 'styled-components'; 3 | import { createGlobalStyle } from 'styled-components'; 4 | import theme from '../src/theme'; 5 | import * as nextImage from 'next/image'; 6 | import { RouterContext } from 'next/dist/shared/lib/router-context'; 7 | 8 | const GlobalStyle = createGlobalStyle` 9 | html, body { 10 | margin: 0; 11 | } 12 | * { 13 | box-sizing: border-box; 14 | } 15 | a { 16 | text-decoration: none; 17 | } 18 | 19 | img { 20 | position: relative; 21 | } 22 | `; 23 | 24 | export const decorators = [ 25 | (Story) => ( 26 | 27 | 28 | 29 | 30 | ), 31 | ]; 32 | 33 | export const parameters = { 34 | actions: { argTypesRegex: '^on[A-Z].*' }, 35 | layout: 'fullscreen', 36 | backgrounds: { 37 | default: 'valhalla', 38 | values: [ 39 | { 40 | name: 'valhalla', 41 | value: '#21004B', 42 | }, 43 | { 44 | name: 'white', 45 | value: '#FFF', 46 | }, 47 | ], 48 | }, 49 | nextRouter: { 50 | Provider: RouterContext.Provider, 51 | path: '/', 52 | asPath: '/', 53 | query: {}, 54 | push() {}, 55 | }, 56 | }; 57 | 58 | // Workaround for Next/Image not working in Storybook 59 | Object.defineProperty(nextImage, 'default', { 60 | configurable: true, 61 | value: (props) => , 62 | }); 63 | -------------------------------------------------------------------------------- /.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = ({config}) => { 4 | config.resolve.modules = [ 5 | path.resolve(__dirname, "..", "src"), 6 | "node_modules", 7 | ] 8 | 9 | return config 10 | } 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020-2022 Meili SAS 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /assets/landing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/assets/landing.png -------------------------------------------------------------------------------- /assets/meilisearch-landing-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/assets/meilisearch-landing-dark.png -------------------------------------------------------------------------------- /assets/meilisearch-landing-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/assets/meilisearch-landing-light.png -------------------------------------------------------------------------------- /bors.toml: -------------------------------------------------------------------------------- 1 | status = [ 2 | 'linter_check', 3 | 'cypress-run', 4 | 'percy' 5 | ] 6 | # 1 hour timeout 7 | timeout-sec = 3600 8 | -------------------------------------------------------------------------------- /cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('cypress') 2 | 3 | module.exports = defineConfig({ 4 | viewportWidth: 1440, 5 | viewportHeight: 900, 6 | scrollBehavior: 'center', 7 | projectId: '4ja87b', 8 | e2e: { 9 | // We've imported your old cypress plugins here. 10 | // You may want to clean this up later by importing these. 11 | // setupNodeEvents(on, config) { 12 | // return require('./cypress/plugins/index.js')(on, config) 13 | // }, 14 | baseUrl: 'http://localhost:3000', 15 | specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}', 16 | }, 17 | blockHosts: ['*.segment.com'], 18 | }) 19 | -------------------------------------------------------------------------------- /cypress/support/commands.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/cypress/support/commands.js -------------------------------------------------------------------------------- /cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | import './commands' 2 | -------------------------------------------------------------------------------- /data/404.js: -------------------------------------------------------------------------------- 1 | const get404Data = () => ({ 2 | meta: { 3 | title: '404', 4 | description: '', 5 | }, 6 | content: { 7 | description: 'Sorry, the page you are looking for does not exist.', 8 | cta: 'Bring me home, please', 9 | }, 10 | }) 11 | 12 | export default get404Data 13 | -------------------------------------------------------------------------------- /data/legal.js: -------------------------------------------------------------------------------- 1 | const getLegalData = () => ({ 2 | text: { 3 | legal: 'Legal', 4 | }, 5 | menu: [ 6 | { 7 | title: 'Privacy policy', 8 | href: '/privacy-policy', 9 | }, 10 | { 11 | title: 'Terms of use', 12 | href: '/terms-of-use', 13 | }, 14 | ], 15 | }) 16 | 17 | export default getLegalData 18 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src" 4 | }, 5 | "include": ["src"] 6 | } 7 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | reactStrictMode: true, 3 | compiler: { 4 | styledComponents: true, 5 | }, 6 | poweredByHeader: false, 7 | webpack: config => { 8 | // Unset client-side javascript that only works server-side 9 | config.resolve.fallback = { fs: false, module: false } 10 | config.module.rules.push({ 11 | test: /\.mdx$/, 12 | use: 'raw-loader', 13 | }) 14 | return config 15 | }, 16 | images: { 17 | domains: ['pbs.twimg.com', 'image.tmdb.org'], 18 | }, 19 | async redirects() { 20 | return [ 21 | { 22 | source: '/privacy', 23 | destination: '/privacy-policy', 24 | permanent: true, 25 | }, 26 | { 27 | source: '/blog', 28 | destination: 'https://blog.meilisearch.com', 29 | permanent: true, 30 | basePath: false, 31 | }, 32 | { 33 | source: '/docs', 34 | destination: 'https://docs.meilisearch.com', 35 | permanent: true, 36 | basePath: false, 37 | }, 38 | ] 39 | }, 40 | } 41 | -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/favicon.ico -------------------------------------------------------------------------------- /public/icons/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/bjornftw.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/bjornftw.jpeg -------------------------------------------------------------------------------- /public/images/danpastori.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/danpastori.jpeg -------------------------------------------------------------------------------- /public/images/david-boyne.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/david-boyne.png -------------------------------------------------------------------------------- /public/images/decorator1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/images/decorator2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/decorator3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/decorator4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/decorator5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/decorator6.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/images/decorator7.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/dhigit9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/dhigit9.jpeg -------------------------------------------------------------------------------- /public/images/interactive-search-arrows.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/images/jellevliet.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/jellevliet.jpeg -------------------------------------------------------------------------------- /public/images/meili-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/meili-logo.png -------------------------------------------------------------------------------- /public/images/meili-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /public/images/miteshmetha.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/miteshmetha.jpeg -------------------------------------------------------------------------------- /public/images/og-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/og-image.png -------------------------------------------------------------------------------- /public/images/orphikkkk.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/orphikkkk.jpeg -------------------------------------------------------------------------------- /public/images/pricing-hero-stars-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/images/pricing-hero-stars-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/images/teamMembers/alexia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/alexia.png -------------------------------------------------------------------------------- /public/images/teamMembers/amelie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/amelie.png -------------------------------------------------------------------------------- /public/images/teamMembers/bruno.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/bruno.png -------------------------------------------------------------------------------- /public/images/teamMembers/carolina.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/carolina.png -------------------------------------------------------------------------------- /public/images/teamMembers/charline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/charline.png -------------------------------------------------------------------------------- /public/images/teamMembers/charlotte.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/charlotte.png -------------------------------------------------------------------------------- /public/images/teamMembers/clementine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/clementine.png -------------------------------------------------------------------------------- /public/images/teamMembers/dave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/dave.png -------------------------------------------------------------------------------- /public/images/teamMembers/ferdinand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/ferdinand.png -------------------------------------------------------------------------------- /public/images/teamMembers/gui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/gui.png -------------------------------------------------------------------------------- /public/images/teamMembers/guillaume.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/guillaume.png -------------------------------------------------------------------------------- /public/images/teamMembers/ingrid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/ingrid.png -------------------------------------------------------------------------------- /public/images/teamMembers/jonathan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/jonathan.png -------------------------------------------------------------------------------- /public/images/teamMembers/kero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/kero.png -------------------------------------------------------------------------------- /public/images/teamMembers/laurene.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/laurene.png -------------------------------------------------------------------------------- /public/images/teamMembers/loic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/loic.png -------------------------------------------------------------------------------- /public/images/teamMembers/louis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/louis.png -------------------------------------------------------------------------------- /public/images/teamMembers/luna.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/luna.png -------------------------------------------------------------------------------- /public/images/teamMembers/many.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/many.png -------------------------------------------------------------------------------- /public/images/teamMembers/maryam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/maryam.png -------------------------------------------------------------------------------- /public/images/teamMembers/morgane-d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/morgane-d.png -------------------------------------------------------------------------------- /public/images/teamMembers/morgane-n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/morgane-n.png -------------------------------------------------------------------------------- /public/images/teamMembers/nico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/nico.png -------------------------------------------------------------------------------- /public/images/teamMembers/olu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/olu.png -------------------------------------------------------------------------------- /public/images/teamMembers/quentin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/quentin.png -------------------------------------------------------------------------------- /public/images/teamMembers/sam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/sam.png -------------------------------------------------------------------------------- /public/images/teamMembers/tamo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/tamo.png -------------------------------------------------------------------------------- /public/images/teamMembers/thomas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/thomas.png -------------------------------------------------------------------------------- /public/images/teamMembers/tommy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/teamMembers/tommy.png -------------------------------------------------------------------------------- /public/images/theraloss.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/theraloss.jpeg -------------------------------------------------------------------------------- /public/images/timeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/meilisearch/landing/f529a11c6ed1bd7bacf1a2ba0b29d90506f38873/public/images/timeline.png -------------------------------------------------------------------------------- /snapshots.yml: -------------------------------------------------------------------------------- 1 | - name: 'home-responsive' 2 | url: / 3 | widths: [375, 1024, 1440] 4 | - name: 'pricing-responsive' 5 | url: /pricing 6 | widths: [375, 1024, 1440] 7 | - name: 'about-us-responsive' 8 | url: /about-us 9 | widths: [375, 1024, 1440] 10 | - name: 'privacy-policy' 11 | url: /privacy-policy 12 | - name: 'terms-of-use' 13 | url: /terms-of-use 14 | - name: '404' 15 | url: /test 16 | -------------------------------------------------------------------------------- /src/blocks/AboutUsHero.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import Grid from 'components/Grid' 4 | import Typography from 'components/Typography' 5 | import get from 'utils/get' 6 | 7 | const AboutUsHeroGrid = styled(Grid)` 8 | height: calc(100vh - 160px); 9 | align-items: center; 10 | ` 11 | 12 | const Title = styled(Typography)` 13 | color: white; 14 | strong { 15 | color: ${get('colors.hotPink')}; 16 | } 17 | 18 | grid-column: 1 / -1; 19 | 20 | @media (min-width: ${get('breakpoints.md')}) { 21 | grid-column: 1 / 11; 22 | } 23 | 24 | @media (min-width: ${get('breakpoints.md')}) and (max-width: calc(${get( 25 | 'breakpoints.lg' 26 | )} - 1px)) { 27 | font-size: 32px; 28 | } 29 | ` 30 | 31 | const AboutUsHero = ({ hero, ...props }) => { 32 | return ( 33 | 34 | 38 | </AboutUsHeroGrid> 39 | ) 40 | } 41 | 42 | export default AboutUsHero 43 | -------------------------------------------------------------------------------- /src/blocks/Developer/Terminal/Head.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import get from 'utils/get' 4 | 5 | const TerminalButton = styled.div` 6 | width: 13px; 7 | height: 13px; 8 | border-radius: 50%; 9 | ` 10 | 11 | const TerminalHead = styled.div` 12 | background-color: ${get('colors.valhalla.700')}; 13 | grid-column: 1/-1; 14 | height: 44px; 15 | border-bottom: 2px solid ${get('colors.white')}; 16 | padding: 0 16px; 17 | display: flex; 18 | align-items: center; 19 | 20 | ${TerminalButton}:first-child { 21 | background-color: ${get('colors.hotPink')}; 22 | } 23 | ${TerminalButton}:nth-child(2) { 24 | background-color: ${get('colors.lila')}; 25 | } 26 | ${TerminalButton}:nth-child(3) { 27 | background-color: ${get('colors.dodgerBlue')}; 28 | } 29 | 30 | ${TerminalButton}+${TerminalButton} { 31 | margin-left: 9px; 32 | } 33 | ` 34 | 35 | const Head = () => { 36 | const message = `✨ We're hiring ! 37 | Check https://jobs.lever.co/meili if you want to join us ✨` 38 | return ( 39 | <TerminalHead> 40 | <TerminalButton onClick={() => console.log(message)} /> 41 | <TerminalButton /> 42 | <TerminalButton /> 43 | </TerminalHead> 44 | ) 45 | } 46 | 47 | export default Head 48 | -------------------------------------------------------------------------------- /src/blocks/Developer/Terminal/LeftColumn.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import Tab from 'components/Tab' 4 | import Typography from 'components/Typography' 5 | import get from 'utils/get' 6 | 7 | const Container = styled.div` 8 | width: 190px; 9 | background-color: ${get('colors.valhalla.600')}; 10 | display: flex; 11 | flex-direction: column; 12 | border-right: 2px solid ${get('colors.valhalla.300')}; 13 | padding: 26px 28px; 14 | 15 | @media (min-width: ${get('breakpoints.xl')}) { 16 | padding: 26px 44px; 17 | width: 218px; 18 | } 19 | ` 20 | 21 | const SdkTab = styled(Tab.Tab)` 22 | display: flex; 23 | align-items: center; 24 | ` 25 | 26 | const Language = styled(Typography)` 27 | font-family: ${get('fontFamily.poppins')}; 28 | font-weight: ${get('fontWeight.bold')}; 29 | font-size: 10px; 30 | line-height: 12px; 31 | letter-spacing: 0.03em; 32 | text-transform: uppercase; 33 | margin-left: 16px; 34 | text-align: left; 35 | ` 36 | 37 | const SdkList = styled(Tab.TabList)` 38 | button + button { 39 | margin-left: 0; 40 | } 41 | ` 42 | 43 | const LeftColumn = ({ tab, sdkList }) => { 44 | return ( 45 | <Container> 46 | <SdkList {...tab} aria-label="sdk-list"> 47 | {sdkList.map(sdk => { 48 | const Logo = sdk.logo 49 | return ( 50 | <SdkTab {...tab} key={sdk.pkgName}> 51 | <div style={{ width: 28 }}> 52 | <Logo height={28} /> 53 | </div> 54 | <Language variant="body.xs.bold" className="notranslate"> 55 | {sdk.name} 56 | </Language> 57 | </SdkTab> 58 | ) 59 | })} 60 | </SdkList> 61 | </Container> 62 | ) 63 | } 64 | 65 | export default LeftColumn 66 | -------------------------------------------------------------------------------- /src/blocks/Developer/Terminal/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import { useTabState } from 'reakit/Tab' 4 | import get from 'utils/get' 5 | import Grid from 'components/Grid' 6 | import Head from './Head' 7 | import LeftColumn from './LeftColumn' 8 | import RightColumn from './RightColumn' 9 | 10 | const StyledGrid = styled(Grid)` 11 | color: ${get('colors.white')}; 12 | margin-top: -124px; 13 | background-color ${get('colors.valhalla.700')}; 14 | border-radius: 16px; 15 | border: 2px solid ${get('colors.white')}; 16 | overflow: hidden; 17 | grid-gap: 0 16px; 18 | grid-template-columns: 1fr; 19 | 20 | ` 21 | 22 | const TerminalBody = styled.div` 23 | display: flex; 24 | flex-direction: row; 25 | width: 100%; 26 | ` 27 | 28 | const Terminal = ({ developerProps, code_samples }) => { 29 | const tab = useTabState({ orientation: 'vertical' }) 30 | 31 | const sdkList = code_samples.map(sdk => ({ 32 | ...sdk, 33 | logo: developerProps.sdkList.find( 34 | currentSdk => currentSdk.pkgName === sdk.pkgName 35 | ).logo, 36 | })) 37 | 38 | return ( 39 | <StyledGrid> 40 | <Head /> 41 | <TerminalBody> 42 | <LeftColumn tab={tab} sdkList={sdkList} /> 43 | <RightColumn 44 | tab={tab} 45 | sdkList={sdkList} 46 | developerProps={developerProps} 47 | /> 48 | </TerminalBody> 49 | </StyledGrid> 50 | ) 51 | } 52 | 53 | export default Terminal 54 | -------------------------------------------------------------------------------- /src/blocks/Developer/TitleSection.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import Grid from 'components/Grid' 4 | import Typography from 'components/Typography' 5 | import get from 'utils/get' 6 | 7 | const Container = styled.div` 8 | background-color: ${get('colors.dodgerBlue')}; 9 | 10 | svg { 11 | color: ${get('colors.white')}; 12 | opacity: 0.3; 13 | } 14 | 15 | padding: 40px 0 110px; 16 | @media (min-width: ${get('breakpoints.md')}) { 17 | padding: 40px 0 158px; 18 | } 19 | @media (min-width: ${get('breakpoints.lg')}) { 20 | padding: 106px 0 276px; 21 | } 22 | @media (min-width: ${get('breakpoints.xl')}) { 23 | padding: 118px 0 242px; 24 | } 25 | ` 26 | 27 | const Title = styled(Typography)` 28 | color: ${get('colors.white')}; 29 | margin-top: 23px; 30 | ` 31 | 32 | const TitleContent = styled.div` 33 | grid-column: 1/-1; 34 | display: flex; 35 | flex-direction: column; 36 | ` 37 | 38 | const TitleSection = ({ developerProps }) => { 39 | const PreTitle = developerProps.preTitle 40 | 41 | return ( 42 | <Container> 43 | <Grid> 44 | <TitleContent> 45 | <PreTitle width={48} /> 46 | <Title 47 | variant="title.xl" 48 | forwardedAs="h2" 49 | dangerouslySetInnerHTML={{ __html: developerProps.title }} 50 | /> 51 | </TitleContent> 52 | </Grid> 53 | </Container> 54 | ) 55 | } 56 | 57 | export default TitleSection 58 | -------------------------------------------------------------------------------- /src/blocks/Developer/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import get from 'utils/get' 4 | import TitleSection from './TitleSection' 5 | import Terminal from './Terminal' 6 | import Text from './Text' 7 | 8 | const Section = styled.section` 9 | display: none; 10 | @media (min-width: ${get('breakpoints.md')}) { 11 | display: block; 12 | margin: 0 -32px; 13 | } 14 | ` 15 | 16 | const Developer = ({ developerProps, code_samples, ...props }) => { 17 | return ( 18 | <Section {...props}> 19 | <TitleSection developerProps={developerProps} /> 20 | <Terminal developerProps={developerProps} code_samples={code_samples} /> 21 | <Text developerProps={developerProps} /> 22 | </Section> 23 | ) 24 | } 25 | export default Developer 26 | -------------------------------------------------------------------------------- /src/blocks/FAQ.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import Typography from 'components/Typography' 4 | import Grid from 'components/Grid' 5 | import get from 'utils/get' 6 | import Accordion from 'components/Accordion' 7 | 8 | const FAQWrapper = styled.section` 9 | color: ${get('colors.white')}; 10 | margin: 0 -16px; 11 | padding: 64px 16px 76px; 12 | background-color: ${get('colors.valhalla')}; 13 | 14 | @media (min-width: ${get('breakpoints.md')}) { 15 | margin: 0 -32px; 16 | padding: 64px 32px 76px; 17 | } 18 | ` 19 | 20 | const Content = styled.div` 21 | grid-column: 1 / -1; 22 | @media (min-width: ${get('breakpoints.lg')}) { 23 | grid-column: 3 / 11; 24 | } 25 | ` 26 | 27 | const Title = styled(Typography)` 28 | display: block; 29 | text-align: center; 30 | ` 31 | 32 | const Questions = styled.div` 33 | margin-top: 40px; 34 | details + details { 35 | margin-top: 18px; 36 | } 37 | ` 38 | 39 | const FAQ = ({ faq, ...props }) => { 40 | return ( 41 | <FAQWrapper {...props}> 42 | <Grid> 43 | <Content> 44 | <Title variant="title.m" forwardedAs="h2"> 45 | {faq.title} 46 | 47 | 48 | {faq.questions.map((question, index) => ( 49 | 54 | ))} 55 | 56 | 57 | 58 | 59 | ) 60 | } 61 | 62 | export default FAQ 63 | -------------------------------------------------------------------------------- /src/blocks/Footer/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import get from 'utils/get' 4 | import footerData from '../../../data/footer' 5 | import Grid from 'components/Grid' 6 | import Image from 'components/Image' 7 | import Newsletter from './Newsletter' 8 | import BottomSection from './BottomSection' 9 | import MenuSection from './MenuSection' 10 | 11 | const Wrapper = styled.footer` 12 | background-color: ${get('colors.valhalla.700')}; 13 | color: ${get('colors.white')}; 14 | padding: 74px 24px 68px; 15 | @media (min-width: ${get('breakpoints.md')}) { 16 | padding: 94px 32px 32px; 17 | } 18 | @media (min-width: ${get('breakpoints.lg')}) { 19 | padding: 142px 64px 74px; 20 | } 21 | ` 22 | 23 | const LogoSection = styled.div` 24 | grid-column: 1 / -1; 25 | @media (min-width: ${get('breakpoints.md')}) { 26 | grid-column: 1 / 5; 27 | } 28 | @media (min-width: ${get('breakpoints.lg')}) { 29 | grid-column: 1 / 6; 30 | } 31 | @media (min-width: ${get('breakpoints.xl')}) { 32 | grid-column: 1 / 5; 33 | } 34 | ` 35 | 36 | const Footer = props => { 37 | return ( 38 | 39 | 40 | 41 | Meilisearch Logo 48 | 49 | 50 | 51 | 52 | 53 | 54 | ) 55 | } 56 | 57 | export default Footer 58 | -------------------------------------------------------------------------------- /src/blocks/Header/Ctas.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import Typography from 'components/Typography' 4 | import Button from 'components/Button' 5 | import get from 'utils/get' 6 | 7 | const Wrapper = styled.div` 8 | width: 100%; 9 | display: flex; 10 | justify-content: space-between; 11 | @media (min-width: ${get('breakpoints.lg')}) { 12 | width: auto; 13 | display: block; 14 | } 15 | ` 16 | 17 | const Ctas = ({ headerProps, ...props }) => { 18 | const { cta1, cta2 } = headerProps 19 | return ( 20 | 21 | 29 | 37 | 38 | ) 39 | } 40 | 41 | export default Ctas 42 | -------------------------------------------------------------------------------- /src/blocks/Header/DesktopHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import GithubButton from 'components/GithubButton' 4 | import get from 'utils/get' 5 | import Logo from './Logo' 6 | import MenuLinks from './MenuLinks' 7 | import Ctas from './Ctas' 8 | 9 | const Grid = styled.nav` 10 | display: none; 11 | @media (min-width: ${get('breakpoints.lg')}) { 12 | width: 100%; 13 | display: flex; 14 | align-items: center; 15 | justify-content: space-between; 16 | padding: 0; 17 | margin: 0 auto; 18 | max-width: 1328px; 19 | padding: 0 24px; 20 | } 21 | ` 22 | 23 | const DesktopHeader = ({ headerProps }) => { 24 | return ( 25 | 26 | 27 | 28 | 29 | 30 | 31 | ) 32 | } 33 | 34 | export default DesktopHeader 35 | -------------------------------------------------------------------------------- /src/blocks/Header/Logo.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import Image from 'components/Image' 4 | import get from 'utils/get' 5 | 6 | const MeilisearchName = styled.div` 7 | margin-left: 12px; 8 | @media (min-width: ${get('breakpoints.lg')}) { 9 | display: none; 10 | } 11 | 12 | @media (min-width: ${get('breakpoints.xl')}) { 13 | display: block; 14 | } 15 | ` 16 | 17 | const Logos = styled.a` 18 | display: flex; 19 | align-items: center; 20 | outline: none; 21 | ` 22 | 23 | const Logo = () => ( 24 | 25 | Meilisearch Logo 32 | 33 | Meilisearch 40 | 41 | 42 | ) 43 | 44 | export default Logo 45 | -------------------------------------------------------------------------------- /src/blocks/Header/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import get from 'utils/get' 4 | import headerData from '../../../data/header' 5 | import DesktopHeader from './DesktopHeader' 6 | import MobileHeader from './MobileHeader' 7 | import { useRouter } from 'next/router' 8 | import Banner from 'components/Banner' 9 | 10 | const Wrapper = styled.header` 11 | display: flex; 12 | flex-direction: column; 13 | justify-content: center; 14 | position: sticky; 15 | top: 0; 16 | z-index: 50; 17 | ` 18 | 19 | const HeaderWrapper = styled.div` 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: center; 23 | width: 100%; 24 | background-color: ${p => 25 | p.$hasDarkBgColor ? get('colors.valhalla.800') : get('colors.valhalla')}; 26 | height: var(--header-height-mobile); 27 | @media (min-width: ${get('breakpoints.lg')}) { 28 | height: var(--header-height-desktop); 29 | } 30 | ` 31 | 32 | const Header = props => { 33 | const router = useRouter() 34 | 35 | const darkBgPages = ['/privacy-policy', '/terms-of-use'] 36 | const hasDarkBgColor = darkBgPages.includes(router.asPath) 37 | const banner = headerData?.banner?.title 38 | 39 | return ( 40 | 41 | {banner && } 42 | 43 | 44 | 45 | 46 | 47 | ) 48 | } 49 | 50 | export default Header 51 | -------------------------------------------------------------------------------- /src/blocks/OurTeam/Carousel.js: -------------------------------------------------------------------------------- 1 | import styled, { css, keyframes } from 'styled-components' 2 | import get from 'utils/get' 3 | 4 | const scrollRightToLeft = keyframes` 5 | 0% { 6 | transform: translateX(0); 7 | } 8 | 100% { 9 | transform: translateX(-50%); 10 | } 11 | ` 12 | 13 | const scrollLeftToRight = keyframes` 14 | 0% { 15 | transform: translateX(-50%); 16 | } 17 | 100% { 18 | transform: translateX(0); 19 | } 20 | ` 21 | 22 | const Carousel = styled.div` 23 | z-index: 2; 24 | position: relative; 25 | display: grid; 26 | grid-template-columns: repeat(${p => p.$nbSlides}, 1fr); 27 | grid-gap: 0 26px; 28 | justify-content: center; 29 | align-items: flex-start; 30 | &:hover { 31 | animation-play-state: paused; 32 | } 33 | 34 | ${p => 35 | p.$dir === 'ltr' && 36 | css` 37 | animation: ${scrollLeftToRight} 50s linear infinite; 38 | `} 39 | ${p => 40 | p.$dir === 'rtl' && 41 | css` 42 | animation: ${scrollRightToLeft} 50s linear infinite; 43 | `} 44 | 45 | // Number of cards * width + gutter 46 | width: calc(${p => p.$nbSlides} * 112px + ${p => p.$nbSlides - 1} * 26px); 47 | @media (min-width: ${get('breakpoints.md')}) { 48 | width: calc(${p => p.$nbSlides} * 152px + ${p => p.$nbSlides - 1} * 26px); 49 | } 50 | @media (min-width: ${get('breakpoints.lg')}) { 51 | width: calc(${p => p.$nbSlides} * 190px + ${p => p.$nbSlides - 1} * 26px); 52 | } 53 | ` 54 | 55 | export default Carousel 56 | -------------------------------------------------------------------------------- /src/blocks/OurTeam/TeamMemberList.js: -------------------------------------------------------------------------------- 1 | import TeamMemberCard from './TeamMemberCard' 2 | import Carousel from './Carousel' 3 | 4 | const TeamMemberList = ({ carousel, dir, ...props }) => ( 5 | 6 | {carousel.map((teamMember, index) => ( 7 |
8 | 13 |
14 | ))} 15 | 16 | ) 17 | 18 | export default TeamMemberList 19 | -------------------------------------------------------------------------------- /src/blocks/PricingPlans/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import get from 'utils/get' 4 | import BaseGrid from 'components/Grid' 5 | import BasePlan from './Plan' 6 | 7 | const Section = styled.section` 8 | z-index: 2; 9 | margin-bottom: 70px; 10 | @media (min-width: ${get('breakpoints.md')}) { 11 | margin-bottom: 56px; 12 | } 13 | @media (min-width: ${get('breakpoints.lg')}) { 14 | margin-bottom: 106px; 15 | } 16 | @media (min-width: ${get('breakpoints.xl')}) { 17 | margin-bottom: 120px; 18 | } 19 | ` 20 | 21 | const Grid = styled(BaseGrid)` 22 | grid-template-columns: repeat(2, 1fr); 23 | @media (min-width: ${get('breakpoints.md')}) { 24 | grid-template-columns: repeat(12, 1fr); 25 | } 26 | ` 27 | 28 | const Plan = styled(BasePlan)` 29 | grid-column: span 1; 30 | 31 | @media (min-width: ${get('breakpoints.md')}) { 32 | grid-column: ${p => (p.plan.fullWidth ? '1 / -1' : 'span 4')}; 33 | } 34 | ` 35 | 36 | const PricingPlans = ({ pricing, ...props }) => { 37 | return ( 38 |
39 | 40 | {pricing.plans?.map(plan => ( 41 | 42 | ))} 43 | 44 |
45 | ) 46 | } 47 | 48 | export default PricingPlans 49 | -------------------------------------------------------------------------------- /src/blocks/Step3/TitleSection.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import AnchorTitles from 'components/AnchorTitles' 4 | import Grid from 'components/Grid' 5 | import Typography from 'components/Typography' 6 | import get from 'utils/get' 7 | 8 | // Tricks the scroll behaviour in order to not have the top of the block appearing below the header 9 | const Title = styled(Typography)` 10 | margin-top: 6px; 11 | @media (min-width: ${get('breakpoints.lg')}) { 12 | margin-top: -160px; 13 | padding-top: calc(160px + 44px); 14 | } 15 | @media (min-width: ${get('breakpoints.xl')}) { 16 | margin-top: -160px; 17 | padding-top: calc(160px + 32px); 18 | } 19 | ` 20 | 21 | const TitlesColumn = styled.div` 22 | grid-column: 1 / 3; 23 | @media (min-width: ${get('breakpoints.lg')}) { 24 | grid-column: 1 / 6; 25 | } 26 | ` 27 | 28 | const TitleSection = ({ steps, step, color }) => { 29 | return ( 30 | 31 | 32 | 33 | 39 | {step.title} 40 | 41 | 42 | 43 | ) 44 | } 45 | 46 | export default TitleSection 47 | -------------------------------------------------------------------------------- /src/blocks/Step3/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import get from 'utils/get' 4 | import PropTypes from 'prop-types' 5 | import TitleSection from './TitleSection' 6 | import FirstSection from './FirstSection' 7 | import SecondSection from './SecondSection' 8 | 9 | const Section = styled.section` 10 | position: relative; 11 | color: ${get('colors.white')}; 12 | padding-bottom: 72px; 13 | @media (min-width: ${get('breakpoints.lg')}) { 14 | padding-bottom: 156px; 15 | } 16 | @media (min-width: ${get('breakpoints.lg')}) { 17 | padding-bottom: 192px; 18 | } 19 | ` 20 | 21 | const Step3 = ({ 22 | step3Props: step, 23 | steps = [], 24 | color = get('colors.dodgerBlue'), 25 | ...props 26 | }) => ( 27 |
28 | 29 | 30 | 31 |
32 | ) 33 | 34 | Step3.propTypes = { 35 | /** 36 | * Primary color of the block 37 | */ 38 | color: PropTypes.string, 39 | /** 40 | * List of the different steps to display the anchors 41 | */ 42 | steps: PropTypes.arrayOf( 43 | PropTypes.shape({ 44 | preTitle: PropTypes.string, 45 | title: PropTypes.string, 46 | }) 47 | ), 48 | } 49 | 50 | Step3.defaultProps = { 51 | color: get('colors.dodgerBlue'), 52 | steps: [], 53 | } 54 | 55 | export default Step3 56 | -------------------------------------------------------------------------------- /src/blocks/index.js: -------------------------------------------------------------------------------- 1 | export { default as AboutUsHero } from './AboutUsHero' 2 | export { default as Cards } from './Cards' 3 | export { default as Companies } from './Companies' 4 | export { default as Demo } from './Demo' 5 | export { default as Developer } from './Developer' 6 | export { default as FAQ } from './FAQ' 7 | export { default as Header } from './Header' 8 | export { default as Hero } from './Hero' 9 | export { default as Investors } from './Investors' 10 | export { default as Footer } from './Footer' 11 | export { default as JobOffers } from './JobOffers' 12 | export { default as OpenSource } from './OpenSource' 13 | export { default as OurStory } from './OurStory' 14 | export { default as OurTeam } from './OurTeam' 15 | export { default as PerksAndBenefits } from './PerksAndBenefits' 16 | export { default as PricingHero } from './PricingHero' 17 | export { default as PricingPlans } from './PricingPlans' 18 | export { default as Step1 } from './Step1' 19 | export { default as Step2 } from './Step2' 20 | export { default as Step3 } from './Step3' 21 | export { default as ComparativeTable } from './ComparativeTable' 22 | export { default as Testimonials } from './Testimonials' 23 | export { default as Values } from './Values' 24 | -------------------------------------------------------------------------------- /src/components/Anchor.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | const Anchor = styled.div` 4 | display: block; 5 | position: relative; 6 | // Due to a big header on top of the page, the negative position is used to avoid the anchor being hidden under the header 7 | top: -200px; 8 | visibility: hidden; 9 | ` 10 | 11 | export default Anchor 12 | -------------------------------------------------------------------------------- /src/components/Banner.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import get from 'utils/get' 4 | import Typography from 'components/Typography' 5 | 6 | const Wrapper = styled.div` 7 | background-color: ${get('colors.dodgerBlue')}; 8 | padding: 16px; 9 | height: var(--banner-height); 10 | color: ${get('colors.ashes.600')}; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | text-align: center; 15 | a { 16 | transition: color 300ms, border-bottom 300ms; 17 | border-bottom: 2px solid ${get('colors.ashes.600')}; 18 | color: inherit; 19 | &:hover, 20 | &:focus { 21 | color: ${get('colors.white')}; 22 | border-bottom: 2px solid ${get('colors.white')}; 23 | } 24 | } 25 | 26 | @media (min-width: ${get('breakpoints.lg')}) { 27 | padding: 24px; 28 | } 29 | ` 30 | 31 | const Banner = ({ title }) => ( 32 | 33 | 37 | 38 | ) 39 | 40 | export default Banner 41 | -------------------------------------------------------------------------------- /src/components/Bullets.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled, { css } from 'styled-components' 3 | import hexToRgb from 'utils/hexToRgb' 4 | import getColorName from 'utils/getColorName' 5 | import get from 'utils/get' 6 | 7 | const Bullet = styled.div` 8 | width: 8px; 9 | height: 8px; 10 | border-radius: 50%; 11 | transition: background-color 300ms; 12 | 13 | ${p => 14 | p.$index < p.$currentIndex && 15 | css` 16 | background-color: ${hexToRgb( 17 | get(`colors.${getColorName(p.$color)}`), 18 | 0.6 19 | )}; 20 | `} 21 | ${p => 22 | p.$index === p.$currentIndex && 23 | css` 24 | background-color: ${p.$color}; 25 | `} 26 | ${p => 27 | p.$index > p.$currentIndex && 28 | css` 29 | background-color: ${hexToRgb(get(`colors.valhalla.100`), 0.4)}; 30 | `}; 31 | ` 32 | 33 | const Bullets = ({ currentIndex, nbBullets, color, ...props }) => { 34 | return ( 35 |
36 | {[...Array(nbBullets)].map((e, i) => ( 37 | 43 | ))} 44 |
45 | ) 46 | } 47 | 48 | export default Bullets 49 | -------------------------------------------------------------------------------- /src/components/Card.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import get from 'utils/get' 3 | 4 | const Card = styled.div` 5 | background-color: ${p => get(p.$bgColor || 'colors.valhalla.700')}; 6 | border-radius: 16px; 7 | height: 100%; 8 | width: 100%; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: space-between; 12 | align-items: flex-start; 13 | padding: 32px; 14 | ` 15 | 16 | export default Card 17 | -------------------------------------------------------------------------------- /src/components/Checkbox.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Checkbox as ReakitCheckbox } from 'reakit/Checkbox' 3 | import styled from 'styled-components' 4 | import get from 'utils/get' 5 | import IconCard from 'components/IconCard' 6 | import hexToRgb from 'utils/hexToRgb' 7 | import getColorName from 'utils/getColorName' 8 | 9 | const HiddenCheckBox = styled(ReakitCheckbox)` 10 | opacity: 0; 11 | height: 0; 12 | width: 0; 13 | display: block; 14 | ` 15 | 16 | const VisibleCheckBox = styled(IconCard)` 17 | cursor: pointer; 18 | border: 1px solid ${get('colors.valhalla.100')}; 19 | border-radius: 8px; 20 | transition: border 300ms, background-color 300ms, color 300ms; 21 | 22 | &:hover, 23 | &:focus-within, 24 | ${HiddenCheckBox}:focus + & { 25 | border: 1px solid ${get('colors.white')}; 26 | color: ${get('colors.white')}; 27 | } 28 | ${HiddenCheckBox}[aria-checked="true"] + & { 29 | border: 1px solid ${p => get(`colors.${getColorName(p.$color)}`)}; 30 | color: ${get('colors.white')}; 31 | background-color: ${p => 32 | hexToRgb(get(`colors.${getColorName(p.$color)}`), 0.2)}; 33 | } 34 | ${HiddenCheckBox}[aria-checked="true"]:hover + &, 35 | ${HiddenCheckBox}[aria-checked="true"]:focus + & { 36 | border-color: ${p => get(`colors.${getColorName(p.$color)}.300`)}; 37 | } 38 | ` 39 | 40 | const Checkbox = ({ 41 | value, 42 | title, 43 | icon, 44 | color = get('colors.dodgerBlue'), 45 | checkboxState, 46 | }) => { 47 | return ( 48 | 52 | ) 53 | } 54 | 55 | export default Checkbox 56 | -------------------------------------------------------------------------------- /src/components/Dialog/DialogBackdrop.js: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components' 2 | import { DialogBackdrop as ReakitDialogBackdrop } from 'reakit/Dialog' 3 | 4 | const Backdrop = styled.div` 5 | transition: opacity 300ms; 6 | overflow: auto; 7 | position: fixed; 8 | 9 | ${p => 10 | p.$animated && 11 | css` 12 | opacity: 0; 13 | &[data-enter] { 14 | opacity: 1; 15 | } 16 | `}; 17 | ` 18 | 19 | const DialogBackdrop = props => ( 20 | 21 | ) 22 | 23 | export default DialogBackdrop 24 | -------------------------------------------------------------------------------- /src/components/Dialog/DialogContent.js: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components' 2 | import { Dialog as ReakitDialog } from 'reakit/Dialog' 3 | 4 | const Content = styled.div` 5 | ${p => 6 | p.$animated && 7 | css` 8 | transition: opacity 300ms, transform 300ms; 9 | opacity: 0; 10 | transform-origin: top center; 11 | transform: translateY(-24px); 12 | &[data-enter] { 13 | opacity: 1; 14 | transform: translateY(0px); 15 | } 16 | `}; 17 | ` 18 | 19 | const DialogContent = props => ( 20 | 21 | ) 22 | 23 | export default DialogContent 24 | -------------------------------------------------------------------------------- /src/components/Dialog/DialogDisclosure.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { DialogDisclosure as ReakitDialogDisclosure } from 'reakit/Dialog' 3 | 4 | const Disclosure = styled.div` 5 | max-width: 32px; 6 | background-color: transparent; 7 | border: none; 8 | cursor: pointer; 9 | outline: none; 10 | ` 11 | 12 | const DialogDisclosure = props => ( 13 | 14 | ) 15 | 16 | export default DialogDisclosure 17 | -------------------------------------------------------------------------------- /src/components/Dialog/index.js: -------------------------------------------------------------------------------- 1 | export { default as DialogDisclosure } from './DialogDisclosure' 2 | export { default as DialogBackdrop } from './DialogBackdrop' 3 | export { default as DialogContent } from './DialogContent' 4 | -------------------------------------------------------------------------------- /src/components/Disclosure/Disclosure.js: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components' 2 | import { Disclosure as DisclosureButton } from 'reakit/Disclosure' 3 | import { Arrow } from 'components/icons' 4 | 5 | const StyledDisclosureButton = styled.button` 6 | display: inline-flex; 7 | align-items: center; 8 | background-color: transparent; 9 | border: 0; 10 | color: inherit; 11 | cursor: pointer; 12 | padding: 0; 13 | ` 14 | 15 | const StyledArrow = styled(Arrow)` 16 | margin-left: 10px; 17 | transform: rotate(0deg); 18 | transition: transform 300ms; 19 | height: 8px; 20 | stroke: currentColor; 21 | 22 | ${p => 23 | p.$visible && 24 | css` 25 | transform: rotate(180deg); 26 | `}; 27 | ` 28 | 29 | const Disclosure = ({ children, ...props }) => ( 30 | 31 | {children} 32 | 33 | 34 | ) 35 | 36 | export default Disclosure 37 | -------------------------------------------------------------------------------- /src/components/Disclosure/DisclosureContent.js: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components' 2 | import { DisclosureContent as ReakitDisclosureContent } from 'reakit/Disclosure' 3 | 4 | const StyledDisclosureContent = styled.div` 5 | ${p => 6 | p.$animated && 7 | css` 8 | transition: opacity 300ms, transform 300ms; 9 | opacity: 0; 10 | transform-origin: top center; 11 | transform: translateY(-16px); 12 | &[data-enter] { 13 | opacity: 1; 14 | transform: translateY(0px); 15 | } 16 | `}; 17 | ` 18 | 19 | const DisclosureContent = props => ( 20 | 25 | ) 26 | 27 | export default DisclosureContent 28 | -------------------------------------------------------------------------------- /src/components/Disclosure/index.js: -------------------------------------------------------------------------------- 1 | export { default as Disclosure } from './Disclosure' 2 | export { default as DisclosureContent } from './DisclosureContent' 3 | -------------------------------------------------------------------------------- /src/components/FullWidthCard.js: -------------------------------------------------------------------------------- 1 | import Typography from 'components/Typography' 2 | import React from 'react' 3 | import styled from 'styled-components' 4 | 5 | const Card = styled.div` 6 | padding: 8px 0; 7 | width: 100%; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | ` 12 | 13 | const FullWidthCard = ({ title, ...props }) => { 14 | return ( 15 | 16 | {title} 17 | 18 | ) 19 | } 20 | 21 | export default FullWidthCard 22 | -------------------------------------------------------------------------------- /src/components/Grid.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import get from 'utils/get' 3 | 4 | const Grid = styled.div` 5 | display: grid; 6 | margin: 0 auto; 7 | grid-gap: 16px; 8 | grid-template-columns: repeat(5, 1fr); 9 | max-width: 504px; 10 | max-width: calc((88px * 5) + (16px * 4)); 11 | 12 | @media (min-width: ${get('breakpoints.md')}) { 13 | grid-template-columns: repeat(12, 1fr); 14 | max-width: calc((44px * 12) + (16px * 11)); 15 | } 16 | @media (min-width: ${get('breakpoints.lg')}) { 17 | max-width: calc((60px * 12) + (16px * 11)); 18 | } 19 | @media (min-width: ${get('breakpoints.xl')}) { 20 | max-width: calc((80px * 12) + (16px * 11)); 21 | } 22 | ` 23 | 24 | export default Grid 25 | -------------------------------------------------------------------------------- /src/components/Head.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import NextHead from 'next/head' 3 | 4 | const Head = ({ meta }) => { 5 | return ( 6 | 7 | 8 | Meilisearch{meta.title ? ` | ${meta.title}` : ''} 9 | 10 | 11 | 12 | {/* Open Graph data */} 13 | 14 | 15 | 19 | 20 | 26 | 27 | 28 | {/* Twitter Open Graph data */} 29 | 30 | 31 | 35 | 36 | 37 | 38 | 44 | 45 | 46 | ) 47 | } 48 | 49 | export default Head 50 | -------------------------------------------------------------------------------- /src/components/IconCard.js: -------------------------------------------------------------------------------- 1 | import Typography from 'components/Typography' 2 | import React from 'react' 3 | import styled from 'styled-components' 4 | import get from 'utils/get' 5 | 6 | const Card = styled.div` 7 | width: 100%; 8 | min-height: 75px; 9 | height: 100%; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | flex-direction: column; 14 | cursor: pointer; 15 | padding: 8px; 16 | 17 | > svg { 18 | width: 36px; 19 | height: 36px; 20 | flex-shrink: 0; 21 | @media (min-width: ${get('breakpoints.lg')}) { 22 | width: 55px; 23 | height: 55px; 24 | } 25 | } 26 | ` 27 | 28 | const Title = styled(Typography)` 29 | display: block; 30 | text-align: center; 31 | ` 32 | 33 | const IconCard = ({ icon, title, ...props }) => { 34 | const Icon = icon 35 | return ( 36 | 37 | 38 | {title} 39 | 40 | ) 41 | } 42 | 43 | export default IconCard 44 | -------------------------------------------------------------------------------- /src/components/Image.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import NextImage from 'next/image' 3 | 4 | const Image = ({ alt = '', ...props }) => { 5 | const env = process.env.NEXT_PUBLIC_APP_ENV 6 | return ( 7 | 12 | ) 13 | } 14 | 15 | export default Image 16 | -------------------------------------------------------------------------------- /src/components/Input.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import get from 'utils/get' 4 | import hexToRgb from 'utils/hexToRgb' 5 | 6 | const StyledInput = styled.input` 7 | height: 38px; 8 | border-radius: 8px; 9 | border: 1px solid ${get('colors.ashes.900')}; 10 | padding: 10px 16px; 11 | outline: none; 12 | cursor: pointer; 13 | &::placeholder { 14 | color: ${get('colors.ashes.900')}; 15 | } 16 | &:hover { 17 | border: 1px solid ${get('colors.dodgerBlue')}; 18 | } 19 | &:focus-within { 20 | border: 1px solid ${get('colors.dodgerBlue')}; 21 | box-shadow: 0px 0px 0px 4px ${hexToRgb(get('colors.ashes.900'), 0.2)}; 22 | } 23 | ` 24 | 25 | const Input = props => { 26 | return 27 | } 28 | 29 | export default Input 30 | -------------------------------------------------------------------------------- /src/components/Link.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import NextLink from 'next/link' 4 | import get from 'utils/get' 5 | 6 | const StyledLink = styled.a` 7 | color: inherit; 8 | transition: color 300ms; 9 | outline: none; 10 | @media (min-width: ${get('breakpoints.lg')}) { 11 | &:hover, 12 | &:focus { 13 | color: ${get('colors.hotPink')}; 14 | } 15 | } 16 | ` 17 | 18 | const Link = React.forwardRef(({ href, ...props }, ref) => ( 19 | 20 | 21 | 22 | )) 23 | 24 | Link.displayName = 'Link' 25 | 26 | Link.propTypes = {} 27 | 28 | Link.defaultProps = {} 29 | 30 | export default Link 31 | -------------------------------------------------------------------------------- /src/components/List.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import styled from 'styled-components' 4 | import get from 'utils/get' 5 | 6 | const Ul = styled.ul` 7 | padding: 0; 8 | margin: 0; 9 | > li + li { 10 | margin-top: 4px; 11 | } 12 | ` 13 | 14 | const Li = styled.li` 15 | display: flex; 16 | align-items: center; 17 | list-style-type: none; 18 | color: ${get('colors.ashes')}; 19 | &:before { 20 | width: 18px; 21 | height: 18px; 22 | background-color: ${p => p.$bulletColor}; 23 | content: ''; 24 | flex-shrink: 0; 25 | mask: url(/icons/check.svg) no-repeat 50% 50%; 26 | mask-size: cover; 27 | margin-right: 8px; 28 | } 29 | ` 30 | 31 | const Element = ({ bulletColor = get('colors.dodgerBlue'), ...props }) => ( 32 |
  • 33 | ) 34 | 35 | const List = props =>
      36 | 37 | List.Element = Element 38 | 39 | List.propTypes = { 40 | /** 41 | * Color of the li bullets 42 | */ 43 | bulletColor: PropTypes.string, 44 | } 45 | 46 | List.defaultProps = { 47 | bulletColor: get('colors.dodgerBlue'), 48 | } 49 | 50 | export default List 51 | -------------------------------------------------------------------------------- /src/components/Lottie.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Lottie from 'react-lottie-wrapper' 3 | 4 | const LottieAnimation = ({ 5 | animation, 6 | options = {}, 7 | ariaLabel, 8 | hideInPercy = true, 9 | ...props 10 | }) => { 11 | const lottieOptions = { 12 | loop: true, 13 | autoplay: true, 14 | animationData: animation, 15 | rendererSettings: { 16 | preserveAspectRatio: 'xMidYMid slice', 17 | }, 18 | ...options, 19 | } 20 | 21 | React.useEffect(() => { 22 | const lottie = document.querySelectorAll('div .hide-in-percy') 23 | for (let i = 0; i < lottie.length; i++) { 24 | lottie[i].removeAttribute('aria-label') 25 | } 26 | }, []) 27 | 28 | return ( 29 | 38 | ) 39 | } 40 | 41 | export default LottieAnimation 42 | -------------------------------------------------------------------------------- /src/components/Menu/Menu.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types' 2 | import styled, { css } from 'styled-components' 3 | import { Menu as ReakitMenu } from 'reakit/Menu' 4 | import get from 'utils/get' 5 | 6 | const MenuContent = styled.div` 7 | overflow: hidden; 8 | transition: transform 300ms, opacity 300ms; 9 | margin-top: 16px; 10 | @media (min-width: ${get('breakpoints.lg')}) { 11 | border: 1px solid ${get('colors.valhalla.300')}; 12 | border-radius: 8px; 13 | background-color: ${get('colors.valhalla.600')}; 14 | padding-left: 0; 15 | max-width: 360px; 16 | } 17 | 18 | ${p => 19 | p.$animated && 20 | css` 21 | transform-origin: top center; 22 | transform: translateY(0); 23 | opacity: 0; 24 | margin-top: 0; 25 | `}; 26 | 27 | [data-enter] & { 28 | transform: translateY(16px); 29 | opacity: 100; 30 | } 31 | ` 32 | 33 | const MenuWrapper = styled(ReakitMenu)` 34 | margin: 0; 35 | z-index: 50; 36 | ` 37 | 38 | const Menu = ({ ariaLabel, children, ...props }) => ( 39 | 40 | {children} 41 | 42 | ) 43 | 44 | Menu.propTypes = { 45 | /** 46 | * aria-label for accessibility 47 | */ 48 | ariaLabel: PropTypes.string, 49 | /** 50 | * The content to appear inside the Menu 51 | */ 52 | children: PropTypes.node, 53 | } 54 | 55 | Menu.defaultProps = { 56 | ariaLabel: null, 57 | children: null, 58 | } 59 | 60 | export default Menu 61 | -------------------------------------------------------------------------------- /src/components/Menu/MenuDisclosure.js: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components' 2 | import { MenuButton as ReakitMenuButton } from 'reakit/Menu' 3 | import PropTypes from 'prop-types' 4 | import { Arrow } from 'components/icons' 5 | import get from 'utils/get' 6 | 7 | const MenuButton = styled(ReakitMenuButton)` 8 | z-index: 10; 9 | display: inline-flex; 10 | align-items: center; 11 | color: white; 12 | background-color: transparent; 13 | border: 0; 14 | cursor: pointer; 15 | padding: 0; 16 | transition: color 300ms; 17 | outline: none; 18 | &:hover, 19 | &:focus { 20 | color: ${get('colors.hotPink')}; 21 | } 22 | ` 23 | 24 | const StyledArrow = styled(Arrow)` 25 | margin-left: 10px; 26 | transform: rotate(0deg); 27 | transition: transform 300ms; 28 | stroke: currentColor; 29 | width: 10px; 30 | ${p => 31 | p.$visible && 32 | css` 33 | transform: rotate(180deg); 34 | `} 35 | ` 36 | 37 | const MenuDisclosure = ({ children, ...props }) => ( 38 | 39 | {children} 40 | 41 | 42 | ) 43 | 44 | MenuDisclosure.propTypes = { 45 | /** 46 | * The content to appear inside the MenuDisclosure 47 | */ 48 | children: PropTypes.node, 49 | } 50 | 51 | MenuDisclosure.defaultProps = { 52 | children: null, 53 | } 54 | 55 | export default MenuDisclosure 56 | -------------------------------------------------------------------------------- /src/components/Menu/index.js: -------------------------------------------------------------------------------- 1 | export { default as Menu } from './Menu' 2 | export { default as MenuDisclosure } from './MenuDisclosure' 3 | export { default as MenuItem } from './MenuItem' 4 | -------------------------------------------------------------------------------- /src/components/PageContent.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import get from 'utils/get' 3 | 4 | const PageContent = styled.main` 5 | overflow: hidden; 6 | padding: 0 16px; 7 | @media (min-width: ${get('breakpoints.md')}) { 8 | padding: 0 32px; 9 | } 10 | ` 11 | 12 | export default PageContent 13 | -------------------------------------------------------------------------------- /src/components/PreTitle.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import PropTypes from 'prop-types' 4 | import Typography from 'components/Typography' 5 | import get from 'utils/get' 6 | 7 | const StyledPreTitle = styled(Typography)` 8 | color: ${p => p.$color}; 9 | text-transform: uppercase; 10 | display: block; 11 | ` 12 | 13 | const PreTitle = ({ preTitle, color, ...props }) => { 14 | return ( 15 | 16 | {preTitle} 17 | 18 | ) 19 | } 20 | 21 | PreTitle.propTypes = { 22 | /** 23 | * Text to display 24 | */ 25 | preTitle: PropTypes.string, 26 | /** 27 | * Text to display 28 | */ 29 | color: PropTypes.string, 30 | } 31 | 32 | PreTitle.defaultProps = { 33 | preTitle: null, 34 | color: get('colors.lila'), 35 | } 36 | 37 | export default PreTitle 38 | -------------------------------------------------------------------------------- /src/components/PricingCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import get from 'utils/get' 4 | import Card from 'components/Card' 5 | 6 | const Wrapper = styled(Card)` 7 | border-style: solid; 8 | border-width: 1px; 9 | border-color: ${p => (p.$active ? get(p.$color) : 'transparent')}; 10 | background-color: ${get('colors.valhalla.600')}; 11 | padding: 16px; 12 | transition: background-color 300ms, border-color 300ms; 13 | 14 | &:hover, 15 | &:focus { 16 | background-color: ${get('colors.valhalla.700')}; 17 | border-color: ${p => get(p.$color)}; 18 | } 19 | 20 | @media (min-width: ${get('breakpoints.lg')}) { 21 | padding: 24px; 22 | } 23 | @media (min-width: ${get('breakpoints.xl')}) { 24 | padding: 32px; 25 | } 26 | ` 27 | 28 | const PricingCard = ({ color = 'colors.dodgerBlue', active, ...props }) => { 29 | return 30 | } 31 | 32 | export default PricingCard 33 | -------------------------------------------------------------------------------- /src/components/Radio.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import { Radio as ReakitRadio } from 'reakit/Radio' 4 | import IconCard from 'components/IconCard' 5 | import FullWidthCard from 'components/FullWidthCard' 6 | import hexToRgb from 'utils/hexToRgb' 7 | import get from 'utils/get' 8 | import getColorName from 'utils/getColorName' 9 | 10 | const HiddenRadio = styled(ReakitRadio)` 11 | opacity: 0; 12 | height: 0; 13 | width: 0; 14 | display: block; 15 | ` 16 | 17 | const CardRadio = styled.div` 18 | cursor: pointer; 19 | border: 1px solid ${get('colors.valhalla.100')}; 20 | border-radius: 8px; 21 | transition: border 300ms, background-color 300ms, color 300ms; 22 | 23 | &:hover, 24 | &:focus-within, 25 | ${HiddenRadio}:focus + & { 26 | border: 1px solid ${get('colors.white')}; 27 | color: ${get('colors.white')}; 28 | } 29 | ${HiddenRadio}[aria-checked="true"] + & { 30 | border: 1px solid ${p => get(`colors.${getColorName(p.$color)}`)}; 31 | color: ${get('colors.white')}; 32 | background-color: ${p => 33 | hexToRgb(get(`colors.${getColorName(p.$color)}`), 0.2)}; 34 | } 35 | ${HiddenRadio}[aria-checked="true"]:hover + &, 36 | ${HiddenRadio}[aria-checked="true"]:focus + & { 37 | border: 1px solid ${p => get(`colors.${getColorName(p.$color)}.300`)}; 38 | } 39 | ` 40 | 41 | const Radio = ({ 42 | icon, 43 | title, 44 | radioState, 45 | color = get('colors.dodgerBlue'), 46 | value, 47 | ...props 48 | }) => ( 49 | 58 | ) 59 | 60 | export default Radio 61 | -------------------------------------------------------------------------------- /src/components/RoundedIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import hexToRgb from 'utils/hexToRgb' 4 | import get from 'utils/get' 5 | 6 | const IconWrapper = styled.div` 7 | background-color: ${p => hexToRgb(get(p.$color || 'colors.hotPink'), 0.2)}; 8 | width: 36px; 9 | height: 36px; 10 | border-radius: 50%; 11 | color: ${p => get(p.$color || 'colors.hotPink')}; 12 | padding: 8px; 13 | ` 14 | 15 | const RoundedIcon = ({ icon, color, ...props }) => { 16 | const Icon = icon 17 | return ( 18 | 19 | 20 | 21 | ) 22 | } 23 | 24 | export default RoundedIcon 25 | -------------------------------------------------------------------------------- /src/components/Tab.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import { 4 | Tab as ReakitTab, 5 | TabList as ReakitTabList, 6 | TabPanel as ReakitTabPabel, 7 | } from 'reakit/Tab' 8 | import get from 'utils/get' 9 | 10 | const Tab = props =>
      11 | 12 | const TabList = styled(ReakitTabList)` 13 | button + button { 14 | margin-left: 32px; 15 | } 16 | ` 17 | 18 | const TabElement = styled(ReakitTab)` 19 | border: 0; 20 | color: ${get('colors.white')}; 21 | background-color: transparent; 22 | padding: 0; 23 | opacity: 0.4; 24 | transition: opacity 300ms; 25 | 26 | &:hover { 27 | opacity: 1; 28 | cursor: pointer; 29 | } 30 | 31 | &[aria-selected='true'] { 32 | opacity: 1; 33 | } 34 | ` 35 | 36 | const TabPanel = styled(ReakitTabPabel)`` 37 | 38 | Tab.TabList = TabList 39 | Tab.Tab = TabElement 40 | Tab.TabPanel = TabPanel 41 | 42 | export default Tab 43 | -------------------------------------------------------------------------------- /src/components/Tag.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import get from 'utils/get' 4 | import hexToRgb from 'utils/hexToRgb' 5 | import Typography from './Typography' 6 | 7 | const TagWrapper = styled.div` 8 | color: ${get('colors.ashes')}; 9 | border: 1px solid ${p => get(p.$color)}; 10 | border-radius: 8px; 11 | padding: 4px 7px; 12 | display: inline-flex; 13 | align-items: center; 14 | justify-content: center; 15 | background-color: ${p => hexToRgb(get(p.$color), 0.2)}; 16 | min-width: 70px; 17 | ` 18 | 19 | const Tag = ({ children, color = 'colors.dodgerBlue', ...props }) => { 20 | return ( 21 | 22 | {children} 23 | 24 | ) 25 | } 26 | 27 | export default Tag 28 | -------------------------------------------------------------------------------- /src/components/Tooltip.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import { 4 | useTooltipState, 5 | Tooltip as ReakitTooltip, 6 | TooltipReference as ReakitTooltipReference, 7 | } from 'reakit/Tooltip' 8 | import Typography from './Typography' 9 | import get from 'utils/get' 10 | 11 | const TooltipReference = styled(ReakitTooltipReference)` 12 | background-color: transparent; 13 | border: 0; 14 | color: inherit; 15 | border-bottom: 1px dashed ${get('colors.white')}; 16 | padding: 0; 17 | ` 18 | 19 | const TextContainer = styled.div` 20 | background-color: ${get('colors.white')}; 21 | border-radius: 8px; 22 | padding: 12px 10px; 23 | color: ${get('colors.valhalla.100')}; 24 | ` 25 | 26 | function Tooltip({ children, title, ...props }) { 27 | const tooltip = useTooltipState({ placement: 'bottom' }) 28 | return ( 29 | <> 30 | 31 | {referenceProps => React.cloneElement(children, referenceProps)} 32 | 33 | 34 | 35 | 36 | {title} 37 | 38 | 39 | 40 | ) 41 | } 42 | export default Tooltip 43 | -------------------------------------------------------------------------------- /src/components/icons/Angular.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgAngular({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 26 | 27 | ) 28 | } 29 | 30 | export default SvgAngular 31 | -------------------------------------------------------------------------------- /src/components/icons/Api.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgApi({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgApi 24 | -------------------------------------------------------------------------------- /src/components/icons/ApiReference.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgApiReference({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgApiReference 24 | -------------------------------------------------------------------------------- /src/components/icons/Arrow.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgArrow({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgArrow 24 | -------------------------------------------------------------------------------- /src/components/icons/B2CApp.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgB2CApp({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 24 | 31 | 32 | 39 | 46 | 47 | ) 48 | } 49 | 50 | export default SvgB2CApp 51 | -------------------------------------------------------------------------------- /src/components/icons/Blog.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgBlog({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgBlog 24 | -------------------------------------------------------------------------------- /src/components/icons/Chat.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgChat({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgChat 24 | -------------------------------------------------------------------------------- /src/components/icons/Code.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgCode({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgCode 24 | -------------------------------------------------------------------------------- /src/components/icons/Cross.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgCross({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgCross 24 | -------------------------------------------------------------------------------- /src/components/icons/Diamond.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgDiamond({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgDiamond 24 | -------------------------------------------------------------------------------- /src/components/icons/Discord.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgDiscord({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgDiscord 24 | -------------------------------------------------------------------------------- /src/components/icons/Documentation.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgDocumentation({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgDocumentation 24 | -------------------------------------------------------------------------------- /src/components/icons/Dotnet.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgDotnet({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 17 | 18 | ) 19 | } 20 | 21 | export default SvgDotnet 22 | -------------------------------------------------------------------------------- /src/components/icons/Excluded.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgExcluded({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 17 | 18 | ) 19 | } 20 | 21 | export default SvgExcluded 22 | -------------------------------------------------------------------------------- /src/components/icons/Filter.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgFilter({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgFilter 24 | -------------------------------------------------------------------------------- /src/components/icons/Github.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgGithub({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 17 | 18 | ) 19 | } 20 | 21 | export default SvgGithub 22 | -------------------------------------------------------------------------------- /src/components/icons/Guides.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgGuides({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgGuides 24 | -------------------------------------------------------------------------------- /src/components/icons/Included.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgIncluded({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 17 | 18 | ) 19 | } 20 | 21 | export default SvgIncluded 22 | -------------------------------------------------------------------------------- /src/components/icons/Instantmeilisearch.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgInstantmeilisearch({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 17 | 18 | ) 19 | } 20 | 21 | export default SvgInstantmeilisearch 22 | -------------------------------------------------------------------------------- /src/components/icons/Integrations.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgIntegrations({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgIntegrations 24 | -------------------------------------------------------------------------------- /src/components/icons/Javascript.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgJavascript({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 17 | 18 | ) 19 | } 20 | 21 | export default SvgJavascript 22 | -------------------------------------------------------------------------------- /src/components/icons/Key.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgKey({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 21 | 22 | ) 23 | } 24 | 25 | export default SvgKey 26 | -------------------------------------------------------------------------------- /src/components/icons/Lightning.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgLightning({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgLightning 24 | -------------------------------------------------------------------------------- /src/components/icons/Linkedin.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgLinkedin({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 17 | 18 | ) 19 | } 20 | 21 | export default SvgLinkedin 22 | -------------------------------------------------------------------------------- /src/components/icons/LocalGlobe.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgLocalGlobe({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 22 | 23 | 29 | 30 | ) 31 | } 32 | 33 | export default SvgLocalGlobe 34 | -------------------------------------------------------------------------------- /src/components/icons/MagnifyingGlass.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgMagnifyingGlass({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 25 | 26 | ) 27 | } 28 | 29 | export default SvgMagnifyingGlass 30 | -------------------------------------------------------------------------------- /src/components/icons/Media.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgMedia({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 18 | 23 | 32 | 37 | 38 | ) 39 | } 40 | 41 | export default SvgMedia 42 | -------------------------------------------------------------------------------- /src/components/icons/NumericSorting.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgNumericSorting({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 20 | 27 | 34 | 41 | 48 | 49 | ) 50 | } 51 | 52 | export default SvgNumericSorting 53 | -------------------------------------------------------------------------------- /src/components/icons/Other.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgOther({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 22 | 31 | 40 | 49 | 50 | ) 51 | } 52 | 53 | export default SvgOther 54 | -------------------------------------------------------------------------------- /src/components/icons/Php.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgPhp({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 17 | 18 | ) 19 | } 20 | 21 | export default SvgPhp 22 | -------------------------------------------------------------------------------- /src/components/icons/Plug.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgPlug({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 17 | 18 | ) 19 | } 20 | 21 | export default SvgPlug 22 | -------------------------------------------------------------------------------- /src/components/icons/Python.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgPython({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 17 | 21 | 22 | ) 23 | } 24 | 25 | export default SvgPython 26 | -------------------------------------------------------------------------------- /src/components/icons/RightArrow.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgRightArrow({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgRightArrow 24 | -------------------------------------------------------------------------------- /src/components/icons/Roadmap.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgRoadmap({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 17 | 21 | 22 | ) 23 | } 24 | 25 | export default SvgRoadmap 26 | -------------------------------------------------------------------------------- /src/components/icons/Roadmap2.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgRoadmap2({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 17 | 18 | ) 19 | } 20 | 21 | export default SvgRoadmap2 22 | -------------------------------------------------------------------------------- /src/components/icons/Rocket.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgRocket({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgRocket 24 | -------------------------------------------------------------------------------- /src/components/icons/SaasApp.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgSaasApp({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 20 | 27 | 35 | 42 | 43 | ) 44 | } 45 | 46 | export default SvgSaasApp 47 | -------------------------------------------------------------------------------- /src/components/icons/SortBy.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgSortBy({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgSortBy 24 | -------------------------------------------------------------------------------- /src/components/icons/Star.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgStar({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 17 | 18 | ) 19 | } 20 | 21 | export default SvgStar 22 | -------------------------------------------------------------------------------- /src/components/icons/Swift.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgSwift({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 17 | 18 | ) 19 | } 20 | 21 | export default SvgSwift 22 | -------------------------------------------------------------------------------- /src/components/icons/Twitter.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgTwitter({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 17 | 18 | ) 19 | } 20 | 21 | export default SvgTwitter 22 | -------------------------------------------------------------------------------- /src/components/icons/Typo.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgTypo({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgTypo 24 | -------------------------------------------------------------------------------- /src/components/icons/Vue.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgVue({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 17 | 22 | 23 | ) 24 | } 25 | 26 | export default SvgVue 27 | -------------------------------------------------------------------------------- /src/components/icons/Wrench.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | function SvgWrench({ title, titleId, ...props }) { 4 | return ( 5 | 12 | {title ? {title} : null} 13 | 19 | 20 | ) 21 | } 22 | 23 | export default SvgWrench 24 | -------------------------------------------------------------------------------- /src/components/icons/svg/API.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/Code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/icons/svg/angular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icons/svg/arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/cross.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/diamond.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/discord.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/documentation.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/dotnet.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/icons/svg/excluded.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/filter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/included.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/instantmeilisearch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/icons/svg/javascript.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/lightning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/local_globe.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/icons/svg/magnifying_glass.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icons/svg/plug.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/python.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icons/svg/right_arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/roadmap.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/icons/svg/roadmap2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/swift.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icons/svg/vue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/hooks/useWindowSize.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react' 2 | 3 | const useWindowSize = () => { 4 | const [windowSize, setWindowSize] = useState({ 5 | width: undefined, 6 | height: undefined, 7 | }) 8 | 9 | useEffect(() => { 10 | const handleResize = () => { 11 | setWindowSize({ 12 | width: window.innerWidth, 13 | height: window.innerHeight, 14 | }) 15 | } 16 | window.addEventListener('resize', handleResize) 17 | handleResize() 18 | 19 | return () => window.removeEventListener('resize', handleResize) 20 | }, []) 21 | 22 | return windowSize 23 | } 24 | 25 | export default useWindowSize 26 | -------------------------------------------------------------------------------- /src/layouts/BaseLayout.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { Header, Footer } from 'blocks' 4 | 5 | const BaseLayout = ({ children }) => { 6 | return ( 7 |
      8 |
      9 | {children} 10 |
      11 |
      12 | ) 13 | } 14 | 15 | export default BaseLayout 16 | -------------------------------------------------------------------------------- /src/pages/about-us.js: -------------------------------------------------------------------------------- 1 | import Head from 'components/Head' 2 | import PageContent from 'components/PageContent' 3 | import aboutUsData from '../../data/about-us' 4 | import { 5 | AboutUsHero, 6 | OurStory, 7 | Investors, 8 | Values, 9 | JobOffers, 10 | PerksAndBenefits, 11 | OurTeam, 12 | } from 'blocks' 13 | 14 | const AboutUs = () => { 15 | const { 16 | meta, 17 | hero, 18 | ourStory, 19 | investors, 20 | values, 21 | jobOffers, 22 | perksAndBenefits, 23 | ourTeam, 24 | } = aboutUsData 25 | return ( 26 | <> 27 | 28 | 29 | 30 | 31 | 32 | 33 | 37 | 38 | 39 | 40 | 41 | ) 42 | } 43 | 44 | export default AboutUs 45 | -------------------------------------------------------------------------------- /src/pages/pricing.js: -------------------------------------------------------------------------------- 1 | import Head from 'components/Head' 2 | import styled from 'styled-components' 3 | import pricingPageData from '../../data/pricing' 4 | import PageContent from 'components/PageContent' 5 | import { 6 | PricingHero, 7 | FAQ, 8 | ComparativeTable, 9 | PricingPlans as BasePricingBlock, 10 | } from 'blocks' 11 | import get from 'utils/get' 12 | 13 | const HeroBlock = styled(PricingHero)` 14 | margin-top: 72px; 15 | @media (min-width: ${get('breakpoints.md')}) { 16 | margin-top: 46px; 17 | } 18 | @media (min-width: ${get('breakpoints.lg')}) { 19 | margin-top: 98px; 20 | } 21 | @media (min-width: ${get('breakpoints.xl')}) { 22 | margin-top: 92px; 23 | } 24 | ` 25 | 26 | const PricingBlock = styled(BasePricingBlock)` 27 | margin-top: 68px; 28 | @media (min-width: ${get('breakpoints.lg')}) { 29 | margin-top: 56px; 30 | } 31 | @media (min-width: ${get('breakpoints.lg')}) { 32 | margin-top: 68px; 33 | } 34 | @media (min-width: ${get('breakpoints.xl')}) { 35 | margin-top: 128px; 36 | } 37 | ` 38 | 39 | const Pricing = () => { 40 | const { meta, hero, faq, table, pricing } = pricingPageData 41 | return ( 42 | <> 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | ) 52 | } 53 | 54 | export default Pricing 55 | -------------------------------------------------------------------------------- /src/stories/AboutUsHero.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { AboutUsHero } from 'blocks' 3 | import aboutUsData from '../../data/about-us' 4 | 5 | export default { 6 | title: 'Blocks/AboutUsHero', 7 | } 8 | 9 | export const Default = () => { 10 | const { hero } = aboutUsData 11 | 12 | return 13 | } 14 | -------------------------------------------------------------------------------- /src/stories/Accordion.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Accordion from 'components/Accordion' 3 | 4 | export default { 5 | title: 'Components/Accordion', 6 | component: Accordion, 7 | parameters: { 8 | layout: 'padded', 9 | }, 10 | } 11 | 12 | const Template = args => ( 13 |
      14 | 15 |
      16 | ) 17 | 18 | export const Default = Template.bind({}) 19 | Default.args = { 20 | question: 'Do you offer custom invoicing?', 21 | answer: 22 | 'Yes, we offer custom invoicing for Enterprise customers. Contact our sales team to learn more.', 23 | } 24 | 25 | export const WithLink = Template.bind({}) 26 | WithLink.args = { 27 | question: 'Do you offer custom invoicing?', 28 | answer: 29 | 'Yes, we offer custom invoicing for Enterprise customers. Contact our sales team to learn more.', 30 | } 31 | 32 | export const WithLongQuestion = Template.bind({}) 33 | WithLongQuestion.args = { 34 | question: 35 | 'Do you offer custom invoicing? Do you offer custom invoicing? Do you offer custom invoicing?', 36 | answer: 37 | 'Yes, we offer custom invoicing for Enterprise customers. Contact our sales team to learn more.', 38 | } 39 | 40 | export const WithLongAnswer = Template.bind({}) 41 | WithLongAnswer.args = { 42 | question: 'Do you offer custom invoicing?', 43 | answer: 44 | 'Yes, we offer custom invoicing for Enterprise customers. Contact our sales team to learn more.
      Yes, we offer custom invoicing for Enterprise customers. Contact our sales team to learn more. Yes, we offer custom invoicing for Enterprise customers. Contact our sales team to learn more.', 45 | } 46 | -------------------------------------------------------------------------------- /src/stories/Bullets.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Bullets from 'components/Bullets' 3 | import get from 'utils/get' 4 | import Button from 'components/Button' 5 | 6 | export default { 7 | title: 'Components/Bullets', 8 | component: Bullets, 9 | parameters: { 10 | layout: 'padded', 11 | }, 12 | decorators: [ 13 | Story => ( 14 |
      19 | 20 |
      21 | ), 22 | ], 23 | } 24 | 25 | export const Default = () => { 26 | const [index, setIndex] = React.useState(0) 27 | const nbBullets = 6 28 | return ( 29 | <> 30 | 35 | {index < nbBullets - 1 && ( 36 | 39 | )} 40 | 41 | ) 42 | } 43 | -------------------------------------------------------------------------------- /src/stories/Card.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Card from 'components/Card' 3 | import Typography from 'components/Typography' 4 | 5 | export default { 6 | title: 'Components/Card', 7 | component: Card, 8 | parameters: { 9 | layout: 'padded', 10 | }, 11 | decorators: [ 12 | Story => ( 13 |
      18 | 19 |
      20 | ), 21 | ], 22 | } 23 | 24 | const Template = args => ( 25 |
      26 | 27 |
      28 | ) 29 | 30 | export const Default = Template.bind({}) 31 | Default.args = { 32 | children: I am a Card component, 33 | } 34 | -------------------------------------------------------------------------------- /src/stories/Cards.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Cards } from 'blocks' 3 | import homepageData from '../../data/homepage' 4 | 5 | export default { 6 | title: 'Blocks/Cards', 7 | parameters: { 8 | backgrounds: { default: 'white' }, 9 | }, 10 | } 11 | 12 | export const Default = () => { 13 | const { cards: cardsProps } = homepageData 14 | 15 | return 16 | } 17 | -------------------------------------------------------------------------------- /src/stories/Checkbox.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Checkbox from 'components/Checkbox' 3 | import { useCheckboxState } from 'reakit/Checkbox' 4 | import { Rust, Python, React as ReactIcon } from 'components/icons' 5 | import Typography from 'components/Typography' 6 | 7 | export default { 8 | title: 'Components/Checkbox', 9 | component: Checkbox, 10 | parameters: { 11 | layout: 'padded', 12 | }, 13 | decorators: [ 14 | Story => ( 15 |
      20 | 21 |
      22 | ), 23 | ], 24 | } 25 | 26 | export const Default = () => { 27 | const checkboxState = useCheckboxState({ state: [] }) 28 | return ( 29 | <> 30 | Choices: {checkboxState.state.join(', ')} 31 | 37 | 43 | 49 | 50 | ) 51 | } 52 | -------------------------------------------------------------------------------- /src/stories/Companies.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Companies } from 'blocks' 3 | import homepageData from '../../data/homepage' 4 | import get from 'utils/get' 5 | 6 | export default { 7 | title: 'Blocks/Companies', 8 | } 9 | 10 | export const Default = () => { 11 | const { companies: companiesProps } = homepageData 12 | 13 | return ( 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /src/stories/Demo.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Demo } from 'blocks' 3 | import homepageData from '../../data/homepage' 4 | import get from 'utils/get' 5 | 6 | export default { 7 | title: 'Blocks/Demo', 8 | } 9 | 10 | export const Default = () => { 11 | const { demo: demoProps } = homepageData 12 | 13 | return 14 | } 15 | 16 | export const OtherColor = () => { 17 | const { demo: demoProps } = homepageData 18 | 19 | return 20 | } 21 | -------------------------------------------------------------------------------- /src/stories/Disclosure.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useDisclosureState } from 'reakit/Disclosure' 3 | import { Disclosure, DisclosureContent } from '../components/Disclosure' 4 | import Typography from '../components/Typography' 5 | import get from 'utils/get' 6 | 7 | export default { 8 | title: 'Components/Disclosure', 9 | parameters: { 10 | layout: 'padded', 11 | }, 12 | decorators: [ 13 | Story => ( 14 |
      19 | 20 |
      21 | ), 22 | ], 23 | } 24 | 25 | const DisclosureComponent = ({ disclosure }) => ( 26 | <> 27 | 28 | Toggle 29 | 30 | 31 | 32 | I’m the content ! 33 | 34 | 35 | 36 | ) 37 | 38 | export const Default = () => { 39 | const disclosure = useDisclosureState() 40 | return 41 | } 42 | 43 | export const Animated = () => { 44 | const disclosure = useDisclosureState({ animated: true }) 45 | return 46 | } 47 | -------------------------------------------------------------------------------- /src/stories/FAQ.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FAQ } from 'blocks' 3 | import pricingPageData from '../../data/pricing' 4 | 5 | export default { 6 | title: 'Blocks/FAQ', 7 | } 8 | 9 | export const Default = () => { 10 | const { faq } = pricingPageData 11 | 12 | return 13 | } 14 | -------------------------------------------------------------------------------- /src/stories/Footer.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Footer } from 'blocks' 3 | 4 | export default { 5 | title: 'blocks/Footer', 6 | component: Footer, 7 | parameters: { 8 | backgrounds: { default: 'white' }, 9 | }, 10 | } 11 | 12 | const Template = args => { 13 | return