Add empty pages and scroll

Vizzuality · Oct 9, 2024 · 009b7eb · 009b7eb
1 parent 18d7c24
commit 009b7eb
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 10 deletions.
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -0,0 +1,9 @@
+export default function About() {
+  return (
+    <main className="bg-green-700">
+      <div className="pt-[90px] text-white container">
+        About
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/case-study-energy/page.tsx b/src/app/case-study-energy/page.tsx
@@ -0,0 +1,9 @@
+export default function Energy() {
+  return (
+    <main className="bg-green-700">
+      <div className="pt-[90px] text-white container">
+        Case study: Energy
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -26,7 +26,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={cn(
-        "min-h-screen bg-background font-sans antialiased",
+        "min-h-screen bg-background font-sans antialiased scroll-smooth",
         fontSans.variable
       )}>
         <ContextWrapper>

diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
@@ -22,13 +22,13 @@ const Footer = ({ backgroundClass = "bg-green-700" }) => {
               </Link>
             </li>
             <li className="text-white text-base font-bold underline">
-              <Link href="/"><HoverRepeatAnimation>Impact mode: Energy</HoverRepeatAnimation></Link>
+              <Link href="/case-study-energy"><HoverRepeatAnimation>Impact mode: Energy</HoverRepeatAnimation></Link>
             </li>
             <li className="text-white text-base font-bold underline">
-              <Link href="/"><HoverRepeatAnimation>About Us</HoverRepeatAnimation></Link>
+              <Link href="/about"><HoverRepeatAnimation>About Us</HoverRepeatAnimation></Link>
             </li>
             <li className="text-white text-base font-bold underline">
-              <Link href="/"><HoverRepeatAnimation>Contact</HoverRepeatAnimation></Link>
+              <Link href="mailto:#"><HoverRepeatAnimation>Contact</HoverRepeatAnimation></Link>
             </li>
           </ul>
         </div >

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -45,7 +45,7 @@ export default function Header() {
   );
 
   return (
-    <div className={cn("fixed inset-0 w-full h-[90px] py-6 flex z-20 transition-colors duration-500",
+    <header className={cn("fixed inset-0 w-full h-[90px] py-6 flex z-20 transition-colors duration-500",
       {
         "bg-blue-900": isScrolled,
         "bg-transparent": !isScrolled
@@ -55,6 +55,6 @@ export default function Header() {
         <Logo className="w-60 h-10 text-white" />
         <MenuButton />
       </div>
-    </ div >
+    </header>
   );
 };
diff --git a/src/components/intro/index.tsx b/src/components/intro/index.tsx
@@ -10,6 +10,12 @@ import HeroVideo from './hero-video';
 import Lines from '@/components/lines';
 
 export default function Intro() {
+  const handleAnchor = (anchor: string) => {
+    const element = document.getElementById(anchor);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }
   return (
     <section className="relative h-[110vh] bg-blue-900">
       <HeroVideo />
@@ -42,7 +48,7 @@ export default function Intro() {
             className='z-10'
           >
             <HoverRepeatAnimation isChild>
-              <Link href="#">Keep exploring</Link>
+              <Link href="/#section-1" onClick={() => handleAnchor('section-1')} scroll={false}>Keep exploring</Link>
             </HoverRepeatAnimation>
           </MotionButton>
         </div>

diff --git a/src/components/menu/index.tsx b/src/components/menu/index.tsx
@@ -45,10 +45,10 @@ export default function Menu() {
               <HoverRepeatAnimation>Home</HoverRepeatAnimation></Link>
           </li>
           <li>
-            <Link href="/"><HoverRepeatAnimation className="pb-1">Case Studies: Energy</HoverRepeatAnimation></Link>
+            <Link href="/case-study-energy"><HoverRepeatAnimation className="pb-1">Case Studies: Energy</HoverRepeatAnimation></Link>
           </li>
           <li>
-            <Link href="/"><HoverRepeatAnimation>About Us</HoverRepeatAnimation></Link>
+            <Link href="/about"><HoverRepeatAnimation>About Us</HoverRepeatAnimation></Link>
           </li>
           <li>
             <a href="mailto:#"><HoverRepeatAnimation>Contact</HoverRepeatAnimation></a>

diff --git a/src/components/section-1/index.tsx b/src/components/section-1/index.tsx
@@ -17,7 +17,7 @@ export default function Section1() {
     'grid-cols-[1fr_1fr_1fr]': hoveredIndex === null,
   };
   return (
-    <section className="relative bg-white py-20 ">
+    <section className="relative bg-white py-20 scroll-mt-8" id="section-1">
       <Lines verticalClassName="pl-[152px] pr-[152px]" sectionName="section-1" rows={[474, (!hoveredIndex || hoveredIndex === 0) ? 1134 : 1154]} colorClass="bg-blue-900/20" hoveringColumnsNumber={3} hoveredIndex={hoveredIndex} />
       <div className="container px-[150px]">
         <div className="max-w-[594px] text-green-700 space-y-5 pb-20">