Initial draft for OSCAFest 2025

Author: Princesso

src/components/2024/header.js

@@ -8,12 +8,12 @@ function Header() {
   };
 
   return (
-    <section id="home">
+    <section id="home" className="flex-1 flex">
       <div className="center flex flex-col flex-1 w-screen object-cover bg-no-repeat">
-        <div style={bgWrapperStyles} className="flex flex-col z-30 left-0 w-full min-h-screen lg:pt-16 overflow-hidden">
+        <div style={bgWrapperStyles} className="flex flex-1 flex-col z-30 left-0 w-full lg:pt-16 overflow-hidden">
           <div className="z-20 flex flex-wrap  m-auto items-center">
             <div className="w-full h-full sm:mt-36 sm:m-auto sm:my-24 sm:px-10 sm:container lg:mt-16 m-auto lg:w-7/12 text-white flex flex-col items-center">
-              <img alt="OSCAFest Title 2025" src={homeBackground.title} className="mb-5 lg:px-7" />
+              <img alt="OSCAFest Title 2025" src={homeBackground.title} className="mb-5" />
               <div className="flex flex-col w-full ">
                 <text className="font-clashDisplay lg:text-5xl text-3xl text-center justify-center tracking-widest text-white  w-full">
                   {" "}
@@ -24,13 +24,13 @@ function Header() {
                 <div className="flex sm:flex-row flex-col mt-5 sm:mb-16 md:mb-10 lg:mb-0 lg:p-0">
                   <a
                     href="mailto:[email protected]"
-                    className="font-clashDisplay font-bold bg-white p-6 m-4 text-lg text-black tracking-wider mx-5 w-fit flex items-center"
+                    className="font-clashDisplay font-bold bg-white p-6 m-4 lg:text-lg md:text-base text-black tracking-wider mx-5 w-fit flex items-center"
                   >
                     Become a Sponsor &nbsp;
                   </a>
                   <a
                     href="/"
-                    className="font-clashDisplay font-bold bg-yellow-500 m-4 p-6 w-fit flex items-center text-black tracking-wider text-lg mx-5"
+                    className="font-clashDisplay font-bold bg-yellow-500 m-4 p-6 w-fit flex items-center text-black tracking-wider lg:text-lg md:text-base mx-5"
                   >
                     Become a Speaker &nbsp;
                   </a>

src/components/2024/nav.js

@@ -6,7 +6,13 @@ import { homeBackground } from "./cloudImages";
 function Nav() {
   const navbgWrapperStyles = {
     backgroundImage: `url(${homeBackground.darkNavBackground})`,
-    backgroundSize: "cover"
+    backgroundSize: "cover",
+    opacity: 0.7,
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
   };
   const [isExpanded, toggleExpansion] = useState(false);
   /* eslint-disable no-unused-vars */
@@ -34,11 +40,11 @@ function Nav() {
   return (
     <div className="relative w-screen">
       <div
-        className="relative top-0 z-40 bg-white opacity-70 w-screen flex flex-wrap items-center justify-between"
-        style={navbgWrapperStyles}
+        className="relative top-0 z-40 bg-white w-screen flex flex-wrap items-center justify-between"
         /* lg:w-[74%] */
       >
-        <div className="container flex flex-row mx-auto justify-between p-5 w-screen">
+        <div style={navbgWrapperStyles} className="h-full" />
+        <div className="container flex flex-row mx-auto justify-between p-5 w-screen h-full">
           <Link className="z-20 flex items-center no-underline text-white" to="/">
             <img
               alt="Open Source Community Africa's Logo"