Change section backgrounds

Author: pomber

site/src/landing-new.js

@@ -14,18 +14,26 @@ function LandingPage({ sponsors }) {
   return (
     <div className={s.main}>
       <CodeHikeHead title="Marvellous code walkthroughs - Code Hike" />
-      <Header className={s.header} />
-      <Description />
-      <SectionTitle>Showcase</SectionTitle>
-      <Showcase />
+      <section>
+        <Header className={s.header} />
+        <Description />
+      </section>
+      <section className={s.dark}>
+        <SectionTitle>Showcase</SectionTitle>
+        <Showcase />
+      </section>
       {/* <ShowcaseX /> */}
-      <SectionTitle>Sponsors</SectionTitle>
-      <Sponsors sponsors={sponsors} />
-      <SectionTitle id="building-blocks">
-        Building Blocks
-      </SectionTitle>
-      <Tools />
-      <Footer />
+      <section className={s.blue}>
+        <SectionTitle>Sponsors</SectionTitle>
+        <Sponsors sponsors={sponsors} />
+      </section>
+      <section>
+        <SectionTitle id="building-blocks">
+          Building Blocks
+        </SectionTitle>
+        <Tools />
+        <Footer />
+      </section>
     </div>
   )
 }
@@ -115,11 +123,11 @@ function Tool({ title, img, href }) {
 function SectionTitle({ children, id }) {
   return (
     <div className={s.titleContainer}>
-      <div className={s.line} />
+      {/* <div className={s.line} /> */}
       <h2 className={s.title} id={id}>
         {children}
       </h2>
-      <div className={s.line} />
+      {/* <div className={s.line} /> */}
     </div>
   )
 }

site/src/landing.module.css

@@ -4,6 +4,28 @@
   margin: 0 auto;
 }
 
+.main > section {
+  padding: 48px 0;
+}
+
+.main > .dark {
+  background-image: radial-gradient(
+    circle at 50% 20%,
+    #161d34,
+    #0c101c
+  );
+  color: var(--white);
+}
+.main > .blue {
+  background-color: #eaedf6;
+
+  background-image: radial-gradient(
+    circle at 50% 20%,
+    var(--white),
+    #eaedf6
+  );
+}
+
 .header {
   margin-top: 96px;
   padding: 32px;
@@ -14,12 +36,14 @@
   display: flex;
   width: 100%;
   align-items: center;
-  margin-top: 64px;
 }
 
 .title {
-  font-size: 1.8em;
+  font-size: 2em;
   margin: 0;
+  height: 3em;
+  flex: 1;
+  text-align: center;
 }
 
 .titleContainer .line {

site/src/landing/description.module.css

@@ -61,7 +61,7 @@
   margin-bottom: 0;
 }
 .buttons {
-  margin: 0 auto;
+  margin: 32px auto;
   width: max-content;
 }
 

site/src/landing/showcase.module.css

@@ -22,31 +22,32 @@
   opacity: var(--opacity);
   transform: translateZ(40px);
   text-align: center;
-  color: var(--accent-500);
 }
 
 .browser {
+  box-shadow: 0px 0px 16px 0px #ccc5;
   opacity: var(--opacity);
   transform: translateZ(-40px);
   box-sizing: border-box;
-  border: calc(var(--h) * 0.5) solid var(--accent-100);
+  border: calc(var(--h) * 0.5) solid var(--accent-700);
   border-radius: calc(var(--w) * 1.3);
   width: calc(var(--w) * 100);
   overflow: hidden;
+  background-color: var(--white);
 }
 
 .browser .menuBar {
   height: calc(5 * var(--h));
   border-bottom: calc(var(--h) * 0.5) solid
-    var(--accent-100);
+    var(--accent-700);
   display: flex;
   align-items: center;
 }
 
 .browser .circle {
   height: calc(2.3 * var(--h));
   width: calc(2.3 * var(--h));
-  background: var(--accent-100);
+  background: var(--accent-700);
   border-radius: 50%;
   margin-left: calc(1 * var(--h));
 }
@@ -66,6 +67,8 @@
 }
 
 .phone {
+  /* box-shadow: 0px 0px 30px var(--accent-400); */
+  background-color: var(--white);
   opacity: var(--opacity);
   height: 100%;
   /* transform: translateZ(-40px); */