refactor: about and hero section

TEDx-SJEC · Oct 27, 2024 · 9f277d3 · 9f277d3
1 parent 1f08dfb
commit 9f277d3
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 9 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -21,7 +21,7 @@ export default function Home() {
                     className="flex flex-col items-center justify-center h-screen w-full p-4  bg-gradient-to-tr from-red-600 via-black to-black  "
                     id="hero"
                 ></div> */}
-                <div className="h-screen" id="about">
+                <div className="h-full mt-20 mb-52" id="about">
                     <About />
                 </div>
 

diff --git a/src/components/common/About.tsx b/src/components/common/About.tsx
@@ -2,7 +2,7 @@ import { motion } from "framer-motion";
 
 const AboutSection: React.FC = () => {
   return (
-    <section className="relative flex items-center justify-center min-h-screen bg-blackTheme text-white">
+    <section className="relative flex items-center justify-center  bg-blackTheme text-white">
       {/* Background decorative layers */}
       <div className="absolute inset-0">
         {/* <motion.div

diff --git a/src/components/navbar/nav-header.tsx b/src/components/navbar/nav-header.tsx
@@ -27,9 +27,6 @@ const NavHeader: React.FC<NavHeaderProps> = ({ handleClick }) => {
           </Link>
         </div>
         <div className="flex justify-between items-center ">
-          <li className="list-none overflow-hidden  leading-[1] font-bold text-white reg">
-            <RegisterButton />
-          </li>
           <button
             id="menuToggle"
             ref={menuToggle}

diff --git a/src/components/widget/hero.tsx b/src/components/widget/hero.tsx
@@ -92,7 +92,7 @@ export default function HeroHighlight() {
   const timeUnits: (keyof TimeLeft)[] = ['days', 'hours', 'minutes', 'seconds']
 
   return (
-    <section className="w-full min-h-screen bg-gradient-to-b from-blackTheme via-red-900 to-blackTheme text-white overflow-hidden relative">
+    <section className="w-full px-10 h-full bg-gradient-to-b from-blackTheme via-red-800 to-blackTheme text-white overflow-hidden relative">
       <svg
         ref={svgRef}
         className="absolute top-0 left-0 w-full h-full pointer-events-none"
@@ -111,14 +111,14 @@ export default function HeroHighlight() {
         />
       </svg>
 
-      <div className="container mx-auto px-4 py-8 flex flex-col-reverse lg:flex-row items-center justify-between relative z-10">
+      <div className="container mx-auto py-8 lg:py-0 flex flex-col-reverse lg:flex-row items-center justify-between relative z-10">
         <motion.div 
           className="lg:w-1/2 space-y-8 hero-2"
           initial={{ opacity: 0, x: -50 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.8, ease: "easeOut" }}
         >
-          <h1 className="text-[28px] py-1 md:text-6xl font-satoshi lg:mt-10 font-extrabold bg-clip-text text-white">
+          <h1 className="text-[28px] py-1 md:text-5xl font-satoshi lg:mt-16 font-extrabold bg-clip-text text-white">
             Ideas Worth Spreading
           </h1>
           <p className="text-xl md:text-2xl font-satoshi text-white max-w-2xl leading-relaxed">
@@ -160,7 +160,7 @@ export default function HeroHighlight() {
         </div>
       </div>
       <motion.div 
-        className="container mx-auto px-4 py-6 relative z-10"
+        className="container mx-auto px-4 py-2 relative z-10"
         initial={{ opacity: 0, y: 50 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.8, delay: 0.8, ease: "easeOut" }}