myfooter

app/globals.css

@@ -14,6 +14,13 @@ body {
   font-family: Inter;
 }
 
+/* globals.css or styles.css */
+.active {
+  color: #38a169; /* Change this to your desired active color */
+  font-weight: bold; /* Make the active link bold */
+  border-bottom: 2px solid #38a169; /* Optional: add an underline */
+}
+
 @layer utilities {
   .btn_white { 
     @apply  border-white bg-white px-8 py-3 text-green-50

app/page.tsx

@@ -6,7 +6,7 @@ import Hero from "@/components/Hero";
 
 export default function Home() {
   return (
-    <>
+    <>  
       <Hero />
       <Camp />
       <Guide />

components/Camp.tsx

@@ -1,5 +1,6 @@
 import { PEOPLE_URL } from "@/constants";
 import Image from "next/image";
+import React from 'react'; // Add explicit React import
 
 interface CampProps {
   backgroundImage: string;

components/Footer.tsx

@@ -3,6 +3,19 @@ import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
 
+//the main page just a puch of components
+// use componet do't repeat your self , same column == component
+// use {} inside map and ul  , const can call on any place 
+// SOCIAL.title  ,  FOOTER_LINKS.map((columns))
+// add props to comp  <FooterCam title={title}>
+// props can be Const  <FooterColumn title={FOOTER_CONTACT_INFO.title}>
+// can make w-full to text 
+// nested map  
+// in footer use flex-wrap no flex-col md:flex-row not always
+// <p className="regular-14 w-full text-center text-gray-20">
+      // Company  {(new Date().getFullYear())}
+// </p>  
+
 const Footer = () => {
   return (
     <footer className="flexCenter mb-24">
@@ -11,16 +24,16 @@ const Footer = () => {
           <Link href="/" className="mb-10">
             <Image src="hilink-logo.svg" alt="logo" width={74} height={29}/>
           </Link>
-
+                 
           <div className='flex flex-wrap gap-10 sm:justify-between md:flex-1'>
             {FOOTER_LINKS.map((columns) => (
               <FooterColumn title={columns.title}>
                 <ul className="regular-14 flex flex-col gap-4 text-gray-30">
                   {columns.links.map((link) => (
                     <Link href="/" key={link}>
                       {link}
-                    </Link>
-                  ))}
+                    </Link>  
+                  ))}   
                 </ul>
               </FooterColumn>
             ))}
@@ -59,11 +72,16 @@ const Footer = () => {
         </div>
 
         <div className="border bg-gray-20" />
-        <p className="regular-14 w-full text-center text-gray-30">2023 Hilink | All rights reserved</p>
+        <p className="regular-14 w-full text-center text-gray-30">
+          2023 Hilink | All rights reserved
+          </p>
+      <p className="regular-14 w-full text-center text-gray-20">
+          {(new Date().getFullYear())}
+       </p>  
       </div>
     </footer>
   )
-}
+}   
 
 type FooterColumnProps = {
   title: string;
@@ -74,9 +92,10 @@ const FooterColumn = ({ title, children }: FooterColumnProps) => {
   return (
     <div className="flex flex-col gap-5">
       <h4 className="bold-18 whitespace-nowrap">{title}</h4>
-      {children}
+      {children}  
     </div>
   )
 }
 
+
 export default Footer

components/GetApp.tsx

@@ -4,7 +4,7 @@ import Image from 'next/image'
 
 const GetApp = () => {
   return (
-    <section className="flexCenter w-full flex-col pb-[100px]">
+    <section  className="flexCenter w-full flex-col pb-[100px]">
       <div className="get-app">
         <div className="z-20 flex w-full flex-1 flex-col items-start justify-center gap-12">
           <h2 className="bold-40 lg:bold-64 xl:max-w-[320px]">Get for free now!</h2>

components/Guide.tsx

@@ -1,5 +1,10 @@
 import Image from 'next/image'
 import React from 'react'
+import { Formik, Form } from 'formik';
+
+// can mix cord  md:left-[]5% lg:top-20  not same time change distace
+// shadow need border
+//  some time give flex to all divs  weird
 
 const Guide = () => {
   return (

components/Hero.tsx

@@ -14,7 +14,7 @@ const Hero = () => {
           height={50}
           className="absolute left-[-5px] top-[-30px] w-10 lg:w-[50px]"
         />
-        <h1 className="bold-52 lg:bold-88">Putuk Truno Camp Area</h1>
+        <h1 className="bold-52 lg:bold-88">Sharm Elshaikh Area</h1>
         <p className="regular-16 mt-6 text-gray-30 xl:max-w-[520px]">
           We want to be on each of your journeys seeking the satisfaction of seeing the incorruptible beauty of nature. We can help you on an adventure around the world in just one app
         </p>
@@ -52,16 +52,29 @@ const Hero = () => {
           />
         </div>
       </div>
+  {/* flex-1  */}  
+           <div className="bg-red-900 flexBetween bold-20 relative felx flex-1 flex-col justify-center gap-12 max-w-[600px] p-1 ">
+           <div className="space-x-3 dark ">
+            <div className=" bg-blue-400 absolute p-3  hover:bg-green-900 z-40  -top-7 -right-7 max-md:mx-4">
+            <p className='inline-block'>helo world</p>
+              <Image className='inline-block' src="/close.svg" alt="close" width={24} height={24} />
+            </div>
+           </div>
+            <div className="">
 
+            <p className='inline-bloc '>helo world</p>
+              <Image className='inline-block' src="/close.svg" alt="close" width={24} height={24} />
+            </div>
+           </div>
       <div className="relative flex flex-1 items-start">
         <div className="relative z-20 flex w-[268px] flex-col gap-8 rounded-3xl bg-green-90 px-7 py-8">
-
+             
            <div className="flex flex-col">
             <div className="flexBetween">
               <p className="regular-16 text-gray-20">Location</p>
               <Image src="/close.svg" alt="close" width={24} height={24} />
             </div>
-            <p className="bold-20 text-white">Aguas Calientes</p>
+            <p className="bold-20 text-white">Egypt </p>
           </div>
 
           <div className="flexBetween">

components/Navbar.tsx

@@ -1,41 +1,75 @@
-import { NAV_LINKS } from "@/constants"
-import Image from "next/image"
-import Link from "next/link"
-import Button from "./Button"
+"use client";
+
+import { useState } from "react";
+import { usePathname } from "next/navigation";
+import { NAV_LINKS } from "@/constants";
+import Image from "next/image";
+import Link from "next/link";
+import Button from "./Button";
 
 const Navbar = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const pathname = usePathname(); // Get the current path
+
   return (
     <nav className="flexBetween max-container padding-container relative z-30 py-5">
       <Link href="/">
         <Image src="/hilink-logo.svg" alt="logo" width={74} height={29} />
       </Link>
 
-      <ul className="hidden h-full gap-12 lg:flex">
+      <ul className="flex flex-row gap-12 max-md:hidden">
+        {NAV_LINKS.map((link) => (
+          <li key={link.key}>
+            <Link
+              href={link.href}
+              className={`regular-16 text-gray-50 flexCenter cursor-pointer pb-1.5 transition-all ${
+                pathname === link.href ? "font-bold border-b-2 border-green-800" : "hover:bg-green-400 p-1.5 rounded-xl"
+              }`}   
+              onClick={() => setIsMenuOpen(false)}
+            >
+              {link.label}
+            </Link>
+          </li>
+        ))}
+      </ul>
+
+      <ul className={`h-full gap-12 lg:flex ${isMenuOpen ? "block" : "hidden"}`}>
         {NAV_LINKS.map((link) => (
-          <Link href={link.href} key={link.key} className="regular-16 text-gray-50 flexCenter cursor-pointer pb-1.5 transition-all hover:font-bold">
-            {link.label}
-          </Link>
+          <li key={link.key}>
+            <Link
+              href={link.href}
+              className={`regular-16 text-gray-50 flexCenter cursor-pointer pb-1.5 transition-all ${
+                pathname === link.href ? "font-bold border-b-2 border-white" : "hover:font-bold"
+              }`}
+              onClick={() => setIsMenuOpen(false)}
+            >
+              {link.label}
+            </Link>
+          </li>
         ))}
       </ul>
 
       <div className="lg:flexCenter hidden">
-        <Button 
+        <Button
           type="button"
           title="Login"
           icon="/user.svg"
           variant="btn_dark_green"
         />
       </div>
 
-      <Image 
-        src="menu.svg"
+      <Image
+        src={isMenuOpen ? "/menu.svg" : "/menu.svg"}
         alt="menu"
         width={32}
         height={32}
         className="inline-block cursor-pointer lg:hidden"
+        onClick={() => setIsMenuOpen((prev) => !prev)}
+        aria-label="Toggle menu"
+        aria-expanded={isMenuOpen}
       />
     </nav>
-  )
-}
+  );
+};
 
-export default Navbar
+export default Navbar;

constants/index.ts

@@ -1,12 +1,12 @@
 // NAVIGATION
 export const NAV_LINKS = [
   { href: '/', key: 'home', label: 'Home' },
-  { href: '/', key: 'how_hilink_work', label: 'How Hilink Work?' },
-  { href: '/', key: 'services', label: 'Services' },
-  { href: '/', key: 'pricing ', label: 'Pricing ' },
-  { href: '/', key: 'contact_us', label: 'Contact Us' },
+  { href: '/price', key: 'how_hilink_work', label: 'How Hilink Work?' },
+  { href: '/itie', key: 'services', label: 'Services' },
+  { href: '/dd', key: 'pricing ', label: 'Pricing ' },
+  { href: '/ggg', key: 'contact_us', label: 'Contact Us' },
 ];
-
+   
 // CAMP SECTION
 export const PEOPLE_URL = [
   '/person-1.png',

next.config.js

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: 'export'
+
 }
 
 module.exports = nextConfig