add confirmation page

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 (
+    <>
+      <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-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;

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 (
+    <>
+      <NextSeo
+        title="Code Smart Play Hard | Amplication"
+        description="Amplication is the most flexible open-source backend development platform for Node.js applications. Design models and roles, deploy your app, connect with REST or GraphQL API, sync with GitHub. Built for developers, by developers."
+      />
+
+      <main
+        className="w-full font-poppins z-10 !mb-0 laptop:mb-[100px] "
+        id="apply"
+      >
+
+        <ConfirmedContent />
+
+        <div className='amplication-base'>
+          <StartNow />
+        </div>
+
+
+
+
+      </main>
+    </>
+  );
+};
+Confirmed.getLayout = function getLayout(page) {
+  return (
+    <MainLayout
+      footerClass="bg-light-blue"
+      hideFooterBanner={true}
+      hideBackground={true}
+    >
+      {page}
+    </MainLayout>
+  );
+};
+export default Confirmed;