Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat:add mwc page #452

Merged
merged 5 commits into from
Feb 20, 2024
Merged

feat:add mwc page #452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9916c68
feat:add raffle page
yuval-hazaz Feb 19, 2024
ee228d0
update message
yuval-hazaz Feb 19, 2024
6f4b800
update page content
yuval-hazaz Feb 19, 2024
52e49b4
add confirmation page
yuval-hazaz Feb 19, 2024
79d8015
add confirmation page
yuval-hazaz Feb 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 55 additions & 31 deletions components/Common/HubSpotForm/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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);

Expand All @@ -38,6 +46,7 @@ const HubSpotForm = ({
});

setFormIsSending(true);

if (!SKIP_SUBMIT_TEST) {
try {
const response = await fetch(
Expand All @@ -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);
}
Expand Down Expand Up @@ -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"
/>
</div>
<div className="font-normal text-sm mt-5 text-error-red">{error}</div>
</form>
<div
className={
Expand All @@ -125,36 +146,37 @@ const HubSpotForm = ({
'p-8 absolute left-0 right-0 top-0 bottom-0 text-center flex flex-col items-center justify-content-center bg-light-blue'
}
>
<svg
width="126"
height="132"
viewBox="0 0 126 132"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M34.4 68.3a57.6 57.6 0 0 0-8.5 1.6l-7.7 1.6c-2 .2-4 .3-5.7 0-3.8-.5-7.7-2.8-8.8-6.5a8.2 8.2 0 0 1 10.2-10l.4-.6c-4.4-5.4-.2-12.6 5.6-13 2.8-.3 6 1.2 8 3.5 4 4.5 4.2 12.4 5 19.4l.2 2.2c.2 1.5 2.6 1.2 2.4-.3l-.3-2.8c-1-8.3-1-17.3-7.7-22-4.3-3-7.4-2.3-7.8-2.4-2.5.2-5 1.4-7 3.7a9.7 9.7 0 0 0-2 9.8A10.2 10.2 0 0 0 6.6 72c8 4.8 18.3 0 28.1-1.3 2.4-.4 1.2-2.5-.2-2.3ZM99 59.2l4.3-.8c2.7-.6 5.3-1 7.7-1.8 2-.6 3.7-1.2 5.1-2.2 3.3-2 5.9-5.8 5.4-9.6-.6-5.7-7.8-9.8-13.4-5.2l-.6-.4c1.7-6.8-5-11.8-10.5-9.9-2.7 1-5 3.7-5.8 6.6-2 6.2 1.7 14.1 3.8 21.3.5 1.5-1.8 2.2-2.2.7-2.6-8.6-7.1-17.8-2.7-25.4 2.6-4.5 5.8-5.1 6.1-5.4 2.4-.8 5-.7 7.9.6a10 10 0 0 1 5.8 8.3c1.3-.5 2.8-.7 4.1-.7 7 .4 13.4 8.5 7.7 17-4.5 6.7-13.6 7.5-22.2 9.2-2 .4-3-1.7-.6-2.3ZM49.6 4.7a11 11 0 0 0-13 14.5c3.2 10.5 17.7 13.2 26.5 20.6 1.3.7 2.7-.7 1.6-1.9a44 44 0 0 0-6.3-4.3 156 156 0 0 0-5.1-2.8c-2.6-1.3-5-2.6-7.3-4a21.6 21.6 0 0 1-4.5-3.8c-2.6-3-4-7.6-2.4-11.3 2.4-5.4 11-7.2 15.2-1l.7-.1v-.1c.4-7.2 8.7-10.1 13.7-6.6 2.4 1.8 3.8 5.2 3.8 8.4 0 6.7-6.2 13.5-10.5 20-1 1.3 1 2.7 2 1.3 5.2-7.8 12.7-15.5 10.6-24.4C73.4 4 70.4 2.4 70.1 2a11.1 11.1 0 0 0-8-1.9c-3.9.5-7.2 3-8.5 6.6-1.2-1-2.6-1.7-4-2Z"
fill="#F85B6E"
/>
<path
d="M82.7 119c.3.4.9.6 1.3.4.5-.3.7-.9.4-1.4l-3.4-6.6c-2-3.6 1.2-7.1 4.7-11 5-5.7 7-9.1 3.5-16.2a104 104 0 0 0-12.4-17.4l-1.6-1.1.5-7v-.5c.1-1.1.3-2.3-.9-3.3-.4-.4-1-.7-1.6-.8-.9-.2-2 0-3 .4s-2.1 1-3 2c-.6.8-1.1 1.6-1.5 2.6l-2.3-1.6-.3-.1a4.7 4.7 0 0 0-3.9 0c-.7.4-1.3 1-1.7 1.6a5 5 0 0 0 .7 6.1l6.6 5.8a4.7 4.7 0 0 0-2.6 2.2 7 7 0 0 0-.9 3.1c0 .8 0 1.7.3 2.5l-1.7-.3c-1 0-1.8.3-2.5.8-.7.6-1.2 1.3-1.5 2.3-.3.9-.3 1.9-.2 3h-1.4c-.6 0-1.3.3-1.8.6-.6.4-1.1.9-1.5 1.5a5.9 5.9 0 0 0-.2 6.2 22 22 0 0 1 1.5 4c.5 2 .1 1.9-.7 3.7-1.8 3.7-1.8 6.5.3 10.8L57 122c.2.5.7.7 1.2.5.3-.1.5-.3.6-.6a1 1 0 0 0 0-.7l-5.3-10.8c-1.7-3.4-1.9-5.7-.3-9 1.1-2.4 1.6-2.3 1-4.6-.3-1.3-1-3.4-1.8-4.9-.8-1.6-.6-3.1 0-4.1.3-.5.7-.8 1-1 .3-.2.7-.4 1-.4.8 0 1.5.2 2 1l3.3 7.2c.2.5.8.7 1.3.5.5-.3.7-.9.4-1.4l-3.3-7.2a7.3 7.3 0 0 1-.4-4.4c.1-.6.4-1 .8-1.3a2 2 0 0 1 1.3-.4c.9 0 2 .5 3.2 1.4l5 9.5c.3.5 1 .7 1.4.4.5-.2.6-.8.4-1.3l-5.2-9.6v-.2a6.4 6.4 0 0 1-1.4-4.3c0-.8.2-1.6.6-2.2.3-.6.8-1 1.3-1.2.5-.2 1.2-.2 2 0l1 1 10.2 14.8c.3.4.9.6 1.3.2.5-.3.6-.9.3-1.3l-10.2-15-.2-.2s-8.3-7-10-8.7a3 3 0 0 1-.9-2.3c0-.5.2-1 .5-1.3.2-.4.5-.7.9-.9.6-.3 1.4-.3 2.3 0l3.3 2.3 8 5.5 2 1.4c.8 1 8.6 10 12 16.8 3 6.1.8 9-3.4 13.8-4 4.5-7.6 8.5-5 13.4l3.4 6.6Zm-9.4-54.6-6-4.1c.4-1 .8-1.8 1.4-2.4a6 6 0 0 1 2.2-1.6c.7-.3 1.4-.4 2-.3l.6.3c.4.4.3 1 .3 1.7v.5l-.5 5.9Zm-13.9 62.3 2.3 4.8c.3.4.9.6 1.3.4.5-.3.7-.8.5-1.3l-2.3-4.8a1 1 0 0 0-1.2-.5 1 1 0 0 0-.6.6 1 1 0 0 0 0 .8Z"
fill="#fff"
/>
<path
d="M82.4 104.3c.3-.4.3-1-.2-1.4a1 1 0 0 0-1.3.1 95.8 95.8 0 0 0-6.4 9 1 1 0 0 0 .3 1.5c.4.3 1 .1 1.3-.3a159.6 159.6 0 0 1 6.3-9Z"
fill="#fff"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M85.7 120.9c-.5 0-.9.4-.9.9s.4.9.9.9.8-.4.8-1c0-.4-.3-.8-.8-.8ZM31 85a5 5 0 1 0 0 10 5 5 0 0 0 0-10ZM45 55a2 2 0 1 1 0 4 2 2 0 0 1 0-4ZM16.1 22.1c1-.7 1.9-.4 3.2-1.6 1-.9 1-1.4 1.3-2.5.4-1.3 1.2-1.3 1.6 0 .4 1.1.4 1.6 1.4 2.5.7.7 1.3 1 2.2 1.2 1.6.5 1.5 1.1 0 1.6-1.2.4-1.8.6-2.6 1.7-.8 1-.9 2.2-1.4 2.8-.8.9-1.3-1.4-1.5-1.8-.4-1-1.3-1.9-2.4-2.3-.5-.2-2.6-.8-1.8-1.6ZM100.5 73c1 .2 1.3 1 2.9 1 1.1 0 1.5-.3 2.4-.8 1-.5 1.5 0 1 1s-.8 1.3-.8 2.4c0 1 .2 1.4.6 2.1.7 1.2.3 1.6-1 1-1-.5-1.4-.7-2.6-.6-1 .1-1.9.9-2.6.9-1 0 0-1.6.2-2 .4-1 .4-2 0-3-.2-.4-1.1-2-.1-2ZM80.4 18.2c.8.1 1.2.8 2.5.8 1 0 1.2-.2 2-.7 1-.4 1.3 0 .8.9-.4.8-.6 1-.6 2 0 .8.2 1.2.6 1.8.5 1 .2 1.4-.9.9-.8-.4-1.3-.6-2.3-.5-.9 0-1.6.7-2.1.7-1 0 0-1.4.1-1.7.4-.8.3-1.7 0-2.5-.2-.4-1-1.7-.1-1.7Z"
fill="#fff"
/>
</svg>

<div className="font-normal text-lg leading-[27px] mt-5 max-w-[560px]">
{!hideSuccessImage && (
<svg
width="126"
height="132"
viewBox="0 0 126 132"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M34.4 68.3a57.6 57.6 0 0 0-8.5 1.6l-7.7 1.6c-2 .2-4 .3-5.7 0-3.8-.5-7.7-2.8-8.8-6.5a8.2 8.2 0 0 1 10.2-10l.4-.6c-4.4-5.4-.2-12.6 5.6-13 2.8-.3 6 1.2 8 3.5 4 4.5 4.2 12.4 5 19.4l.2 2.2c.2 1.5 2.6 1.2 2.4-.3l-.3-2.8c-1-8.3-1-17.3-7.7-22-4.3-3-7.4-2.3-7.8-2.4-2.5.2-5 1.4-7 3.7a9.7 9.7 0 0 0-2 9.8A10.2 10.2 0 0 0 6.6 72c8 4.8 18.3 0 28.1-1.3 2.4-.4 1.2-2.5-.2-2.3ZM99 59.2l4.3-.8c2.7-.6 5.3-1 7.7-1.8 2-.6 3.7-1.2 5.1-2.2 3.3-2 5.9-5.8 5.4-9.6-.6-5.7-7.8-9.8-13.4-5.2l-.6-.4c1.7-6.8-5-11.8-10.5-9.9-2.7 1-5 3.7-5.8 6.6-2 6.2 1.7 14.1 3.8 21.3.5 1.5-1.8 2.2-2.2.7-2.6-8.6-7.1-17.8-2.7-25.4 2.6-4.5 5.8-5.1 6.1-5.4 2.4-.8 5-.7 7.9.6a10 10 0 0 1 5.8 8.3c1.3-.5 2.8-.7 4.1-.7 7 .4 13.4 8.5 7.7 17-4.5 6.7-13.6 7.5-22.2 9.2-2 .4-3-1.7-.6-2.3ZM49.6 4.7a11 11 0 0 0-13 14.5c3.2 10.5 17.7 13.2 26.5 20.6 1.3.7 2.7-.7 1.6-1.9a44 44 0 0 0-6.3-4.3 156 156 0 0 0-5.1-2.8c-2.6-1.3-5-2.6-7.3-4a21.6 21.6 0 0 1-4.5-3.8c-2.6-3-4-7.6-2.4-11.3 2.4-5.4 11-7.2 15.2-1l.7-.1v-.1c.4-7.2 8.7-10.1 13.7-6.6 2.4 1.8 3.8 5.2 3.8 8.4 0 6.7-6.2 13.5-10.5 20-1 1.3 1 2.7 2 1.3 5.2-7.8 12.7-15.5 10.6-24.4C73.4 4 70.4 2.4 70.1 2a11.1 11.1 0 0 0-8-1.9c-3.9.5-7.2 3-8.5 6.6-1.2-1-2.6-1.7-4-2Z"
fill="#F85B6E"
/>
<path
d="M82.7 119c.3.4.9.6 1.3.4.5-.3.7-.9.4-1.4l-3.4-6.6c-2-3.6 1.2-7.1 4.7-11 5-5.7 7-9.1 3.5-16.2a104 104 0 0 0-12.4-17.4l-1.6-1.1.5-7v-.5c.1-1.1.3-2.3-.9-3.3-.4-.4-1-.7-1.6-.8-.9-.2-2 0-3 .4s-2.1 1-3 2c-.6.8-1.1 1.6-1.5 2.6l-2.3-1.6-.3-.1a4.7 4.7 0 0 0-3.9 0c-.7.4-1.3 1-1.7 1.6a5 5 0 0 0 .7 6.1l6.6 5.8a4.7 4.7 0 0 0-2.6 2.2 7 7 0 0 0-.9 3.1c0 .8 0 1.7.3 2.5l-1.7-.3c-1 0-1.8.3-2.5.8-.7.6-1.2 1.3-1.5 2.3-.3.9-.3 1.9-.2 3h-1.4c-.6 0-1.3.3-1.8.6-.6.4-1.1.9-1.5 1.5a5.9 5.9 0 0 0-.2 6.2 22 22 0 0 1 1.5 4c.5 2 .1 1.9-.7 3.7-1.8 3.7-1.8 6.5.3 10.8L57 122c.2.5.7.7 1.2.5.3-.1.5-.3.6-.6a1 1 0 0 0 0-.7l-5.3-10.8c-1.7-3.4-1.9-5.7-.3-9 1.1-2.4 1.6-2.3 1-4.6-.3-1.3-1-3.4-1.8-4.9-.8-1.6-.6-3.1 0-4.1.3-.5.7-.8 1-1 .3-.2.7-.4 1-.4.8 0 1.5.2 2 1l3.3 7.2c.2.5.8.7 1.3.5.5-.3.7-.9.4-1.4l-3.3-7.2a7.3 7.3 0 0 1-.4-4.4c.1-.6.4-1 .8-1.3a2 2 0 0 1 1.3-.4c.9 0 2 .5 3.2 1.4l5 9.5c.3.5 1 .7 1.4.4.5-.2.6-.8.4-1.3l-5.2-9.6v-.2a6.4 6.4 0 0 1-1.4-4.3c0-.8.2-1.6.6-2.2.3-.6.8-1 1.3-1.2.5-.2 1.2-.2 2 0l1 1 10.2 14.8c.3.4.9.6 1.3.2.5-.3.6-.9.3-1.3l-10.2-15-.2-.2s-8.3-7-10-8.7a3 3 0 0 1-.9-2.3c0-.5.2-1 .5-1.3.2-.4.5-.7.9-.9.6-.3 1.4-.3 2.3 0l3.3 2.3 8 5.5 2 1.4c.8 1 8.6 10 12 16.8 3 6.1.8 9-3.4 13.8-4 4.5-7.6 8.5-5 13.4l3.4 6.6Zm-9.4-54.6-6-4.1c.4-1 .8-1.8 1.4-2.4a6 6 0 0 1 2.2-1.6c.7-.3 1.4-.4 2-.3l.6.3c.4.4.3 1 .3 1.7v.5l-.5 5.9Zm-13.9 62.3 2.3 4.8c.3.4.9.6 1.3.4.5-.3.7-.8.5-1.3l-2.3-4.8a1 1 0 0 0-1.2-.5 1 1 0 0 0-.6.6 1 1 0 0 0 0 .8Z"
fill="#fff"
/>
<path
d="M82.4 104.3c.3-.4.3-1-.2-1.4a1 1 0 0 0-1.3.1 95.8 95.8 0 0 0-6.4 9 1 1 0 0 0 .3 1.5c.4.3 1 .1 1.3-.3a159.6 159.6 0 0 1 6.3-9Z"
fill="#fff"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M85.7 120.9c-.5 0-.9.4-.9.9s.4.9.9.9.8-.4.8-1c0-.4-.3-.8-.8-.8ZM31 85a5 5 0 1 0 0 10 5 5 0 0 0 0-10ZM45 55a2 2 0 1 1 0 4 2 2 0 0 1 0-4ZM16.1 22.1c1-.7 1.9-.4 3.2-1.6 1-.9 1-1.4 1.3-2.5.4-1.3 1.2-1.3 1.6 0 .4 1.1.4 1.6 1.4 2.5.7.7 1.3 1 2.2 1.2 1.6.5 1.5 1.1 0 1.6-1.2.4-1.8.6-2.6 1.7-.8 1-.9 2.2-1.4 2.8-.8.9-1.3-1.4-1.5-1.8-.4-1-1.3-1.9-2.4-2.3-.5-.2-2.6-.8-1.8-1.6ZM100.5 73c1 .2 1.3 1 2.9 1 1.1 0 1.5-.3 2.4-.8 1-.5 1.5 0 1 1s-.8 1.3-.8 2.4c0 1 .2 1.4.6 2.1.7 1.2.3 1.6-1 1-1-.5-1.4-.7-2.6-.6-1 .1-1.9.9-2.6.9-1 0 0-1.6.2-2 .4-1 .4-2 0-3-.2-.4-1.1-2-.1-2ZM80.4 18.2c.8.1 1.2.8 2.5.8 1 0 1.2-.2 2-.7 1-.4 1.3 0 .8.9-.4.8-.6 1-.6 2 0 .8.2 1.2.6 1.8.5 1 .2 1.4-.9.9-.8-.4-1.3-.6-2.3-.5-.9 0-1.6.7-2.1.7-1 0 0-1.4.1-1.7.4-.8.3-1.7 0-2.5-.2-.4-1-1.7-.1-1.7Z"
fill="#fff"
/>
</svg>
)}
<div className="font-normal text-sm mt-5 max-w-[560px] text-light-turquoise">
{successMsg}
</div>
</div>
Expand All @@ -174,6 +196,8 @@ HubSpotForm.propTypes = {
pageName: PropTypes.string,
formName: PropTypes.string,
includeConsent: PropTypes.bool,
buttonClassName: PropTypes.string,
hideSuccessImage: PropTypes.bool,
};

export default HubSpotForm;
100 changes: 100 additions & 0 deletions components/Sections/CodeSmartPlayHard/Confirmed/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<>
<PageSection>
<div className="my-[80px] min-h-[300px] w-full flex flex-col items-center justify-between text-center ">
<div className="w-full hero-blur--far"></div>
<div className="flex flex-col gap-10 laptop:flex-row justify-between flex-1 ">
<div className="flex flex-col gap-2 flex-1 items-center max-w-[800px] ">
<h1 className="text-5xl laptop:text-7xl font-bold ">
Success! You&apos;re in the Game!
</h1>

<div className="text-sm laptop:text-base large:text-lg text-white">
Thank you for entering the Amplication Xbox Raffle! Your
registration is now confirmed. The winner will be announced
following the tradeshow&apos;s conclusion.
</div>
</div>
</div>

<div className="hidden laptop:block w-full hero-blur--side"></div>
</div>
</PageSection>
<PageSection alternate className={'py-12'}>
<div className="text-center flex flex-col items-center justify-center ">
<h2 className="text-3xl font-semibold">Build. Deploy. Accelerate.</h2>
</div>
<div className="w-full flex flex-col laptop:flex-row gap-8 my-10 z-10 items-center laptop:items-stretch justify-center">
{links.map((link, index) => (
<Link href={link.to} passHref key={index}>
<a
target="_blank"
onClick={() => {
handleCtaClick(link.actionName, link.to);
}}
>
<div
className={
'text-center flex p-8 w-[300px] flex-col justify-start gap-8 items-center overflow-hidden border border-solid border-dark-black-70 bg-dark-black-100 h-full hover:shadow-hover-post rounded-lg p-4 min-h-[200px] '
}
>
<Image height={40} src={link.icon} alt={link.title ?? ''} />
<div className="text-lg font-medium">{link.title}</div>
<div className="text-xs text-gray">{link.subTitle}</div>
</div>
</a>
</Link>
))}
</div>
</PageSection>
</>
);
};

export default Hero;
55 changes: 55 additions & 0 deletions components/Sections/CodeSmartPlayHard/Form/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import HubSpotForm from '../../../Common/HubSpotForm';

const Form = () => {
return (
<HubSpotForm
hubSpotPortalId="25691669"
hubSpotFormId="5eb8cd14-51ce-4588-b2d3-2141172998ea"
pageName="code-smart-play-hard"
formName="codeSmartPlayHard"
successMessage="Congratulations! Look for our confirmation email in your inbox and click the link to finish registering."
includeConsent={false}
buttonClassName="w-full"
hideSuccessImage={true}
>
<div className="relative laptop:w-[calc(50%-8px)] my-2">
<input
required
type="text"
name="firstname"
placeholder="First Name"
className="leading-input focus:border-purple !shadow-hidden block w-full rounded-lg border border-solid bg-dark-black-100 py-2 pl-3 pr-8 font-poppins text-sm text-white placeholder:text-white hover:border-purple border-lite"
/>
</div>
<div className="relative laptop:w-[calc(50%-8px)] my-2">
<input
required
type="text"
name="lastname"
placeholder="Last Name"
className="leading-input focus:border-purple !shadow-hidden block w-full rounded-lg border border-solid bg-dark-black-100 py-2 pl-3 pr-8 font-poppins text-sm text-white placeholder:text-white hover:border-purple border-lite"
/>
</div>
<div className="relative laptop:w-[calc(50%-8px)] my-2">
<input
required
type="text"
name="company"
placeholder="Company Name"
className="leading-input focus:border-purple !shadow-hidden block w-full rounded-lg border border-solid bg-dark-black-100 py-2 pl-3 pr-8 font-poppins text-sm text-white placeholder:text-white hover:border-purple border-lite"
/>
</div>
<div className="relative laptop:w-[calc(50%-8px)] my-2">
<input
required
type="email"
name="email"
placeholder="Company email"
className="leading-input focus:border-purple !shadow-hidden block w-full rounded-lg border border-solid bg-dark-black-100 py-2 pl-3 pr-8 font-poppins text-sm text-white placeholder:text-white hover:border-purple border-lite"
/>
</div>
</HubSpotForm>
);
};

export default Form;
64 changes: 64 additions & 0 deletions components/Sections/CodeSmartPlayHard/Hero/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import Form from '../Form';
import Image from 'next/image';
import AppDashboard from '../../../../public/images/xbox.png';

const Hero = () => {
return (
<>
<div className="my-[80px] w-full flex flex-col items-center justify-between text-center laptop:text-left ">
<div className="flex flex-col gap-10 laptop:flex-row justify-between flex-1 ">
<div className="flex flex-col gap-2 flex-1 items-center laptop:items-start">
<h1 className="text-5xl laptop:text-4xl desktop:text-7xl font-bold ">
Code. Deploy. Game&nbsp;On!
</h1>
<h2 className="text-lg laptop:text-2xl desktop:text-3xl font-semibold">
Boost your coding & gaming experience with Amplication.
</h2>
<div className="text-sm laptop:text-base large:text-lg text-white">
Join our exclusive MWC 2024 raffle and get the chance to win an
Xbox Series X!
</div>
<div className="hidden laptop:block">
<Form />
</div>
</div>
<div className="flex-1 flex items-center justify-center ">
<div className="hero-blur max-w-[450px]">
<Image
src={AppDashboard}
alt={'Amplication platform'}
className="max-w-[200px]"
/>
<div
className="absolute w-[150px] h-[150px] rounded-full bg-purple
right-[40px] top-[20px]"
>
<div className="rotate-12 flex items-center justify-center text-center text-xl font-bold absolute w-[120px] h-[120px] rounded-full bg-transparent border-2 border-solid border-white right-[15px] top-[15px]">
Win an Xbox!
</div>
</div>
</div>
</div>
<div className="block laptop:hidden">
<Form />
</div>
</div>
<div className="text-center flex flex-col items-center justify-center mt-20 ">
<div className="text-2xl laptop:text-4xl desktop:text-5xl font-bold ">
Code with Amplication and win big!
</div>

<div className="text-sm laptop:text-base large:text-lg text-white !mt-3 !mb-4 !max-w-[710px]">
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.
</div>
</div>
<div className="hidden laptop:block w-full hero-blur--side"></div>
</div>
</>
);
};

export default Hero;
Loading
Loading