updated front

ColoradoCodingOrg · Nov 27, 2023 · fc23575 · fc23575
1 parent deccd06
commit fc23575
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 16 deletions.
diff --git a/public/background.webp b/public/background.webp
diff --git a/src/components/Navigation.svelte b/src/components/Navigation.svelte
@@ -32,7 +32,7 @@
 </script>
 
 <nav
-  class="top-0 bg-contours text-white flex items-center justify-between h-20 px-12 py-4 shadow-md bg-gray-400 dark:bg-gray-900 md:px-24"
+  class="top-0 z-20 bg-contours text-white flex items-center justify-between h-20 px-12 py-4 shadow-md bg-gray-400 dark:bg-gray-900 md:px-24"
 >
   <a class="text-3xl font-bold leading-none" href="/">
     <img width="50px" src={CCALogo.src}/>

diff --git a/src/components/elements/Hero.astro b/src/components/elements/Hero.astro
@@ -21,8 +21,8 @@ const {
 
 <script is:inline define:vars={{ content }}></script>
 
-<div class:list={['flex max-w-[85rem] mx-auto justify-center px-4 pt-inherit', padding]}>
-  <div class=" items-center w-42 p-12 rounded-lg bg-opacity-60 bg-white dark:bg-inherit">
+<div class:list={['flex justify-center px-4 pt-inherit', padding]}>
+  <div class=" items-center w-42 p-12 rounded-lg bg-opacity-60 dark:bg-inherit">
     <!-- Title -->
     <div class="max-w-6xl mx-auto mt-5 text-center">
       <h1 class="block text-4xl font-bold md:text-5xl lg:text-6xl">

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -22,7 +22,7 @@ const { title = null } = Astro.props
     <title>Colorado Coding {title && "-"} {title}</title>
   </head>
   <body class="bg-gray-200 dark:bg-gray-800 dark:text-white font-rubik">
-    <header class="fixed top-0 w-full max-h-20">
+    <header class="z-20 fixed top-0 w-full max-h-20">
       <Navigation2 client:load />
     </header>
     <slot />

diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -8,15 +8,15 @@ import Card from '../components/AvatarCard.astro'
 ---
 
 <Layout title="ABOUT">
-  <div class="bg-contours max-h-screen overflow-y-scroll scrollbar-hide snap-start snap-y snap-mandatory">
-    <div class="h-screen snap-start py-20 overflow-y-hidden">
+  <div class="z-20 bg-contours max-h-screen overflow-y-scroll scrollbar-hide snap-start snap-y snap-mandatory">
+    <div class="h-screen snap-start p-0 lg:py-10 xl:py-10 overflow-y-hidden">
       <Hero
         padding='pt-24'
         title="WHO WE ARE"
         content="Colorado Coders is a passionate organization dedicated to empowering local Colorado businesses through cutting-edge technology. In the heart of the Rocky Mountains, we understand the unique challenges and opportunities that small businesses face. Our mission is simple: to provide comprehensive technological support, from website development to software engineering and beyond. We believe that every local business, regardless of its size, deserves access to the tools and expertise needed to thrive in today's digital world. Our team of experts specializes in crafting custom tech solutions that align perfectly with your business goals. Whether it's building a dynamic online presence, streamlining operations with bespoke software, or harnessing the power of data analytics, we're here to ensure your business not only competes but excels in the digital landscape."
       />
     </div>
-    <div class="h-screen snap-start py-40">
+    <div class="h-screen snap-start py-20 lg:py-40 xl:py-40">
       <div class="flex justify-center mx-auto">
         <div class="flex w-full justify-center items-center flex-wrap overflow-hidden gap-5">
           <Card name="David Aragon" title="CEO & Co-Founder" image="/david.jpg"/>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,15 +6,20 @@ import "../styles/global.css"
 ---
 
 <Layout title="">
-  <div class="bg-contours max-h-screen overflow-y-scroll scrollbar-hide snap-start snap-y snap-mandatory">
-    <div class="h-screen snap-start py-20 overflow-hidden">
-      <Hero
-        title="WE ARE COLORADO CODERS"
-        content="A passionate organization founded by locals dedicated to empowering local Colorado businesses through cutting-edge technology."
-        link="#"
-        linkText='LEARN MORE'
-        padding='pt-24'
-      />
+  <div class="z-10 bg-contours max-h-screen overflow-y-scroll scrollbar-hide snap-start snap-y snap-mandatory">
+    <div class="flex h-screen w-full">
+      <div class="h-screen w-full md:w-7/12 lg:w-7/12 xl:w-7/12 m-0 snap-start py-20 overflow-hidden">
+        <Hero
+          title="WE ARE COLORADO CODERS"
+          content="A passionate organization founded by locals dedicated to empowering local Colorado businesses through cutting-edge technology."
+          link="#"
+          linkText='LEARN MORE'
+          padding='pt-24'
+        />
+      </div>
+      <div class="w-0 md:w-5/12 lg:w-5/12 xl:w-5/12">
+        <img class="h-full w-full z-0 invisible md:visible lg:visible xl:visible" style="object-fit: cover;clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);" src="/public/background.webp"/>
+      </div>
     </div>
   </div>
 </Layout>