Projects UI Components

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-8">
        <div class="max-w-sm mx-auto h-full px-4 pt-6 pb-24 bg-gray-500 rounded-xl">
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center">
              <h3 class="text-lg text-white font-semibold mr-2">To do</h3>
              <span class="inline-flex items-center justify-center w-6 h-7 rounded-full bg-gray-600 text-xs font-medium text-gray-400">3</span>
            </div>
            <div>
              <button class="inline-block mr-2 text-gray-400 hover:text-gray-300">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
                </svg>
              </button>
              <a class="inline-block py-1 text-gray-400 hover:text-gray-300" href="#">
                <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
          <div class="h-1 w-full mb-4 rounded-full bg-purple-500"></div>

<section class="py-8">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-lg-3 mb-6 mb-lg-0">
        <div class="h-100 px-4 pt-6 pb-24 bg-secondary rounded-4">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <div class="d-flex align-items-center">
              <h3 class="fs-8 fw-semibold text-light me-2 mb-0">To do</h3><span class="d-inline-flex align-items-center justify-content-center px-2 py-1 rounded-pill bg-dark-light fs-10 fw-medium text-light-dark">3</span>
            </div>
            <div>
              <button class="btn p-0 border-0 bg-transparent me-2 btn-outline-light-dark">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6667 5.33329H6.66675V1.33329C6.66675 1.15648 6.59651 0.986913 6.47149 0.861888C6.34646 0.736864 6.17689 0.666626 6.00008 0.666626C5.82327 0.666626 5.6537 0.736864 5.52868 0.861888C5.40365 0.986913 5.33342 1.15648 5.33342 1.33329V5.33329H1.33341C1.1566 5.33329 0.987035 5.40353 0.86201 5.52855C0.736986 5.65358 0.666748 5.82315 0.666748 5.99996C0.666748 6.17677 0.736986 6.34634 0.86201 6.47136C0.987035 6.59639 1.1566 6.66663 1.33341 6.66663H5.33342V10.6666C5.33342 10.8434 5.40365 11.013 5.52868 11.138C5.6537 11.2631 5.82327 11.3333 6.00008 11.3333C6.17689 11.3333 6.34646 11.2631 6.47149 11.138C6.59651 11.013 6.66675 10.8434 6.66675 10.6666V6.66663H10.6667C10.8436 6.66663 11.0131 6.59639 11.1382 6.47136C11.2632 6.34634 11.3334 6.17677 11.3334 5.99996C11.3334 5.82315 11.2632 5.65358 11.1382 5.52855C11.0131 5.40353 10.8436 5.33329 10.6667 5.33329Z" fill="currentColor"></path>
                </svg>
              </button><a class="btn p-0 border-0 bg-transparent text-light-dark" href="#">
                <svg width="12" height="4" viewBox="0 0 12 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 0.666626C5.73629 0.666626 5.47851 0.744825 5.25924 0.891333C5.03998 1.03784 4.86908 1.24608 4.76816 1.48971C4.66724 1.73335 4.64084 2.00144 4.69229 2.26008C4.74373 2.51872 4.87072 2.7563 5.05719 2.94277C5.24366 3.12924 5.48124 3.25623 5.73988 3.30767C5.99852 3.35912 6.26661 3.33272 6.51025 3.2318C6.75388 3.13088 6.96212 2.95998 7.10863 2.74072C7.25514 2.52145 7.33333 2.26367 7.33333 1.99996C7.33333 1.64634 7.19286 1.3072 6.94281 1.05715C6.69276 0.807102 6.35362 0.666626 6 0.666626ZM1.33333 0.666626C1.06963 0.666626 0.811839 0.744825 0.592574 0.891333C0.373308 1.03784 0.202411 1.24608 0.101495 1.48971C0.000577708 1.73335 -0.0258267 2.00144 0.0256202 2.26008C0.0770672 2.51872 0.204055 2.7563 0.390525 2.94277C0.576995 3.12924 0.814572 3.25623 1.07321 3.30767C1.33185 3.35912 1.59994 3.33272 1.84358 3.2318C2.08721 3.13088 2.29545 2.95998 2.44196 2.74072C2.58847 2.52145 2.66667 2.26367 2.66667 1.99996C2.66667 1.64634 2.52619 1.3072 2.27614 1.05715C2.02609 0.807102 1.68696 0.666626 1.33333 0.666626ZM10.6667 0.666626C10.403 0.666626 10.1452 0.744825 9.92591 0.891333C9.70664 1.03784 9.53574 1.24608 9.43483 1.48971C9.33391 1.73335 9.30751 2.00144 9.35895 2.26008C9.4104 2.51872 9.53739 2.7563 9.72386 2.94277C9.91033 3.12924 10.1479 3.25623 10.4065 3.30767C10.6652 3.35912 10.9333 3.33272 11.1769 3.2318C11.4205 3.13088 11.6288 2.95998 11.7753 2.74072C11.9218 2.52145 12 2.26367 12 1.99996C12 1.64634 11.8595 1.3072 11.6095 1.05715C11.3594 0.807102 11.0203 0.666626 10.6667 0.666626Z" fill="currentColor"></path>
                </svg></a>
            </div>
          </div>
          <div class="pt-1 w-100 mb-4 rounded-pill bg-info"></div><a class="btn btn-dark-light text-start fw-normal d-block p-4 mb-4" href="#">
            <h4 class="fs-7 fw-semibold text-light-light mb-2">Implement Login</h4>
            <div class="d-flex align-items-center mb-4">
              <svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">

