Teeaseer/site
2
1
Fork 0
Code Issues 7 Pull Requests Projects 1 Activity

Initial commit

Browse Source
This commit is contained in:
Developer
2025-04-21 16:03:20 +02:00
commit 2832896157
22874 changed files with 3092801 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

384
resources/js/Shared/LayoutParts/HeaderBar.vue Normal file
View File

@@ -0,0 +1,384 @@
<template>
<header class="w-full sticky top-0 z-[100]">
<div class="relative z-10 bg-orange shadow-xl">
<div
class="
grid grid-cols-12
items-center
pt-2.5
pb-2.5
px-4
sm:px-6
md:space-x-5
lg:space-x-10
"
>
<inertia-link :href="route('dashboard')" class="col-span-1 block flex-shrink-0">
<div class="block md:hidden font-bold text-indigo-300 text-2xl">
T
</div>
<img class="hidden md:block" src="/image/logotype.svg" alt="" />
</inertia-link >
<audio-player />
<div class="col-span-4 h-12 hidden md:flex">
<form class="main-search w-full flex md:ml-0" action="#" method="GET">
<label for="search_field" class="sr-only">Поиск контента</label>
<div
class="relative w-full text-gray-400 focus-within:text-gray-600"
>
<input
name="search_field"
id="search_field"
class="
h-full
w-full
rounded-md
border-transparent
py-2
pr-11
pl-4
text-base
bg-orange-dark
text-white
placeholder-gray
focus:border-transparent
focus:outline-none
focus:ring-2 focus:ring-orange-dark
"
placeholder="Глобальный поиск..."
type="search"
/>
<div
class="
pointer-events-none
absolute
inset-y-0
right-4
flex
items-center
text-gray
"
>
<svg
class="flex-shrink-0 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11 4a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0z"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.943 15.943a1 1 0 011.414 0l4.35 4.35a1 1 0 01-1.414 1.414l-4.35-4.35a1 1 0 010-1.414z"
/>
</svg>
</div>
</div>
</form>
</div>
<div
class="
col-span-4
md:col-span-2
lg:col-span-4
flex
items-center
justify-end
space-x-2
sm:ml-6
sm:space-x-6
"
>
<inertia-link :href="route('setting.money')" class="hidden lg:block default text-sm text-white">
Баланс: {{$page.props.balance}}
</inertia-link>
<button
type="button"
class="
flex
md:hidden
p-1
rounded-full
items-center
justify-center
text-white
focus:outline-none
"
>
<svg
class="w-5 h-5 md:h-6 md:w-6"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</button>
<div class="relative">
<div
class="
absolute
top-0
right-1
w-2
h-2
md:w-3
md:h-3
bg-pink
rounded-full
"
></div>
<inertia-link
:href="route('setting.notify')"
class="
flex
p-1
rounded-full
items-center
justify-center
text-white
focus:outline-none
"
>
<svg
class="w-5 h-5 md:h-6 md:w-6"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
</svg>
</inertia-link>
</div>
<dropdown class="flex md:hidden user-menu h-12 w-12 rounded-full items-center justify-center focus:outline-none" placement="bottom-start">
<svg class="h-6 w-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" > <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg>
<template v-slot:dropdown>
<div class="mobile-user-menu z-50 bg-orange-dark rounded-b-lg">
<div
class="absolute z-50 right-0 top-[-16px] mr-[20px] sm:mr-[20px]"
>
</div>
<ul class="p-6 text-white space-y-6">
<li>
<inertia-link :href="route('setting.money')">Баланс: {{$page.props.balance}}</inertia-link>
</li>
<li>
<inertia-link :href="route('profile.user', $page.props.auth.user.username)">Профиль</inertia-link>
</li>
<li>
<inertia-link :href="route('feeds.layoutsidebar')">Новости</inertia-link>
</li>
<li>
<a href="#"><span class="text-xs rounded-full mr-1">(5)</span> Сообщения</a>
</li>
<li>
<inertia-link :href="route('list.images')">Изображения</inertia-link>
</li>
<li>
<inertia-link :href="route('list.videos')">Видео</inertia-link>
</li>
<li>
<inertia-link :href="route('list.musics')">Музыка</inertia-link>
</li>
<li>
<inertia-link :href="route('users.index')">Пользователи</inertia-link>
</li>
<li>
<inertia-link :href="route('setting.index')">Настройки</inertia-link>
</li>
<li>
<inertia-link as="button" :href="route('logout')" method="delete">Выйти</inertia-link>
</li>
</ul>
</div>
</template>
</dropdown>
<div class="hidden md:block relative flex-shrink-0">
<inertia-link
:href="route('profile.user', $page.props.auth.user.username)"
class="
bg-white
rounded-full
flex
text-sm
focus:outline-none
focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
"
>
<user-avatar :user='$page.props.auth.user' size='small' class="w-9 h-9 md:h-12 md:w-12 text-lg" />
</inertia-link>
</div>
</div>
</div>
</div>
</header>
<div class=" hidden w-[48rem] z-50 main-search-list shadow-classic rounded-md bg-indigo-200 overflow-hidden " >
<div class="">
<div data-simplebar class="overflow-auto max-h-72">
<div class="text-gray-light divide-y divide-indigo-300">
<!-- s -->
<div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
<div class="flex-shrink-0 mr-5">
<img
class="object-cover w-10 h-10"
src="/image/user_card2.png"
alt=""
/>
</div>
<div class="flex-1">
Lorem, ipsum dolor sit amet consectetur
<mark class="text-orange bg-transparent">consectetur</mark> asdasd
....
</div>
<div class="ml-5 flex-shrink-0">
<svg class="drop-shadow-custom w-5 h-5">
<use xlink:href="#musicmark"></use>
</svg>
</div>
</div>
<!-- e -->
<!-- s -->
<div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
<div class="flex-shrink-0 mr-5">
<img
class="object-cover w-10 h-10"
src="/image/user_card2.png"
alt=""
/>
</div>
<div class="flex-1">
<mark class="text-orange bg-transparent">consectetur</mark> Lorem,
ipsum dolor sit amet consectetur asdasd ....
</div>
<div class="ml-5 flex-shrink-0">
<svg class="drop-shadow-custom w-5 h-5">
<use xlink:href="#filmmark"></use>
</svg>
</div>
</div>
<!-- e -->
<!-- s -->
<div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
<div class="flex-shrink-0 mr-5">
<img
class="object-cover w-10 h-10"
src="/image/user_card2.png"
alt=""
/>
</div>
<div class="flex-1">
<mark class="text-orange bg-transparent">consectetur</mark> Lorem,
ipsum dolor sit amet consectetur asdasd ....
</div>
<div class="ml-5 flex-shrink-0">
<svg class="drop-shadow-custom w-5 h-5">
<use xlink:href="#filmmark"></use>
</svg>
</div>
</div>
<!-- e -->
<!-- s -->
<div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
<div class="flex-shrink-0 mr-5">
<img
class="object-cover w-10 h-10"
src="/image/user_card2.png"
alt=""
/>
</div>
<div class="flex-1">
<mark class="text-orange bg-transparent">consectetur</mark> Lorem,
ipsum dolor sit amet consectetur asdasd ....
</div>
<div class="ml-5 flex-shrink-0">
<svg class="drop-shadow-custom w-5 h-5">
<use xlink:href="#filmmark"></use>
</svg>
</div>
</div>
<!-- e -->
<!-- s -->
<div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
<div class="flex-shrink-0 mr-5">
<img
class="object-cover w-10 h-10"
src="/image/user_card2.png"
alt=""
/>
</div>
<div class="flex-1">
<mark class="text-orange bg-transparent">consectetur</mark> Lorem,
ipsum dolor sit amet consectetur asdasd ....
</div>
<div class="ml-5 flex-shrink-0">
<svg class="drop-shadow-custom w-5 h-5">
<use xlink:href="#filmmark"></use>
</svg>
</div>
</div>
<!-- e -->
<!-- s -->
<div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
<div class="flex-shrink-0 mr-5">
<img
class="object-cover w-10 h-10"
src="/image/user_card2.png"
alt=""
/>
</div>
<div class="flex-1">
<mark class="text-orange bg-transparent">consectetur</mark> Lorem,
ipsum dolor sit amet consectetur asdasd ....
</div>
<div class="ml-5 flex-shrink-0">
<svg class="drop-shadow-custom w-5 h-5">
<use xlink:href="#filmmark"></use>
</svg>
</div>
</div>
<!-- e -->
</div>
</div>
</div>
</div>
</template>
<script>
import Dropdown from '@/Shared/Form/Dropdown'
import UserAvatar from '@/Shared/Misc/UserAvatar'
import AudioPlayer from '@/Shared/AudioPlayer'
export default {
components: {
AudioPlayer,
UserAvatar,
Dropdown,
}
}
</script>

