diff --git a/components/Common/HubSpotForm/index.jsx b/components/Common/HubSpotForm/index.jsx index 02a7497e..df4da3f5 100644 --- a/components/Common/HubSpotForm/index.jsx +++ b/components/Common/HubSpotForm/index.jsx @@ -8,6 +8,10 @@ const SKIP_SUBMIT_TEST = false; const HUBSPOT_FORM_BASE_URL = 'https://api.hsforms.com/submissions/v3/integration/submit/'; +const ERROR_TYPE_TO_MESSAGE = { + BLOCKED_EMAIL: 'Please enter a valid company email address', +}; + const HubSpotForm = ({ children, hubSpotPortalId, @@ -16,14 +20,18 @@ const HubSpotForm = ({ pageName, formName, includeConsent, + buttonClassName, + hideSuccessImage, }) => { const [formIsSending, setFormIsSending] = useState(false); const [successMsg, setSuccessMsg] = useState(''); + const [error, setError] = useState(null); const router = useRouter(); const form = useRef(null); const submitSubscriptionForm = async (e) => { + setError(null); e.preventDefault(); const formData = new FormData(form.current); @@ -38,6 +46,7 @@ const HubSpotForm = ({ }); setFormIsSending(true); + if (!SKIP_SUBMIT_TEST) { try { const response = await fetch( @@ -58,6 +67,16 @@ const HubSpotForm = ({ }, ); const data = await response.json(); + if (data.status === 'error') { + if (data.errors && data.errors.length > 0) { + const errorType = data.errors[0].errorType; + setError( + ERROR_TYPE_TO_MESSAGE[errorType] || data.errors[0].message, + ); + } else { + setError(data.message); + } + } if (data.inlineMessage) { setSuccessMsg(successMessage); } @@ -112,10 +131,12 @@ const HubSpotForm = ({ disabled={formIsSending ? 'disabled' : ''} type="submit" name="submit" - className="min-w-[130px] mt-1 flex justify-center items-center text-white font-poppins font-normal text-center rounded py-2 px-3 laptop:px-8 laptop:font-medium transition-all duration-300 bg-purple-bright hover:bg-purple-bright-hover text-[15px] h-[40px] whitespace-nowrap !px-4 mx-auto" + className={`min-w-[130px] mt-1 flex justify-center items-center text-white font-poppins font-normal text-center rounded py-2 px-3 laptop:px-8 laptop:font-medium transition-all duration-300 bg-purple-bright hover:bg-purple-bright-hover text-[15px] h-[40px] whitespace-nowrap !px-4 mx-auto + ${buttonClassName}`} value="Submit" /> +
{error}
- - - - - - - -
+ {!hideSuccessImage && ( + + + + + + + )} +
{successMsg}
@@ -174,6 +196,8 @@ HubSpotForm.propTypes = { pageName: PropTypes.string, formName: PropTypes.string, includeConsent: PropTypes.bool, + buttonClassName: PropTypes.string, + hideSuccessImage: PropTypes.bool, }; export default HubSpotForm; diff --git a/components/Sections/CodeSmartPlayHard/Confirmed/index.jsx b/components/Sections/CodeSmartPlayHard/Confirmed/index.jsx new file mode 100644 index 00000000..32447a8c --- /dev/null +++ b/components/Sections/CodeSmartPlayHard/Confirmed/index.jsx @@ -0,0 +1,100 @@ +import Image from 'next/image'; +import Link from 'next/link'; +import icon6 from '../../../../public/images/db-import/icon-6.svg'; +import icon7 from '../../../../public/images/db-import/icon-7.svg'; +import icon8 from '../../../../public/images/db-import/icon-8.svg'; +import PageSection from '../../../Common/PageSection'; +import * as analytics from '../../../../lib/analytics'; +import { useCallback } from 'react'; + +const links = [ + { + title: 'Book a demo', + subTitle: + "See how to bring your applications to life quicker than you've ever imagined", + to: process.env.NEXT_PUBLIC_BOOK_MEETING_URL, + icon: icon6, + actionName: 'bookDemo', + }, + { + title: 'Try for free', + subTitle: 'Sign up for our free 14-day Enterprise trial', + to: 'https://app.amplication.com/login', + icon: icon7, + actionName: 'tryForFree', + }, + { + title: 'Learn more', + subTitle: + 'Read our docs to learn how to create services and apps that meet the highest standards', + to: 'https://docs.amplication.com/', + icon: icon8, + actionName: 'learnMore', + }, +]; + +const Hero = () => { + const handleCtaClick = useCallback((actionName, to) => { + analytics.event({ + action: 'raffleCtaClicked', + params: { + ctaLabel: actionName, + url: to, + }, + }); + }, []); + + return ( + <> + +
+
+
+
+

+ Success! You're in the Game! +

+ +
+ Thank you for entering the Amplication Xbox Raffle! Your + registration is now confirmed. The winner will be announced + following the tradeshow's conclusion. +
+
+
+ +
+
+ + +
+

Build. Deploy. Accelerate.

+
+
+ {links.map((link, index) => ( + + { + handleCtaClick(link.actionName, link.to); + }} + > +
+ {link.title +
{link.title}
+
{link.subTitle}
+
+ + + ))} +
+ + + ); +}; + +export default Hero; diff --git a/components/Sections/CodeSmartPlayHard/Form/index.jsx b/components/Sections/CodeSmartPlayHard/Form/index.jsx new file mode 100644 index 00000000..f852c6db --- /dev/null +++ b/components/Sections/CodeSmartPlayHard/Form/index.jsx @@ -0,0 +1,55 @@ +import HubSpotForm from '../../../Common/HubSpotForm'; + +const Form = () => { + return ( + +
+ +
+
+ +
+
+ +
+
+ +
+ + ); +}; + +export default Form; diff --git a/components/Sections/CodeSmartPlayHard/Hero/index.jsx b/components/Sections/CodeSmartPlayHard/Hero/index.jsx new file mode 100644 index 00000000..987d77b5 --- /dev/null +++ b/components/Sections/CodeSmartPlayHard/Hero/index.jsx @@ -0,0 +1,64 @@ +import Form from '../Form'; +import Image from 'next/image'; +import AppDashboard from '../../../../public/images/xbox.png'; + +const Hero = () => { + return ( + <> +
+
+
+

+ Code. Deploy. Game On! +

+

+ Boost your coding & gaming experience with Amplication. +

+
+ Join our exclusive MWC 2024 raffle and get the chance to win an + Xbox Series X! +
+
+
+
+
+
+
+ {'Amplication +
+
+ Win an Xbox! +
+
+
+
+
+ +
+
+
+
+ Code with Amplication and win big! +
+ +
+ Amplication automates backend creation, helping you deploy scalable + and reliable services faster and efficiently. Empower your business + with modern applications. Streamline and revolutionize your + development process. +
+
+
+
+ + ); +}; + +export default Hero; diff --git a/pages/_app.js b/pages/_app.js index 1d5019e0..f993d8f4 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -10,6 +10,7 @@ import '../styles/stigg.css'; import 'react-loading-skeleton/dist/skeleton.css'; import "../styles/bootstrap-wrapper.scss" import "../styles/carousel.css" +import "../styles/components.scss" import client from '../services/index'; import * as analytics from '../lib/analytics'; diff --git a/pages/code-smart-play-hard.js b/pages/code-smart-play-hard.js new file mode 100644 index 00000000..6b46ee16 --- /dev/null +++ b/pages/code-smart-play-hard.js @@ -0,0 +1,47 @@ +import Hero from '../components/Sections/CodeSmartPlayHard/Hero'; +import StartNow from '../components/Sections/About/StartNow'; + +import { NextSeo } from 'next-seo'; +import { MainLayout } from '../layouts'; +import PageSection from '../components/Common/PageSection'; + + + +const CodeSmartPlayHard = () => { + return ( + <> + + +
+ + + +
+ +
+ + + + +
+ + ); +}; +CodeSmartPlayHard.getLayout = function getLayout(page) { + return ( + + {page} + + ); +}; +export default CodeSmartPlayHard; diff --git a/pages/code-smart-play-hard/confirmed.js b/pages/code-smart-play-hard/confirmed.js new file mode 100644 index 00000000..2b24438c --- /dev/null +++ b/pages/code-smart-play-hard/confirmed.js @@ -0,0 +1,46 @@ +import StartNow from '../../components/Sections/About/StartNow'; +import ConfirmedContent from '../../components/Sections/CodeSmartPlayHard/Confirmed'; + +import { NextSeo } from 'next-seo'; +import { MainLayout } from '../../layouts'; + + + +const Confirmed = () => { + return ( + <> + + +
+ + + +
+ +
+ + + + +
+ + ); +}; +Confirmed.getLayout = function getLayout(page) { + return ( + + {page} + + ); +}; +export default Confirmed; diff --git a/public/images/db-import/icon-6.svg b/public/images/db-import/icon-6.svg new file mode 100644 index 00000000..75756fe3 --- /dev/null +++ b/public/images/db-import/icon-6.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/images/db-import/icon-7.svg b/public/images/db-import/icon-7.svg new file mode 100644 index 00000000..4400ee1b --- /dev/null +++ b/public/images/db-import/icon-7.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/images/db-import/icon-8.svg b/public/images/db-import/icon-8.svg new file mode 100644 index 00000000..041a79c6 --- /dev/null +++ b/public/images/db-import/icon-8.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/xbox.png b/public/images/xbox.png new file mode 100644 index 00000000..c17ddbc1 Binary files /dev/null and b/public/images/xbox.png differ diff --git a/styles/components.scss b/styles/components.scss new file mode 100644 index 00000000..9da0ebb8 --- /dev/null +++ b/styles/components.scss @@ -0,0 +1,46 @@ +@mixin hero-blur { + position: relative; + &::before { + content: ''; + position: absolute; + top: 10%; + left: 10%; + width: 80%; + height: 80%; + border-radius: 50%; + background: #7950ed; + filter: blur(100px); + } +} + +.hero-blur { + @include hero-blur; + + &--side { + @include hero-blur; + + &::before { + top: auto; + bottom: 100px; + left: -100px; + width: 100px; + height: 100px; + background: #4e1474; + filter: blur(50px); + } + } + + &--far { + @include hero-blur; + + &::before { + top: auto; + top: 0px; + left: auto; + right: -100px; + width: 100px; + height: 100px; + filter: blur(100px); + } + } +} diff --git a/tailwind.config.js b/tailwind.config.js index 08d97f8b..461e47e1 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -134,7 +134,7 @@ module.exports = { 'secondary-turquoise': '#53DBEE', gray: '#A3A8B8', 'light-gray': '#DFE2EA', - 'error-red': '#CC2C3F', + 'error-red': '#f85b6e', 'light-turquoise': '#41CADD', 'light': '#f4f4f7', },