import { Grid, Box, Typography, Container, Chip, Button, AvatarGroup, Avatar, Link } from '@mui/material';
import theme from '../../theme/theme';

const KanbanBoard = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        topPrimary: {
            borderRadius: theme.spacing(0.5),
            backgroundColor: theme.palette.common.white,
            px: theme.spacing(3),
            py: theme.spacing(1.8),
            borderTop: 2,
            borderColor: theme.palette.primary[500],
            boxShadow: theme.shadows[1]
        },
        topWarning: {
            borderRadius: theme.spacing(0.5),
            backgroundColor: theme.palette.common.white,
            px: theme.spacing(3),
            py: theme.spacing(1.8),
            borderTop: 2,
            borderColor: theme.palette.warning[500],

<section class="pb-16 bg-neutral-50">
  <div class="container mx-auto px-4">
    <div class="pt-8 pb-6">
      <p class="text-4xl font-semibold tracking-tight">Projects</p>
    </div>
    <div class="pt-12 px-10 pb-14 bg-white rounded-4xl">
      <div class="flex flex-wrap -m-4 mb-8">
        <div class="w-full md:w-1/2 p-4">
          <p class="mb-2 text-xl text-neutral-600 font-semibold tracking-tight">Project</p>
          <p class="text-5xl font-medium tracking-tight">Weddedone digital</p>
        </div>
        <div class="w-full md:w-1/2 p-4">
          <div class="flex flex-wrap -m-4">
            <div class="w-full md:w-auto p-4">
              <p class="mb-1 text-xl text-neutral-600 font-semibold tracking-tight">Client</p>
              <p class="text-neutral-600 font-medium tracking-tight">EYRA88s</p>
            </div>
            <div class="w-full md:w-2/3 ml-auto p-4">
              <p class="mb-1 text-xl text-neutral-600 font-semibold tracking-tight">Details</p>
              <p class="text-neutral-600 font-medium tracking-tight max-w-md">At the heart of our success is a diverse and talented team, united by a shared commitment to excellence.</p>
            </div>
          </div>
        </div>
      </div>

<section class="py-12 md:py-24 bg-coolGray-50" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container mx-auto px-4">
    <div class="max-w-lg mx-auto lg:max-w-none mb-20">
      <div class="flex flex-wrap -mx-4 items-end">
        <div class="w-full 2xl:w-7/12 px-4 mb-16 2xl:mb-0">
          <div class="inline-flex mx-auto items-start">
            <h1 class="font-heading text-3xl xs:text-5xl md:text-6xl lg:text-10xl tracking-tighter pt-4">Selected projects</h1>
            <span class="block -mb-4 mr-12 lg:mr-8 text-right text-xl sm:text-2xl text-coolGray-600">(21)</span>
          </div>
        </div>
        <div class="w-full 2xl:w-5/12 px-4">
          <ul class="flex flex-wrap -mb-2 items-center justify-end">
            <li class="mb-2 mr-2 sm:mr-8"><a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" :class="{'bg-black text-white': $refs.tab1.textContent == tab, 'hover:bg-black hover:text-white': $refs.tab1.textContent != tab}" class="inline-block py-2.5 px-5 text-lg leading-none bg-black text-white rounded-full transition duration-100" href="#">All</a></li>
            <li class="mb-2 mr-2 sm:mr-8"><a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :class="{'bg-black text-white': $refs.tab2.textContent == tab }" class="inline-block py-2.5 px-5 text-lg hover:text-white leading-none hover:bg-black rounded-full transition duration-100" href="#">Villa</a></li>
            <li class="mb-2 mr-2 sm:mr-8"><a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" :class="{'bg-black text-white': $refs.tab3.textContent == tab }" class="inline-block py-2.5 px-5 text-lg hover:text-white leading-none hover:bg-black rounded-full transition duration-100" href="#">Residance</a></li>
            <li class="mb-2"><a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" :class="{'bg-black text-white': $refs.tab4.textContent == tab }" class="inline-block py-2.5 px-5 text-lg hover:text-white leading-none hover:bg-black rounded-full transition duration-100" href="#">Apartaments</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="md:max-w-xl mx-auto lg:max-w-none">
      <div class="flex flex-wrap -mx-3 mb-20">
        <div :class="{'block': $refs.tab1.textContent == tab || $refs.tab2.textContent == tab, 'hidden': $refs.tab1.textContent != tab &amp;&amp; $refs.tab2.textContent != tab}" class="w-full lg:w-7/12 px-3 mb-20 lg:mb-0">
          <a class="group block" href="#">

<section class="section has-background-white-ter" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container">
    <div class="mb-20 columns is-multiline is-align-items-end">
      <div class="column is-12-tablet is-7-fullhd mb-12 mb-0-fullhd">
        <h1 class="title is-relative is-inline-block is-size-2 is-size-1-desktop" style="letter-spacing: -0.04em;">
          <span>Selected projects</span>
          <span class="is-absolute is-top-0 is-right-0 -mt-5 -mr-2 is-block is-size-4 has-text-grey has-text-weight-medium">(21)</span>
        </h1>
      </div>
      <div class="column is-12-tablet is-5-fullhd">
        <ul class="is-flex-tablet -mb-3 is-justify-content-end is-align-items-center">
          <li class="mb-3 mr-6"><a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="button is-rounded px-5 is-size-6" :class="{ 'is-dark': tab == $refs.tab1.textContent, 'is-light has-background-white-ter': tab != $refs.tab1.textContent }" href="#" style="max-height: 38px;">All</a></li>
          <li class="mb-3 mr-6"><a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="button is-rounded px-5 is-size-6" :class="{ 'is-dark': tab == $refs.tab2.textContent, 'is-light has-background-white-ter': tab != $refs.tab2.textContent }" href="#" style="max-height: 38px;">Villa</a></li>
          <li class="mb-3 mr-6"><a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" class="button is-rounded px-5 is-size-6" :class="{ 'is-dark': tab == $refs.tab3.textContent, 'is-light has-background-white-ter': tab != $refs.tab3.textContent }" href="#" style="max-height: 38px;">Residance</a></li>
          <li class="mb-3"><a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" class="button is-rounded px-5 is-size-6" :class="{ 'is-dark': tab == $refs.tab4.textContent, 'is-light has-background-white-ter': tab != $refs.tab4.textContent }" href="#" style="max-height: 38px;">Apartaments</a></li>
        </ul>
      </div>
    </div>
    <div class="mb-20 columns is-multiline">
      <div class="column is-7-tablet mb-12 mb-0-tablet" :class="{ 'is-block': $refs.tab1.textContent == tab || $refs.tab2.textContent == tab, 'is-hidden': $refs.tab1.textContent != tab && $refs.tab2.textContent != tab }">
        <a class="is-block" href="#">
          <img class="mb-8 image is-fullwidth" style="border-radius: 40px; max-height: 800px;" src="asitrastudio-assets/projects/photo-square3.png" alt="">
          <div class="has-mw-xs has-mw-md-desktop">
            <span class="mb-3 tag is-dark">Apartament</span>

<section class="position-relative py-10 bg-light bg-opacity-25 overflow-hidden">
  <div class="container mw-8xl">
    <h3 class="font-heading fs-2 mb-6">Projects</h3>
    <div class="px-5 px-sm-10 pt-12 pb-10 bg-white rounded-5">
      <div class="row mb-12 align-items-start">
        <div class="col-12 col-lg-6 col-xl-4 mb-8 mb-lg-0">
          <div>
            <span class="d-block mb-2 fs-6 fw-semibold">Project</span>
            <h5 class="fs-2 fw-medium text-dark">Weddedone digital</h5>
          </div>
        </div>
        <div class="col-12 col-lg-6 col-xl-6 ms-auto">
          <div class="d-sm-flex">
            <div class="me-sm-24 mb-8 mb-sm-0">
              <span class="d-block mb-2 fs-6 fw-semibold">Client</span>
              <span class="d-block mb-2 fs-6 fw-medium">EYRA88s</span>
            </div>
            <div class="mw-lg">
              <span class="d-block mb-2 fs-6 fw-semibold">Details</span>
              <span class="d-block mb-2 fs-6 fw-medium">At the heart of our success is a diverse and talented team, united by a shared commitment to excellence.</span>
            </div>
          </div>
        </div>
      </div>

<section class="py-12 py-md-24 bg-light-light">
  <div class="container">
    <div class="row align-items-end mb-20">
      <div class="col-12 col-xxl-7 mb-10 mb-xxl-0">
        <div class="d-inline-block"><span class="d-block mb-n4 me-sm-n10 text-end fs-4 fw-medium text-secondary-light" >(21)</span>
          <h1 >Selected projects</h1>
        </div>
      </div>
      <div class="col-12 col-xxl-5">
        <ul class="list-unstyled d-flex flex-wrap align-items-center justify-content-end">
          <li class="me-8"><a class="btn btn-dark py-2 px-5 fs-7" href="#" >All</a></li>
          <li class="me-8"><a class="btn py-2 px-5 fs-7" href="#" >Villa</a></li>
          <li class="me-8"><a class="btn py-2 px-5 fs-7" href="#" >Residance</a></li>
          <li><a class="btn py-2 px-5 fs-7" href="#" >Apartaments</a></li>
        </ul>
      </div>
    </div>
    <div class="row mb-20">
      <div class="col-12 col-md-7 mb-20 mb-md-0"><a class="d-block" href="#"><img class="img-fluid mb-8 rounded-5" style="max-height: 800px;" src="asitrastudio-assets/projects/photo-square3.png" alt=""/>
          <div class="mw-xs mw-lg-md"><span class="badge mb-3 border border-dark" >Apartament</span>
            <h3 class="fs-3 mb-6" >Althhorpe Street Leamigton Spa</h3><span class="d-block text-secondary-light" >Girona, Spain</span>
          </div></a></div>
      <div class="col-12 col-md-5"><a class="d-block" href="#"><img class="img-fluid w-100 mb-8 rounded-5" style="object-fit: cover; max-height: 520px;" src="asitrastudio-assets/projects/photo-view5.png" alt=""/>
          <div class="mw-xs mw-lg-md"><span class="badge mb-3 border border-dark" >Apartament</span>

<section class="py-6">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-4 mb-4 mb-lg-0">
        <div class="py-5 px-6 border rounded-2">
          <div class="d-flex align-items-center">
            <svg class="me-2" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="8" cy="8" r="7" stroke="#7A899B" stroke-width="2" stroke-dasharray="2 2"></circle>
            </svg>
            <p class="fw-bold text-dark mb-0"><span>Backlog </span><span class="badge ms-2 bg-primary-light text-primary">56</span></p><a class="ms-auto me-2 btn d-inline-flex align-items-center justify-content-center p-0 btn-outline-light shadow rounded-1" href="#" style="width: 32px; height: 32px;">
              <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 6H11" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M6 1V11" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></a>
            <button class="flex-shrink-0 btn d-inline-flex align-items-center justify-content-center p-0 btn-outline-light shadow rounded-1" style="width: 32px; height: 32px;">
              <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.5 9.5C12.3284 9.5 13 8.82843 13 8C13 7.17157 12.3284 6.5 11.5 6.5C10.6716 6.5 10 7.17157 10 8C10 8.82843 10.6716 9.5 11.5 9.5Z" fill="#7A899B"></path>
                <path d="M5.9375 8C5.9375 8.79391 5.29391 9.4375 4.5 9.4375C3.70609 9.4375 3.0625 8.79391 3.0625 8C3.0625 7.20609 3.70609 6.5625 4.5 6.5625C5.29391 6.5625 5.9375 7.20609 5.9375 8Z" fill="#7A899B" stroke="#7A899B" stroke-width="0.125"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-4 mb-4 mb-lg-0">

<section class="py-6">
    <div class="container mx-auto px-4">
        <div class="border border-gray-200 rounded-2xl p-6">
            <div class="flex mb-6 items-center">
                <span class="inline-flex mr-4 items-center justify-center rounded-2xl bg-purple-500 h-10 w-10">
                  <img class="object-cover" src="sirius-assets/images/brands/twitch.svg" alt="">
                </span>
                <p class="text-blue-900 text-sm font-semibold">My wealth and treasures?</p>
            </div>
            <div class="mb-6">
                <div class="flex mb-4 items-center">
                    <span class="mr-3">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z" stroke="#7A899B" stroke-width="2" stroke-miterlimit="10"></path>
                          <path d="M9.06034 9.06069L9.81621 6.17676L6.93902 6.93932L6.34802 9.65163L9.06034 9.06069Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </span>
                    <p class="text-gray-500 text-sm font-medium">Warsaw, Poland</p>
                </div>
                <div class="flex items-center">
                    <span class="mr-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M13.5 5H2.5C2.22386 5 2 5.22386 2 5.5V13.5C2 13.7761 2.22386 14 2.5 14H13.5C13.7761 14 14 13.7761 14 13.5V5.5C14 5.22386 13.7761 5 13.5 5Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M11 4V3C11 2.73478 10.8736 2.48043 10.6485 2.29289C10.4235 2.10536 10.1183 2 9.8 2H6.2C5.88174 2 5.57652 2.10536 5.35147 2.29289C5.12643 2.48043 5 2.73478 5 3V4" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

import * as React from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { MapPinCheckInside, Briefcase, Ellipsis } from "lucide-react"
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

export function Project1() {
  return (
    <div className="py-4 px-4">
      <div className="flex flex-wrap -m-4">
        <div className="p-4 w-full md:w-1/2 lg:w-1/4">
          <Card>
            <CardHeader>