42
resources/js/Shared/LayoutParts/SettingsMenu.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<div class="md:py-7 col-span-2 lg:col-span-1 border-r border-indigo-300">
<ul class="flex md:block text-base lg:text-xl xl:text-2xl text-gray-light overflow-x-auto">
<li
:class="[$page.component === 'Settings/SettingsProfile' ?
'md:border-l-4 md:border-b-0 border-b-2 border-pink text-white' :
'hover:text-white' ,'px-6 py-4']">
<inertia-link :href="route('setting.index')">Профиль</inertia-link>
</li>
<li
:class="[$page.url.startsWith('/settings/purchases') ?
'md:border-l-4 md:border-b-0 border-b-2 border-pink text-white' :
'hover:text-white' ,'px-6 py-4']">
<inertia-link :href="route('setting.purchases')">Покупки</inertia-link>
</li>
<li class="px-6 py-4 hover:text-white"><a href="#">Избранное</a></li>
<li
:class="[$page.component === 'Settings/SettingsMoney' ?
'md:border-l-4 md:border-b-0 border-b-2 border-pink text-white' :
'hover:text-white' ,'px-6 py-4']">
<inertia-link :href="route('setting.money')">Доход</inertia-link>
</li>
<li
:class="[$page.component === 'Settings/SettingsTarif' ?
'md:border-l-4 md:border-b-0 border-b-2 border-pink text-white' :
'hover:text-white' ,'px-6 py-4']">
<inertia-link :href="route('setting.tarif')">Тарифы</inertia-link>
</li>
<li
:class="[$page.component === 'Settings/SettingsNotify' ?
'md:border-l-4 md:border-b-0 border-b-2 border-pink text-white' :
'hover:text-white' ,'px-6 py-4']">
<inertia-link :href="route('setting.notify')">Оповещения</inertia-link>
</li>
<li class="px-6 py-4 hover:text-white"><a href="#">Сообщения</a></li>
</ul>
</div>
</template>

