highlight the current page on the navbar

.dockerignore

@@ -1,3 +0,0 @@
-.DS_Store
-node_modules
-dist

.gitignore

@@ -22,6 +22,3 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
-
-# Emacs
-*~

Dockerfile

@@ -1,11 +0,0 @@
-FROM node:lts AS build
-WORKDIR /app
-COPY package*.json ./
-RUN npm install
-COPY . .
-RUN npm run build
-
-FROM nginx:alpine AS runtime
-COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
-COPY --from=build /app/dist /usr/share/nginx/html
-EXPOSE 8080

README.md

@@ -40,32 +40,4 @@ npx astro dev
 - [Astro](https://astro.build/) - The core framework
 - [React](https://reactjs.org/) - For interactive components
 - [Tailwind CSS](https://tailwindcss.com/) - For styling (find docs [here](https://tailwindcss.com/docs/installation/using-vite))
-  - [TypeScript](https://www.typescriptlang.org/) - For type safety
-  
-# To release a new version
-
-## Build in the docker image
-
-``` bash
-version=<specify-version>
-docker build --platform linux/amd64 -t git.coopcloud.tech/rtm/rtmwebsite:$version .
-```
-
-## Push the image to gitea registery
-
-Check out [this documentation](https://docs.gitea.com/next/usage/packages/container) for how to login with gitea registery.
-
-``` bash
-# If not in the same terminal session, rerun `version=...` line from last step
-docker push git.coopcloud.tech/rtm/rtmwebsite:$version
-```
-
-## Update recipe
-
-We use a [private recipe](https://git.coopcloud.tech/RTM/rtm-astro-recipe) to deploy this website, you will need to update the version in the compose.yml file and redoploy.
-
-``` bash
-abra app undeploy resisttechmonopolies.online
-# wait 10 seconds
-abra app deploy resisttechmonopolies.online
-```
+- [TypeScript](https://www.typescriptlang.org/) - For type safety

nginx/nginx.conf

@@ -1,31 +0,0 @@
-worker_processes  1;
-
-events {
-  worker_connections  1024;
-}
-
-http {
-  server {
-    listen 8080;
-    server_name   _;
-
-    root   /usr/share/nginx/html;
-    index  index.html index.htm;
-    include /etc/nginx/mime.types;
-
-    gzip on;
-    gzip_min_length 1000;
-    gzip_proxied expired no-cache no-store private auth;
-    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
-
-    error_page 404 /404.html;
-    location = /404.html {
-            root /usr/share/nginx/html;
-            internal;
-    }
-
-    location / {
-            try_files $uri $uri/index.html =404;
-    }
-  }
-}

src/assets/astro.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>

src/assets/background.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>

src/components/Navbar.tsx

@@ -1,38 +1,56 @@
 import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
 
 interface NavbarProps {
-  activePage?: string;
+  currentPath?: string;
 }
 
-export default function Navbar({ activePage = "" }: NavbarProps) {
+export default function Navbar({ currentPath: initialPath = "" }: NavbarProps) {
+  const [currentPath, setCurrentPath] = useState(initialPath);
+
+  useEffect(() => {
+    // Get current path on client-side if not provided or for client-side navigation
+    if (!initialPath) {
+      setCurrentPath(window.location.pathname);
+    }
+  }, [initialPath]);
+
   return (
     <>
       <div className={cn("flex flex-row justify-between pb-8 pl-4 pr-4 pt-8")}>
         <div>
           <strong className={cn("sm:text-2xl md:text-4xl")}>
-            <a 
-                className={cn(
-                  activePage === "Home" && "border-b-2 border-black-500",
-                )}
-            href="/">Resist Tech Monopolies</a>
+            <a href="/">
+            Resist Tech Monopolies
+            </a>
           </strong>
         </div>
-        <strong className={cn("sm:text-1xl flex gap-10 md:text-4xl")}>
-       
+        <strong className={cn("sm:text-1xl flex gap-4 md:text-4xl")}>
+          <a
+            href="/GetInvolved/"
+            className={cn(
+              "text-blue-500",
+              currentPath.includes("GetInvolved") && "border-b-2 border-blue-500"
+            )}
+          >
+            Get Involved
+          </a>
+          {/* <Separator orientation="vertical" className="w-5" /> */}
           <a
             href="/PointsOfUnity/"
             className={cn(
               "text-green-500",
-              activePage === "PointsOfUnity" && "border-b-2 border-green-500",
+              currentPath.includes("PointsOfUnity") && "border-b-2 border-green-500"
             )}
           >
             Points of Unity
           </a>
+          {/* <Separator orientation="vertical" className="w-5" /> */}
           <a
             href="/WhatWereWorkingOn/"
             className={cn(
               "text-red-500",
-              activePage === "WhatWereWorkingOn" && "border-b-2 border-red-500",
+              currentPath.includes("WhatWereWorkingOn") && "border-b-2 border-red-500"
             )}
           >
             What We're Working On
@@ -41,18 +59,30 @@ export default function Navbar({ activePage = "" }: NavbarProps) {
       </div>
 
       <div className={cn("flex flex-row justify-between pb-8")}>
-        <div className="w-full grid grid-flow-col auto-cols-[76px] gap-8">
-          {Array.from({ length: 20 }).map((_, index) => (
-            <div key={index} className="flex justify-center">
-              <img 
-                src={index % 2 === 0 ? "/assets/computer.png" : "/assets/people.png"} 
-                alt={index % 2 === 0 ? "computer icon" : "people icon"} 
-                width="30" 
-                height="30" 
+        {[
+          1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
+        ].map((key) => (
+          <div key={key}>
+            <a
+              href="https://www.flaticon.com/free-icons/computer"
+              title="computer icons"
+            >
+              <img
+                src="/computer.png"
+                alt="computer icon"
+                width="30"
+                height="30"
               />
-            </div>
-          ))}
-        </div>
+            </a>
+
+            <a
+              href="https://www.flaticon.com/free-icons/peopler"
+              title="people icons"
+            >
+              <img src="/people.png" alt="people icon" width="30" height="30" />
+            </a>
+          </div>
+        ))}
       </div>
     </>
   );

src/pages/GetInvolved.astro

@@ -3,16 +3,28 @@ import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import Layout from "../layouts/Layout.astro";
 import "../styles/globals.css";
+
+// Get current path from Astro
+const currentPath = Astro.url.pathname;
 ---
 
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar client:load activePage="GetInvolved" />
+      <Navbar client:load currentPath={currentPath} />
       <div class="pl-4 pr-4">
         <h1 class="text-3xl font-semibold">Get Involved</h1>
         
-        
+        <div class="my-8">
+          <a 
+            href="https://shlink.resisttechmonopolies.online/HNrZG" 
+            class="px-6 py-3 bg-[#80aaff] text-white font-semibold rounded-md hover:bg-[#6090e0] transition-colors"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Sign Up Here
+          </a>
+        </div>
       </div>
     </div>
     <Footer />

src/pages/PointsOfUnity.astro

@@ -3,49 +3,41 @@ import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import Layout from "../layouts/Layout.astro";
 import "../styles/globals.css";
+
+// Get current path from Astro
+const currentPath = Astro.url.pathname;
 ---
 
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar client:load activePage="PointsOfUnity" />
+      <Navbar client:load currentPath={currentPath} />
       <div class="pl-4 pr-4">
         <h1 class="text-3xl font-semibold">Points of Unity</h1>
-
-        <p class="mb-4">
+        <p>
           We situate ourselves in our context - as Seattle residents and as
           users and creators of the technologies we aim to resist. We are seeing
-          a long-spanning rise of fascism within all levels of governance, from
-          Seattle city council to national governments here and abroad.
-        </p>
-
-        <p class="mb-4">
-          In parallel is the increasing power of tech companies over our lives
+          long-spanning rise of fascism within all levels of governance, from
+          Seattle city council to national governments here and abroad. In
+          parallel is the increasing power of tech companies over our lives
           through surveillance and the provisioning of everyday needs, from
           employment to how we get our internet utilities in the first place.
           There are rising income disparities across the nation, but also more
           specifically across everyone who can be considered a "tech worker":
           from a CEO to a software engineer to a contractor to a child slave
-          mining cobalt in the Congo.
-        </p>
-
-        <p class="mb-4">
-          Technology contributes to gentrification both through the tech-enabled
-          financialization of real estate as well as the gentrifying waves of
-          tech workers moving into cities. Increased technical sophisication of
-          militaries and carceral systems have created the first "AI genocide"
-          in Palestine; increased militarization of borders such as the
-          US-Mexico and the surveillance of migrants; increased police brutality
-          worldwide, all disparately impacting people of the global majority.
-        </p>
-
-        <p class="mb-4">
-          All of these crises are enabled and worsened by technology companies.
-          As tech workers of various kinds living in the imperial core, on
-          stolen Coast Salish land covered by the broken Treaty of Point Elliot
-          of 1855, we understand how our labor is contributing - directly or
-          indirectly - to these oppressions, and seek to use our skills towards
-          more liberatory ends.
+          mining cobalt in the Congo. Technology contributes to gentrification
+          both through the tech-enabled financialization of real estate as well
+          as the gentrifying waves of tech workers moving into cities. Increased
+          technical sophisication of militaries and carceral systems have
+          created the first "AI genocide" in Palestine; increased militarization
+          of borders such as the US-Mexico and the surveillance of migrants;
+          increased police brutality worldwide, all disparately impacting people
+          of the global majority. All of these crises are enabled and worsened
+          by technology companies. As tech workers of various kinds living in
+          the imperial core, on stolen Coast Salish land covered by the broken
+          Treaty of Point Elliot of 1855, we understand how our labor is
+          contributing - directly or indirectly - to these oppressions, and seek
+          to use our skills towards more liberatory ends.
         </p>
       </div>
     </div>

src/pages/WhatWereWorkingOn.astro

@@ -3,67 +3,18 @@ import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import Layout from "../layouts/Layout.astro";
 import "../styles/globals.css";
+
+// Get current path from Astro
+const currentPath = Astro.url.pathname;
 ---
 
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar client:load activePage="WhatWereWorkingOn" />
+      <Navbar client:load currentPath={currentPath} />
       <div class="pl-4 pr-4">
-        <h1 class="pb-4 pt-4 text-3xl font-semibold">What We're Working On</h1>
-        <div class="flex flex-row gap-8">
-          <!-- <div class="justify-items-center">
-            <img
-              src="/assets/calendar.png"
-              alt="stack of books"
-              width="250"
-              class="border pb-4"
-            />
-
-            <a
-              href="/WhatWereWorkingOnPages/Calendar/"
-              class="underline decoration-solid">Calendar</a
-            >
-          </div> -->
-
-          <div class="justify-items-center">
-            <img
-              src="/assets/pihole.jpeg"
-              alt="pihole parts"
-              width="250"
-              class="border pb-4"
-            />
-            <a
-              href="/WhatWereWorkingOnPages/Pihole/"
-              class="underline decoration-solid">Pihole Workshop</a
-            >
-          </div>
-
-          <div class="justify-items-center">
-            <img
-              src="/assets/this-website.png"
-              alt="screenshot of this website including screenshot of this website including screenshot of this website..."
-              width="250"
-              class="border pb-4"
-            />
-
-            <a href="/" class="underline decoration-solid">This website!</a>
-          </div>
-
-          <div class="justify-items-center">
-            <img
-              src="/assets/book-club.png"
-              alt="stack of books"
-              width="250"
-              class="border pb-4"
-            />
-
-            <a
-              href="/WhatWereWorkingOnPages/BookClub/"
-              class="underline decoration-solid">Book Club</a
-            >
-          </div>
-        </div>
+        <h1 class="text-3xl font-semibold">What We're Working On</h1>
+        <p>Pihole Workshop</p>
       </div>
     </div>
     <Footer />

src/pages/WhatWereWorkingOnPages/BookClub.astro

@@ -1,48 +0,0 @@
----
-import Navbar from "../../components/Navbar";
-import Footer from "../../components/Footer";
-import Layout from "../../layouts/Layout.astro";
-import "../../styles/globals.css";
----
-
-<Layout>
-  <main class="flex min-h-screen flex-col justify-between">
-    <div>
-      <Navbar client:load activePage="WhatWereWorkingOn" />
-      <div class="pl-4 pr-4">
-        <h1 class="pb-4 pt-4 text-3xl font-semibold">Book Club</h1>
-        <p>Join our book club where we read and discuss books about technology, power, and resistance.</p>
-        
-        <div class="flex flex-col gap-8">
-          <div class="border p-6 rounded-lg">
-            <h2 class="text-lg font-semibold mb-4 underline">Current Book</h2>
-            <div class="flex flex-col gap-4">
-              <div class="flex items-center gap-4">
-                <p class="italic font-semibold">Common Circuits</p>
-                <p class="text-sm text-gray-500">by Luis Felipe R. Murillo</p>
-              </div>
-              <p class="text-purple-600">Next meeting: 6/27</p>
-              <p class="text-sm">Reading for next meeting: Introduction + Chapter 1 + Chapter 2</p>
-            </div>
-          </div>
-
-          <div class="border p-6 rounded-lg">
-            <h2 class="text-2xl font-semibold mb-4">Past Books</h2>
-            <div class="flex flex-col gap-4">
-              <ul class="list-disc pl-6">
-                <li>Internet for the People</li>
-              </ul>
-            </div>
-          </div>
-
-          <div class="border p-6 rounded-lg">
-            <a href="/" class="text-blue-500 hover:text-blue-700">
-              <h2 class="text-2xl font-semibold mb-4">Join Us</h2>
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <Footer />
-  </main>
-</Layout> 

src/pages/WhatWereWorkingOnPages/Calendar.astro

@@ -1,26 +0,0 @@
----
-import Navbar from "../../components/Navbar";
-import Footer from "../../components/Footer";
-import Layout from "../../layouts/Layout.astro";
-import "../../styles/globals.css";
-import { LinkPreview } from "astro-embed";
----
-
-<Layout>
-  <main class="flex min-h-screen flex-col justify-between">
-    <div>
-      <Navbar client:load activePage="Calendar" />
-      <div class="pl-4 pr-4">
-        <h1 class="pb-4 pt-4 text-3xl font-semibold">Calendar</h1>
-        <div class="flex flex-col gap-4">
-          <p class="mb-4">See what we're doing next!</p>
-
-          <LinkPreview
-            id="https://nextcloud.resisttechmonopolies.online/remote.php/dav"
-          />
-        </div>
-      </div>
-    </div>
-    <Footer />
-  </main>
-</Layout>

src/pages/WhatWereWorkingOnPages/Pihole.astro

@@ -1,19 +0,0 @@
----
-import Navbar from "../../components/Navbar";
-import Footer from "../../components/Footer";
-import Layout from "../../layouts/Layout.astro";
-import "../../styles/globals.css";
----
-
-<Layout>
-  <main class="flex min-h-screen flex-col justify-between">
-    <div>
-      <Navbar />
-      <div class="pl-4 pr-4">
-        <h1 class="text-3xl font-semibold">Pihole</h1>
-       
-      </div>
-    </div>
-    <Footer />
-  </main>
-</Layout>

src/pages/index.astro

@@ -3,31 +3,23 @@ import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import Layout from "@/layouts/Layout.astro";
 import "@/styles/globals.css";
+
+// Get current path from Astro
+const currentPath = Astro.url.pathname;
 ---
 
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar client:load activePage="Home" />
+      <Navbar client:load currentPath={currentPath} />
 
-      <div class="pl-4 pr-4 text-xl leading-[2]">
+      <div class="pl-4 pr-4">
         <p>
           Do you believe technology can and should be used for good? Do you
           think a democratic internet could liberate us? Join us!
         </p>
 
         <p>We share this vision, and we want to work together to achieve it.</p>
-
-        <div class="my-8">
-          <a 
-            href="https://shlink.resisttechmonopolies.online/HNrZG" 
-            class="px-6 py-3 bg-[#80aaff] text-white font-semibold rounded-md hover:bg-[#6090e0] transition-colors"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Fill Out Our Interest Form!
-          </a>
-        </div>
       </div>
     </div>