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.conferenceText}>Developer Days</div>
-            <div className={styles.shipyardText}>Shipyard</div>
-            <div className={styles.yearTextBorder}>
-              <div className={styles.yearText}>2023</div>
-            </div>
-          </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,57 +14,26 @@
   margin: 30px auto;
 }
 
-@media only screen and (max-width: 1324px) {
+.conferenceText {
-  .signUpSection {
+    margin-top: 70px;
-    display: none;
+    font-size: 55px;
-  }
+    color: var(--dev-text-color-cobalt);
-}
+    font-family: input-mono;
-
-.headerSection {
-  display: grid;
-  grid-gap: 0px;
-  grid-template-columns: 517px 330px;
-}
-
-.shipyardText {
-  margin-top: 70px;
-  font-size: 100px;
-  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);
+    color: var(--dev-text-color-cobalt);
-  font-size: 22px;
+    font-size: 20px;
-  font-family: input-mono;
+    font-family: input-mono;
-  letter-spacing: 5.5px;
+    letter-spacing: 5.5px;
-  margin-top: -17px;
+    margin-top: -17px;
 }
 
 .descriptionText {
-  margin-top: 20px;
+    margin-top: 27px;
-  color: var(--ifm-color-primary);
+    color: var(--ifm-color-primary);
-  font-size: 36px;
+    font-size: 36px;
-  font-family: input-mono;
+    font-family: input-mono;
 }
 
 .extensible {
@@ -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
+          <ThemeCard title={"Developer Days is a hands-on conference, you will build something in almost every session"} image={"/conf/workshops.png"}></ThemeCard>
-            title={
+          <ThemeCard title={"Developer Days will be all-virtual, open to everyone, and <b>at no cost<b>"} image={"/conf/virtual.png"}></ThemeCard>
-              '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>
         </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,46 +24,41 @@
   top: 425px;
 }
 
-@media only screen and (max-width: 1324px) {
+/* @media only screen and (max-width: 1324px) {
-  .mainCard {
+    .mainCard {
-    grid-template-columns: auto;
+        grid-template-columns: auto;
-  }
+    }
-  .background {
+    .background {
-    width: 100%;
+        width: 100%;
-    height: 265px;
+        height: 265px;
-  }
+    }
-  .learnDeployText {
+    .learnDeployText {
-    height: 187px;
+        height: 187px;
-    right: 50px;
+        right: 50px;
-    left: auto;
+        left: auto;
-    top: 99px;
+        top: 99px;
-  }
+    }
-}
+} */
 
-@media only screen and (min-width: 980px) {
+/* @media only screen and (min-width: 980px) {
-  .mainCard {
+    .mainCard {
-    display: none;
+        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 Hero from "../components/conference/Hero";
-import Waitlist from '../components/conference/Waitlist';
+import Theme from "../components/conference/Theme";
-import Theme from '../components/conference/Theme';
+import Speakers from "../components/conference/Speakers";
-import Speakers from '../components/conference/Speakers';
+import Sponsors from "../components/conference/Sponsors";
-import Sponsors from '../components/conference/Sponsors';
+import FAQ from "../components/conference/FAQ";
-import FAQ from '../components/conference/FAQ';
 
 export default function Conference() {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout>
       <main>
-        <Waitlist></Waitlist>
         <Hero></Hero>
         <Theme></Theme>
         {/* <Speakers></Speakers>