98
resources/js/Shared/LayoutParts/Sidebar.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<div class="hidden w-28 bg-indigo-200 overflow-y-auto md:block">
<div class="w-full py-6 flex flex-col items-center">
<div class="flex-1 w-full px-2 space-y-1">
<inertia-link :class="$page.url.startsWith('/profile') ? 'text-white group w-full p-3 rounded-md flex flex-col items-center text-xs font-medium' : 'text-gray-light hover:bg-orange hover:text-white group w-full p-3 rounded-md flex flex-col items-center text-xs' " :href="route('profile.user', $page.props.auth.user.username)">
<svg :class="$page.url.startsWith('/profile') ? 'text-white h-6 w-6' : 'text-indigo-300 group-hover:text-white h-6 w-6' " xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span class="mt-2">Профиль</span>
</inertia-link>
<inertia-link :href="route('setting.money')"
class="lg:hidden text-gray-light hover:bg-orange hover:text-white group w-full p-3 rounded-md flex flex-col items-center text-xs">
<svg class="text-green group-hover:text-white h-6 w-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
<span class="mt-2">{{$page.props.balance}}</span>
</inertia-link>
<a href="#"
class="relative text-gray-light hover:bg-orange hover:text-white group w-full p-3 rounded-md flex flex-col items-center text-xs">
<div class="absolute top-1 right-1 w-2 h-2 md:w-5 md:h-5 bg-pink rounded-full text-xs flex justify-center items-center text-white">5</div>
<svg class="text-indigo-300 group-hover:text-white h-6 w-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
<span class="mt-2">Сообщения</span>
</a>
<inertia-link :class="$page.component === 'Feed/Index' ? 'text-white group w-full p-3 rounded-md flex flex-col items-center text-xs font-medium' : 'text-gray-light hover:bg-orange hover:text-white group w-full p-3 rounded-md flex flex-col items-center text-xs' " :href="route('feeds.layoutsidebar')">
<svg :class="$page.component === 'Feed/Index' ? 'text-white h-6 w-6' : 'text-indigo-300 group-hover:text-white h-6 w-6' " xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
</svg>
<span class="mt-2">Новости</span>
</inertia-link>
<inertia-link :class="$page.component === 'Image/Feed' ? 'text-white group w-full p-3 rounded-md flex flex-col items-center text-xs font-medium' : 'text-gray-light hover:bg-orange hover:text-white group w-full p-3 rounded-md flex flex-col items-center text-xs' " :href="route('list.images')">
<svg :class="$page.component === 'Image/Feed' ? 'text-white h-6 w-6' : 'text-indigo-300 group-hover:text-white h-6 w-6' " xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<span class="mt-2">Изображения</span>
</inertia-link>
<inertia-link :class="$page.component === 'Video/Feed' ? 'text-white group w-full p-3 rounded-md flex flex-col items-center text-xs font-medium' : 'text-gray-light hover:bg-orange hover:text-white group w-full p-3 rounded-md flex flex-col items-center text-xs' " :href="route('list.videos')">
<svg :class="$page.component === 'Video/Feed' ? 'text-white h-6 w-6' : 'text-indigo-300 group-hover:text-white h-6 w-6' " xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
<span class="mt-2">Видео</span>
</inertia-link>
<inertia-link :class="$page.component === 'Music/Feed' ? 'text-white group w-full p-3 rounded-md flex flex-col items-center text-xs font-medium' : 'text-gray-light hover:bg-orange hover:text-white group w-full p-3 rounded-md flex flex-col items-center text-xs' " :href="route('list.musics')">
<svg :class="$page.component === 'Music/Feed' ? 'text-white h-6 w-6' : 'text-indigo-300 group-hover:text-white h-6 w-6' " xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
</svg>
<span class="mt-2">Музыка</span>
</inertia-link>
<inertia-link :class="$page.component === 'User/Index' ? 'text-white group w-full p-3 rounded-md flex flex-col items-center text-xs font-medium' : 'text-gray-light hover:bg-orange hover:text-white group w-full p-3 rounded-md flex flex-col items-center text-xs' " :href="route('users.index')">
<svg :class="$page.component === 'User/Index' ? 'text-white h-6 w-6' : 'text-indigo-300 group-hover:text-white h-6 w-6' " xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<span class="mt-2">Пользователи</span>
</inertia-link>
<inertia-link :class="$page.component.startsWith('Settings') ? 'text-white group w-full p-3 rounded-md flex flex-col items-center text-xs font-medium' : 'text-gray-light hover:bg-orange hover:text-white group w-full p-3 rounded-md flex flex-col items-center text-xs' " :href="route('setting.index')">
<svg :class="$page.component.startsWith('Settings') ? 'text-white h-6 w-6' : 'text-indigo-300 group-hover:text-white h-6 w-6' " xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span class="mt-2">Настройки</span>
</inertia-link>
<inertia-link
as="button"
:href="route('logout')" method="delete"
class="relative text-gray-light hover:bg-orange hover:text-white group w-full p-3 rounded-md flex flex-col items-center text-xs">
<svg class="text-indigo-300 group-hover:text-white h-6 w-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
<span class="mt-2">Выйти</span>
</inertia-link>
</div>
</div>
</div>
</template>

