Загрузка...

Адаптивная боковая панель с иконками: детали компании (адрес, команда, проекты, год основания), описание. Для профилей и лендингов. Tailwind CSS, lucide icons.
<div class="w-80 hidden lg:block pt-8">
<div class="space-y-4">
<div class="flex items-center gap-2 text-sm text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-map-pin">
<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0">
</path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
<span class="font-geist">San Francisco, CA</span>
</div>
<div class="flex items-center gap-2 text-sm text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-users">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
</svg>
<span class="font-geist">12 Team Members</span>
</div>
<div class="flex items-center gap-2 text-sm text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-award">
<path
d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526">
</path>
<circle cx="12" cy="8" r="6"></circle>
</svg>
<span class="font-geist">200+ Projects Delivered</span>
</div>
<div class="flex items-center gap-2 text-sm text-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-calendar">
<path d="M8 2v4"></path>
<path d="M16 2v4"></path>
<rect width="18" height="18" x="3" y="4" rx="2"></rect>
<path d="M3 10h18"></path>
</svg>
<span class="font-geist">Est. 2016</span>
</div>
<div class="border-gray-200 border-t pt-4">
<p class="leading-relaxed text-sm text-gray-500 font-geist">
A creative design studio specializing in brand identity, digital products, and strategic design solutions for
forward-thinking companies.
</p>
</div>
</div>
</div>