-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into feat/plugin-page
- Loading branch information
Showing
116 changed files
with
40,316 additions
and
306 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import Button from '../Button'; | ||
|
|
||
| const OutlineButton = ({ className, ...props }) => { | ||
| return ( | ||
| <Button | ||
| {...props} | ||
| className={`!h-[34px] mb-2 laptop:mr-2 w-full !font-normal !text-sm !max-w-[140px] text-black80 whitespace-nowrap border border-white hover:bg-light hover:text-dark-black-100 ${className}`} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| OutlineButton.propTypes = Button.propTypes; | ||
|
|
||
| export default OutlineButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import Button from '../Button'; | ||
|
|
||
| const PrimaryButton = ({ className, ...props }) => { | ||
| return ( | ||
| <Button | ||
| {...props} | ||
| className={`!h-[34px] mb-2 laptop:mr-2 w-full !font-normal !text-sm !max-w-[140px] text-black80 whitespace-nowrap border border-purple-bright hover:bg-purple-bright-hover hover:border-purple-bright-hover ${className}`} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| PrimaryButton.propTypes = Button.propTypes; | ||
|
|
||
| export default PrimaryButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import { useCallback } from 'react'; | ||
| import * as analytics from '../../../lib/analytics'; | ||
| import OutlineButton from '../../Common/Button/button-outline'; | ||
| import PrimaryButton from '../../Common/Button/button-primary'; | ||
|
|
||
| const PageHero = ({ | ||
| title, | ||
| subTitle, | ||
| subText, | ||
| mainButton, | ||
| secondaryButton, | ||
| imageNode, | ||
| }) => { | ||
| const handleMainClick = useCallback(() => { | ||
| analytics.event({ | ||
| action: mainButton.eventName, | ||
| params: mainButton.eventParams, | ||
| }); | ||
| }, [mainButton.eventName, mainButton.eventParams]); | ||
|
|
||
| const handleSecondaryClick = useCallback(() => { | ||
| analytics.event({ | ||
| action: secondaryButton.eventName, | ||
| params: secondaryButton.eventParams, | ||
| }); | ||
| }, [secondaryButton.eventName, secondaryButton.eventParams]); | ||
| return ( | ||
| <> | ||
| <div className="relative w-full flex flex-col laptop:flex-row items-center justify-between laptop:h-[calc(100vh-90px)] text-center min-h-[600px]"> | ||
| <div className="laptop:!max-w-[50%]"> | ||
| <div className="text-center laptop:text-left mt-12 laptop:mt-0 max-w-[500px] laptop:max-w-[none]"> | ||
| <h1 className="text-2xl laptop:text-4xl desktop:text-5xl font-bold "> | ||
| {title} | ||
| </h1> | ||
| <h2 className="text-lg laptop:text-2xl desktop:text-3xl font-semibold"> | ||
| {subTitle} | ||
| </h2> | ||
| <div className="text-sm laptop:text-base large:text-lg text-white !mt-3 !mb-4 !max-w-[710px]"> | ||
| {subText} | ||
| </div> | ||
| </div> | ||
| <div className="flex items-center justify-center laptop:justify-start tablet:items-center mt-2 gap-4"> | ||
| <PrimaryButton | ||
| text={mainButton.text} | ||
| backgroundColor="purpleBright" | ||
| hoverBackgroundColor="purpleBrightHover" | ||
| isLink={true} | ||
| onClick={handleMainClick} | ||
| href={mainButton.href} | ||
| delayLinkMs={300} | ||
| /> | ||
| <OutlineButton | ||
| text="Try Free" | ||
| isLink={true} | ||
| onClick={handleSecondaryClick} | ||
| href={'https://app.amplication.com/login'} | ||
| delayLinkMs={300} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="relative items-center middle:!max-w-[90%] w-full middle:min-h-[600px] flex medium:!max-w-[46%]"> | ||
| <div className="absolute laptop:my-auto w-[50vw] -left-16 max-medium:w-full max-medium:left-0 max-medium:relative medium:flex align-items-center"> | ||
| {imageNode} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| PageHero.propTypes = { | ||
| title: PropTypes.string, | ||
| subTitle: PropTypes.string, | ||
| subText: PropTypes.string, | ||
| mainButton: PropTypes.shape({ | ||
| text: PropTypes.string, | ||
| href: PropTypes.string, | ||
| eventName: PropTypes.string, | ||
| eventParams: PropTypes.object, | ||
| }), | ||
| secondaryButton: PropTypes.shape({ | ||
| text: PropTypes.string, | ||
| href: PropTypes.string, | ||
| eventName: PropTypes.string, | ||
| eventParams: PropTypes.object, | ||
| }), | ||
| imageNode: PropTypes.node, | ||
| }; | ||
|
|
||
| export default PageHero; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,161 @@ | ||
| import graphql from '../../../public/images/tech/graphql.svg'; | ||
| import terraform from '../../../public/images/tech/terraform.svg'; | ||
| import mongo from '../../../public/images/tech/mongo.svg'; | ||
| import kafka from '../../../public/images/tech/kafka.svg'; | ||
| import github from '../../../public/images/tech/github.svg'; | ||
| import eslint from '../../../public/images/tech/eslint.svg'; | ||
| import bitbucket from '../../../public/images/tech/bitbucket.svg'; | ||
| import gitlab from '../../../public/images/tech/gitlab.svg'; | ||
| import k8 from '../../../public/images/tech/k8.svg'; | ||
| import mysql from '../../../public/images/tech/mysql.svg'; | ||
| import nestjs from '../../../public/images/tech/nestjs.svg'; | ||
| import node from '../../../public/images/tech/node.svg'; | ||
| import postgresql from '../../../public/images/tech/postgresql.svg'; | ||
| import prettier from '../../../public/images/tech/prettier.svg'; | ||
| import prisma from '../../../public/images/tech/prisma.svg'; | ||
| import redis from '../../../public/images/tech/redis.svg'; | ||
| import rest from '../../../public/images/tech/rest.svg'; | ||
| import docker from '../../../public/images/tech/docker.svg'; | ||
|
|
||
| const items = [ | ||
| { | ||
| image: graphql, | ||
| alt: 'GraphQL', | ||
| }, | ||
| { | ||
| image: terraform, | ||
| alt: 'Terraform', | ||
| }, | ||
| { | ||
| image: mongo, | ||
| alt: 'mongoDB', | ||
| }, | ||
| { | ||
| image: kafka, | ||
| alt: 'Kafka', | ||
| }, | ||
| { | ||
| image: github, | ||
| alt: 'GitHub', | ||
| }, | ||
| { | ||
| image: eslint, | ||
| alt: 'ESlint', | ||
| }, | ||
| { | ||
| image: bitbucket, | ||
| alt: 'Bitbucket', | ||
| }, | ||
| { | ||
| image: gitlab, | ||
| alt: 'Gitlab', | ||
| }, | ||
| { | ||
| image: k8, | ||
| alt: 'Kubernetes', | ||
| }, | ||
| { | ||
| image: mysql, | ||
| alt: 'MySQL', | ||
| }, | ||
| { | ||
| image: nestjs, | ||
| alt: 'NestJS', | ||
| }, | ||
| { | ||
| image: node, | ||
| alt: 'Node.js', | ||
| }, | ||
| { | ||
| image: postgresql, | ||
| alt: 'PostgreSQL', | ||
| }, | ||
| { | ||
| image: prettier, | ||
| alt: 'Prettier', | ||
| }, | ||
| { | ||
| image: prisma, | ||
| alt: 'Prisma', | ||
| }, | ||
| { | ||
| image: redis, | ||
| alt: 'Redis', | ||
| }, | ||
| { | ||
| image: rest, | ||
| alt: 'REST', | ||
| }, | ||
| { | ||
| image: docker, | ||
| alt: 'Docker', | ||
| }, | ||
| ]; | ||
|
|
||
| import Image from 'next/image'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| const TechSlider = ({ classes }) => { | ||
| return ( | ||
| <> | ||
| <div className=" flex items-center justify-center"> | ||
| <div className="w-[100%] h-20 overflow-hidden relative"> | ||
| <div className="flex items-center h-20 justify-around absolute animate "> | ||
| {items.map((item, index) => { | ||
| return ( | ||
| <div | ||
| key={index} | ||
| className="flex min-w-[156px] flex-row justify-center items-center whitespace-nowrap px-3 mx-2 " | ||
| > | ||
| <Image | ||
| width={156} | ||
| height={80} | ||
| src={item.image} | ||
| alt={item.alt} | ||
| /> | ||
| </div> | ||
| ); | ||
| })} | ||
| {items.map((item, index) => { | ||
| return ( | ||
| <div | ||
| key={index} | ||
| className="flex min-w-[156px] flex-row justify-center items-center whitespace-nowrap px-3 mx-2 " | ||
| > | ||
| <Image | ||
| width={156} | ||
| height={80} | ||
| src={item.image} | ||
| alt={item.alt} | ||
| /> | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {/* <div className="logotypes flex flex-wrap align-items-center animate"> | ||
| {items.map((item, index) => { | ||
| return ( | ||
| <div | ||
| key={index} | ||
| className="flex justify-content-center w-[25%] tablet:w-[20%] laptop:w-[14.2857%]" | ||
| > | ||
| <Image src={item.image} alt={item.alt} /> | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> */} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| TechSlider.propTypes = { | ||
| classes: PropTypes.string, | ||
| }; | ||
|
|
||
| TechSlider.defaultProps = { | ||
| classes: '', | ||
| }; | ||
|
|
||
| export default TechSlider; |
Oops, something went wrong.