27
resources/js/Shared/LayoutParts/SidebarSecondary.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<section class="mt-16 hidden lg:w-[19rem] xl:w-[26rem] 2xl:w-[32rem] overflow-y-auto lg:block pr-5 2xl:pr-28">
<div class=" bg-indigo-200 shadow-classic rounded-md p-5">
<span class="block text-white font-medium">Лидеры</span>
<div class="mt-5 space-y-5">
<div class="flex items-center">
<div class="flex-shrink-0 mr-2 md:mr-4">
<div class="w-10 h-10 md:w-14 md:h-14 rounded-full bg-cover bg-center" style="background-image: url('/image/card1.jpg');"></div>
</div>
<div class="flex flex-col">
<a href="#" class="hover:underline text-sm md:text-base block text-white">Андрей Гаврилов</a>
<span class="text-xs text-gray-light">Фотограф, музыкант</span>
</div>
</div>
<div class="flex items-center">
<div class="flex-shrink-0 mr-2 md:mr-4">
<div class="w-10 h-10 md:w-14 md:h-14 rounded-full bg-cover bg-center" style="background-image: url('/image/card3.jpg');"></div>
</div>
<div class="flex flex-col">
<a href="#" class="hover:underline text-sm md:text-base block text-white">Владислав Сергеев</a>
<span class="text-xs text-gray-light">Дизайнер</span>
</div>
</div>
</div>
</div>
</section>
</template>