Framework
Theme
All
683
Forms
16
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
62
Tables
34
Cards
70
Contact Us
9
Testimonials
19
Features
25
Cards Section
38
Teams Section
11
Faq
9
Headers
47
Blogs
15
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Authentication
15
Call To Actions
21
Http Codes
6
Teams
16
Pricing
13
UI Components Library
Discover 683 components available in Loopple’s library! Create modern templates without creativity of a designer
Pagination
Component from
Argon Dashboard
Builder
<nav aria-label="..." class="draggable">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" tabindex="-1">
<i class="fa fa-angle-left"></i>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">
<i class="fa fa-angle-right"></i>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>Section Profile
Component from
Asteria Dashboard
Builder
<div class="row removable mt-4">
<div class="col-12 col-xl-4 drop-zone mb-4">
<div class="card h-100 draggable">
<div class="card-header pb-0 p-3">
<h6 class="mb-0">Platform Settings</h6>
</div>
<div class="card-body p-3">
<h6 class="text-uppercase text-body text-xs font-weight-bolder">Account</h6>
<ul class="list-group">
<li class="list-group-item border-0 px-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault" checked="">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault">Email me when someone follows me</label>
</div>
</li>
<li class="list-group-item border-0 px-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault1">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault1">Email me when someone answers on my post</label>
</div>
</li>
<li class="list-group-item border-0 px-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault2" checked="">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault2">Email me when someone mentions me</label>
</div>
</li>
</ul>
<h6 class="text-uppercase text-body text-xs font-weight-bolder mt-4">Application</h6>
<ul class="list-group">
<li class="list-group-item border-0 px-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault3">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault3">New launches and projects</label>
</div>
</li>
<li class="list-group-item border-0 px-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault4" checked="">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault4">Monthly product updates</label>
</div>
</li>
<li class="list-group-item border-0 px-0 pb-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault5">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault5">Subscribe to newsletter</label>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-xl-4 drop-zone mb-4">
<div class="card h-100 draggable">
<div class="card-header pb-0 p-3">
<div class="row">
<div class="col-md-8 d-flex align-items-center">
<h6 class="mb-0">Profile Information</h6>
</div>
<div class="col-md-4 text-right">
<a href="javascript:;">
<i class="fas fa-user-edit text-secondary text-sm" data-bs-toggle="tooltip" data-bs-placement="top" title="" aria-hidden="true" data-bs-original-title="Edit Profile" aria-label="Edit Profile"></i><span class="sr-only">Edit Profile</span>
</a>
</div>
</div>
</div>
<div class="card-body p-3">
<p class="text-sm">
Hi, I’m Alec Thompson, Decisions: If you can’t decide, the answer is no. If two equally difficult paths, choose the one more painful in the short term (pain avoidance is creating an illusion of equality).
</p>
<hr class="horizontal gray-light my-4">
<ul class="list-group">
<li class="list-group-item border-0 ps-0 pt-0 text-sm"><strong class="text-dark">Full Name:</strong> Alec M. Thompson</li>
<li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Mobile:</strong> (44) 123 1234 123</li>
<li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Email:</strong> [email protected]</li>
<li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Location:</strong> USA</li>
<li class="list-group-item border-0 ps-0 pb-0">
<strong class="text-dark text-sm">Social:</strong>
<a class="btn btn-facebook btn-simple mb-0 ps-1 pe-2 py-0" href="javascript:;">
<i class="fab fa-facebook fa-lg" aria-hidden="true"></i>
</a>
<a class="btn btn-twitter btn-simple mb-0 ps-1 pe-2 py-0" href="javascript:;">
<i class="fab fa-twitter fa-lg" aria-hidden="true"></i>
</a>
<a class="btn btn-instagram btn-simple mb-0 ps-1 pe-2 py-0" href="javascript:;">
<i class="fab fa-instagram fa-lg" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-xl-4 drop-zone mb-4">
<div class="card h-100 draggable">
<div class="card-header pb-0 p-3">
<h6 class="mb-0">Conversations</h6>
</div>
<div class="card-body p-3">
<ul class="list-group">
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
<div class="avatar rounded-circle me-3">
<img src="https://images.unsplash.com/photo-1597223557154-721c1cecc4b0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60" alt="kal" class="shadow">
</div>
<div class="d-flex align-items-start flex-column justify-content-center">
<h6 class="mb-0 text-sm">Sophie B.</h6>
<p class="mb-0 text-xs">Hi! I need more information..</p>
</div>
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
</li>
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
<div class="avatar rounded-circle me-3">
<img src="https://images.unsplash.com/photo-1485893086445-ed75865251e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" alt="kal" class="border-radius-lg shadow">
</div>
<div class="d-flex align-items-start flex-column justify-content-center">
<h6 class="mb-0 text-sm">Anne Marie</h6>
<p class="mb-0 text-xs">Awesome work, can you..</p>
</div>
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
</li>
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
<div class="avatar rounded-circle me-3">
<img src="https://images.unsplash.com/photo-1543123820-ac4a5f77da38?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA4fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="kal" class="border-radius-lg shadow">
</div>
<div class="d-flex align-items-start flex-column justify-content-center">
<h6 class="mb-0 text-sm">Ivanna</h6>
<p class="mb-0 text-xs">About files I can..</p>
</div>
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
</li>
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
<div class="avatar rounded-circle me-3">
<img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60" alt="kal" class="border-radius-lg shadow">
</div>
<div class="d-flex align-items-start flex-column justify-content-center">
<h6 class="mb-0 text-sm">Peterson</h6>
<p class="mb-0 text-xs">Have a great afternoon..</p>
</div>
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
</li>
<li class="list-group-item border-0 d-flex align-items-center px-0">
<div class="avatar rounded-circle me-3">
<img src="https://images.unsplash.com/photo-1517588632672-9758d6acba04?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTg1fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="kal" class="border-radius-lg shadow">
</div>
<div class="d-flex align-items-start flex-column justify-content-center">
<h6 class="mb-0 text-sm">Nick Daniel</h6>
<p class="mb-0 text-xs">Hi! I need more information..</p>
</div>
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
</li>
</ul>
</div>
</div>
</div>
</div>Teams Section Members
Component from
Riva Dashboard Tailwind
Builder
<div class="relative flex-[1_auto] flex flex-col break-words min-w-0 bg-clip-border rounded-[.95rem] border border-dashed border-stone-200 bg-white mb-5 draggable">
<!-- card body -->
<div class="flex-auto block py-8 px-9">
<div>
<div class="mb-9">
<h1 class="mb-2 text-[1.75rem] font-semibold text-dark font-display">Our Executive Team</h1>
<span class="text-[1.15rem] font-medium text-muted">
Meet our talented team, a dynamic group of experts driven by passion and innovation.
</span>
</div>
<div class="flex flex-wrap w-full">
<div class="flex flex-col mr-5 text-center mb-11 lg:mr-16">
<div class="inline-block mb-4 relative shrink-0 rounded-[.95rem]">
<img class="inline-block shrink-0 rounded-[.95rem] w-[10px] h-[150px]"
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/avatars/avatar11.jpg" alt="avarat image">
</div>
<div class="text-center">
<a href="javascript:void(0)"
class="text-dark font-semibold hover:text-primary text-[1.25rem] transition-colors duration-200 ease-in-out">Samantha Reynolds</a>
<span class="block font-medium text-muted">Marketing Manager</span>
</div>
</div>
<div class="flex flex-col mr-5 text-center mb-11 lg:mr-16">
<div class="inline-block mb-4 relative shrink-0 rounded-[.95rem]">
<img class="inline-block shrink-0 rounded-[.95rem] w-[150px] h-[150px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/avatars/avatar2.jpg"
alt="avarat image">
</div>
<div class="text-center">
<a href="javascript:void(0)"
class="text-dark font-semibold hover:text-primary text-[1.25rem] transition-colors duration-200 ease-in-out">Benjamin Martinez</a>
<span class="block font-medium text-muted">Sales Executive</span>
</div>
</div>
<div class="flex flex-col mr-5 text-center mb-11 lg:mr-16">
<div class="inline-block mb-4 relative shrink-0 rounded-[.95rem]">
<img class="inline-block shrink-0 rounded-[.95rem] w-[150px] h-[150px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/avatars/avatar5.jpg"
alt="avarat image">
</div>
<div class="text-center">
<a href="javascript:void(0)"
class="text-dark font-semibold hover:text-primary text-[1.25rem] transition-colors duration-200 ease-in-out">Emily Turner</a>
<span class="block font-medium text-muted">Customer Support</span>
</div>
</div>
<div class="flex flex-col mr-5 text-center mb-11 lg:mr-16">
<div class="inline-block mb-4 relative shrink-0 rounded-[.95rem]">
<img class="inline-block shrink-0 rounded-[.95rem] w-[150px] h-[150px]"
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/avatars/avatar24.jpg" alt="avarat image">
</div>
<div class="text-center">
<a href="javascript:void(0)"
class="text-dark font-semibold hover:text-primary text-[1.25rem] transition-colors duration-200 ease-in-out">Jason Anderson</a>
<span class="block font-medium text-muted">Development Engineer</span>
</div>
</div>
<div class="flex flex-col mr-5 text-center mb-11 lg:mr-16">
<div class="inline-block mb-4 relative shrink-0 rounded-[.95rem]">
<img class="inline-block shrink-0 rounded-[.95rem] w-[150px] h-[150px]"
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/avatars/avatar23.jpg" alt="avarat image">
</div>
<div class="text-center">
<a href="javascript:void(0)"
class="text-dark font-semibold hover:text-primary text-[1.25rem] transition-colors duration-200 ease-in-out">Olivia Carter</a>
<span class="block font-medium text-muted">Creative Director</span>
</div>
</div>
</div>
</div>
</div>
</div>Sidebar Simple
Component from
Horizon UI Dashboard
Builder
/* eslint-disable */
import React from 'react';
import { Link } from "react-router-dom";
import { HiX } from "react-icons/hi";
// Icon Imports
import {
MdHome,
MdOutlineShoppingCart,
MdBarChart,
MdPerson,
MdLock,
} from "react-icons/md";
const Sidebar = ({ open, onClose }) => {
const routes = [
{
name: "Main Dashboard",
path: "default",
icon: <MdHome className="h-6 w-6" />,
},
{
name: "NFT Marketplace",
path: "nft-marketplace",
icon: <MdOutlineShoppingCart className="h-6 w-6" />,
secondary: true,
},
{
name: "Data Tables",
icon: <MdBarChart className="h-6 w-6" />,
path: "data-tables",
},
{
name: "Profile",
path: "profile",
icon: <MdPerson className="h-6 w-6" />,
},
{
name: "Sign In",
path: "sign-in",
icon: <MdLock className="h-6 w-6" />,
},
{
name: "RTL Admin",
path: "rtl",
icon: <MdHome className="h-6 w-6" />,
},
];
return (
<div
className={`sm:none duration-175 linear fixed !z-50 flex min-h-full flex-col bg-white pb-10 shadow-2xl shadow-white/5 transition-all dark:!bg-navy-800 dark:text-white md:!z-50 lg:!z-50 xl:!z-0 ${
open ? "translate-x-0" : "-translate-x-96"
}`}
>
<span
className="absolute top-4 right-4 block cursor-pointer xl:hidden"
onClick={onClose}
>
<HiX />
</span>
<div className={`mx-[56px] mt-[50px] flex items-center`}>
<div className="mt-1 ml-1 h-2.5 font-poppins text-[26px] font-bold uppercase text-navy-700 dark:text-white">
Horizon <span class="font-medium">FREE</span>
</div>
</div>
<div class="mt-[58px] mb-7 h-px bg-gray-300 dark:bg-white/30" />
{/* Nav item */}
<ul className="mb-auto pt-1">
{ routes.map((route, index) => {
return (
<Link key={index} to="">
<div className="relative mb-3 flex hover:cursor-pointer">
<li
className="my-[3px] flex cursor-pointer items-center px-8"
key={index}
>
<span
className={`${
index === 0
? "font-bold text-brand-500 dark:text-white"
: "font-medium text-gray-600"
}`}
>
{route.icon ? route.icon : <DashIcon />}{" "}
</span>
<p
className={`leading-1 ml-4 flex ${
index === 0
? "font-bold text-navy-700 dark:text-white"
: "font-medium text-gray-600"
}`}
>
{route.name}
</p>
</li>
</div>
</Link>
);
})
}
</ul>
{/* Free Horizon Card */}
<div className="flex justify-center">
<div className="relative mt-14 flex w-[256px] justify-center rounded-[20px] bg-gradient-to-br from-[#868CFF] via-[#432CF3] to-brand-500 pb-4">
<div className="absolute -top-12 flex h-24 w-24 items-center justify-center rounded-full border-[4px] border-white bg-gradient-to-b from-[#868CFF] to-brand-500 dark:!border-navy-800">
<svg
width="41"
height="41"
viewBox="0 0 41 41"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.0923 27.3033H30.8176V36.3143H10.0923V27.3033Z"
fill="white"
/>
<path
d="M31.5385 29.1956C31.5385 26.2322 30.3707 23.3901 28.2922 21.2947C26.2136 19.1992 23.3945 18.022 20.4549 18.022C17.5154 18.022 14.6963 19.1992 12.6177 21.2947C10.5392 23.3901 9.37143 26.2322 9.37143 29.1956L20.4549 29.1956H31.5385Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20.5 31.989C26.8452 31.989 31.989 26.8452 31.989 20.5C31.989 14.1548 26.8452 9.01099 20.5 9.01099C14.1548 9.01099 9.01099 14.1548 9.01099 20.5C9.01099 26.8452 14.1548 31.989 20.5 31.989ZM20.5 41C31.8218 41 41 31.8218 41 20.5C41 9.17816 31.8218 0 20.5 0C9.17816 0 0 9.17816 0 20.5C0 31.8218 9.17816 41 20.5 41Z"
fill="white"
/>
</svg>
</div>
<div className="mt-16 flex h-fit flex-col items-center">
<p className="text-lg font-bold text-white">Upgrade to PRO</p>
<p className="mt-1 px-4 text-center text-sm text-white">
Improve your development process and start doing more with Horizon UI
PRO!
</p>
<a
target="blank"
className="text-medium mt-7 block rounded-full bg-gradient-to-b from-white/50 to-white/10 py-[12px] px-11 text-center text-base text-white hover:bg-gradient-to-b hover:from-white/40 hover:to-white/5 "
href="https://horizon-ui.com/pro?ref=live-free-tailwind-react"
>
Upgrade to PRO
</a>
</div>
</div>
</div>
{/* Nav item end */}
</div>
);
};
export default Sidebar;Contact Us Section With Cards
Component from
Motion Landing Library React
Builder
<div data-type='div' className="w-full draggable">
<div data-type='div' className="container flex flex-col items-center gap-16 mx-auto my-32">
<div data-type='div' className="grid w-full grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
<div data-type='div' className="flex flex-col items-center gap-3 px-8 py-10 bg-white rounded-3xl shadow-main">
<span data-type='span'>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={38}
height={38}
viewBox="0 0 38 38"
fill="none"
>
<path data-type='path'
d="M31.9904 13.965L22.4166 4.40166C21.6057 3.60976 20.5294 3.16817 19.4104 3.16817C18.2914 3.16817 17.2151 3.60976 16.4041 4.40166L6.8304 13.9017C6.40502 14.283 6.0629 14.7524 5.82645 15.279C5.58999 15.8056 5.46454 16.3776 5.45831 16.9575V30.5425C5.47456 31.6946 5.93476 32.793 6.73808 33.5973C7.5414 34.4016 8.62236 34.846 9.74415 34.8333H28.9225C30.0443 34.846 31.1252 34.4016 31.9285 33.5973C32.7319 32.793 33.1921 31.6946 33.2083 30.5425V16.9575C33.2071 16.4009 33.0989 15.85 32.8899 15.3365C32.6809 14.823 32.3752 14.3569 31.9904 13.965ZM18.47 6.68166C18.7058 6.46025 19.0138 6.33747 19.3333 6.33747C19.6528 6.33747 19.9608 6.46025 20.1966 6.68166L28.5833 15.0417L20.1504 23.4017C19.9146 23.6231 19.6066 23.7459 19.2871 23.7459C18.9675 23.7459 18.6596 23.6231 18.4237 23.4017L10.0833 15.0417L18.47 6.68166ZM30.125 30.5425C30.1052 30.8533 29.9688 31.144 29.7445 31.3537C29.5203 31.5633 29.2256 31.6755 28.9225 31.6667H9.74415C9.44102 31.6755 9.14636 31.5633 8.9221 31.3537C8.69785 31.144 8.56147 30.8533 8.54165 30.5425V17.9708L14.7854 24.1458L12.2262 26.6792C11.9391 26.9758 11.7779 27.3771 11.7779 27.7954C11.7779 28.2137 11.9391 28.615 12.2262 28.9117C12.3695 29.066 12.5417 29.1891 12.7324 29.2734C12.9232 29.3578 13.1286 29.4017 13.3362 29.4025C13.7332 29.4009 14.1142 29.2421 14.4 28.9592L17.1287 26.2675C17.8065 26.6928 18.5853 26.9179 19.3796 26.9179C20.1738 26.9179 20.9527 26.6928 21.6304 26.2675L24.3591 28.9592C24.6449 29.2421 25.026 29.4009 25.4229 29.4025C25.6306 29.4017 25.8359 29.3578 26.0267 29.2734C26.2174 29.1891 26.3896 29.066 26.5329 28.9117C26.82 28.615 26.9812 28.2137 26.9812 27.7954C26.9812 27.3771 26.82 26.9758 26.5329 26.6792L23.9583 24.1458L30.125 17.9708V30.5425Z"
fill="#581ff8"
/>
</svg>
</span>
<p data-type='p' className="text-2xl font-extrabold text-dark-grey-900">Email</p>
<p data-type='p' className="text-base leading-7 text-dark-grey-600">Contact us at</p>
<a data-type='a'
className="text-lg font-bold text-purple-blue-500"
href="mailto: [email protected]"
>
[email protected]
</a>
</div>
<div data-type='div' className="flex flex-col items-center gap-3 px-8 py-10 bg-white rounded-3xl shadow-main">
<span data-type='span'>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={38}
height={38}
viewBox="0 0 38 38"
fill="none"
>
<path data-type='path'
d="M30.4237 20.5833C30.0846 20.5833 29.73 20.4725 29.3908 20.3933C28.7045 20.2357 28.0297 20.0294 27.3712 19.7758C26.656 19.5086 25.8699 19.5225 25.164 19.8148C24.4582 20.1071 23.8826 20.6572 23.5479 21.3592L23.2087 22.0875C21.7115 21.2154 20.3283 20.1513 19.0925 18.9208C17.8944 17.6516 16.8583 16.231 16.0092 14.6933L16.7183 14.3608C17.4018 14.0171 17.9374 13.4259 18.222 12.701C18.5067 11.9761 18.5202 11.1687 18.26 10.4342C18.0151 9.7518 17.8143 9.05363 17.6587 8.34417C17.5817 7.99584 17.52 7.63167 17.4737 7.28334C17.2865 6.16807 16.7177 5.1581 15.8698 4.4353C15.0219 3.7125 13.9506 3.32439 12.8487 3.34084H8.20832C7.55657 3.33996 6.91201 3.48056 6.31687 3.75343C5.72174 4.02629 5.18948 4.42526 4.75498 4.92417C4.31148 5.43662 3.98125 6.04161 3.78698 6.69756C3.59271 7.35351 3.53901 8.04489 3.62957 8.72417C4.4676 15.3142 7.39927 21.4362 11.97 26.1408C16.5508 30.8351 22.5117 33.846 28.9283 34.7067C29.1284 34.7224 29.3294 34.7224 29.5296 34.7067C30.6664 34.7084 31.7641 34.28 32.6129 33.5033C33.0987 33.0571 33.4871 32.5105 33.7528 31.8992C34.0185 31.288 34.1554 30.626 34.1546 29.9567V25.2067C34.1463 24.1126 33.7705 23.0551 33.0907 22.2127C32.411 21.3704 31.4689 20.7948 30.4237 20.5833ZM31.1791 30.0833C31.1786 30.3043 31.1331 30.5227 31.0455 30.7245C30.9579 30.9263 30.8301 31.107 30.6704 31.255C30.5014 31.4131 30.3004 31.5306 30.0817 31.5991C29.8631 31.6676 29.6323 31.6852 29.4062 31.6508C23.6532 30.8792 18.3066 28.1865 14.19 23.9875C10.0698 19.756 7.4252 14.2458 6.66665 8.31251C6.63316 8.08028 6.65037 7.84332 6.71702 7.61877C6.78368 7.39422 6.89813 7.1877 7.05207 7.01417C7.19794 6.84816 7.3764 6.71577 7.57569 6.62571C7.77499 6.53565 7.99059 6.48997 8.20832 6.49167H12.8333C13.1897 6.48273 13.5381 6.6009 13.8192 6.82607C14.1002 7.05124 14.2967 7.3695 14.375 7.72667C14.375 8.15417 14.5137 8.59751 14.6062 9.025C14.7844 9.85446 15.0214 10.6694 15.3154 11.4633L13.1571 12.5083C12.7861 12.6832 12.4978 13.0021 12.3554 13.395C12.2012 13.7805 12.2012 14.2129 12.3554 14.5983C14.5742 19.4794 18.3945 23.4029 23.1471 25.6817C23.5224 25.84 23.9434 25.84 24.3187 25.6817C24.7013 25.5354 25.0118 25.2393 25.1821 24.8583L26.1533 22.6417C26.9487 22.9395 27.7624 23.1828 28.5891 23.37C28.99 23.465 29.4217 23.5442 29.8379 23.6075C30.1857 23.6879 30.4956 23.8897 30.7148 24.1784C30.934 24.467 31.0491 24.8248 31.0404 25.1908L31.1791 30.0833ZM22.0833 3.16667C21.7287 3.16667 21.3587 3.16667 21.0042 3.16667C20.5953 3.20237 20.217 3.40341 19.9524 3.72558C19.6879 4.04776 19.5588 4.46466 19.5935 4.88459C19.6283 5.30451 19.824 5.69306 20.1377 5.96476C20.4514 6.23645 20.8574 6.36903 21.2662 6.33334H22.0833C24.5366 6.33334 26.8893 7.33423 28.6241 9.11582C30.3588 10.8974 31.3333 13.3138 31.3333 15.8333C31.3333 16.1183 31.3333 16.3875 31.3333 16.6725C31.2991 17.0902 31.4276 17.5048 31.6906 17.8253C31.9536 18.1459 32.3296 18.3463 32.7362 18.3825H32.8596C33.2455 18.3841 33.618 18.237 33.9034 17.9702C34.1889 17.7035 34.3665 17.3364 34.4012 16.9417C34.4012 16.5775 34.4012 16.1975 34.4012 15.8333C34.4012 12.4767 33.104 9.25725 30.7943 6.88225C28.4847 4.50724 25.3516 3.17087 22.0833 3.16667ZM25.1667 15.8333C25.1667 16.2533 25.3291 16.656 25.6182 16.9529C25.9073 17.2499 26.2994 17.4167 26.7083 17.4167C27.1172 17.4167 27.5093 17.2499 27.7984 16.9529C28.0876 16.656 28.25 16.2533 28.25 15.8333C28.25 14.1536 27.6003 12.5427 26.4438 11.355C25.2873 10.1673 23.7188 9.50001 22.0833 9.50001C21.6744 9.50001 21.2823 9.66682 20.9932 9.96375C20.7041 10.2607 20.5417 10.6634 20.5417 11.0833C20.5417 11.5033 20.7041 11.906 20.9932 12.2029C21.2823 12.4999 21.6744 12.6667 22.0833 12.6667C22.9011 12.6667 23.6853 13.0003 24.2636 13.5942C24.8418 14.188 25.1667 14.9935 25.1667 15.8333Z"
fill="#581ff8"
/>
</svg>
</span>
<p data-type='p' className="text-2xl font-extrabold text-dark-grey-900">Phone</p>
<p data-type='p' className="text-base leading-7 text-dark-grey-600">
Reach out to us by phone
</p>
<a data-type='a'
className="text-lg font-bold text-purple-blue-500"
href="tel:+516-486-5135"
>
+516-486-5135
</a>
</div>
<div data-type='div' className="flex flex-col items-center gap-3 px-8 py-10 bg-white rounded-3xl shadow-main">
<span data-type='span'>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={38}
height={38}
viewBox="0 0 38 38"
fill="none"
>
<path data-type='path'
d="M31.7091 15.2475C31.4927 12.9341 30.6966 10.7177 29.3984 8.81412C28.1003 6.91054 26.3443 5.38464 24.3014 4.38503C22.2585 3.38541 19.9984 2.94614 17.7412 3.10998C15.4839 3.27383 13.3065 4.03522 11.4208 5.32C9.8008 6.43252 8.44083 7.89972 7.43858 9.6162C6.43633 11.3327 5.81667 13.2558 5.62413 15.2475C5.43524 17.2261 5.67758 19.2231 6.33355 21.0936C6.98953 22.9641 8.04269 24.6611 9.41663 26.0617L17.5875 34.4692C17.7308 34.6176 17.9013 34.7354 18.0892 34.8157C18.277 34.8961 18.4785 34.9375 18.682 34.9375C18.8856 34.9375 19.0871 34.8961 19.2749 34.8157C19.4628 34.7354 19.6333 34.6176 19.7766 34.4692L27.9166 26.0617C29.2906 24.6611 30.3437 22.9641 30.9997 21.0936C31.6557 19.2231 31.898 17.2261 31.7091 15.2475ZM25.7583 23.8292L18.6666 31.1125L11.575 23.8292C10.5298 22.7557 9.72928 21.4578 9.23081 20.0288C8.73233 18.5997 8.54834 17.075 8.69204 15.5642C8.83668 14.0301 9.31143 12.5482 10.082 11.2256C10.8525 9.90299 11.8996 8.77278 13.1475 7.91666C14.7831 6.80079 16.703 6.20555 18.6666 6.20555C20.6302 6.20555 22.5502 6.80079 24.1858 7.91666C25.4299 8.76947 26.4747 9.89469 27.245 11.2115C28.0154 12.5283 28.4922 14.0039 28.6412 15.5325C28.7896 17.0484 28.6079 18.5793 28.1093 20.0142C27.6107 21.4491 26.8076 22.7522 25.7583 23.8292ZM18.6666 9.5C17.2945 9.5 15.9532 9.91787 14.8124 10.7008C13.6715 11.4837 12.7823 12.5965 12.2572 13.8984C11.7321 15.2003 11.5947 16.6329 11.8624 18.015C12.1301 19.3971 12.7908 20.6667 13.7611 21.6631C14.7313 22.6596 15.9674 23.3382 17.3132 23.6131C18.6589 23.888 20.0538 23.7469 21.3215 23.2076C22.5892 22.6684 23.6726 21.7551 24.4349 20.5834C25.1972 19.4117 25.6041 18.0342 25.6041 16.625C25.6001 14.7366 24.8678 12.9268 23.5677 11.5915C22.2675 10.2562 20.5053 9.50418 18.6666 9.5ZM18.6666 20.5833C17.9043 20.5833 17.1592 20.3512 16.5254 19.9162C15.8916 19.4813 15.3976 18.8631 15.1058 18.1398C14.8141 17.4165 14.7378 16.6206 14.8865 15.8528C15.0352 15.0849 15.4023 14.3796 15.9413 13.826C16.4803 13.2724 17.1671 12.8955 17.9147 12.7427C18.6623 12.59 19.4373 12.6684 20.1416 12.968C20.8458 13.2676 21.4477 13.7749 21.8712 14.4259C22.2947 15.0768 22.5208 15.8421 22.5208 16.625C22.5208 17.6748 22.1147 18.6816 21.3919 19.424C20.6691 20.1663 19.6888 20.5833 18.6666 20.5833Z"
fill="#581ff8"
/>
</svg>
</span>
<p data-type='p' className="text-2xl font-extrabold text-dark-grey-900">Location</p>
<p data-type='p' className="text-base leading-7 text-dark-grey-600">
Find us at our office
</p>
<a data-type='a'
className="text-lg font-bold text-purple-blue-500"
target="_blank"
href="https://goo.gl/maps/QcWzYETAh4FS3KTD7"
>
10924 Urna Convallis
</a>
</div>
</div>
</div>
</div>Card Stats
Component from
Adminkit
Builder
<div class="card draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title">Sales</h5>
</div>
<div class="col-auto">
<div class="stat text-primary">
<svg 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" class="feather feather-truck align-middle"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
</div>
</div>
</div>
<h1 class="mt-1 mb-3">2.382</h1>
<div class="mb-0">
<span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> -3.65% </span>
<span class="text-muted">Since last week</span>
</div>
</div>
</div>Typography P
Card Profile
Component from
Argon Dashboard
Builder
<div class="card card-profile draggable">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/img-1-1000x600.jpg" alt="Image placeholder" class="card-img-top">
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-2">
<div class="card-profile-image">
<a href="#">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg" class="rounded-circle">
</a>
</div>
</div>
</div>
<div class="card-header text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4">
<div class="d-flex justify-content-between">
<a href="#" class="btn btn-sm btn-info mr-4 ">Connect</a>
<a href="#" class="btn btn-sm btn-default float-right">Message</a>
</div>
</div>
<div class="card-body pt-0">
<div class="row">
<div class="col">
<div class="card-profile-stats d-flex justify-content-center">
<div>
<span class="heading">22</span>
<span class="description">Friends</span>
</div>
<div>
<span class="heading">10</span>
<span class="description">Photos</span>
</div>
<div>
<span class="heading">89</span>
<span class="description">Comments</span>
</div>
</div>
</div>
</div>
<div class="text-center">
<h5 class="h3"> Jessica Jones <span class="font-weight-light">, 27</span>
</h5>
<h5 class="font-weight-300"> Bucharest, Romania </h5>
<h5 class="h5 mt-4"> Solution Manager - Creative Tim Officer </h5>
<h5> University of Computer Science </h5>
</div>
</div>
</div>Section Projects
Component from
Argon Dashboard
Builder
<div class="row removable">
<div class="col-xl-6 drop-zone">
<!-- Members list group card -->
<div class="card draggable">
<!-- Card header -->
<div class="card-header">
<!-- Title -->
<h5 class="h3 mb-0">Team members</h5>
</div>
<!-- Card body -->
<div class="card-body">
<!-- List group -->
<ul class="list-group list-group-flush list my--3">
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">John Michael</a>
</h4>
<span class="text-success">●</span>
<small>Online</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">Alex Smith</a>
</h4>
<span class="text-warning">●</span>
<small>In a meeting</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">Samantha Ivy</a>
</h4>
<span class="text-danger">●</span>
<small>Offline</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">John Michael</a>
</h4>
<span class="text-success">●</span>
<small>Online</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xl-6 drop-zone">
<!-- Progress track -->
<div class="card draggable">
<!-- Card header -->
<div class="card-header">
<!-- Title -->
<h5 class="h3 mb-0">Progress track</h5>
</div>
<!-- Card body -->
<div class="card-body">
<!-- List group -->
<ul class="list-group list-group-flush list my--3">
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/bootstrap.jpg">
</a>
</div>
<div class="col">
<h5>Argon Design System</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-orange" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/angular.jpg">
</a>
</div>
<div class="col">
<h5>Angular Now UI Kit PRO</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-green" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/sketch.jpg">
</a>
</div>
<div class="col">
<h5>Black Dashboard</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-red" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div>
</div>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/react.jpg">
</a>
</div>
<div class="col">
<h5>React Material Dashboard</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-teal" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>Team Section With Images
Component from
Motion Landing Library React
Builder
<div data-type='div' className="w-full draggable">
<div data-type='div' className="container flex flex-col mx-auto my-20 gap-14">
<div data-type='div' className="w-full text-center md:text-start">
<h2 data-type='h2' className="mb-6 text-4xl font-extrabold leading-tight md:text-5xl text-dark-grey-900">
Meet the Exceptional Team
</h2>
<p data-type='p' className="text-lg font-normal md:w-7/12 text-dark-grey-500">
Our dedicated professionals bring unparalleled expertise and commitment
to every endeavor. We believe in the art of innovation, and our passion
propels us forward. Experience the excellence that sets us apart.
</p>
</div>
<div data-type='div' className="grid w-full grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4">
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-1.jpeg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Olivia Baker
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Director of Finance
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Olivia is our financial wizard, meticulously managing our finances,
investments, and budgets.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-2.jpeg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Andrew Foster
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Senior Product Manager
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Andrew oversees our product development, turning ideas into
market-ready solutions.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-3.jpeg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Jessica Lee
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Customer Relations Manager
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Jessica is our customer champion, ensuring every client interaction
is a positive one.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-4.jpeg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Richard Ward
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Creative Design Lead
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Richard is our creative genius, transforming ideas into captivating
visuals.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-6.jpg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Michael Chang
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Head of Operations
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Michael is the mastermind behind our efficient operations. He
ensures our processes run like a well-oiled machine.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-9.jpg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Sarah Mitchell
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Chief Marketing Officer (CMO)
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Sarah is the creative force behind our brand. Her marketing prowess
and strategic thinking drive business growth.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-14.jpg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
David Rodriguez
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Chief Technology Officer (CTO)
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
David is our tech guru, spearheading innovation and ensuring our
products are cutting-edge.{""}
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-11.jpg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Emily Clarke
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Chief Executive Officer (CEO)
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Emily leads our company with a visionary zeal, setting the strategic
direction and inspiring our team to achieve greatness.
</p>
</div>
</div>
</div>
</div>
</div>