pre-headless

app/coworking/page.tsx

@@ -0,0 +1,8 @@
+import Itinerary from "components/Itinerary/Itinerary";
+
+export default function Coworking () {
+    return (
+        <Itinerary/>
+
+    )
+}

components/Itinerary/Itinerary.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+export default function Itinerary() {
+  return (
+    <div className='p-9'>
+      <h2 className="text-base font-semibold leading-6 text-gray-900">Who is in this week?</h2>
+      <div className="lg:grid lg:grid-cols-12 lg:gap-x-16">
+        <div className="mt-10 text-center lg:col-start-8 lg:col-end-13 lg:row-start-1 lg:mt-9 xl:col-start-9">
+          <div className="flex items-center text-gray-900">
+            <button type="button" className="-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500">
+              <span className="sr-only">Previous month</span>
+              <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fillRule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clipRule="evenodd" />
+              </svg>
+            </button>
+            <div className="flex-auto text-sm font-semibold">January</div>
+            <button type="button" className="-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500">
+              <span className="sr-only">Next month</span>
+              <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fillRule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clipRule="evenodd" />
+              </svg>
+            </button>
+          </div>
+          <div className="mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500">
+            <div>M</div>
+            <div>T</div>
+            <div>W</div>
+            <div>T</div>
+            <div>F</div>
+            <div>S</div>
+            <div>S</div>
+          </div>
+          <div className="isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200">
+            {/* Buttons */}
+          </div>
+          <button type="button" className="mt-8 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Add event</button>
+        </div>
+        <ol className="mt-4 divide-y divide-gray-100 text-sm leading-6 lg:col-span-7 xl:col-span-8">
+          <li className="relative flex space-x-6 py-6 xl:static">
+            <img src="/Britt.jpg" alt="" className="h-14 w-14 flex-none rounded-full" />
+            <div className="flex-auto">
+              <h3 className="pr-10 font-semibold text-gray-900 xl:pr-0">Britt Bones</h3>
+              <dl className="mt-2 flex flex-col text-gray-500 xl:flex-row">
+                <div className="flex items-start space-x-3">
+                  <dt className="mt-0.5">
+                    <span className="sr-only">Date</span>
+                    <svg className="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path fillRule="evenodd" d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z" clipRule="evenodd" />
+                    </svg>
+                  </dt>
+                  <dd><time dateTime="2022-01-10T17:00">January 10th, 2022 at 5:00 PM</time></dd>
+                </div>
+                <div className="mt-2 flex items-start space-x-3 xl:ml-3.5 xl:mt-0 xl:border-l xl:border-gray-400 xl:pl-3.5">
+                </div>
+              </dl>
+            </div>
+            <div className="absolute right-0 top-6 xl:relative xl:right-auto xl:top-auto xl:self-center">
+              <div>
+                <button type="button" className="-m-2 flex items-center rounded-full p-2 text-gray-500 hover:text-gray-600" id="menu-0-button" aria-expanded="false" aria-haspopup="true">
+                  <span className="sr-only">Open options</span>
+                  <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                    <path d="M3 10a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM8.5 10a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM15.5 8.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </li>
+        </ol>
+      </div>
+    </div>
+  );
+}

components/Navbar/Navbar.tsx

@@ -1,6 +1,7 @@
 "use client"
 import {
   BriefcaseIcon,
+  BuildingOfficeIcon,
   EnvelopeIcon, 
   HomeIcon,
   UsersIcon,
@@ -45,6 +46,13 @@ export default function Nav() {
       current: currentRoute === "/services",
       icon: <BriefcaseIcon className="h-6 w-6"/>
     },
+    {
+      label: "Coworking",
+      href: "/coworking",
+      current: currentRoute ==="/coworking",
+      icon: <BuildingOfficeIcon className="h-6 w-6"/>
+
+    },
     {
       label: "Contact",
       href: "/contact",