Merge pull request #117 from sailpoint-oss/fix/developer-days

Fix/developer days

src/components/conference/Hero/index.js

@@ -11,20 +11,13 @@ export default function ConferenceHero() {
     <div className={styles.center}>
       <div className={styles.mainCard}>
         <div>
-          <div className={styles.headerSection}>
-            <div className={styles.shipyardText}>Shipyard</div>
-            <div className={styles.yearTextBorder}>
-              <div className={styles.yearText}>2023</div>
-            </div>
-          </div>
-
+            <div className={styles.conferenceText}>Developer Days</div>
           <div className={styles.comingSoonText}>COMING SOON | Q1 2023</div>
           <div className={styles.descriptionText}>
             The conference for developers on SailPoint platforms.
           </div>
-
           <SliderButton id="gVCODdMc" className={styles.button}>
-            Join the Waitlist
+            Join the Waitlist!
           </SliderButton>
         </div>
       </div>

src/components/conference/Hero/styles.module.css

@@ -1,10 +1,10 @@
 .mainCard {
   margin: 10px 100px;
-  display: grid;
   grid-gap: 20px;
   grid-template-columns: 900px auto;
   align-content: center;
 }
+
 .center {
   margin: 50px auto;
   max-width: 1000px;
@@ -14,54 +14,23 @@
   margin: 30px auto;
 }
 
-@media only screen and (max-width: 1324px) {
-  .signUpSection {
-    display: none;
-  }
-}
-
-.headerSection {
-  display: grid;
-  grid-gap: 0px;
-  grid-template-columns: 517px 330px;
-}
-
-.shipyardText {
+.conferenceText {
     margin-top: 70px;
-  font-size: 100px;
+    font-size: 55px;
     color: var(--dev-text-color-cobalt);
     font-family: input-mono;
 }
 
-.yearText {
-  color: var(--dev-text-color-cobalt);
-  font-size: 100px;
-  font-family: input-mono;
-  font-weight: bold;
-}
-
-.yearTextBorder {
-  margin-top: 70px;
-  width: 330px;
-  height: 149px;
-  /* UI Properties */
-  border: 4px solid var(--dev-text-color-cobalt);
-  border-radius: 45px;
-  opacity: 1;
-  line-height: 149px;
-  text-align: center;
-}
-
 .comingSoonText {
     color: var(--dev-text-color-cobalt);
-  font-size: 22px;
+    font-size: 20px;
     font-family: input-mono;
     letter-spacing: 5.5px;
     margin-top: -17px;
 }
 
 .descriptionText {
-  margin-top: 20px;
+    margin-top: 27px;
     color: var(--ifm-color-primary);
     font-size: 36px;
     font-family: input-mono;
@@ -76,12 +45,6 @@
   font-weight: 600;
 }
 
-@media only screen and (max-width: 980px) {
-  .mainCard {
-    display: none;
-  }
-}
-
 .button {
   text-decoration: none;
   text-align: center;
@@ -112,3 +75,28 @@
   background-color: #c552ae10;
   color: #cc27b0;
 }
+
+@media screen and (max-width: 550px) {
+  .mainCard {
+    margin: 10px 20px;
+    grid-gap: 20px;
+    grid-template-columns: 900px auto;
+    align-content: center;
+  }
+
+  .conferenceText {
+    margin-top: 70px;
+    margin-bottom: 30px;
+    line-height: 60px;
+    font-size: 45px;
+    color: var(--dev-text-color-cobalt);
+    font-family: input-mono;
+  }
+
+  .descriptionText {
+    margin-top: 27px;
+    color: var(--ifm-color-primary);
+    font-size: 25px;
+    font-family: input-mono;
+  }
+}

src/components/conference/Theme/index.js

@@ -23,16 +23,8 @@ export default function ConferenceTheme() {
       </div>
       <div className={styles.center}>
         <div className={styles.gridContainer}>
-          <ThemeCard
-            title={
-              'Shipyard is a hands-on conference, you will build something in almost every session'
-            }
-            image={'/conf/workshops.png'}></ThemeCard>
-          <ThemeCard
-            title={
-              'Shipyard will be all-virtual, open to everyone, and <b>at no cost<b>'
-            }
-            image={'/conf/virtual.png'}></ThemeCard>
+          <ThemeCard title={"Developer Days is a hands-on conference, you will build something in almost every session"} image={"/conf/workshops.png"}></ThemeCard>
+          <ThemeCard title={"Developer Days will be all-virtual, open to everyone, and <b>at no cost<b>"} image={"/conf/virtual.png"}></ThemeCard>
         </div>
       </div>
     </div>

src/components/conference/Waitlist/index.js

@@ -5,10 +5,16 @@ import ThemedImage from '@theme/ThemedImage';
 import {addDarkToFileName} from '../../../util/util';
 import {SliderButton} from '@typeform/embed-react';
 export default function ConferenceWaitlist() {
+<<<<<<< HEAD
+  const background = "/conf/WaveBackground.png";
+  const learnBuildDeploy = "/conf/LearnBuildDeploy-Light.png";
+  const sailpointImage = "/img/SailPoint-Logo-RGB-Color.png";
+=======
   const background = '/conf/Shipyard-WaveBackground.png';
   const learnBuildDeploy = '/conf/LearnBuildDeploy-Light.png';
   const shipyardImage = '/conf/SailPoint-Shipyard-DeveloperConference-Logo.png';
   const sailpointImage = '/img/SailPoint-Logo-RGB-Color.png';
+>>>>>>> main
 
   return (
     <div className={styles.mainCard}>
@@ -36,16 +42,7 @@ export default function ConferenceWaitlist() {
               dark: useBaseUrl(addDarkToFileName(sailpointImage)),
             }}></ThemedImage>
         </div>
-        <div className={styles.imageContainer}>
-          <ThemedImage
-            className={styles.shipyardLogo}
-            sources={{
-              light: useBaseUrl(shipyardImage),
-              dark: useBaseUrl(addDarkToFileName(shipyardImage)),
-            }}></ThemedImage>
-        </div>
         <div className={styles.comingSoon}>Coming Soon | Q1 2023</div>
-
         <div className={styles.welcomeText}>
           The conference for developers on SailPoint platforms.
         </div>

src/components/conference/Waitlist/styles.module.css

@@ -24,7 +24,7 @@
   top: 425px;
 }
 
-@media only screen and (max-width: 1324px) {
+/* @media only screen and (max-width: 1324px) {
     .mainCard {
         grid-template-columns: auto;
     }
@@ -38,32 +38,27 @@
         left: auto;
         top: 99px;
     }
-}
+} */
 
-@media only screen and (min-width: 980px) {
+/* @media only screen and (min-width: 980px) {
     .mainCard {
         display: none;
     }
-}
+} */
 
 .signUpSection {
   min-width: 368px;
   width: 368px;
   margin: 30px auto;
 }
+
 .imageContainer {
   text-align: center;
 }
+
 .sailpointImageContainer {
   padding-left: 32px;
 }
-.shipyardLogo {
-  margin-top: 10px;
-  width: 368px;
-  height: 75px;
-  top: 50%;
-  left: 50%;
-}
 
 .sailpointImage {
   margin-top: 70px;

src/pages/conf.js

@@ -4,19 +4,17 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 
-import Hero from '../components/conference/Hero';
-import Waitlist from '../components/conference/Waitlist';
-import Theme from '../components/conference/Theme';
-import Speakers from '../components/conference/Speakers';
-import Sponsors from '../components/conference/Sponsors';
-import FAQ from '../components/conference/FAQ';
+import Hero from "../components/conference/Hero";
+import Theme from "../components/conference/Theme";
+import Speakers from "../components/conference/Speakers";
+import Sponsors from "../components/conference/Sponsors";
+import FAQ from "../components/conference/FAQ";
 
 export default function Conference() {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout>
       <main>
-        <Waitlist></Waitlist>
         <Hero></Hero>
         <Theme></Theme>
         {/* <Speakers></Speakers>