forked from mrwyndham/fastpocket
Compare commits
6 Commits
main
...
fastpocket
| Author | SHA1 | Date |
|---|---|---|
James Wyndham
|
a92a8aa9d9 | |
 mrwyndham
|
bd5a8fcf91 | |
 Cesar Lopes
|
806dce253e | |
 Ciro de Oliveira
|
4bd54e4b4a | |
|
coliveira
|
3eebc2770d | |
|
Ciro de Oliveira
|
3794ef5946 |
Binary file not shown.
|
|
@ -0,0 +1,41 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# A Button On Gradient Background
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/AnnouncementBanners/AButtonOnGradientBackground.tsx"
|
||||
<>
|
||||
{/* <!-- Announcement Banner --> */}
|
||||
<div className="bg-gradient-to-r from-secondary via-accent to-primary">
|
||||
<div className="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid justify-center md:grid-cols-2 md:justify-between md:items-center gap-2">
|
||||
<div className="text-center md:text-start">
|
||||
<p className="text-xs text-base-100/[.8] uppercase tracking-wider">
|
||||
Preview of Preline
|
||||
</p>
|
||||
<p className="mt-1 text-base-100 font-medium">
|
||||
Sign up to get unlimited updates. No credit card required.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="mt-3 text-center md:text-start md:flex md:justify-end md:items-center">
|
||||
<a
|
||||
className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-base-200 bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
Sign up free
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Announcement Banner --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Center Aligned In Container Size With Background Elements
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/AnnouncementBanners/CenterAlignedInContainerSizeWithBackgroundElements.tsx"
|
||||
<>
|
||||
{/* <!-- Announcement Banner --> */}
|
||||
<div className="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto">
|
||||
<div className="bg-primary bg-[url('https://preline.co/assets/svg/examples/abstract-1.svg')] bg-no-repeat bg-cover bg-center p-4 rounded-lg text-center">
|
||||
<p className="me-2 inline-block text-primary-content">
|
||||
FastPocket UI Figma is live.
|
||||
</p>
|
||||
<a
|
||||
className="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border-2 border-base-100 text-primary-content hover:border-base-100/70 hover:text-primary-content/70 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
href="../figma.html"
|
||||
>
|
||||
Learn more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Announcement Banner --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Full Width Center Aligned Link On Gray Background
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/AnnouncementBanners/FullWidthCenterAlignedLinkOnGrayBackground.tsx"
|
||||
<>
|
||||
{/* <!-- Announcement Banner --> */}
|
||||
<a
|
||||
className="group block bg-base-100 hover:bg-base-300 p-4 rounded-lg text-center transition-all duration-300"
|
||||
href="#"
|
||||
>
|
||||
<div className="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto">
|
||||
<p className="me-2 inline-block text-sm text-secondary-content">
|
||||
Shop for everyone on your list with the FastPocket Guide.
|
||||
</p>
|
||||
<span className="group-hover:underline decoration-2 inline-flex justify-center items-center gap-x-2 font-semibold text-primary text-sm">
|
||||
Shop now
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Announcement Banner --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Full Width With Dismiss Button On Red Background
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/AnnouncementBanners/FullWidthWithDismissButtonOnRedBackground.tsx"
|
||||
<>
|
||||
{/* <!-- Announcement Banner --> */}
|
||||
<div className="hs-removing:-translate-y-full bg-primary">
|
||||
<div className="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
|
||||
<div className="flex items-center">
|
||||
<p className="text-primary-content text-center">
|
||||
FastPocket UI Figma is live.{" "}
|
||||
<a
|
||||
className="decoration-2 underline font-medium hover:text-primary-content/[.8] dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
href="../figma.html"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<div className="ps-3 ms-auto">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex rounded-lg p-1.5 text-primary-content/[.8] hover:text-primary-content focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-primary focus:ring-primary-content"
|
||||
data-hs-remove-element="#ab-full-width-with-dismiss-button-on-blue-bg"
|
||||
>
|
||||
<span className="sr-only">Dismiss</span>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="M18 6 6 18" />
|
||||
<path d="m6 6 12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Announcement Banner --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Full Width With Dismiss Button On Red Background
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/AnnouncementBanners/FullWidthWithDismissButtonOnRedBackground.tsx"
|
||||
<>
|
||||
{/* <!-- Announcement Banner --> */}
|
||||
<div className="hs-removing:-translate-y-full bg-primary">
|
||||
<div className="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
|
||||
<div className="flex items-center">
|
||||
<p className="text-primary-content text-center">
|
||||
FastPocket UI Figma is live.{" "}
|
||||
<a
|
||||
className="decoration-2 underline font-medium hover:text-primary-content/[.8] dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
href="../figma.html"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<div className="ps-3 ms-auto">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex rounded-lg p-1.5 text-primary-content/[.8] hover:text-primary-content focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-primary focus:ring-primary-content"
|
||||
data-hs-remove-element="#ab-full-width-with-dismiss-button-on-blue-bg"
|
||||
>
|
||||
<span className="sr-only">Dismiss</span>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="M18 6 6 18" />
|
||||
<path d="m6 6 12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Announcement Banner --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Light Pilled Style Link
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/AnnouncementBanners/LightPilledStyleLink.tsx"
|
||||
<div className="bg-neutral">
|
||||
<div className="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto text-center">
|
||||
{/* <!-- Announcement Banner --> */}
|
||||
<a
|
||||
className="group inline-block bg-primary-content/[.05] hover:bg-primary-content/[.1] border border-primary-content[.05] p-1 ps-4 rounded-full shadow-md"
|
||||
href="../figma.html"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<p className="me-2 pt-1 inline-block text-primary-content text-sm">
|
||||
FastPocket UI Figma is live.
|
||||
</p>
|
||||
<span className="group-hover:bg-primary-content/[.1] py-1.5 px-2.5 inline-flex justify-center items-center gap-x-2 rounded-full bg-primary-content/[.075] font-semibold text-primary-content text-sm">
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Announcement Banner --> */}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Links In Gradient Background
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/AnnouncementBanners/LinksInGradientBackground.tsx"
|
||||
<>
|
||||
{/* <!-- Announcement Banner --> */}
|
||||
<div className="bg-gradient-to-r from-accent to-primary">
|
||||
<div className="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid justify-center md:grid-cols-2 md:justify-between md:items-center gap-2">
|
||||
<div className="text-center md:text-start md:order-2 md:flex md:justify-end md:items-center">
|
||||
<p className="me-5 inline-block text-sm font-semibold text-primary-content">
|
||||
Ready to get started?
|
||||
</p>
|
||||
<a
|
||||
className="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border-2 border-primary-content text-primary-content hover:border-primary-content/70 hover:text-primary-content/70 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
Sign up
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
className="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-lg font-medium text-primary-content hover:bg-base-100/[.1] focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-all text-sm"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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"
|
||||
>
|
||||
<polygon points="5 3 19 12 5 21 5 3" />
|
||||
</svg>
|
||||
Watch demo
|
||||
</a>
|
||||
<span className="inline-block border-e border-primary-content/[.3] w-px h-5 mx-2"></span>
|
||||
<a
|
||||
className="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-lg font-medium text-primary-content hover:bg-base-100/[.1] focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-all text-sm"
|
||||
href="#"
|
||||
>
|
||||
Explore what's new
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Announcement Banner --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Media Object Style With Blurred Background
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/AnnouncementBanners/MediaObjectStyleWithBlurredBackground.tsx"
|
||||
<>
|
||||
{/* <!-- Announcement Banner --> */}
|
||||
<div className="bg-base-100/[.6] backdrop-blur-lg">
|
||||
<div className="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid justify-center sm:grid-cols-2 sm:items-center gap-4">
|
||||
<div className="flex items-center gap-x-3 md:gap-x-5">
|
||||
<svg
|
||||
className="flex-shrink-0 size-10 md:size-14"
|
||||
width="40"
|
||||
height="40"
|
||||
viewBox="0 0 40 40"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
width="40"
|
||||
height="40"
|
||||
rx="6"
|
||||
fill="currentColor"
|
||||
className="fill-primary"
|
||||
/>
|
||||
<path
|
||||
d="M8 32.5V19.5C8 12.8726 13.3726 7.5 20 7.5C26.6274 7.5 32 12.8726 32 19.5C32 26.1274 26.6274 31.5 20 31.5H19"
|
||||
stroke="base-100"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path
|
||||
d="M12 32.5V19.66C12 15.1534 15.5817 11.5 20 11.5C24.4183 11.5 28 15.1534 28 19.66C28 24.1666 24.4183 27.82 20 27.82H19"
|
||||
stroke="base-100"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<circle cx="20" cy="19.5214" r="5" fill="base-100" />
|
||||
</svg>
|
||||
|
||||
<div className="grow">
|
||||
<p className="md:text-xl text-secondary-content font-semibold">
|
||||
Get started today.
|
||||
</p>
|
||||
<p className="text-sm md:text-base text-secondary-content">
|
||||
Sign up to get unlimited updates.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="text-center sm:text-start flex sm:justify-end sm:items-center gap-x-3 md:gap-x-4">
|
||||
<a
|
||||
className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent bg-primary text-base-100 hover:bg-primary/50 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
Free trial
|
||||
</a>
|
||||
<a
|
||||
className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-secondary-content text-secondary-content hover:border-base-300 hover:text-base-300 disabled:opacity-50 disabled:pointer-events-none dark:text-base-100 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
Buy now
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Announcement Banner --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"label": "Announcemente Banners",
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,481 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Center Aligned In Small Size
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/BlogArticles/CenterAlignedInSmallSize.tsx"
|
||||
<>
|
||||
{/* <!-- Blog Article --> */}
|
||||
<div className="max-w-3xl px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div className="max-w-2xl">
|
||||
{/* <!-- Avatar Media --> */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div className="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="w-12 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1669837401587-f9a4cfe3126e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grow">
|
||||
<div className="flex justify-between items-center gap-x-2">
|
||||
<div>
|
||||
{/* <!-- Tooltip --> */}
|
||||
<div className="hs-tooltip inline-block [--trigger:hover] [--placement:bottom]">
|
||||
<div className="hs-tooltip-toggle sm:mb-1 block text-start cursor-pointer">
|
||||
<span className="font-semibold text-secondary-content">
|
||||
Leyla Ludic
|
||||
</span>
|
||||
|
||||
{/* <!-- Dropdown Card --> */}
|
||||
<div
|
||||
className="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 max-w-xs cursor-default bg-secondary-content divide-y divide-gray-700 shadow-lg rounded-xl"
|
||||
role="tooltip"
|
||||
>
|
||||
{/* <!-- Body --> */}
|
||||
<div className="p-4 sm:p-5">
|
||||
<div className="mb-2 flex w-full sm:items-center gap-x-5 sm:gap-x-3">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="w-8 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1669837401587-f9a4cfe3126e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grow">
|
||||
<p className="text-lg font-semibold text-gray-200">
|
||||
Leyla Ludic
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-base-300">
|
||||
Leyla is a Customer Success Specialist at Preline
|
||||
and spends her time speaking to in-house
|
||||
recruiters all over the world.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Body --> */}
|
||||
|
||||
{/* <!-- Footer --> */}
|
||||
<div className="flex justify-between items-center px-4 py-3 sm:px-5">
|
||||
<ul className="text-xs space-x-3">
|
||||
<li className="inline-block">
|
||||
<span className="font-semibold text-gray-200">
|
||||
56
|
||||
</span>
|
||||
<span className="text-base-300">articles</span>
|
||||
</li>
|
||||
<li className="inline-block">
|
||||
<span className="font-semibold text-gray-200">
|
||||
1k+
|
||||
</span>
|
||||
<span className="text-base-300">followers</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="py-1.5 px-2.5 inline-flex items-center gap-x-2 text-xs font-semibold rounded-lg border border-transparent bg-primary text-base-100 hover:bg-primary/50 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"
|
||||
/>
|
||||
</svg>
|
||||
Follow
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Footer --> */}
|
||||
</div>
|
||||
{/* <!-- End Dropdown Card --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Tooltip --> */}
|
||||
|
||||
<ul className="text-xs text-secondary-content">
|
||||
<li className="inline-block relative pe-6 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:end-2 before:-translate-y-1/2 before:w-1 before:bg-base-300 before:rounded-full">
|
||||
Jan 18
|
||||
</li>
|
||||
<li className="inline-block relative pe-6 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:end-2 before:-translate-y-1/2 before:w-1 before:bg-base-300 before:rounded-full">
|
||||
8 min read
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* <!-- Button Group --> */}
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="py-1.5 px-2.5 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-base-100 text-secondary-content shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
>
|
||||
<svg
|
||||
className="w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
Tweet
|
||||
</button>
|
||||
</div>
|
||||
{/* <!-- End Button Group --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Avatar Media --> */}
|
||||
|
||||
{/* <!-- Content --> */}
|
||||
<div className="space-y-5 md:space-y-8">
|
||||
<div className="space-y-3">
|
||||
<h2 className="text-2xl font-bold md:text-3xl">
|
||||
Announcing a free plan for small teams
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-secondary-content">
|
||||
At preline, our mission has always been focused on bringing
|
||||
openness and transparency to the design process. We've always
|
||||
believed that by providing a space where designers can share
|
||||
ongoing work not only empowers them to make better products, it
|
||||
also helps them grow.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="text-lg text-secondary-content">
|
||||
We're proud to be a part of creating a more open culture and to
|
||||
continue building a product that supports this vision.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<img
|
||||
className="w-full object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<figcaption className="mt-3 text-sm text-center text-secondary-content">
|
||||
A woman sitting at a table.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<p className="text-lg text-secondary-content">
|
||||
As we've grown, we've seen how Preline has helped companies such
|
||||
as Spotify, Microsoft, Airbnb, Facebook, and Intercom bring their
|
||||
designers closer together to create amazing things. We've also
|
||||
learned that when the culture of sharing is brought in earlier,
|
||||
the better teams adapt and communicate with one another.
|
||||
</p>
|
||||
|
||||
<p className="text-lg text-secondary-content">
|
||||
That's why we are excited to share that we now have a{" "}
|
||||
<a
|
||||
className="text-primary decoration-2 hover:underline font-medium"
|
||||
href="#"
|
||||
>
|
||||
free version of Preline
|
||||
</a>
|
||||
, which will allow individual designers, startups and other small
|
||||
teams a chance to create a culture of openness early on.
|
||||
</p>
|
||||
|
||||
<blockquote className="text-center p-4 sm:px-7">
|
||||
<p className="text-xl font-medium text-secondary-content md:text-2xl md:leading-normal xl:text-2xl xl:leading-normal">
|
||||
To say that switching to Preline has been life-changing is an
|
||||
understatement. My business has tripled and I got my life back.
|
||||
</p>
|
||||
<p className="mt-5 text-secondary-content">Nicole Grazioso</p>
|
||||
</blockquote>
|
||||
|
||||
<figure>
|
||||
<img
|
||||
className="w-full object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1670272498380-eb330b61f3cd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<figcaption className="mt-3 text-sm text-center text-secondary-content">
|
||||
A man and a woman looking at a cell phone.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-2xl font-semibold">
|
||||
Bringing the culture of sharing to everyone
|
||||
</h3>
|
||||
|
||||
<p className="text-lg text-secondary-content">
|
||||
We know the power of sharing is real, and we want to create an
|
||||
opportunity for everyone to try Preline and explore how
|
||||
transformative open communication can be. Now you can have a
|
||||
team of one or two designers and unlimited spectators (think
|
||||
PMs, management, marketing, etc.) share work and explore the
|
||||
design process earlier.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul className="list-disc list-outside space-y-5 ps-5 text-lg text-secondary-content">
|
||||
<li className="ps-2">
|
||||
Preline allows us to collaborate in real time and is a really
|
||||
great way for leadership on the team to stay up-to-date with
|
||||
what everybody is working on,"{" "}
|
||||
<a
|
||||
className="text-primary decoration-2 hover:underline font-medium"
|
||||
href="#"
|
||||
>
|
||||
said
|
||||
</a>{" "}
|
||||
Stewart Scott-Curran, Intercom's Director of Brand Design.
|
||||
</li>
|
||||
<li className="ps-2">
|
||||
Preline opened a new way of sharing. It's a persistent way for
|
||||
everyone to see and absorb each other's work," said David Scott,
|
||||
Creative Director at{" "}
|
||||
<a
|
||||
className="text-primary decoration-2 hover:underline font-medium"
|
||||
href="#"
|
||||
>
|
||||
Eventbrite
|
||||
</a>
|
||||
.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p className="text-lg text-secondary-content">
|
||||
Small teams and individual designers need a space where they can
|
||||
watch the design process unfold, both for themselves and for the
|
||||
people they work with – no matter if it's a fellow designer,
|
||||
product manager, developer or client. Preline allows you to invite
|
||||
more people into the process, creating a central place for
|
||||
conversation around design. As those teams grow, transparency and
|
||||
collaboration becomes integrated in how they communicate and work
|
||||
together.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<a
|
||||
className="m-1 inline-flex items-center gap-1.5 py-2 px-3 rounded-full text-sm bg-base-100 text-secondary-content hover:bg-base-300 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
Plan
|
||||
</a>
|
||||
<a
|
||||
className="m-1 inline-flex items-center gap-1.5 py-2 px-3 rounded-full text-sm bg-base-100 text-secondary-content hover:bg-base-300 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
Web development
|
||||
</a>
|
||||
<a
|
||||
className="m-1 inline-flex items-center gap-1.5 py-2 px-3 rounded-full text-sm bg-base-100 text-secondary-content hover:bg-base-300 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
Free
|
||||
</a>
|
||||
<a
|
||||
className="m-1 inline-flex items-center gap-1.5 py-2 px-3 rounded-full text-sm bg-base-100 text-secondary-content hover:bg-base-300 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
Team
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Content --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Blog Article --> */}
|
||||
|
||||
{/* <!-- Sticky Share Group --> */}
|
||||
<div className="sticky bottom-6 inset-x-0 text-center">
|
||||
<div className="inline-block bg-base-100 shadow-md rounded-full py-3 px-4">
|
||||
<div className="flex items-center gap-x-1.5">
|
||||
{/* <!-- Button --> */}
|
||||
<div className="hs-tooltip inline-block">
|
||||
<button
|
||||
type="button"
|
||||
className="hs-tooltip-toggle flex items-center gap-x-2 text-sm text-secondary-content hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
|
||||
</svg>
|
||||
875
|
||||
<span
|
||||
className="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-secondary-content text-xs font-medium text-base-100 rounded shadow-sm"
|
||||
role="tooltip"
|
||||
>
|
||||
Like
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{/* <!-- Button --> */}
|
||||
|
||||
<div className="block h-3 border-e border-base-300 mx-3"></div>
|
||||
|
||||
{/* <!-- Button --> */}
|
||||
<div className="hs-tooltip inline-block">
|
||||
<button
|
||||
type="button"
|
||||
className="hs-tooltip-toggle flex items-center gap-x-2 text-sm text-secondary-content hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z" />
|
||||
</svg>
|
||||
16
|
||||
<span
|
||||
className="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-secondary-content text-xs font-medium text-base-100 rounded shadow-sm"
|
||||
role="tooltip"
|
||||
>
|
||||
Comment
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{/* <!-- Button --> */}
|
||||
|
||||
<div className="block h-3 border-e border-base-300 mx-3"></div>
|
||||
|
||||
{/* <!-- Button --> */}
|
||||
<div className="hs-dropdown relative inline-flex">
|
||||
<button
|
||||
type="button"
|
||||
id="blog-article-share-dropdown"
|
||||
className="hs-dropdown-toggle flex items-center gap-x-2 text-sm text-secondary-content hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
|
||||
<polyline points="16 6 12 2 8 6" />
|
||||
<line x1="12" x2="12" y1="2" y2="15" />
|
||||
</svg>
|
||||
Share
|
||||
</button>
|
||||
<div
|
||||
className="hs-dropdown-menu w-56 transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden mb-1 z-10 bg-secondary-content shadow-md rounded-xl p-2"
|
||||
aria-labelledby="blog-article-share-dropdown"
|
||||
>
|
||||
<a
|
||||
className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-base-300 hover:bg-base-100/10 focus:outline-none focus:ring-2 focus:ring-base-300"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
|
||||
</svg>
|
||||
Copy link
|
||||
</a>
|
||||
<div className="border-t border-base-300 my-2"></div>
|
||||
<a
|
||||
className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-base-300 hover:bg-base-100/10 focus:outline-none focus:ring-2 focus:ring-base-300"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
Share on Twitter
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-base-300 hover:bg-base-100/10 focus:outline-none focus:ring-2 focus:ring-base-300"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
|
||||
</svg>
|
||||
Share on Facebook
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-base-300 hover:bg-base-100/10 focus:outline-none focus:ring-2 focus:ring-base-300"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
|
||||
</svg>
|
||||
Share on LinkedIn
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- Button --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Sticky Share Group --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,513 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# With Sidebar
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/BlogArticles/WithSidebar.tsx"
|
||||
<>
|
||||
{/* <!-- Blog Article --> */}
|
||||
<div className="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto">
|
||||
<div className="grid lg:grid-cols-3 gap-y-8 lg:gap-y-0 lg:gap-x-6">
|
||||
{/* <!-- Content --> */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="py-8 lg:pe-8">
|
||||
<div className="space-y-5 lg:space-y-8">
|
||||
<a
|
||||
className="inline-flex items-center gap-x-1.5 text-sm text-secondary-content decoration-2 hover:underline dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m15 18-6-6 6-6" />
|
||||
</svg>
|
||||
Back to Blog
|
||||
</a>
|
||||
|
||||
<h2 className="text-3xl font-bold lg:text-5xl">
|
||||
Announcing a free plan for small teams
|
||||
</h2>
|
||||
|
||||
<div className="flex items-center gap-x-5">
|
||||
<a
|
||||
className="inline-flex items-center gap-1.5 py-1 px-3 sm:py-2 sm:px-4 rounded-full text-xs sm:text-sm bg-base-100 text-secondary-content hover:bg-base-300 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
Company News
|
||||
</a>
|
||||
<p className="text-xs sm:text-sm">January 18, 2023</p>
|
||||
</div>
|
||||
|
||||
<p className="text-lg">
|
||||
At FastPocket, our mission has always been focused on bringing
|
||||
openness and transparency to the design process. We've always
|
||||
believed that by providing a space where designers can share
|
||||
ongoing work not only empowers them to make better products,
|
||||
it also helps them grow.
|
||||
</p>
|
||||
|
||||
<p className="text-lg">
|
||||
We're proud to be a part of creating a more open culture and
|
||||
to continue building a product that supports this vision.
|
||||
</p>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="grid lg:grid-cols-2 gap-3">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-1 gap-3">
|
||||
<figure className="relative w-full h-60">
|
||||
<img
|
||||
className="w-full h-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</figure>
|
||||
<figure className="relative w-full h-60">
|
||||
<img
|
||||
className="w-full h-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1671726203638-83742a2721a1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
<figure className="relative w-full h-72 sm:h-96 lg:h-full">
|
||||
<img
|
||||
className="w-full h-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1671726203394-491c8b574a0a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<span className="mt-3 block text-sm text-center text-secondary-content">
|
||||
Working process
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-lg">
|
||||
As we've grown, we've seen how FastPocket has helped companies
|
||||
such as Spotify, Microsoft, Airbnb, Facebook, and Intercom
|
||||
bring their designers closer together to create amazing
|
||||
things. We've also learned that when the culture of sharing is
|
||||
brought in earlier, the better teams adapt and communicate
|
||||
with one another.
|
||||
</p>
|
||||
|
||||
<p className="text-lg">
|
||||
That's why we are excited to share that we now have a{" "}
|
||||
<a
|
||||
className="text-primary decoration-2 hover:underline font-medium"
|
||||
href="#"
|
||||
>
|
||||
free version of FastPocket
|
||||
</a>
|
||||
, which will allow individual designers, startups and other
|
||||
small teams a chance to create a culture of openness early on.
|
||||
</p>
|
||||
|
||||
<blockquote className="text-center p-4 sm:px-7">
|
||||
<p className="text-xl font-medium text-secondary-content lg:text-2xl lg:leading-normal xl:text-2xl xl:leading-normal">
|
||||
To say that switching to FastPocket has been life-changing
|
||||
is an understatement. My business has tripled and I got my
|
||||
life back.
|
||||
</p>
|
||||
<p className="mt-5">Nicole Grazioso</p>
|
||||
</blockquote>
|
||||
|
||||
<figure>
|
||||
<img
|
||||
className="w-full object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1671726203454-488ab18f7eda?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<figcaption className="mt-3 text-sm text-center text-secondary-content">
|
||||
A man and a woman looking at a cell phone.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-2xl font-semibold">
|
||||
Bringing the culture of sharing to everyone
|
||||
</h3>
|
||||
|
||||
<p className="text-lg">
|
||||
We know the power of sharing is real, and we want to create
|
||||
an opportunity for everyone to try FastPocket and explore
|
||||
how transformative open communication can be. Now you can
|
||||
have a team of one or two designers and unlimited spectators
|
||||
(think PMs, management, marketing, etc.) share work and
|
||||
explore the design process earlier.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul className="list-disc list-outside space-y-5 ps-5 text-lg">
|
||||
<li className="ps-2">
|
||||
FastPocket allows us to collaborate in real time and is a
|
||||
really great way for leadership on the team to stay
|
||||
up-to-date with what everybody is working on,"{" "}
|
||||
<a
|
||||
className="text-primary decoration-2 hover:underline font-medium"
|
||||
href="#"
|
||||
>
|
||||
said
|
||||
</a>{" "}
|
||||
Stewart Scott-Curran, Intercom's Director of Brand Design.
|
||||
</li>
|
||||
<li className="ps-2">
|
||||
FastPocket opened a new way of sharing. It's a persistent
|
||||
way for everyone to see and absorb each other's work," said
|
||||
David Scott, Creative Director at{" "}
|
||||
<a
|
||||
className="text-primary decoration-2 hover:underline font-medium"
|
||||
href="#"
|
||||
>
|
||||
Eventbrite
|
||||
</a>
|
||||
.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p className="text-lg">
|
||||
Small teams and individual designers need a space where they
|
||||
can watch the design process unfold, both for themselves and
|
||||
for the people they work with – no matter if it's a fellow
|
||||
designer, product manager, developer or client. FastPocket
|
||||
allows you to invite more people into the process, creating a
|
||||
central place for conversation around design. As those teams
|
||||
grow, transparency and collaboration becomes integrated in how
|
||||
they communicate and work together.
|
||||
</p>
|
||||
|
||||
<div className="grid lg:flex lg:justify-between lg:items-center gap-y-5 lg:gap-y-0">
|
||||
{/* <!-- Badges/Tags --> */}
|
||||
<div>
|
||||
<a
|
||||
className="m-0.5 inline-flex items-center gap-1.5 py-2 px-3 rounded-full text-sm bg-base-100 text-secondary-content hover:bg-base-300 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
Plan
|
||||
</a>
|
||||
<a
|
||||
className="m-0.5 inline-flex items-center gap-1.5 py-2 px-3 rounded-full text-sm bg-base-100 text-secondary-content hover:bg-base-300 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
Web development
|
||||
</a>
|
||||
<a
|
||||
className="m-0.5 inline-flex items-center gap-1.5 py-2 px-3 rounded-full text-sm bg-base-100 text-secondary-content hover:bg-base-300 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
Free
|
||||
</a>
|
||||
<a
|
||||
className="m-0.5 inline-flex items-center gap-1.5 py-2 px-3 rounded-full text-sm bg-base-100 text-secondary-content hover:bg-base-300 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
Team
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Badges/Tags --> */}
|
||||
|
||||
<div className="flex justify-end items-center gap-x-1.5">
|
||||
{/* <!-- Button --> */}
|
||||
<div className="hs-tooltip inline-block">
|
||||
<button
|
||||
type="button"
|
||||
className="hs-tooltip-toggle flex items-center gap-x-2 text-sm text-secondary-content hover:text-secondary-content dark:focus:outline-none dark:focus:ring-1"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
|
||||
</svg>
|
||||
875
|
||||
<span
|
||||
className="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 text-xs font-medium text-base-100 rounded shadow-sm"
|
||||
role="tooltip"
|
||||
>
|
||||
Like
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{/* <!-- Button --> */}
|
||||
|
||||
<div className="block h-3 border-e border-base-300 mx-3"></div>
|
||||
|
||||
{/* <!-- Button --> */}
|
||||
<div className="hs-tooltip inline-block">
|
||||
<button
|
||||
type="button"
|
||||
className="hs-tooltip-toggle flex items-center gap-x-2 text-sm text-secondary-content hover:text-secondary-content dark:focus:outline-none dark:focus:ring-1"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z" />
|
||||
</svg>
|
||||
16
|
||||
<span
|
||||
className="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 text-xs font-medium text-base-100 rounded shadow-sm"
|
||||
role="tooltip"
|
||||
>
|
||||
Comment
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{/* <!-- Button --> */}
|
||||
|
||||
<div className="block h-3 border-e border-base-300 mx-3"></div>
|
||||
|
||||
{/* <!-- Button --> */}
|
||||
<div className="hs-dropdown relative inline-flex">
|
||||
<button
|
||||
type="button"
|
||||
id="blog-article-share-dropdown"
|
||||
className="hs-dropdown-toggle flex items-center gap-x-2 text-sm text-secondary-content hover:text-secondary-content dark:focus:outline-none dark:focus:ring-1"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
|
||||
<polyline points="16 6 12 2 8 6" />
|
||||
<line x1="12" x2="12" y1="2" y2="15" />
|
||||
</svg>
|
||||
Share
|
||||
</button>
|
||||
<div
|
||||
className="hs-dropdown-menu w-56 transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden mb-1 z-10 shadow-md rounded-xl p-2"
|
||||
aria-labelledby="blog-article-share-dropdown"
|
||||
>
|
||||
<a
|
||||
className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-secondary-content hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-base-300"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
|
||||
</svg>
|
||||
Copy link
|
||||
</a>
|
||||
<div className="border-t border-secondary-content my-2"></div>
|
||||
<a
|
||||
className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-secondary-content hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-base-300"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
Share on Twitter
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-secondary-content hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-base-300"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
|
||||
</svg>
|
||||
Share on Facebook
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-secondary-content hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-base-300"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
|
||||
</svg>
|
||||
Share on LinkedIn
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- Button --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Content --> */}
|
||||
|
||||
{/* <!-- Sidebar --> */}
|
||||
<div className="lg:col-span-1 lg:w-full lg:h-full lg:bg-gradient-to-r lg:from-base-100 lg:via-transparent lg:to-transparent">
|
||||
<div className="sticky top-0 start-0 py-8 lg:ps-8">
|
||||
{/* <!-- Avatar Media --> */}
|
||||
<div className="group flex items-center gap-x-3 border-b border-base-200 pb-8 mb-8">
|
||||
<a className="block flex-shrink-0" href="#">
|
||||
<img
|
||||
className="w-10 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1669837401587-f9a4cfe3126e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<a className="group grow block" href="">
|
||||
<h5 className="group-hover:text-secondary-content text-sm font-semibold text-secondary-content dark:group-hover:text-base-300">
|
||||
Leyla Ludic
|
||||
</h5>
|
||||
<p className="text-sm text-secondary-content">
|
||||
UI/UX enthusiast
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<div className="grow">
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
className="py-1.5 px-2.5 inline-flex items-center gap-x-2 text-xs font-semibold rounded-lg border border-transparent bg-primary text-base-100 hover:bg-primary/50 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<line x1="19" x2="19" y1="8" y2="14" />
|
||||
<line x1="22" x2="16" y1="11" y2="11" />
|
||||
</svg>
|
||||
Follow
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Avatar Media --> */}
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* <!-- Media --> */}
|
||||
<a className="group flex items-center gap-x-6" href="#">
|
||||
<div className="grow">
|
||||
<span className="text-sm font-bold text-secondary-content group-hover:text-primary dark:group-hover:text-primary">
|
||||
5 Reasons to Not start a UX Designer Career in 2022/2023
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0 relative rounded-lg overflow-hidden w-20">
|
||||
<img
|
||||
className="w-full absolute top-0 start-0 object-cover rounded-lg"
|
||||
src="https://images.unsplash.com/photo-1567016526105-22da7c13161a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Media --> */}
|
||||
|
||||
{/* <!-- Media --> */}
|
||||
<a className="group flex items-center gap-x-6" href="#">
|
||||
<div className="grow">
|
||||
<span className="text-sm font-bold text-secondary-content group-hover:text-primary dark:group-hover:text-primary">
|
||||
If your UX Portfolio has this 20% Well Done, it Will Give
|
||||
You an 80% Result
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0 relative rounded-lg overflow-hidden w-20">
|
||||
<img
|
||||
className="w-full absolute top-0 start-0 object-cover rounded-lg"
|
||||
src="https://images.unsplash.com/photo-1542125387-c71274d94f0a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Media --> */}
|
||||
|
||||
{/* <!-- Media --> */}
|
||||
<a className="group flex items-center gap-x-6" href="#">
|
||||
<div className="grow">
|
||||
<span className="text-sm font-bold text-secondary-content group-hover:text-primary dark:group-hover:text-primary">
|
||||
7 Principles of Icon Design
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0 relative rounded-lg overflow-hidden w-20">
|
||||
<img
|
||||
className="w-full absolute top-0 start-0 object-cover rounded-lg"
|
||||
src="https://images.unsplash.com/photo-1586232702178-f044c5f4d4b7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Media --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Sidebar --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Blog Article --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"label": "Blog Articles",
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Image Overlay
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/BlogSections/ImageOverlay.tsx"
|
||||
<>
|
||||
{/* <!-- Card Blog --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
{/* <!-- Card --> */}
|
||||
<a className="group relative block rounded-xl" href="#">
|
||||
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:w-full before:bg-gradient-to-t before:from-gray-900/[.7] before:z-[1]">
|
||||
<img
|
||||
className="w-full relative top-0 start-0 object-cover"
|
||||
src="https://images.unsplash.com/photo-1669828230990-9b8583a877ab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1062&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-0 inset-x-0 z-10">
|
||||
<div className="p-4 flex flex-col h-full sm:p-6">
|
||||
{/* <!-- Avatar --> */}
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="w-[46px] border-2 border-base-100 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1669837401587-f9a4cfe3126e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="ms-2.5 sm:ms-4">
|
||||
<h4 className="font-semibold text-primary-content">
|
||||
Gloria
|
||||
</h4>
|
||||
<p className="text-xs text-primary-content/[.8]">
|
||||
Jan 09, 2021
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Avatar --> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 inset-x-0 z-10">
|
||||
<div className="flex flex-col h-full p-4 sm:p-6">
|
||||
<h3 className="text-lg sm:text-3xl font-semibold text-primary-content group-hover:text-primary-content/[.8]">
|
||||
Facebook is creating a news section in Watch to feature
|
||||
breaking news
|
||||
</h3>
|
||||
<p className="mt-2 text-primary-content/[.8]">
|
||||
Facebook launched the Watch platform in August
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a className="group relative block rounded-xl" href="#">
|
||||
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:w-full before:bg-gradient-to-t before:from-gray-900/[.7] before:z-[1]">
|
||||
<img
|
||||
className="w-full absolute top-0 start-0 object-cover"
|
||||
src="https://images.unsplash.com/photo-1611625618313-68b87aaa0626?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-0 inset-x-0 z-10">
|
||||
<div className="p-4 flex flex-col h-full sm:p-6">
|
||||
{/* <!-- Avatar --> */}
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="w-[46px] border-2 border-base-100 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1669837401587-f9a4cfe3126e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="ms-2.5 sm:ms-4">
|
||||
<h4 className="font-semibold text-primary-content">
|
||||
Gloria
|
||||
</h4>
|
||||
<p className="text-xs text-primary-content/[.8]">
|
||||
May 30, 2021
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Avatar --> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 inset-x-0 z-10">
|
||||
<div className="flex flex-col h-full p-4 sm:p-6">
|
||||
<h3 className="text-lg sm:text-3xl font-semibold text-primary-content group-hover:text-primary-content/[.8]">
|
||||
What CFR (Conversations, Feedback, Recognition) really is
|
||||
about
|
||||
</h3>
|
||||
<p className="mt-2 text-primary-content/[.8]">
|
||||
For a lot of people these days, Measure What Matters.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Card Blog --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Brand Color On Hover
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/BlogSections/BrandColorOnHover.tsx"
|
||||
<>
|
||||
{/* <!-- Card Blog --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Title --> */}
|
||||
<div className="max-w-2xl mb-10">
|
||||
<h2 className="text-2xl font-bold md:text-4xl md:leading-tight">
|
||||
Customer stories
|
||||
</h2>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
See how game-changing companies are making the most of every
|
||||
engagement with FastPocket.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{/* <!-- Card --> */}
|
||||
<a className="group block rounded-xl" href="#">
|
||||
{/* <div className="w-9 h-16"> */}
|
||||
<img
|
||||
className="w-full h-48 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1668869713519-9bcbb0da7171?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
{/* </div> */}
|
||||
<h3 className="mt-2 text-lg font-medium text-secondary-content group-hover:text-primary">
|
||||
Unity’s inside sales team drives 80% of its revenue with
|
||||
FastPocket.
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-secondary-content">
|
||||
September 12, 2022
|
||||
</p>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a className="group block rounded-xl" href="#">
|
||||
{/* <div className="w-9 h-16"> */}
|
||||
<img
|
||||
className="w-full h-48 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1668584054035-f5ba7d426401?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3465&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
{/* </div> */}
|
||||
<h3 className="mt-2 text-lg font-medium text-secondary-content group-hover:text-primary">
|
||||
Living Spaces creates a unified experience across the customer
|
||||
journey.
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-secondary-content">
|
||||
September 12, 2022
|
||||
</p>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a className="group block rounded-xl" href="#">
|
||||
{/* <div className="w-9 h-16"> */}
|
||||
<img
|
||||
className="w-full h-48 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1668863699009-1e3b4118675d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3387&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
{/* </div> */}
|
||||
<h3 className="mt-2 text-lg font-medium text-secondary-content group-hover:text-primary">
|
||||
Atlassian powers sales and support at scale with FastPocket.
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-secondary-content">
|
||||
September 12, 2022
|
||||
</p>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a className="group block rounded-xl" href="#">
|
||||
{/* <div className="w-9 h-16"> */}
|
||||
<img
|
||||
className="w-full h-48 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1668584054131-d5721c515211?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
{/* </div> */}
|
||||
<h3 className="mt-2 text-lg font-medium text-secondary-content group-hover:text-primary">
|
||||
Everything you need to know about FastPocket Pro.
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-secondary-content">
|
||||
September 12, 2022
|
||||
</p>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Card Blog --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Card With Background Gray On Hover
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/BlogSections/CardWithBackgroundGrayOnHover.tsx"
|
||||
<>
|
||||
{/* <!-- Card Blog --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Title --> */}
|
||||
<div className="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
|
||||
<h2 className="text-2xl font-bold md:text-4xl md:leading-tight">
|
||||
Customer stories
|
||||
</h2>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
See how game-changing companies are making the most of every
|
||||
engagement with FastPocket.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group hover:bg-base-300 rounded-xl p-5 transition-all"
|
||||
href="#"
|
||||
>
|
||||
<div className="aspect-w-16 aspect-h-10">
|
||||
<img
|
||||
className="w-full h-48 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1661956602116-aa6865609028?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="mt-5 text-xl text-secondary-content">
|
||||
Unity’s inside sales team drives 80% of its revenue with
|
||||
FastPocket.
|
||||
</h3>
|
||||
<p className="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold text-secondary-content">
|
||||
Learn more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4 transition ease-in-out group-hover:translate-x-1"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</p>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group hover:bg-base-300 rounded-xl p-5 transition-all"
|
||||
href="#"
|
||||
>
|
||||
<div className="aspect-w-16 aspect-h-10">
|
||||
<img
|
||||
className="w-full h-48 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1669739432571-aee1f057c41f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1065&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="mt-5 text-xl text-secondary-content">
|
||||
Living Spaces creates a unified experience across the customer
|
||||
journey.
|
||||
</h3>
|
||||
<p className="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold text-secondary-content">
|
||||
Learn more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4 transition ease-in-out group-hover:translate-x-1"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</p>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group hover:bg-base-300 rounded-xl p-5 transition-all"
|
||||
href="#"
|
||||
>
|
||||
<div className="aspect-w-16 aspect-h-10">
|
||||
<img
|
||||
className="w-full h-48 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1657299171054-e679f630a776?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="mt-5 text-xl text-secondary-content">
|
||||
Atlassian powers sales and support at scale with FastPocket.
|
||||
</h3>
|
||||
<p className="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold text-secondary-content">
|
||||
Learn more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4 transition ease-in-out group-hover:translate-x-1"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</p>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Card Blog --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Hero Style
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/BlogSections/HeroStyle.tsx"
|
||||
<>
|
||||
{/* <!-- Card Blog --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid sm:grid-cols-2 sm:items-center gap-8">
|
||||
<div className="sm:order-2">
|
||||
<div className="relative pt-[50%] sm:pt-[100%] rounded-lg">
|
||||
<img
|
||||
className="w-full absolute top-0 start-0 object-cover rounded-lg"
|
||||
src="https://images.unsplash.com/photo-1606868306217-dbf5046868d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1981&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="sm:order-1">
|
||||
<p className="mb-5 inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-base-100 text-secondary-content">
|
||||
Business insight
|
||||
</p>
|
||||
|
||||
<h2 className="text-2xl font-bold md:text-3xl lg:text-4xl lg:leading-tight xl:text-5xl xl:leading-tight text-secondary-content">
|
||||
<a className="hover:text-primary" href="#">
|
||||
How to get buy-in and budget for direct hiring
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
{/* <!-- Avatar --> */}
|
||||
<div className="mt-6 sm:mt-10 flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="w-10 sm:h-14 sm:w-14 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1669837401587-f9a4cfe3126e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="ms-3 sm:ms-4">
|
||||
<p className="sm:mb-1 font-semibold text-secondary-content">
|
||||
Louise Donadieu
|
||||
</p>
|
||||
<p className="text-xs text-secondary-content">
|
||||
Strategic Marketing Consultant
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Avatar --> */}
|
||||
|
||||
<div className="mt-5">
|
||||
<a
|
||||
className="inline-flex items-center gap-x-1.5 text-primary decoration-2 hover:underline font-medium"
|
||||
href="#"
|
||||
>
|
||||
Read more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Card Blog --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Horizontal Style
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/BlogSections/HorizontalStyle.tsx"
|
||||
<>
|
||||
{/* <!-- Card Blog --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
{/* <!-- Card --> */}
|
||||
<a className="group sm:flex rounded-xl" href="#">
|
||||
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full h-[200px] sm:w-[250px] sm:h-[350px]">
|
||||
<img
|
||||
className="w-full absolute top-0 start-0 object-cover"
|
||||
src="https://images.unsplash.com/photo-1664574654529-b60630f33fdb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grow">
|
||||
<div className="p-4 flex flex-col h-full sm:p-6">
|
||||
<div className="mb-3">
|
||||
<p className="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-base-100 text-secondary-content">
|
||||
Business
|
||||
</p>
|
||||
</div>
|
||||
<h3 className="text-lg sm:text-2xl font-semibold text-secondary-content group-hover:text-primary">
|
||||
FastPocket becomes an official Instagram Marketing Partner
|
||||
</h3>
|
||||
<p className="mt-2 text-secondary-content">
|
||||
Great news we're eager to share.
|
||||
</p>
|
||||
|
||||
<div className="mt-5 sm:mt-auto">
|
||||
{/* <!-- Avatar --> */}
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="w-[46px] rounded-full"
|
||||
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="ms-2.5 sm:ms-4">
|
||||
<h4 className="font-semibold text-secondary-content">
|
||||
Aaron Larsson
|
||||
</h4>
|
||||
<p className="text-xs text-base-300">Feb 15, 2021</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Avatar --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a className="group sm:flex rounded-xl" href="#">
|
||||
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full h-[200px] sm:w-[250px] sm:h-[350px]">
|
||||
<img
|
||||
className="w-full absolute top-0 start-0 object-cover"
|
||||
src="https://images.unsplash.com/photo-1669824774762-65ddf29bee56?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="grow">
|
||||
<div className="p-4 flex flex-col h-full sm:p-6">
|
||||
<div className="mb-3">
|
||||
<p className="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-base-100 text-secondary-content">
|
||||
Announcements
|
||||
</p>
|
||||
</div>
|
||||
<h3 className="text-lg sm:text-2xl font-semibold text-secondary-content group-hover:text-primary">
|
||||
Announcing a free plan for small teams
|
||||
</h3>
|
||||
<p className="mt-2 text-secondary-content">
|
||||
At Wake, our mission has always been focused on bringing
|
||||
openness.
|
||||
</p>
|
||||
|
||||
<div className="mt-5 sm:mt-auto">
|
||||
{/* <!-- Avatar --> */}
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="w-[46px] rounded-full"
|
||||
src="https://images.unsplash.com/photo-1669720229052-89cda125fc3f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="ms-2.5 sm:ms-4">
|
||||
<h4 className="font-semibold text-secondary-content">
|
||||
Hanna Wolfe
|
||||
</h4>
|
||||
<p className="text-xs text-base-300">Feb 4, 2021</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Avatar --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Card Blog --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Image Card With Subtitle And Title
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/BlogSections/ImageCardWithSubtitleAndTitle.tsx"
|
||||
<>
|
||||
{/* <!-- Card Blog --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Title --> */}
|
||||
<div className="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
|
||||
<h2 className="text-2xl font-bold md:text-4xl md:leading-tight">
|
||||
Read our latest news
|
||||
</h2>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
We've helped some great companies brand, design and get to market.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-10 lg:mb-14">
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition"
|
||||
href="#"
|
||||
>
|
||||
<div className="aspect-w-16 aspect-h-9">
|
||||
<img
|
||||
className="w-full h-48 object-cover rounded-t-xl"
|
||||
src="https://images.unsplash.com/photo-1668869713519-9bcbb0da7171?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-4 md:p-5">
|
||||
<p className="mt-2 text-xs uppercase text-secondary-content">
|
||||
Product
|
||||
</p>
|
||||
<h3 className="mt-2 text-lg font-medium text-secondary-content group-hover:text-primary">
|
||||
Better is when everything works together
|
||||
</h3>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition"
|
||||
href="#"
|
||||
>
|
||||
<div className="aspect-w-16 aspect-h-9">
|
||||
<img
|
||||
className="w-full h-48 object-cover rounded-t-xl"
|
||||
src="https://images.unsplash.com/photo-1668584054035-f5ba7d426401?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3465&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-4 md:p-5">
|
||||
<p className="mt-2 text-xs uppercase text-secondary-content">
|
||||
Business
|
||||
</p>
|
||||
<h3 className="mt-2 text-lg font-medium text-secondary-content group-hover:text-primary">
|
||||
What CFR really is about
|
||||
</h3>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition"
|
||||
href="#"
|
||||
>
|
||||
<div className="aspect-w-16 aspect-h-9">
|
||||
<img
|
||||
className="w-full h-48 object-cover rounded-t-xl"
|
||||
src="https://images.unsplash.com/photo-1668863699009-1e3b4118675d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3387&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-4 md:p-5">
|
||||
<p className="mt-2 text-xs uppercase text-secondary-content">
|
||||
Business
|
||||
</p>
|
||||
<h3 className="mt-2 text-lg font-medium text-secondary-content group-hover:text-primary">
|
||||
Should Product Owners think like entrepreneurs?
|
||||
</h3>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition"
|
||||
href="#"
|
||||
>
|
||||
<div className="aspect-w-16 aspect-h-9">
|
||||
<img
|
||||
className="w-full h-48 object-cover rounded-t-xl"
|
||||
src="https://images.unsplash.com/photo-1668584054131-d5721c515211?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-4 md:p-5">
|
||||
<p className="mt-2 text-xs uppercase text-secondary-content">
|
||||
Facilitate
|
||||
</p>
|
||||
<h3 className="mt-2 text-lg font-medium text-secondary-content group-hover:text-primary">
|
||||
Announcing Front Strategies: Ready-to-use rules
|
||||
</h3>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="text-center">
|
||||
<div className="inline-block bg-base-100 border shadow-sm rounded-full">
|
||||
<div className="py-3 px-4 flex items-center gap-x-2">
|
||||
<p className="text-secondary-content">Want to read more?</p>
|
||||
<a
|
||||
className="inline-flex items-center gap-x-1.5 text-primary decoration-2 hover:underline font-medium"
|
||||
href="../docs/index.html"
|
||||
>
|
||||
Go here
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Card Blog --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Three Grids With An Overlay Card
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/BlogSections/ThreeGridsWithAnOverlayCard.tsx"
|
||||
<>
|
||||
{/* <!-- Card Blog --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid lg:grid-cols-2 lg:gap-y-16 gap-10">
|
||||
{/* <!-- Card --> */}
|
||||
<a className="group rounded-xl overflow-hidden" href="#">
|
||||
<div className="sm:flex">
|
||||
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img
|
||||
className="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1540575861501-7cf05a4b125a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grow mt-4 sm:mt-0 sm:ms-6 px-4 sm:px-0">
|
||||
<h3 className="text-xl font-semibold text-secondary-content group-hover:text-secondary-content">
|
||||
Studio by FastPocket
|
||||
</h3>
|
||||
<p className="mt-3 text-secondary-content">
|
||||
Produce professional, reliable streams easily leveraging
|
||||
FastPocket's innovative broadcast studio
|
||||
</p>
|
||||
<p className="mt-4 inline-flex items-center gap-x-1 text-primary decoration-2 hover:underline font-medium">
|
||||
Read more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a className="group rounded-xl overflow-hidden" href="#">
|
||||
<div className="sm:flex">
|
||||
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img
|
||||
className="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1668906093328-99601a1aa584?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=986&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grow mt-4 sm:mt-0 sm:ms-6 px-4 sm:px-0">
|
||||
<h3 className="text-xl font-semibold text-secondary-content group-hover:text-secondary-content">
|
||||
Onsite
|
||||
</h3>
|
||||
<p className="mt-3 text-secondary-content">
|
||||
Optimize your in-person experience with best-in-className
|
||||
capabilities like badge printing and lead retrieval
|
||||
</p>
|
||||
<p className="mt-4 inline-flex items-center gap-x-1 text-primary decoration-2 hover:underline font-medium">
|
||||
Read more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a className="group rounded-xl overflow-hidden" href="#">
|
||||
<div className="sm:flex">
|
||||
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img
|
||||
className="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1567016526105-22da7c13161a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grow mt-4 sm:mt-0 sm:ms-6 px-4 sm:px-0">
|
||||
<h3 className="text-xl font-semibold text-secondary-content group-hover:text-secondary-content">
|
||||
The complete guide to OKRs
|
||||
</h3>
|
||||
<p className="mt-3 text-secondary-content">
|
||||
How to make objectives and key results work for your company
|
||||
</p>
|
||||
<p className="mt-4 inline-flex items-center gap-x-1 text-primary decoration-2 hover:underline font-medium">
|
||||
Read more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a className="group rounded-xl overflow-hidden" href="#">
|
||||
<div className="sm:flex">
|
||||
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img
|
||||
className="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grow mt-4 sm:mt-0 sm:ms-6 px-4 sm:px-0">
|
||||
<h3 className="text-xl font-semibold text-secondary-content group-hover:text-secondary-content">
|
||||
People program models
|
||||
</h3>
|
||||
<p className="mt-3 text-secondary-content">
|
||||
Six approaches to bringing your People strategy to life
|
||||
</p>
|
||||
<p className="mt-4 inline-flex items-center gap-x-1 text-primary decoration-2 hover:underline font-medium">
|
||||
Read more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Card Blog --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Two Grids List
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/BlogSections/TwoGridsList.tsx"
|
||||
<>
|
||||
{/* <!-- Card Blog --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid lg:grid-cols-2 lg:gap-y-16 gap-10">
|
||||
{/* <!-- Card --> */}
|
||||
<a className="group rounded-xl overflow-hidden" href="#">
|
||||
<div className="sm:flex">
|
||||
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img
|
||||
className="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1540575861501-7cf05a4b125a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grow mt-4 sm:mt-0 sm:ms-6 px-4 sm:px-0">
|
||||
<h3 className="text-xl font-semibold text-secondary-content group-hover:text-secondary-content">
|
||||
Studio by FastPocket
|
||||
</h3>
|
||||
<p className="mt-3 text-secondary-content">
|
||||
Produce professional, reliable streams easily leveraging
|
||||
FastPocket's innovative broadcast studio
|
||||
</p>
|
||||
<p className="mt-4 inline-flex items-center gap-x-1 text-primary decoration-2 hover:underline font-medium">
|
||||
Read more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a className="group rounded-xl overflow-hidden" href="#">
|
||||
<div className="sm:flex">
|
||||
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img
|
||||
className="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1668906093328-99601a1aa584?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=986&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grow mt-4 sm:mt-0 sm:ms-6 px-4 sm:px-0">
|
||||
<h3 className="text-xl font-semibold text-secondary-content group-hover:text-secondary-content">
|
||||
Onsite
|
||||
</h3>
|
||||
<p className="mt-3 text-secondary-content">
|
||||
Optimize your in-person experience with best-in-className
|
||||
capabilities like badge printing and lead retrieval
|
||||
</p>
|
||||
<p className="mt-4 inline-flex items-center gap-x-1 text-primary decoration-2 hover:underline font-medium">
|
||||
Read more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a className="group rounded-xl overflow-hidden" href="#">
|
||||
<div className="sm:flex">
|
||||
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img
|
||||
className="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1567016526105-22da7c13161a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grow mt-4 sm:mt-0 sm:ms-6 px-4 sm:px-0">
|
||||
<h3 className="text-xl font-semibold text-secondary-content group-hover:text-secondary-content">
|
||||
The complete guide to OKRs
|
||||
</h3>
|
||||
<p className="mt-3 text-secondary-content">
|
||||
How to make objectives and key results work for your company
|
||||
</p>
|
||||
<p className="mt-4 inline-flex items-center gap-x-1 text-primary decoration-2 hover:underline font-medium">
|
||||
Read more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a className="group rounded-xl overflow-hidden" href="#">
|
||||
<div className="sm:flex">
|
||||
<div className="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img
|
||||
className="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grow mt-4 sm:mt-0 sm:ms-6 px-4 sm:px-0">
|
||||
<h3 className="text-xl font-semibold text-secondary-content group-hover:text-secondary-content">
|
||||
People program models
|
||||
</h3>
|
||||
<p className="mt-3 text-secondary-content">
|
||||
Six approaches to bringing your People strategy to life
|
||||
</p>
|
||||
<p className="mt-4 inline-flex items-center gap-x-1 text-primary decoration-2 hover:underline font-medium">
|
||||
Read more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Card Blog --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"label": "Blog Sections",
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Image And Content With Stretched Buttons
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/CardSections/ImageAndContentWithStretchedButtons.tsx"
|
||||
<>
|
||||
{/* <!-- Card Blog --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* <!-- Card --> */}
|
||||
<div className="group flex flex-col h-full bg-base-100 border border-base-200 shadow-sm rounded-xl">
|
||||
<div className="h-52 flex flex-col justify-center items-center bg-primary rounded-t-xl">
|
||||
<svg
|
||||
className="size-28"
|
||||
width="56"
|
||||
height="56"
|
||||
viewBox="0 0 56 56"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="56" height="56" rx="10" fill="base-100" />
|
||||
<path
|
||||
d="M20.2819 26.7478C20.1304 26.5495 19.9068 26.4194 19.6599 26.386C19.4131 26.3527 19.1631 26.4188 18.9647 26.5698C18.848 26.6622 18.7538 26.78 18.6894 26.9144L10.6019 43.1439C10.4874 43.3739 10.4686 43.6401 10.5496 43.884C10.6307 44.1279 10.805 44.3295 11.0342 44.4446C11.1681 44.5126 11.3163 44.5478 11.4664 44.5473H22.7343C22.9148 44.5519 23.0927 44.5037 23.2462 44.4084C23.3998 44.3132 23.5223 44.1751 23.5988 44.011C26.0307 38.9724 24.5566 31.3118 20.2819 26.7478Z"
|
||||
fill="url(#paint0_linear_2204_541)"
|
||||
/>
|
||||
<path
|
||||
d="M28.2171 11.9791C26.201 15.0912 25.026 18.6755 24.8074 22.3805C24.5889 26.0854 25.3342 29.7837 26.9704 33.1126L32.403 44.0113C32.4833 44.1724 32.6067 44.3079 32.7593 44.4026C32.912 44.4973 33.088 44.5475 33.2675 44.5476H44.5331C44.6602 44.5479 44.7861 44.523 44.9035 44.4743C45.0209 44.4257 45.1276 44.3543 45.2175 44.2642C45.3073 44.1741 45.3785 44.067 45.427 43.9492C45.4755 43.8314 45.5003 43.7052 45.5 43.5777C45.5001 43.4274 45.4659 43.2791 45.3999 43.1441L29.8619 11.9746C29.7881 11.8184 29.6717 11.6864 29.5261 11.594C29.3805 11.5016 29.2118 11.4525 29.0395 11.4525C28.8672 11.4525 28.6984 11.5016 28.5529 11.594C28.4073 11.6864 28.2908 11.8184 28.2171 11.9746V11.9791Z"
|
||||
fill="#2684FF"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_2204_541"
|
||||
x1="24.734"
|
||||
y1="29.2284"
|
||||
x2="16.1543"
|
||||
y2="44.0429"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#0052CC" />
|
||||
<stop offset="0.92" stop-color="#2684FF" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="p-4 md:p-6">
|
||||
<span className="block mb-1 text-xs font-semibold uppercase text-primary dark:text-primary">
|
||||
Atlassian API
|
||||
</span>
|
||||
<h3 className="text-xl font-semibold text-secondary-content">
|
||||
Atlassian
|
||||
</h3>
|
||||
<p className="mt-3 text-secondary-content">
|
||||
A software that develops products for software developers and
|
||||
developments.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-auto flex border-t border-base-200 divide-x divide-base-200">
|
||||
<a
|
||||
className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-es-xl bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
View sample
|
||||
</a>
|
||||
<a
|
||||
className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-ee-xl bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
View API
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="group flex flex-col h-full bg-base-100 border border-base-200 shadow-sm rounded-xl">
|
||||
<div className="h-52 flex flex-col justify-center items-center bg-rose-500 rounded-t-xl">
|
||||
<svg
|
||||
className="size-28"
|
||||
width="56"
|
||||
height="56"
|
||||
viewBox="0 0 56 56"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="56" height="56" rx="10" fill="base-100" />
|
||||
<g clip-path="url(#clip0_2204_541)">
|
||||
<path
|
||||
d="M37.0409 28.8697C33.1968 28.8697 30.0811 31.9854 30.0811 35.8288C30.0811 39.6726 33.1968 42.789 37.0409 42.789C40.8843 42.789 44 39.6726 44 35.8288C44 31.9854 40.8843 28.8697 37.0409 28.8697ZM18.9594 28.8701C15.116 28.8704 12 31.9854 12 35.8292C12 39.6726 15.116 42.7886 18.9594 42.7886C22.8032 42.7886 25.9192 39.6726 25.9192 35.8292C25.9192 31.9854 22.8032 28.8701 18.9591 28.8701H18.9594ZM34.9595 20.1704C34.9595 24.0138 31.8438 27.1305 28.0004 27.1305C24.1563 27.1305 21.0406 24.0138 21.0406 20.1704C21.0406 16.3269 24.1563 13.2109 28.0003 13.2109C31.8438 13.2109 34.9591 16.3269 34.9591 20.1704H34.9595Z"
|
||||
fill="url(#paint0_radial_2204_541)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="paint0_radial_2204_541"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(28.0043 29.3944) scale(21.216 19.6102)"
|
||||
>
|
||||
<stop stop-color="#FFB900" />
|
||||
<stop offset="0.6" stop-color="#F95D8F" />
|
||||
<stop offset="0.999" stop-color="#F95353" />
|
||||
</radialGradient>
|
||||
<clipPath id="clip0_2204_541">
|
||||
<rect
|
||||
width="32"
|
||||
height="29.5808"
|
||||
fill="base-100"
|
||||
transform="translate(12 13.2096)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="p-4 md:p-6">
|
||||
<span className="block mb-1 text-xs font-semibold uppercase text-rose-600 dark:text-rose-500">
|
||||
Asana API
|
||||
</span>
|
||||
<h3 className="text-xl font-semibold text-secondary-content">
|
||||
Asana
|
||||
</h3>
|
||||
<p className="mt-3 text-secondary-content">
|
||||
Track tasks and projects, use agile boards, measure progress.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-auto flex border-t border-base-200 divide-x divide-base-200">
|
||||
<a
|
||||
className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-es-xl bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
View sample
|
||||
</a>
|
||||
<a
|
||||
className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-ee-xl bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
View API
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="group flex flex-col h-full bg-base-100 border border-base-200 shadow-sm rounded-xl">
|
||||
<div className="h-52 flex flex-col justify-center items-center bg-amber-500 rounded-t-xl">
|
||||
<svg
|
||||
className="size-28"
|
||||
width="56"
|
||||
height="56"
|
||||
viewBox="0 0 56 56"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="56" height="56" rx="10" fill="base-100" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M23.7326 11.968C21.9637 11.9693 20.5321 13.4049 20.5334 15.1738C20.5321 16.9427 21.965 18.3782 23.7339 18.3795H26.9345V15.1751C26.9358 13.4062 25.5029 11.9706 23.7326 11.968C23.7339 11.968 23.7339 11.968 23.7326 11.968M23.7326 20.5184H15.2005C13.4316 20.5197 11.9987 21.9553 12 23.7242C11.9974 25.4931 13.4303 26.9286 15.1992 26.9312H23.7326C25.5016 26.9299 26.9345 25.4944 26.9332 23.7255C26.9345 21.9553 25.5016 20.5197 23.7326 20.5184V20.5184Z"
|
||||
fill="#36C5F0"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M44.0001 23.7242C44.0014 21.9553 42.5684 20.5197 40.7995 20.5184C39.0306 20.5197 37.5977 21.9553 37.599 23.7242V26.9312H40.7995C42.5684 26.9299 44.0014 25.4944 44.0001 23.7242ZM35.4666 23.7242V15.1738C35.4679 13.4062 34.0363 11.9706 32.2674 11.968C30.4985 11.9693 29.0656 13.4049 29.0669 15.1738V23.7242C29.0643 25.4931 30.4972 26.9286 32.2661 26.9312C34.035 26.9299 35.4679 25.4944 35.4666 23.7242Z"
|
||||
fill="#2EB67D"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M32.2661 44.0322C34.035 44.0309 35.4679 42.5953 35.4666 40.8264C35.4679 39.0575 34.035 37.622 32.2661 37.6207H29.0656V40.8264C29.0642 42.594 30.4972 44.0295 32.2661 44.0322ZM32.2661 35.4804H40.7995C42.5684 35.4791 44.0013 34.0436 44 32.2747C44.0026 30.5058 42.5697 29.0702 40.8008 29.0676H32.2674C30.4985 29.0689 29.0656 30.5045 29.0669 32.2734C29.0656 34.0436 30.4972 35.4791 32.2661 35.4804V35.4804Z"
|
||||
fill="#ECB22E"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M12 32.2746C11.9987 34.0435 13.4316 35.479 15.2005 35.4804C16.9694 35.479 18.4024 34.0435 18.401 32.2746V29.0688H15.2005C13.4316 29.0702 11.9987 30.5057 12 32.2746ZM20.5334 32.2746V40.825C20.5308 42.5939 21.9637 44.0295 23.7326 44.0321C25.5016 44.0308 26.9345 42.5952 26.9332 40.8263V32.2772C26.9358 30.5083 25.5029 29.0728 23.7339 29.0702C21.9637 29.0702 20.5321 30.5057 20.5334 32.2746C20.5334 32.2759 20.5334 32.2746 20.5334 32.2746Z"
|
||||
fill="#E01E5A"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="p-4 md:p-6">
|
||||
<span className="block mb-1 text-xs font-semibold uppercase text-amber-500">
|
||||
Slack API
|
||||
</span>
|
||||
<h3 className="text-xl font-semibold text-secondary-content">
|
||||
Slack
|
||||
</h3>
|
||||
<p className="mt-3 text-secondary-content">
|
||||
Email collaboration and email service desk made easy.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-auto flex border-t border-base-200 divide-x divide-base-200">
|
||||
<a
|
||||
className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-es-xl bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
View sample
|
||||
</a>
|
||||
<a
|
||||
className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-ee-xl bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
View API
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Card Blog --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,299 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Simple Card Link With Avatar And Title
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/CardSections/SimpleCardLinkWithAvatarAndTitle.tsx"
|
||||
<>
|
||||
{/* <!-- Card Section --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-6">
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
className="w-[38px] rounded-full"
|
||||
src="https://images.unsplash.com/photo-1486299267070-83823f5448dd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="ms-3">
|
||||
<h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
|
||||
London, UK
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ps-3">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
className="w-[38px] rounded-full"
|
||||
src="https://images.unsplash.com/photo-1612046264803-6d6b67fdee80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="ms-3">
|
||||
<h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
|
||||
Bristol, UK
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ps-3">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
className="w-[38px] rounded-full"
|
||||
src="https://images.unsplash.com/photo-1582542021865-bde52fd7c3cf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="ms-3">
|
||||
<h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
|
||||
Oxford, UK
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ps-3">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
className="w-[38px] rounded-full"
|
||||
src="https://images.unsplash.com/photo-1571044880241-95d4c9aa06f5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="ms-3">
|
||||
<h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
|
||||
Edinburgh, UK
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ps-3">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
className="w-[38px] rounded-full"
|
||||
src="https://images.unsplash.com/photo-1598964356161-754cc07fcd36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="ms-3">
|
||||
<h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
|
||||
Newcastle, UK
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ps-3">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
className="w-[38px] rounded-full"
|
||||
src="https://images.unsplash.com/photo-1566328386401-b2980125f6c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="ms-3">
|
||||
<h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
|
||||
Liverpool, UK
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ps-3">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
className="w-[38px] rounded-full"
|
||||
src="https://images.unsplash.com/photo-1597740049284-388659a41286?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="ms-3">
|
||||
<h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
|
||||
Manchester, UK
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ps-3">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Card Section --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Simple Card Link With Icon Title And Description
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/CardSections/SimpleCardLinkWithIconTitleAndDescription.tsx"
|
||||
<>
|
||||
{/* <!-- Card Section --> */}
|
||||
<div className="max-w-5xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-6">
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex">
|
||||
<svg
|
||||
className="mt-1 flex-shrink-0 w-5 text-secondary-content"
|
||||
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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
|
||||
<div className="grow ms-5">
|
||||
<h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
|
||||
Ask our community
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content">
|
||||
Get help from 40k+ Preline users
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex">
|
||||
<svg
|
||||
className="mt-1 flex-shrink-0 w-5 text-secondary-content"
|
||||
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"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
|
||||
<path d="M12 17h.01" />
|
||||
</svg>
|
||||
|
||||
<div className="grow ms-5">
|
||||
<h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
|
||||
Get help in the app
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content">
|
||||
Just head to «Help» in the app
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex">
|
||||
<svg
|
||||
className="mt-1 flex-shrink-0 w-5 text-secondary-content"
|
||||
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.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z" />
|
||||
<path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10" />
|
||||
</svg>
|
||||
|
||||
<div className="grow ms-5">
|
||||
<h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
|
||||
Email us
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content">
|
||||
Reach us at{" "}
|
||||
<span className="text-primary font-medium">
|
||||
info@site.com
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Card Section --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Image And Content With Stretched Buttons
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/CardSections/SimpleCardLinkWithTitleAndDescription.tsx"
|
||||
<>
|
||||
{/* <!-- Card Section --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-6">
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h3 className="group-hover:text-primary font-semibold text-secondary-content">
|
||||
Management
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content/50">
|
||||
4 job positions
|
||||
</p>
|
||||
</div>
|
||||
<div className="ps-3">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h3 className="group-hover:text-primary font-semibold text-secondary-content">
|
||||
App Development
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content/50">
|
||||
26 job positions
|
||||
</p>
|
||||
</div>
|
||||
<div className="ps-3">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h3 className="group-hover:text-primary font-semibold text-secondary-content">
|
||||
Arts & Entertainment
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content/50">
|
||||
9 job positions
|
||||
</p>
|
||||
</div>
|
||||
<div className="ps-3">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h3 className="group-hover:text-primary font-semibold text-secondary-content">
|
||||
Accounting
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content/50">
|
||||
11 job positions
|
||||
</p>
|
||||
</div>
|
||||
<div className="ps-3">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h3 className="group-hover:text-primary font-semibold text-secondary-content">
|
||||
UI Designer
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content/50">
|
||||
37 job positions
|
||||
</p>
|
||||
</div>
|
||||
<div className="ps-3">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h3 className="group-hover:text-primary font-semibold text-secondary-content">
|
||||
Apps
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content/50">
|
||||
2 job positions
|
||||
</p>
|
||||
</div>
|
||||
<div className="ps-3">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h3 className="group-hover:text-primary font-semibold text-secondary-content">
|
||||
Content Writer
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content/50">
|
||||
10 job positions
|
||||
</p>
|
||||
</div>
|
||||
<div className="ps-3">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="p-4 md:p-5">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h3 className="group-hover:text-primary font-semibold text-secondary-content">
|
||||
Analytics
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content/50">
|
||||
14 job positions
|
||||
</p>
|
||||
</div>
|
||||
<div className="ps-3">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Card Section --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"label": "Card Sections",
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# In Card
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/ClientSections/InCard.tsx"
|
||||
<>
|
||||
{/* <!-- Clients --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Title --> */}
|
||||
<div className="sm:w-1/2 xl:w-1/3 mx-auto text-center mb-6 md:mb-12">
|
||||
<h2 className="text-xl font-semibold md:text-2xl md:leading-tight text-secondary-content">
|
||||
Trusted by Open Source, enterprise, and more than 99,000 of you
|
||||
</h2>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-5 gap-3 lg:gap-6">
|
||||
<div className="p-4 md:p-7 bg-base-300 rounded-lg">
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto text-secondary-content"
|
||||
enable-background="new 0 0 2499 614"
|
||||
viewBox="0 0 2499 614"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m431.7 0h-235.5v317.8h317.8v-235.5c0-45.6-36.7-82.3-82.3-82.3zm-308.9 0h-40.5c-45.6 0-82.3 36.7-82.3 82.3v40.5h122.8zm-122.8 196.2h122.8v122.8h-122.8zm392.5 317.8h40.5c45.6 0 82.3-36.7 82.3-82.3v-39.2h-122.8zm-196.3-121.5h122.8v122.8h-122.8zm-196.2 0v40.5c0 45.6 36.7 82.3 82.3 82.3h40.5v-122.8zm828-359.6h-48.1v449.4h254.5v-43h-206.4zm360.8 119c-93.7 0-159.5 69.6-159.5 169.6v11.5c1.3 43 20.3 83.6 51.9 113.9 30.4 27.9 69.6 44.3 111.4 44.3h6.3c44.3 0 86.1-16.5 119-44.3l1.3-1.3-21.5-35.4-2.5 1.3c-26.6 24.1-59.5 38-94.9 38-58.2 0-117.7-38-121.5-122.8h243.1v-2.5s1.3-15.2 1.3-22.8c-.3-91.2-53.4-149.5-134.4-149.5zm-108.9 134.2c10.1-57 51.9-93.7 106.3-93.7 40.5 0 84.8 24.1 88.6 93.7zm521.6-96.2v16.5c-20.3-34.2-58.2-55.7-97.5-55.7h-3.8c-86.1 0-145.6 68.4-145.6 168.4 0 101.3 57 169.6 141.8 169.6 67.1 0 97.5-40.5 107.6-58.2v49.4h45.6v-447h-46.8v157zm-98.8 257c-59.5 0-98.7-50.6-98.7-126.6 0-73.4 41.8-125.3 100-125.3 49.4 0 98.7 39.2 98.7 125.3 0 93.7-51.9 126.6-100 126.6zm424.1-250.7v2.5c-8.9-15.2-36.7-48.1-103.8-48.1-84.8 0-140.5 64.6-140.5 163.3s58.2 165.8 144.3 165.8c46.8 0 78.5-16.5 100-50.6v44.3c0 62-39.2 97.5-108.9 97.5-29.1 0-59.5-7.6-86.1-21.5l-2.5-1.3-17.7 39.2 2.5 1.3c32.9 16.5 69.6 25.3 105.1 25.3 74.7 0 154.4-38 154.4-143.1v-311.3h-46.8zm-93.7 241.8c-62 0-102.5-48.1-102.5-122.8 0-76 35.4-119 96.2-119 67.1 0 98.7 39.2 98.7 119 1.3 78.5-31.6 122.8-92.4 122.8zm331.7-286.1c-93.7 0-158.2 69.6-158.2 168.4v11.4c1.3 43 20.3 83.6 51.9 113.9 30.4 27.9 69.6 44.3 111.4 44.3h6.3c44.3 0 86.1-16.5 119-44.3l1.3-1.3-22.8-35.4-2.5 1.3c-26.6 24.1-59.5 38-94.9 38-58.2 0-117.7-38-121.5-122.8h244.2v-2.5s1.3-15.2 1.3-22.8c0-89.9-53.2-148.2-135.5-148.2zm-107.6 134.2c10.1-57 51.9-93.7 106.3-93.7 40.5 0 84.8 24.1 88.6 93.7zm440.6-127.9c-6.3-1.3-11.4-1.3-17.7-2.5-44.3 0-81 27.9-100 74.7v-72.2h-46.8l1.3 320.3v2.5h48.1v-135.4c0-20.3 2.5-41.8 8.9-60.8 15.2-49.4 49.4-81 89.9-81 5.1 0 10.1 0 15.2 1.3h2.5v-46.8z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-7 bg-base-300 rounded-lg">
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto"
|
||||
fill="none"
|
||||
viewBox="-0.3 0 320.3999999999999 99.9"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="2500"
|
||||
height="779"
|
||||
>
|
||||
<path
|
||||
d="M168.7 25.1c0 3.6-2.9 6.5-6.5 6.5s-6.5-2.9-6.5-6.5 2.8-6.5 6.5-6.5c3.7.1 6.5 3 6.5 6.5zm-26.8 13.1v1.6s-3.1-4-9.7-4c-10.9 0-19.4 8.3-19.4 19.8 0 11.4 8.4 19.8 19.4 19.8 6.7 0 9.7-4.1 9.7-4.1V73c0 .8.6 1.4 1.4 1.4h8.1V36.8h-8.1c-.8 0-1.4.7-1.4 1.4zm0 24.1c-1.5 2.2-4.5 4.1-8.1 4.1-6.4 0-11.3-4-11.3-10.8s4.9-10.8 11.3-10.8c3.5 0 6.7 2 8.1 4.1zm15.5-25.5h9.6v37.6h-9.6zm143.4-1c-6.6 0-9.7 4-9.7 4V18.7h-9.6v55.7h8.1c.8 0 1.4-.7 1.4-1.4v-1.7s3.1 4.1 9.7 4.1c10.9 0 19.4-8.4 19.4-19.8s-8.5-19.8-19.3-19.8zm-1.6 30.5c-3.7 0-6.6-1.9-8.1-4.1V48.8c1.5-2 4.7-4.1 8.1-4.1 6.4 0 11.3 4 11.3 10.8s-4.9 10.8-11.3 10.8zm-22.7-14.2v22.4h-9.6V53.2c0-6.2-2-8.7-7.4-8.7-2.9 0-5.9 1.5-7.8 3.7v26.2h-9.6V36.8h7.6c.8 0 1.4.7 1.4 1.4v1.6c2.8-2.9 6.5-4 10.2-4 4.2 0 7.7 1.2 10.5 3.6 3.4 2.8 4.7 6.4 4.7 12.7zm-57.7-16.3c-6.6 0-9.7 4-9.7 4V18.7h-9.6v55.7h8.1c.8 0 1.4-.7 1.4-1.4v-1.7s3.1 4.1 9.7 4.1c10.9 0 19.4-8.4 19.4-19.8.1-11.4-8.4-19.8-19.3-19.8zm-1.6 30.5c-3.7 0-6.6-1.9-8.1-4.1V48.8c1.5-2 4.7-4.1 8.1-4.1 6.4 0 11.3 4 11.3 10.8s-4.9 10.8-11.3 10.8zm-26-30.5c2.9 0 4.4.5 4.4.5v8.9s-8-2.7-13 3v26.3H173V36.8h8.1c.8 0 1.4.7 1.4 1.4v1.6c1.8-2.1 5.7-4 8.7-4zM91.5 71c-.5-1.2-1-2.5-1.5-3.6-.8-1.8-1.6-3.5-2.3-5.1l-.1-.1C80.7 47.2 73.3 32 65.5 17l-.3-.6c-.8-1.5-1.6-3.1-2.4-4.7-1-1.8-2-3.7-3.6-5.5C56 2.2 51.4 0 46.5 0c-5 0-9.5 2.2-12.8 6-1.5 1.8-2.6 3.7-3.6 5.5-.8 1.6-1.6 3.2-2.4 4.7l-.3.6C19.7 31.8 12.2 47 5.3 62l-.1.2c-.7 1.6-1.5 3.3-2.3 5.1-.5 1.1-1 2.3-1.5 3.6C.1 74.6-.3 78.1.2 81.7c1.1 7.5 6.1 13.8 13 16.6 2.6 1.1 5.3 1.6 8.1 1.6.8 0 1.8-.1 2.6-.2 3.3-.4 6.7-1.5 10-3.4 4.1-2.3 8-5.6 12.4-10.4 4.4 4.8 8.4 8.1 12.4 10.4 3.3 1.9 6.7 3 10 3.4.8.1 1.8.2 2.6.2 2.8 0 5.6-.5 8.1-1.6 7-2.8 11.9-9.2 13-16.6.8-3.5.4-7-.9-10.7zm-45.1 5.2C41 69.4 37.5 63 36.3 57.6c-.5-2.3-.6-4.3-.3-6.1.2-1.6.8-3 1.6-4.2 1.9-2.7 5.1-4.4 8.8-4.4s7 1.6 8.8 4.4c.8 1.2 1.4 2.6 1.6 4.2.3 1.8.2 3.9-.3 6.1-1.2 5.3-4.7 11.7-10.1 18.6zm39.9 4.7c-.7 5.2-4.2 9.7-9.1 11.7-2.4 1-5 1.3-7.6 1-2.5-.3-5-1.1-7.6-2.6-3.6-2-7.2-5.1-11.4-9.7 6.6-8.1 10.6-15.5 12.1-22.1.7-3.1.8-5.9.5-8.5-.4-2.5-1.3-4.8-2.7-6.8-3.1-4.5-8.3-7.1-14.1-7.1s-11 2.7-14.1 7.1c-1.4 2-2.3 4.3-2.7 6.8-.4 2.6-.3 5.5.5 8.5 1.5 6.6 5.6 14.1 12.1 22.2-4.1 4.6-7.8 7.7-11.4 9.7-2.6 1.5-5.1 2.3-7.6 2.6-2.7.3-5.3-.1-7.6-1-4.9-2-8.4-6.5-9.1-11.7-.3-2.5-.1-5 .9-7.8.3-1 .8-2 1.3-3.2.7-1.6 1.5-3.3 2.3-5l.1-.2c6.9-14.9 14.3-30.1 22-44.9l.3-.6c.8-1.5 1.6-3.1 2.4-4.6.8-1.6 1.7-3.1 2.8-4.4 2.1-2.4 4.9-3.7 8-3.7s5.9 1.3 8 3.7c1.1 1.3 2 2.8 2.8 4.4.8 1.5 1.6 3.1 2.4 4.6l.3.6c7.6 14.9 15 30.1 21.9 45v.1c.8 1.6 1.5 3.4 2.3 5 .5 1.2 1 2.2 1.3 3.2.8 2.6 1.1 5.1.7 7.7z"
|
||||
fill="#ff5a5f"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-7 bg-base-300 rounded-lg">
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto"
|
||||
viewBox="0 -8.881784197001252e-16 267.51517722360785 65.24679557585003"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="2500"
|
||||
height="610"
|
||||
>
|
||||
<path
|
||||
d="M263.043 56.411a4.418 4.418 0 1 0 .085 0zm0 8.33a3.874 3.874 0 1 1 3.809-3.938v.065a3.791 3.791 0 0 1-3.708 3.871h-.1m-16.96-9.535h-9.6V40.17c0-3.585-.064-8.2-4.993-8.2-5 0-5.765 3.906-5.765 7.939v15.294h-9.6V24.287h9.216v4.225h.129a10.1 10.1 0 0 1 9.093-4.994c9.73 0 11.524 6.4 11.524 14.726zm-40.79-35.143a5.571 5.571 0 1 1 5.57-5.572 5.571 5.571 0 0 1-5.57 5.572m4.8 35.143h-9.61V24.287h9.61zM250.87.004h-55.21a4.728 4.728 0 0 0-4.781 4.67v55.439a4.731 4.731 0 0 0 4.781 4.675h55.21a4.741 4.741 0 0 0 4.8-4.675V4.67a4.738 4.738 0 0 0-4.8-4.67m-86.12 31.749c-4.8 0-7.68 3.205-7.68 7.875s2.879 7.878 7.68 7.878 7.687-3.2 7.687-7.878-2.881-7.875-7.687-7.875m16.525 23.437h-8.838v-4.1h-.131a12.071 12.071 0 0 1-9.544 4.868c-9.224 0-15.3-6.657-15.3-16.071 0-8.646 5.377-16.585 14.216-16.585 3.973 0 7.684 1.087 9.861 4.1h.126V9.577h9.609zm-46.139-19.048a5.756 5.756 0 0 0-5.894-5.89 6.406 6.406 0 0 0-6.784 5.89zm8.132 13.7a16.909 16.909 0 0 1-13.128 6.151c-9.6 0-17.286-6.408-17.286-16.331s7.685-16.328 17.286-16.328c8.973 0 14.6 6.4 14.6 16.328v3.01h-22.282a7.171 7.171 0 0 0 7.235 6.019 8.193 8.193 0 0 0 6.851-3.778zM47.834 24.279h9.219v4.225h.131a10.085 10.085 0 0 1 9.09-4.994c9.735 0 11.527 6.405 11.527 14.726V55.19h-9.6V40.159c0-3.588-.066-8.2-5-8.2-4.99 0-5.76 3.907-5.76 7.939v15.288h-9.6zM82.669 9.58h9.6v27.265l10.88-12.583h11.77l-12.6 14.313 12.335 16.63h-12.066L92.397 39.923h-.126v15.28h-9.6zM32.911 24.276h9.6v30.916h-9.6zm4.8-15.37a5.569 5.569 0 1 1-5.57 5.569 5.569 5.569 0 0 1 5.57-5.569M0 9.587h9.993v36.4h18.5v9.222H0zm263.744 51.522a1.2 1.2 0 0 0 1.21-1.269c0-.9-.543-1.33-1.657-1.33h-1.8v4.712h.677v-2.054h.832l.019.025 1.291 2.029h.724l-1.389-2.1zm-.783-.472h-.785v-1.593h.995c.514 0 1.1.084 1.1.757 0 .774-.593.836-1.314.836"
|
||||
fill="#0B65C2"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-7 bg-base-300 rounded-lg">
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 127 33"
|
||||
>
|
||||
<path
|
||||
d="M9.3 16.5C9.3 9 14.3 2.7 21.2.7a16.5 16.5 0 1 0 0 31.6c-6.9-2-11.9-8.3-11.9-15.8Z"
|
||||
fill="#1F4EF5"
|
||||
/>
|
||||
<path
|
||||
d="M21.7 10c4 0 7.4 2.8 8.5 6.4a8.9 8.9 0 1 0-17 0c1-3.6 4.4-6.3 8.5-6.3Z"
|
||||
fill="#1F4EF5"
|
||||
/>
|
||||
<path
|
||||
d="M24.8 19.4c0 3-2 5.5-4.8 6.3A6.6 6.6 0 1 0 20 13c2.8.8 4.8 3.4 4.8 6.4Z"
|
||||
fill="#1F4EF5"
|
||||
/>
|
||||
<path
|
||||
d="M39.6 13.5A4.4 4.4 0 0 1 44 9.1h1.3v2.7l-1 .2-1 .6-.2.4-.1.5h2.3v3H43v9.2h-3.4v-9.3h-1.3v-2.9h1.3ZM55.7 13.5h3.4v6.1a6.9 6.9 0 0 1-1.7 4.6 6 6 0 0 1-4.5 1.8c-1 0-1.8-.1-2.5-.5a6 6 0 0 1-3.2-3.4c-.3-.8-.4-1.6-.4-2.5v-6H50v6c0 .5 0 1 .2 1.3l.5 1c.2.4.5.6.9.8.3.2.8.3 1.2.3a2.6 2.6 0 0 0 2.1-1c.3-.3.4-.7.5-1l.2-1.4v-6ZM61.2 25.7V9.5h3.4v16.2h-3.4ZM66.9 25.7V9.5h3.3v16.2H67ZM78.5 21.2l3.3-7.7h3.7l-5.7 12.2h-2.7l-5.6-12.2H75l3.4 7.7ZM87 13.5h3.3v12.2H87V13.5Zm1.6-5 .8.1.6.4.4.7.2.7a1.9 1.9 0 0 1-.6 1.4l-.6.4a2 2 0 0 1-.8.1c-.5 0-1-.2-1.3-.5a2 2 0 0 1-.4-2.1c0-.3.2-.5.4-.7l.6-.4.7-.1ZM98.8 13.2a6.7 6.7 0 0 1 4.8 1.9 6.3 6.3 0 0 1 1.9 5.7h-9.8a3.3 3.3 0 0 0 3.2 2.2c.5 0 1-.1 1.4-.4.5-.2.9-.5 1.2-1h3.7c-.2.7-.5 1.3-1 1.8a6.1 6.1 0 0 1-3.3 2.3 7 7 0 0 1-6.9-1.6 6.1 6.1 0 0 1-2-4.5 6.1 6.1 0 0 1 2-4.5c.7-.6 1.4-1 2.2-1.4.8-.3 1.7-.5 2.6-.5Zm3.2 5.2c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.3-.7-2-.7s-1.4.3-2 .7c-.5.4-.9.9-1.1 1.5h6.3ZM123 13.5h3.6l-5 12.2H119l-2.5-6.5-2.5 6.5h-2.7l-5-12.2h3.6l2.7 7 2.8-7h2.2l2.8 7 2.7-7Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-7 bg-base-300 rounded-lg">
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
x="0"
|
||||
y="0"
|
||||
viewBox="0 0 88 22"
|
||||
enable-background="new 0 0 88 22"
|
||||
>
|
||||
<path
|
||||
d="M36.3 14.6a7.3 7.3 0 0 1-5.6 2.8c-3.8 0-6.8-2.7-6.8-6.2a6 6 0 0 1 2-4.5A6 6 0 0 1 30.5 5c2.2 0 4.3 1 5.6 2.8l-2.5 1.8a3.7 3.7 0 0 0-3.1-1.8 3.5 3.5 0 0 0-3.5 3.5c.1 2 1.7 3.5 3.6 3.5 1.3 0 2.5-.6 3.2-1.7l2.5 1.5z"
|
||||
fill="#5A5A5A"
|
||||
/>
|
||||
<path d="M37.7 0H40.8V17.1H37.7z" fill="#5A5A5A" />
|
||||
<path
|
||||
d="M49.1 14.7c2 0 3.7-1.6 3.8-3.6-.1-2-1.8-3.6-3.8-3.6s-3.7 1.6-3.8 3.6c.1 2 1.7 3.6 3.8 3.6m0-9.8c1.7-.1 3.4.5 4.7 1.7 1.3 1.2 2 2.8 2.1 4.5a6.4 6.4 0 0 1-2.1 4.5 6.4 6.4 0 0 1-4.7 1.7c-3.8 0-6.8-2.7-6.8-6.2s3-6.2 6.8-6.2"
|
||||
fill="#5A5A5A"
|
||||
/>
|
||||
<path
|
||||
d="M55.3 5.1 59 5.1 62 11.5 65.2 5.1 68.6 5.1 62 17.8z"
|
||||
fill="#5A5A5A"
|
||||
/>
|
||||
<path
|
||||
d="M77.5 9.4a3 3 0 0 0-2.9-1.9c-1.3 0-2.5.7-3.1 1.9h6zm2 6.3a7 7 0 0 1-4.6 1.6c-3.8 0-6.8-2.7-6.8-6.2 0-1.7.7-3.3 1.9-4.5a6 6 0 0 1 4.6-1.7c1.7-.1 3.3.6 4.5 1.8s1.8 2.8 1.7 4.5v.8h-9.6a3.9 3.9 0 0 0 6.5 1.5l1.8 2.2zm2.8-5.3c0-2.9 2.2-5.2 5.7-5.2V8c-.7 0-1.5.3-2 .8s-.7 1.3-.6 2v6.3h-3.1v-6.7z"
|
||||
fill="#5A5A5A"
|
||||
/>
|
||||
<path
|
||||
d="M9.7 5.6a5 5 0 0 0-8.3-3.5C0 3.5-.4 5.6.3 7.4s2.5 3 4.5 3h4.9V5.6zm1.4 0a5 5 0 0 1 8.3-3.5c1.4 1.4 1.8 3.5 1.1 5.3s-2.5 3-4.5 3h-4.9V5.6zm0 11a5 5 0 0 0 8.3 3.5c1.4-1.4 1.8-3.5 1.1-5.3s-2.5-3-4.5-3h-4.9v4.8zm-6.3 3.5c1.9 0 3.5-1.5 3.5-3.5v-3.5H4.8c-1.9 0-3.5 1.5-3.5 3.5s1.6 3.5 3.5 3.5zm4.9-3.5a5 5 0 0 1-8.3 3.5C0 18.7-.4 16.6.3 14.8s2.5-3 4.5-3h4.9v4.8z"
|
||||
fill="#280"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-7 bg-base-300 rounded-lg">
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto"
|
||||
width="2500"
|
||||
height="728"
|
||||
viewBox="0 0 512 149"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid"
|
||||
>
|
||||
<path
|
||||
d="M.06 27.679h17.852v39.662h37.651V27.679h17.875v97.358H55.563V84.542H17.912v40.495H.06V27.679zM129.993 93.326c0 8.15-6.64 14.782-14.788 14.782-8.151 0-14.787-6.632-14.787-14.782V51.41h-16.93v41.916c0 17.487 14.229 31.711 31.717 31.711 17.484 0 31.712-14.224 31.712-31.711V51.41h-16.924v41.916M194.179 51.901c-8.398 0-14.26 2.437-19.921 7.994V27.679h-16.985v59.705c0 22.348 16.158 37.653 34.311 37.653 20.181 0 37.863-15.578 37.863-36.567 0-20.723-16.305-36.569-35.268-36.569zm.422 57.423c-11.509 0-20.31-9.612-20.31-20.854 0-11.244 8.801-20.859 20.31-20.859 9.752 0 18.558 9.615 18.558 20.859 0 11.242-8.806 20.854-18.558 20.854zM257.974 56.18c0-8.538 5.689-11.245 11.917-11.245 5.014 0 11.649 3.792 15.979 8.398l11.103-13.001c-5.549-7.448-16.788-12.596-25.998-12.596-18.421 0-31.694 10.7-31.694 28.444 0 32.91 40.497 22.478 40.497 40.902 0 5.682-5.551 10.698-11.913 10.698-10.026 0-13.278-4.876-17.881-10.024l-12.327 12.729c7.86 9.617 17.608 14.495 29.257 14.495 17.47 0 31.556-10.835 31.556-27.767 0-36.566-40.496-25.188-40.496-41.033M343.184 50.947c-18.151 0-34.311 15.296-34.311 37.649v59.859h16.984v-32.369c5.662 5.553 11.521 7.994 19.922 7.994 18.962 0 35.269-15.844 35.269-36.567 0-20.992-17.687-36.566-37.864-36.566zm3.018 57.425c-11.508 0-20.31-9.625-20.31-20.859 0-11.244 8.802-20.859 20.31-20.859 9.75 0 18.557 9.615 18.557 20.859 0 11.234-8.807 20.859-18.557 20.859zM506.069 109.324c-10.018 0-12.862-4.332-12.862-10.971V68.965h15.572V54.069h-15.572v-19.64l-17.195 7.718v59.863c0 15.306 10.56 23.027 25.045 23.027 2.167 0 5.15-.14 6.777-.541l4.199-15.438c-1.896.131-4.062.266-5.964.266"
|
||||
fill="#45535E"
|
||||
/>
|
||||
<path
|
||||
d="M461.278 69.831c-3.256-5.602-7.836-10.093-13.562-13.474-4.279-2.491-8.716-4.072-13.716-4.751v-17.8c5-2.123 8.103-6.822 8.103-12.304 0-7.472-5.992-13.527-13.458-13.527-7.472 0-13.569 6.055-13.569 13.527 0 5.482 2.924 10.181 7.924 12.304v17.808c-4 .578-8.148 1.825-11.936 3.741-7.737-5.876-33.107-25.153-47.948-36.412.352-1.269.623-2.577.623-3.957 0-8.276-6.702-14.984-14.981-14.984S333.78 6.71 333.78 14.986c0 8.275 6.706 14.985 14.985 14.985 2.824 0 5.436-.826 7.69-2.184l3.132 2.376 43.036 31.008c-2.275 2.089-4.394 4.465-6.089 7.131C393.099 73.737 391 79.717 391 86.24v1.361c0 4.579.87 8.902 2.352 12.963 1.305 3.546 3.213 6.77 5.576 9.685l-14.283 14.318a11.501 11.501 0 0 0-12.166 2.668 11.499 11.499 0 0 0-3.388 8.19c.001 3.093 1.206 6 3.394 8.187a11.5 11.5 0 0 0 8.188 3.394 11.51 11.51 0 0 0 8.191-3.394 11.514 11.514 0 0 0 3.39-8.187c0-1.197-.185-2.365-.533-3.475l14.763-14.765c2.024 1.398 4.21 2.575 6.56 3.59 4.635 2.004 9.751 3.225 15.35 3.225h1.026c6.19 0 12.029-1.454 17.518-4.428 5.784-3.143 10.311-7.441 13.731-12.928 3.438-5.502 5.331-11.581 5.331-18.269v-.334c0-6.579-1.523-12.649-4.722-18.21zm-18.038 30.973c-4.007 4.453-8.613 7.196-13.82 7.196h-.858c-2.974 0-5.883-.822-8.731-2.317-3.21-1.646-5.65-3.994-7.647-6.967-2.064-2.918-3.184-6.104-3.184-9.482v-1.026c0-3.321.637-6.47 2.243-9.444 1.717-3.251 4.036-5.779 7.12-7.789 3.028-1.996 6.262-2.975 9.864-2.975h.335c3.266 0 6.358.644 9.276 2.137 2.973 1.592 5.402 3.767 7.285 6.628 1.829 2.862 2.917 5.949 3.267 9.312.055.699.083 1.415.083 2.099 0 4.564-1.744 8.791-5.233 12.628z"
|
||||
fill="#F8761F"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-7 bg-base-300 rounded-lg">
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="2500"
|
||||
height="534"
|
||||
viewBox="0 0 1033.746 220.695"
|
||||
>
|
||||
<path
|
||||
d="M1033.746 99.838v-18.18h-22.576V53.395l-.76.234-21.205 6.488-.418.127v21.415h-33.469v-11.93c0-5.555 1.242-9.806 3.69-12.641 2.431-2.801 5.908-4.225 10.343-4.225 3.188 0 6.489.751 9.811 2.232l.833.372V36.321l-.392-.144c-3.099-1.114-7.314-1.675-12.539-1.675-6.585 0-12.568 1.433-17.786 4.273-5.221 2.844-9.328 6.904-12.205 12.066-2.867 5.156-4.322 11.111-4.322 17.701v13.116h-15.72v18.18h15.72v76.589h22.567V99.838h33.469v48.671c0 20.045 9.455 30.203 28.102 30.203 3.064 0 6.289-.359 9.582-1.062 3.352-.722 5.635-1.443 6.979-2.213l.297-.176v-18.348l-.918.607c-1.225.816-2.75 1.483-4.538 1.979-1.796.505-3.296.758-4.458.758-4.368 0-7.6-1.177-9.605-3.5-2.028-2.344-3.057-6.443-3.057-12.177V99.838h22.575zM866.635 160.26c-8.191 0-14.649-2.716-19.2-8.066-4.579-5.377-6.899-13.043-6.899-22.783 0-10.049 2.32-17.914 6.901-23.386 4.554-5.436 10.95-8.195 19.014-8.195 7.825 0 14.054 2.635 18.516 7.836 4.484 5.228 6.76 13.03 6.76 23.196 0 10.291-2.14 18.196-6.36 23.484-4.191 5.248-10.493 7.914-18.732 7.914m1.003-80.885c-15.627 0-28.039 4.579-36.889 13.61-8.844 9.032-13.328 21.531-13.328 37.153 0 14.838 4.377 26.773 13.011 35.468 8.634 8.698 20.384 13.104 34.921 13.104 15.148 0 27.313-4.643 36.159-13.799 8.845-9.146 13.326-21.527 13.326-36.784 0-15.07-4.205-27.094-12.502-35.731-8.301-8.641-19.977-13.021-34.698-13.021m-86.602 0c-10.63 0-19.423 2.719-26.14 8.08-6.758 5.393-10.186 12.466-10.186 21.025 0 4.449.74 8.401 2.196 11.753 1.465 3.363 3.732 6.324 6.744 8.809 2.989 2.465 7.603 5.047 13.717 7.674 5.14 2.115 8.973 3.904 11.408 5.314 2.38 1.382 4.069 2.771 5.023 4.124.927 1.324 1.397 3.136 1.397 5.372 0 6.367-4.768 9.465-14.579 9.465-3.639 0-7.79-.76-12.337-2.258a46.347 46.347 0 0 1-12.634-6.406l-.937-.672v21.727l.344.16c3.193 1.474 7.219 2.717 11.964 3.695 4.736.979 9.039 1.477 12.777 1.477 11.535 0 20.824-2.732 27.602-8.125 6.821-5.43 10.278-12.67 10.278-21.525 0-6.388-1.861-11.866-5.529-16.284-3.643-4.382-9.966-8.405-18.785-11.961-7.026-2.82-11.527-5.161-13.384-6.958-1.79-1.736-2.699-4.191-2.699-7.3 0-2.756 1.122-4.964 3.425-6.752 2.321-1.797 5.552-2.711 9.604-2.711 3.76 0 7.607.594 11.433 1.758 3.823 1.164 7.181 2.723 9.984 4.63l.922.63v-20.61l-.354-.152c-2.586-1.109-5.996-2.058-10.138-2.828-4.123-.765-7.863-1.151-11.116-1.151m-95.157 80.885c-8.189 0-14.649-2.716-19.199-8.066-4.58-5.377-6.896-13.041-6.896-22.783 0-10.049 2.319-17.914 6.901-23.386 4.55-5.436 10.945-8.195 19.013-8.195 7.822 0 14.051 2.635 18.514 7.836 4.485 5.228 6.76 13.03 6.76 23.196 0 10.291-2.141 18.196-6.361 23.484-4.191 5.248-10.49 7.914-18.732 7.914m1.006-80.885c-15.631 0-28.044 4.579-36.889 13.61-8.844 9.032-13.331 21.531-13.331 37.153 0 14.844 4.38 26.773 13.014 35.468 8.634 8.698 20.383 13.104 34.92 13.104 15.146 0 27.314-4.643 36.16-13.799 8.843-9.146 13.326-21.527 13.326-36.784 0-15.07-4.206-27.094-12.505-35.731-8.303-8.641-19.977-13.021-34.695-13.021M602.409 98.07V81.658h-22.292v94.767h22.292v-48.477c0-8.243 1.869-15.015 5.557-20.13 3.641-5.054 8.493-7.615 14.417-7.615 2.008 0 4.262.331 6.703.986 2.416.651 4.166 1.358 5.198 2.102l.937.679V81.496l-.361-.155c-2.076-.882-5.013-1.327-8.729-1.327-5.602 0-10.615 1.8-14.909 5.344-3.769 3.115-6.493 7.386-8.576 12.712h-.237zm-62.213-18.695c-10.227 0-19.349 2.193-27.108 6.516-7.775 4.333-13.788 10.519-17.879 18.385-4.073 7.847-6.141 17.013-6.141 27.235 0 8.954 2.005 17.171 5.968 24.413 3.965 7.254 9.577 12.929 16.681 16.865 7.094 3.931 15.293 5.924 24.371 5.924 10.594 0 19.639-2.118 26.891-6.295l.293-.168v-20.423l-.937.684c-3.285 2.393-6.956 4.303-10.906 5.679-3.94 1.375-7.532 2.07-10.682 2.07-8.747 0-15.769-2.737-20.866-8.133-5.108-5.403-7.698-12.99-7.698-22.537 0-9.607 2.701-17.389 8.024-23.131 5.307-5.725 12.342-8.629 20.908-8.629 7.327 0 14.467 2.481 21.222 7.381l.935.679V84.371l-.302-.17c-2.542-1.423-6.009-2.598-10.313-3.489-4.286-.889-8.478-1.337-12.461-1.337m-66.481 2.284h-22.292v94.766h22.292V81.659zm-10.918-40.371c-3.669 0-6.869 1.249-9.498 3.724-2.64 2.482-3.979 5.607-3.979 9.295 0 3.63 1.323 6.698 3.938 9.114 2.598 2.409 5.808 3.63 9.54 3.63 3.731 0 6.953-1.221 9.582-3.626 2.646-2.42 3.988-5.487 3.988-9.118 0-3.559-1.306-6.652-3.879-9.195-2.571-2.538-5.833-3.824-9.692-3.824m-55.62 33.379v101.758h22.75V44.189H398.44l-40.022 98.221-38.839-98.221H286.81v132.235h21.379V74.657h.734l41.013 101.768h16.134l40.373-101.758h.734z"
|
||||
fill="#706d6e"
|
||||
/>
|
||||
<path d="M104.868 104.868H0V0h104.868v104.868z" fill="#f1511b" />
|
||||
<path
|
||||
d="M220.654 104.868H115.788V0h104.866v104.868z"
|
||||
fill="#80cc28"
|
||||
/>
|
||||
<path
|
||||
d="M104.865 220.695H0V115.828h104.865v104.867z"
|
||||
fill="#00adef"
|
||||
/>
|
||||
<path
|
||||
d="M220.654 220.695H115.788V115.828h104.866v104.867z"
|
||||
fill="#fbbc09"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-7 bg-base-300 rounded-lg">
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto text-secondary-content"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="-4.126838974812941 0.900767442746961 939.436838974813 230.18142889845947"
|
||||
width="2500"
|
||||
height="607"
|
||||
>
|
||||
<path
|
||||
d="M667.21 90.58c-13.76 0-23.58 4.7-28.4 13.6l-2.59 4.82V92.9h-22.39v97.86h23.55v-58.22c0-13.91 7.56-21.89 20.73-21.89 12.56 0 19.76 7.77 19.76 21.31v58.8h23.56v-63c0-23.3-12.79-37.18-34.22-37.18zm-114.21 0c-27.79 0-45 17.34-45 45.25v13.74c0 26.84 17.41 43.51 45.44 43.51 18.75 0 31.89-6.87 40.16-21l-14.6-8.4c-6.11 8.15-15.87 13.2-25.55 13.2-14.19 0-22.66-8.76-22.66-23.44v-3.89h65.73v-16.23c0-26-17.07-42.74-43.5-42.74zm22.09 43.15h-44.38v-2.35c0-16.11 7.91-25 22.27-25 13.83 0 22.09 8.76 22.09 23.44zm360.22-56.94V58.07h-81.46v18.72h28.56V172h-28.56v18.72h81.46V172h-28.57V76.79zM317.65 55.37c-36.38 0-59 22.67-59 59.18v19.74c0 36.5 22.61 59.18 59 59.18s59-22.68 59-59.18v-19.74c-.01-36.55-22.65-59.18-59-59.18zm34.66 80.27c0 24.24-12.63 38.14-34.66 38.14S283 159.88 283 135.64v-22.45c0-24.24 12.64-38.14 34.66-38.14s34.66 13.9 34.66 38.14zm98.31-45.06c-12.36 0-23.06 5.12-28.64 13.69l-2.53 3.9V92.9h-22.4v131.53h23.56v-47.64l2.52 3.74c5.3 7.86 15.65 12.55 27.69 12.55 20.31 0 40.8-13.27 40.8-42.93v-16.64c0-21.37-12.63-42.93-41-42.93zM468.06 149c0 15.77-9.2 25.57-24 25.57-13.8 0-23.43-10.36-23.43-25.18v-14.72c0-15 9.71-25.56 23.63-25.56 14.69 0 23.82 9.79 23.82 25.56zm298.47-90.92L719 190.76h23.93l9.1-28.44h54.64l.09.28 9 28.16h23.92L792.07 58.07zm-8.66 85.53l21.44-67.08 21.22 67.08zM212.59 95.12a57.27 57.27 0 0 0-4.92-47.05 58 58 0 0 0-62.4-27.79A57.29 57.29 0 0 0 102.06 1a57.94 57.94 0 0 0-55.27 40.14A57.31 57.31 0 0 0 8.5 68.93a58 58 0 0 0 7.13 67.94 57.31 57.31 0 0 0 4.92 47A58 58 0 0 0 83 211.72 57.31 57.31 0 0 0 126.16 231a57.94 57.94 0 0 0 55.27-40.14 57.3 57.3 0 0 0 38.28-27.79 57.92 57.92 0 0 0-7.12-67.95zM126.16 216a42.93 42.93 0 0 1-27.58-10c.34-.19 1-.52 1.38-.77l45.8-26.44a7.43 7.43 0 0 0 3.76-6.51V107.7l19.35 11.17a.67.67 0 0 1 .38.54v53.45A43.14 43.14 0 0 1 126.16 216zm-92.59-39.54a43 43 0 0 1-5.15-28.88c.34.21.94.57 1.36.81l45.81 26.45a7.44 7.44 0 0 0 7.52 0L139 142.52v22.34a.67.67 0 0 1-.27.6l-46.3 26.72a43.14 43.14 0 0 1-58.86-15.77zm-12-100A42.92 42.92 0 0 1 44 57.56V112a7.45 7.45 0 0 0 3.76 6.51l55.9 32.28L84.24 162a.68.68 0 0 1-.65.06L37.3 135.33a43.13 43.13 0 0 1-15.77-58.87zm159 37l-55.9-32.28L144 70a.69.69 0 0 1 .65-.06l46.29 26.73a43.1 43.1 0 0 1-6.66 77.76V120a7.44 7.44 0 0 0-3.74-6.54zm19.27-29c-.34-.21-.94-.57-1.36-.81L152.67 57.2a7.44 7.44 0 0 0-7.52 0l-55.9 32.27V67.14a.73.73 0 0 1 .28-.6l46.29-26.72a43.1 43.1 0 0 1 64 44.65zM78.7 124.3l-19.36-11.17a.73.73 0 0 1-.37-.54V59.14A43.09 43.09 0 0 1 129.64 26c-.34.19-.95.52-1.38.77l-45.8 26.44a7.45 7.45 0 0 0-3.76 6.51zm10.51-22.67l24.9-14.38L139 101.63v28.74l-24.9 14.38-24.9-14.38z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-7 bg-base-300 rounded-lg">
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="2500"
|
||||
height="1036"
|
||||
viewBox="0 -6.166 294.398 121.975"
|
||||
>
|
||||
<path d="M12.139 90.511c-3.939 0-7.799-.479-10.938-1.292l.487-8.277c3.053 1.123 7.313 2.012 11.254 2.012 5.952 0 10.775-2.492 10.775-8.359C23.718 63.172 0 68.002 0 50.466c0-9.325 7.315-15.834 19.941-15.834 3.214 0 6.51.397 9.809.959l-.485 7.802c-3.132-.963-6.591-1.527-9.806-1.527-6.754 0-10.211 3.134-10.211 7.638 0 10.855 23.72 6.839 23.72 23.798-.005 9.973-7.882 17.209-20.829 17.209M54.106 90.264c-2.249 0-3.938-.076-6.03-.479v17.397h-8.601V49.746h8.12c0 2.094-.082 5.309-.484 7.476h.162c2.25-5.068 6.833-8.283 12.944-8.283 9.487 0 14.712 6.75 14.712 18.814.001 14.076-7.473 22.511-20.823 22.511m3.861-34.246c-6.434 0-9.892 7.558-9.892 14.384v12.312c1.852.562 3.86.804 6.272.804 6.833 0 11.497-4.182 11.497-14.958.001-8.039-2.49-12.542-7.877-12.542zM102.519 57.381C94.561 55.936 90.7 61.485 90.7 73.466v16.238h-8.606V49.746H90.3c0 2.246-.246 5.791-.809 8.844h.162c1.771-5.388 5.79-10.377 13.271-9.651l-.405 8.442M114.803 43.797c-3.056 0-5.55-2.414-5.55-5.393 0-2.971 2.494-5.385 5.55-5.385 2.974 0 5.467 2.333 5.467 5.385 0 2.979-2.493 5.393-5.467 5.393m4.26 45.907h-8.6V49.746h8.6v39.958zM154.449 89.704V63.975c0-4.982-1.374-7.875-5.951-7.875-6.03 0-10.457 6.345-10.457 14.302v19.303h-8.603V49.746h8.203c0 2.094-.162 5.546-.563 7.796l.082.075c2.33-5.141 7.157-8.68 13.91-8.68 9.084 0 11.9 5.711 11.9 12.787v27.979h-8.521M186.675 90.425c-8.524 0-11.1-3.294-11.1-12.214V56.417h-7.634v-6.671h7.634V37.04l8.523-2.333v15.039h10.532v6.671h-10.448v19.137c0 5.954 1.205 7.558 5.224 7.558 1.769 0 3.699-.24 5.226-.643v7.076c-2.331.486-5.307.88-7.957.88" />
|
||||
<path
|
||||
d="M233.712 78.636c11.72-15.086 20.938-32.809 20.938-45.537 0-6.652-4.765-11.295-10.978-14.823.123 13.831-4.668 46.263-9.96 60.36M195.279 115.809c27.47-9.188 67.29-30.598 94.985-49.725 2.324-1.6 4.135-3.085 4.135-5.685 0-4.519-8.275-10.576-12.292-12.987-21.792 22.653-65.163 56.596-86.828 68.397"
|
||||
fill="#ffdd05"
|
||||
/>
|
||||
<path
|
||||
d="M220.76 96.567c16.938-11.709 41.545-33.739 49.873-45.727 1.963-2.82 3.416-4.454 3.416-7.405 0-4.839-5.644-8.382-9.703-10.849-9.727 22.924-31.579 51.469-43.586 63.981M236.192 64.087c2.191-14.477.903-31.952-1.894-42.913-1.521-5.969-6.901-12.706-11.88-14.812 6.526 18.522 12.128 44.898 13.774 57.725"
|
||||
fill="#ffdd05"
|
||||
/>
|
||||
<path
|
||||
d="M231.367 43.779C226.235 29.91 213.446.998 194.633-6.165c12.247 13.516 30.417 40.337 36.734 49.944"
|
||||
fill="#ffdd05"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-7 bg-base-300 rounded-lg">
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 2500 816"
|
||||
>
|
||||
<g clip-path="url(#a)">
|
||||
<path
|
||||
d="M307.9 0H330a303.4 303.4 0 0 1 207.7 87.7c-20.2 20.6-40.7 40.3-60.5 60.9-30.6-27.7-67.5-49.1-107.8-56.7A227.9 227.9 0 0 0 196 124.7a227.3 227.3 0 0 0-99.4 160.6 233.5 233.5 0 0 0 50.7 180.4 224.5 224.5 0 0 0 163.6 80.5c58.7 3.4 120-14.7 162.8-55.8 33.5-29 49-73 54-115.7-69.5 0-139.2.4-208.8 0v-86.5H612c15.1 92.7-6.7 197.2-77.2 263.5-47 47-112 74.6-178.3 80A327.4 327.4 0 0 1 169 595 322.8 322.8 0 0 1 19.3 424a309.3 309.3 0 0 1-2.1-209.3 319.4 319.4 0 0 1 115.4-153A329.3 329.3 0 0 1 307.9 0Z"
|
||||
fill="#3780FF"
|
||||
/>
|
||||
<path
|
||||
d="M1990 21.9h89.7v599c-29.8 0-60 .4-89.8-.4.4-199.3 0-399 0-598.6Z"
|
||||
fill="#38B137"
|
||||
/>
|
||||
<path
|
||||
d="M811.7 229.5a210.8 210.8 0 0 1 161 34.4 197 197 0 0 1 79.3 125.9c11.3 58.3-3 122-40.7 168.2A205 205 0 0 1 839 633a204.1 204.1 0 0 1-152.7-81.8c-39.8-53.6-49.5-127.5-27.6-190.4 21.8-67.5 83.4-119.1 153-131.3Zm12.5 79.7a112.8 112.8 0 0 0-58.7 37.3c-40.7 48.7-38.2 128 6.7 173.3a111.7 111.7 0 0 0 177.9-26.4c27.7-50 19.7-118.7-22.7-157.8a113.2 113.2 0 0 0-103.2-26.4Z"
|
||||
fill="#FA3913"
|
||||
/>
|
||||
<path
|
||||
d="M1256.3 229.5c63.3-12.1 132.5 5.5 180 50 77.1 69.1 85.5 198.8 19.7 278.5a204.7 204.7 0 0 1-168.3 75 202.6 202.6 0 0 1-156.8-81.8c-40.7-54.9-49.5-130.4-26.5-194.6a199.2 199.2 0 0 1 151.9-127Zm12.6 79.7a114.7 114.7 0 0 0-58.8 37c-40.2 47.7-38.5 125.8 4.7 171.5a112.2 112.2 0 0 0 102.3 33.1 115 115 0 0 0 78-57.4c27.3-50.4 19.3-119.2-23.5-158.2a112.4 112.4 0 0 0-102.7-26Z"
|
||||
fill="#FCBD06"
|
||||
/>
|
||||
<path
|
||||
d="M1633.4 253.8c48.2-30.2 112.4-38.5 164.4-12.5 16.4 7 29.8 19.3 42.8 31.4.4-11.3 0-23 .4-34.8 28.1.4 56.2 0 84.8.4v370c-.5 55.8-14.7 115-55 155.6-44 44.9-111.6 58.7-172.4 49.5-65-9.6-121.6-57-146.8-117 25.2-12.2 51.6-21.8 77.6-33.2 14.7 34.4 44.5 63.8 81.8 70.5 37.3 6.7 80.5-2.5 104.9-33.5 26-32 26-75.5 24.7-114.6-19.3 19-41.5 35.7-68.4 42-58.3 16.3-122.5-3.8-167.3-43.2a205.5 205.5 0 0 1-69.7-160.7 207.4 207.4 0 0 1 98.2-169.9Zm86.8 53.7a110.4 110.4 0 0 0-65.8 38.2c-39.5 47-39.5 122 .4 168.2a109.8 109.8 0 0 0 94.4 38.6 106.6 106.6 0 0 0 80-53.3c27.8-49 23.1-115.7-14.2-158.5-23-26.4-60-39.5-94.8-33.2Z"
|
||||
fill="#3780FF"
|
||||
/>
|
||||
<path
|
||||
d="M2187.5 275.2c50.3-47 128-62.9 192.5-38.1 61.3 23 100.3 81.3 120 141.3-91 37.8-181.6 75.1-272.7 112.9 12.6 23.9 32 45.7 58 54.5 36.4 13 80 8.4 110.7-16a178.1 178.1 0 0 0 31-33c23 15.4 46.2 30.5 69.2 46a202 202 0 0 1-146.8 89c-65.4 8-135-17.2-177.4-68.4-69.7-80.5-63-215.6 15.5-288.2Zm44.9 77.6a119.8 119.8 0 0 0-19.7 70.5 33573 33573 0 0 0 182.4-76c-10-23.4-34.4-37.7-59.1-41.4-39.9-7.2-81.4 14.2-103.6 47Z"
|
||||
fill="#FA3913"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<path fill="#fff" d="M0 0H2500V816H0z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Clients --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Simple With Heading
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/ClientSections/SimpleWithHeading.tsx"
|
||||
<>
|
||||
{/* <!-- Clients --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Title --> */}
|
||||
<div className="w-2/3 sm:w-1/2 lg:w-1/3 mx-auto text-center mb-6">
|
||||
<h2 className="text-secondary-content">
|
||||
Trusted by Open Source, enterprise, and more than 99,000 of you
|
||||
</h2>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
<div className="flex justify-center gap-x-6 sm:gap-x-12 lg:gap-x-24">
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto sm:mx-0 text-secondary-content"
|
||||
enable-background="new 0 0 2499 614"
|
||||
viewBox="0 0 2499 614"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m431.7 0h-235.5v317.8h317.8v-235.5c0-45.6-36.7-82.3-82.3-82.3zm-308.9 0h-40.5c-45.6 0-82.3 36.7-82.3 82.3v40.5h122.8zm-122.8 196.2h122.8v122.8h-122.8zm392.5 317.8h40.5c45.6 0 82.3-36.7 82.3-82.3v-39.2h-122.8zm-196.3-121.5h122.8v122.8h-122.8zm-196.2 0v40.5c0 45.6 36.7 82.3 82.3 82.3h40.5v-122.8zm828-359.6h-48.1v449.4h254.5v-43h-206.4zm360.8 119c-93.7 0-159.5 69.6-159.5 169.6v11.5c1.3 43 20.3 83.6 51.9 113.9 30.4 27.9 69.6 44.3 111.4 44.3h6.3c44.3 0 86.1-16.5 119-44.3l1.3-1.3-21.5-35.4-2.5 1.3c-26.6 24.1-59.5 38-94.9 38-58.2 0-117.7-38-121.5-122.8h243.1v-2.5s1.3-15.2 1.3-22.8c-.3-91.2-53.4-149.5-134.4-149.5zm-108.9 134.2c10.1-57 51.9-93.7 106.3-93.7 40.5 0 84.8 24.1 88.6 93.7zm521.6-96.2v16.5c-20.3-34.2-58.2-55.7-97.5-55.7h-3.8c-86.1 0-145.6 68.4-145.6 168.4 0 101.3 57 169.6 141.8 169.6 67.1 0 97.5-40.5 107.6-58.2v49.4h45.6v-447h-46.8v157zm-98.8 257c-59.5 0-98.7-50.6-98.7-126.6 0-73.4 41.8-125.3 100-125.3 49.4 0 98.7 39.2 98.7 125.3 0 93.7-51.9 126.6-100 126.6zm424.1-250.7v2.5c-8.9-15.2-36.7-48.1-103.8-48.1-84.8 0-140.5 64.6-140.5 163.3s58.2 165.8 144.3 165.8c46.8 0 78.5-16.5 100-50.6v44.3c0 62-39.2 97.5-108.9 97.5-29.1 0-59.5-7.6-86.1-21.5l-2.5-1.3-17.7 39.2 2.5 1.3c32.9 16.5 69.6 25.3 105.1 25.3 74.7 0 154.4-38 154.4-143.1v-311.3h-46.8zm-93.7 241.8c-62 0-102.5-48.1-102.5-122.8 0-76 35.4-119 96.2-119 67.1 0 98.7 39.2 98.7 119 1.3 78.5-31.6 122.8-92.4 122.8zm331.7-286.1c-93.7 0-158.2 69.6-158.2 168.4v11.4c1.3 43 20.3 83.6 51.9 113.9 30.4 27.9 69.6 44.3 111.4 44.3h6.3c44.3 0 86.1-16.5 119-44.3l1.3-1.3-22.8-35.4-2.5 1.3c-26.6 24.1-59.5 38-94.9 38-58.2 0-117.7-38-121.5-122.8h244.2v-2.5s1.3-15.2 1.3-22.8c0-89.9-53.2-148.2-135.5-148.2zm-107.6 134.2c10.1-57 51.9-93.7 106.3-93.7 40.5 0 84.8 24.1 88.6 93.7zm440.6-127.9c-6.3-1.3-11.4-1.3-17.7-2.5-44.3 0-81 27.9-100 74.7v-72.2h-46.8l1.3 320.3v2.5h48.1v-135.4c0-20.3 2.5-41.8 8.9-60.8 15.2-49.4 49.4-81 89.9-81 5.1 0 10.1 0 15.2 1.3h2.5v-46.8z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto sm:mx-0 text-secondary-content"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="-4.126838974812941 0.900767442746961 939.436838974813 230.18142889845947"
|
||||
width="2500"
|
||||
height="607"
|
||||
>
|
||||
<path
|
||||
d="M667.21 90.58c-13.76 0-23.58 4.7-28.4 13.6l-2.59 4.82V92.9h-22.39v97.86h23.55v-58.22c0-13.91 7.56-21.89 20.73-21.89 12.56 0 19.76 7.77 19.76 21.31v58.8h23.56v-63c0-23.3-12.79-37.18-34.22-37.18zm-114.21 0c-27.79 0-45 17.34-45 45.25v13.74c0 26.84 17.41 43.51 45.44 43.51 18.75 0 31.89-6.87 40.16-21l-14.6-8.4c-6.11 8.15-15.87 13.2-25.55 13.2-14.19 0-22.66-8.76-22.66-23.44v-3.89h65.73v-16.23c0-26-17.07-42.74-43.5-42.74zm22.09 43.15h-44.38v-2.35c0-16.11 7.91-25 22.27-25 13.83 0 22.09 8.76 22.09 23.44zm360.22-56.94V58.07h-81.46v18.72h28.56V172h-28.56v18.72h81.46V172h-28.57V76.79zM317.65 55.37c-36.38 0-59 22.67-59 59.18v19.74c0 36.5 22.61 59.18 59 59.18s59-22.68 59-59.18v-19.74c-.01-36.55-22.65-59.18-59-59.18zm34.66 80.27c0 24.24-12.63 38.14-34.66 38.14S283 159.88 283 135.64v-22.45c0-24.24 12.64-38.14 34.66-38.14s34.66 13.9 34.66 38.14zm98.31-45.06c-12.36 0-23.06 5.12-28.64 13.69l-2.53 3.9V92.9h-22.4v131.53h23.56v-47.64l2.52 3.74c5.3 7.86 15.65 12.55 27.69 12.55 20.31 0 40.8-13.27 40.8-42.93v-16.64c0-21.37-12.63-42.93-41-42.93zM468.06 149c0 15.77-9.2 25.57-24 25.57-13.8 0-23.43-10.36-23.43-25.18v-14.72c0-15 9.71-25.56 23.63-25.56 14.69 0 23.82 9.79 23.82 25.56zm298.47-90.92L719 190.76h23.93l9.1-28.44h54.64l.09.28 9 28.16h23.92L792.07 58.07zm-8.66 85.53l21.44-67.08 21.22 67.08zM212.59 95.12a57.27 57.27 0 0 0-4.92-47.05 58 58 0 0 0-62.4-27.79A57.29 57.29 0 0 0 102.06 1a57.94 57.94 0 0 0-55.27 40.14A57.31 57.31 0 0 0 8.5 68.93a58 58 0 0 0 7.13 67.94 57.31 57.31 0 0 0 4.92 47A58 58 0 0 0 83 211.72 57.31 57.31 0 0 0 126.16 231a57.94 57.94 0 0 0 55.27-40.14 57.3 57.3 0 0 0 38.28-27.79 57.92 57.92 0 0 0-7.12-67.95zM126.16 216a42.93 42.93 0 0 1-27.58-10c.34-.19 1-.52 1.38-.77l45.8-26.44a7.43 7.43 0 0 0 3.76-6.51V107.7l19.35 11.17a.67.67 0 0 1 .38.54v53.45A43.14 43.14 0 0 1 126.16 216zm-92.59-39.54a43 43 0 0 1-5.15-28.88c.34.21.94.57 1.36.81l45.81 26.45a7.44 7.44 0 0 0 7.52 0L139 142.52v22.34a.67.67 0 0 1-.27.6l-46.3 26.72a43.14 43.14 0 0 1-58.86-15.77zm-12-100A42.92 42.92 0 0 1 44 57.56V112a7.45 7.45 0 0 0 3.76 6.51l55.9 32.28L84.24 162a.68.68 0 0 1-.65.06L37.3 135.33a43.13 43.13 0 0 1-15.77-58.87zm159 37l-55.9-32.28L144 70a.69.69 0 0 1 .65-.06l46.29 26.73a43.1 43.1 0 0 1-6.66 77.76V120a7.44 7.44 0 0 0-3.74-6.54zm19.27-29c-.34-.21-.94-.57-1.36-.81L152.67 57.2a7.44 7.44 0 0 0-7.52 0l-55.9 32.27V67.14a.73.73 0 0 1 .28-.6l46.29-26.72a43.1 43.1 0 0 1 64 44.65zM78.7 124.3l-19.36-11.17a.73.73 0 0 1-.37-.54V59.14A43.09 43.09 0 0 1 129.64 26c-.34.19-.95.52-1.38.77l-45.8 26.44a7.45 7.45 0 0 0-3.76 6.51zm10.51-22.67l24.9-14.38L139 101.63v28.74l-24.9 14.38-24.9-14.38z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto sm:mx-0 text-secondary-content"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 2428 1002"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M311.5 389.8h191.8l67 117.5 77.8-117.5h178.3L682.7 590.7l154 220.7H648.1l-77.8-135.8-91.7 135.8h-175l153.2-220.7-145.3-200.9Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M1279.3 640.7H955.4c2.9 26 10 45.2 21 58a76.5 76.5 0 0 0 61.1 27.3c16 0 31.5-4 45.3-12 8.8-5 18.2-13.7 28.2-26.5l159.2 14.7c-24.4 42.4-53.7 72.7-88 91.2-34.5 18.2-83.8 27.5-148.2 27.5-55.8 0-99.7-7.9-131.8-23.6a193.2 193.2 0 0 1-79.6-75c-21-34.4-31.6-74.6-31.6-121 0-65.8 21.2-119.2 63.3-159.8 42.3-40.8 100.6-61.3 175-61.3 60.3 0 108 9.2 142.8 27.5a184 184 0 0 1 79.8 79.3c18.3 34.7 27.4 79.8 27.4 135.3v18.4ZM1115 563.3c-3.2-31.3-11.6-53.7-25.2-67.1a73.1 73.1 0 0 0-53.8-20.3 73.6 73.6 0 0 0-61.6 30.6c-9.7 12.7-16 31.6-18.5 56.8H1115Zm137-173.5h168.3l81.9 267.1 84.5-267H1750l-179.1 421.5h-143.3L1252 389.8Zm463.2 212c0-64.3 21.7-117.4 65-159 43.5-41.7 102-62.6 176-62.6 84.4 0 148.2 24.5 191.3 73.5 34.6 39.4 52 88 52 145.8 0 64.7-21.5 117.8-64.5 159.3-43 41.3-102.4 62-178.5 62-67.7 0-122.5-17.1-164.3-51.5-51.4-42.6-77-98.4-77-167.6Zm162-.5c0 37.7 7.5 65.5 22.8 83.4a72 72 0 0 0 57.3 27.1c23.4 0 42.5-9 57.4-26.7 15-17.8 22.5-46 22.5-85.4 0-36.4-7.6-63.7-22.7-81.5a70.5 70.5 0 0 0-56-26.7c-23.5 0-43 9-58.3 27-15.4 18.2-23 45.9-23 82.8ZM2363.1.1a64 64 0 0 1 0 127.9 64 64 0 0 1 0-128Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M1912.1 671.5c220.3-135 326.4-327 334-419.2 8.7-106.7-71-235.9-358.9-238-345 3.6-790 158.3-1163.6 360.4h138c315.8-152.6 672-266.2 1000.8-275.2 287.7-7.8 304.4 149.2 302 199-3.6 71-74.7 234.5-252.3 373Zm-1315.7-222-36 22.7 10 17.5 26-40.1ZM419.8 567.5C212 717 57 873.2.8 1001.9 77.8 897.1 217 771 394.9 647l40.4-58.1-15.5-21.4Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M2036.3 580a819.8 819.8 0 0 0 114.2-122.8l-3-3.5c-8-9.2-17-17.5-26.5-25-21 39.8-50 83.7-88.2 128.3 1.6 7 2.8 14.7 3.5 23Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto sm:mx-0 text-secondary-content"
|
||||
viewBox="0 -8.881784197001252e-16 267.51517722360785 65.24679557585003"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="2500"
|
||||
height="610"
|
||||
>
|
||||
<path
|
||||
d="M263.043 56.411a4.418 4.418 0 1 0 .085 0zm0 8.33a3.874 3.874 0 1 1 3.809-3.938v.065a3.791 3.791 0 0 1-3.708 3.871h-.1m-16.96-9.535h-9.6V40.17c0-3.585-.064-8.2-4.993-8.2-5 0-5.765 3.906-5.765 7.939v15.294h-9.6V24.287h9.216v4.225h.129a10.1 10.1 0 0 1 9.093-4.994c9.73 0 11.524 6.4 11.524 14.726zm-40.79-35.143a5.571 5.571 0 1 1 5.57-5.572 5.571 5.571 0 0 1-5.57 5.572m4.8 35.143h-9.61V24.287h9.61zM250.87.004h-55.21a4.728 4.728 0 0 0-4.781 4.67v55.439a4.731 4.731 0 0 0 4.781 4.675h55.21a4.741 4.741 0 0 0 4.8-4.675V4.67a4.738 4.738 0 0 0-4.8-4.67m-86.12 31.749c-4.8 0-7.68 3.205-7.68 7.875s2.879 7.878 7.68 7.878 7.687-3.2 7.687-7.878-2.881-7.875-7.687-7.875m16.525 23.437h-8.838v-4.1h-.131a12.071 12.071 0 0 1-9.544 4.868c-9.224 0-15.3-6.657-15.3-16.071 0-8.646 5.377-16.585 14.216-16.585 3.973 0 7.684 1.087 9.861 4.1h.126V9.577h9.609zm-46.139-19.048a5.756 5.756 0 0 0-5.894-5.89 6.406 6.406 0 0 0-6.784 5.89zm8.132 13.7a16.909 16.909 0 0 1-13.128 6.151c-9.6 0-17.286-6.408-17.286-16.331s7.685-16.328 17.286-16.328c8.973 0 14.6 6.4 14.6 16.328v3.01h-22.282a7.171 7.171 0 0 0 7.235 6.019 8.193 8.193 0 0 0 6.851-3.778zM47.834 24.279h9.219v4.225h.131a10.085 10.085 0 0 1 9.09-4.994c9.735 0 11.527 6.405 11.527 14.726V55.19h-9.6V40.159c0-3.588-.066-8.2-5-8.2-4.99 0-5.76 3.907-5.76 7.939v15.288h-9.6zM82.669 9.58h9.6v27.265l10.88-12.583h11.77l-12.6 14.313 12.335 16.63h-12.066L92.397 39.923h-.126v15.28h-9.6zM32.911 24.276h9.6v30.916h-9.6zm4.8-15.37a5.569 5.569 0 1 1-5.57 5.569 5.569 5.569 0 0 1 5.57-5.569M0 9.587h9.993v36.4h18.5v9.222H0zm263.744 51.522a1.2 1.2 0 0 0 1.21-1.269c0-.9-.543-1.33-1.657-1.33h-1.8v4.712h.677v-2.054h.832l.019.025 1.291 2.029h.724l-1.389-2.1zm-.783-.472h-.785v-1.593h.995c.514 0 1.1.084 1.1.757 0 .774-.593.836-1.314.836"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Clients --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,275 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Simple With Heading And Link
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/ClientSections/SimpleWithHeadingAndLink.tsx"
|
||||
<>
|
||||
{/* <!-- Clients --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Title --> */}
|
||||
<div className="w-2/3 sm:w-1/2 lg:w-1/3 mx-auto text-center mb-6">
|
||||
<h2 className="text-secondary-content">
|
||||
Trusted by Open Source, enterprise, and more than 99,000 of you
|
||||
</h2>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid grid-cols-3 md:grid-cols-6 gap-x-6">
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto text-secondary-content"
|
||||
enable-background="new 0 0 2499 614"
|
||||
viewBox="0 0 2499 614"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m431.7 0h-235.5v317.8h317.8v-235.5c0-45.6-36.7-82.3-82.3-82.3zm-308.9 0h-40.5c-45.6 0-82.3 36.7-82.3 82.3v40.5h122.8zm-122.8 196.2h122.8v122.8h-122.8zm392.5 317.8h40.5c45.6 0 82.3-36.7 82.3-82.3v-39.2h-122.8zm-196.3-121.5h122.8v122.8h-122.8zm-196.2 0v40.5c0 45.6 36.7 82.3 82.3 82.3h40.5v-122.8zm828-359.6h-48.1v449.4h254.5v-43h-206.4zm360.8 119c-93.7 0-159.5 69.6-159.5 169.6v11.5c1.3 43 20.3 83.6 51.9 113.9 30.4 27.9 69.6 44.3 111.4 44.3h6.3c44.3 0 86.1-16.5 119-44.3l1.3-1.3-21.5-35.4-2.5 1.3c-26.6 24.1-59.5 38-94.9 38-58.2 0-117.7-38-121.5-122.8h243.1v-2.5s1.3-15.2 1.3-22.8c-.3-91.2-53.4-149.5-134.4-149.5zm-108.9 134.2c10.1-57 51.9-93.7 106.3-93.7 40.5 0 84.8 24.1 88.6 93.7zm521.6-96.2v16.5c-20.3-34.2-58.2-55.7-97.5-55.7h-3.8c-86.1 0-145.6 68.4-145.6 168.4 0 101.3 57 169.6 141.8 169.6 67.1 0 97.5-40.5 107.6-58.2v49.4h45.6v-447h-46.8v157zm-98.8 257c-59.5 0-98.7-50.6-98.7-126.6 0-73.4 41.8-125.3 100-125.3 49.4 0 98.7 39.2 98.7 125.3 0 93.7-51.9 126.6-100 126.6zm424.1-250.7v2.5c-8.9-15.2-36.7-48.1-103.8-48.1-84.8 0-140.5 64.6-140.5 163.3s58.2 165.8 144.3 165.8c46.8 0 78.5-16.5 100-50.6v44.3c0 62-39.2 97.5-108.9 97.5-29.1 0-59.5-7.6-86.1-21.5l-2.5-1.3-17.7 39.2 2.5 1.3c32.9 16.5 69.6 25.3 105.1 25.3 74.7 0 154.4-38 154.4-143.1v-311.3h-46.8zm-93.7 241.8c-62 0-102.5-48.1-102.5-122.8 0-76 35.4-119 96.2-119 67.1 0 98.7 39.2 98.7 119 1.3 78.5-31.6 122.8-92.4 122.8zm331.7-286.1c-93.7 0-158.2 69.6-158.2 168.4v11.4c1.3 43 20.3 83.6 51.9 113.9 30.4 27.9 69.6 44.3 111.4 44.3h6.3c44.3 0 86.1-16.5 119-44.3l1.3-1.3-22.8-35.4-2.5 1.3c-26.6 24.1-59.5 38-94.9 38-58.2 0-117.7-38-121.5-122.8h244.2v-2.5s1.3-15.2 1.3-22.8c0-89.9-53.2-148.2-135.5-148.2zm-107.6 134.2c10.1-57 51.9-93.7 106.3-93.7 40.5 0 84.8 24.1 88.6 93.7zm440.6-127.9c-6.3-1.3-11.4-1.3-17.7-2.5-44.3 0-81 27.9-100 74.7v-72.2h-46.8l1.3 320.3v2.5h48.1v-135.4c0-20.3 2.5-41.8 8.9-60.8 15.2-49.4 49.4-81 89.9-81 5.1 0 10.1 0 15.2 1.3h2.5v-46.8z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto text-secondary-content"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="-4.126838974812941 0.900767442746961 939.436838974813 230.18142889845947"
|
||||
width="2500"
|
||||
height="607"
|
||||
>
|
||||
<path
|
||||
d="M667.21 90.58c-13.76 0-23.58 4.7-28.4 13.6l-2.59 4.82V92.9h-22.39v97.86h23.55v-58.22c0-13.91 7.56-21.89 20.73-21.89 12.56 0 19.76 7.77 19.76 21.31v58.8h23.56v-63c0-23.3-12.79-37.18-34.22-37.18zm-114.21 0c-27.79 0-45 17.34-45 45.25v13.74c0 26.84 17.41 43.51 45.44 43.51 18.75 0 31.89-6.87 40.16-21l-14.6-8.4c-6.11 8.15-15.87 13.2-25.55 13.2-14.19 0-22.66-8.76-22.66-23.44v-3.89h65.73v-16.23c0-26-17.07-42.74-43.5-42.74zm22.09 43.15h-44.38v-2.35c0-16.11 7.91-25 22.27-25 13.83 0 22.09 8.76 22.09 23.44zm360.22-56.94V58.07h-81.46v18.72h28.56V172h-28.56v18.72h81.46V172h-28.57V76.79zM317.65 55.37c-36.38 0-59 22.67-59 59.18v19.74c0 36.5 22.61 59.18 59 59.18s59-22.68 59-59.18v-19.74c-.01-36.55-22.65-59.18-59-59.18zm34.66 80.27c0 24.24-12.63 38.14-34.66 38.14S283 159.88 283 135.64v-22.45c0-24.24 12.64-38.14 34.66-38.14s34.66 13.9 34.66 38.14zm98.31-45.06c-12.36 0-23.06 5.12-28.64 13.69l-2.53 3.9V92.9h-22.4v131.53h23.56v-47.64l2.52 3.74c5.3 7.86 15.65 12.55 27.69 12.55 20.31 0 40.8-13.27 40.8-42.93v-16.64c0-21.37-12.63-42.93-41-42.93zM468.06 149c0 15.77-9.2 25.57-24 25.57-13.8 0-23.43-10.36-23.43-25.18v-14.72c0-15 9.71-25.56 23.63-25.56 14.69 0 23.82 9.79 23.82 25.56zm298.47-90.92L719 190.76h23.93l9.1-28.44h54.64l.09.28 9 28.16h23.92L792.07 58.07zm-8.66 85.53l21.44-67.08 21.22 67.08zM212.59 95.12a57.27 57.27 0 0 0-4.92-47.05 58 58 0 0 0-62.4-27.79A57.29 57.29 0 0 0 102.06 1a57.94 57.94 0 0 0-55.27 40.14A57.31 57.31 0 0 0 8.5 68.93a58 58 0 0 0 7.13 67.94 57.31 57.31 0 0 0 4.92 47A58 58 0 0 0 83 211.72 57.31 57.31 0 0 0 126.16 231a57.94 57.94 0 0 0 55.27-40.14 57.3 57.3 0 0 0 38.28-27.79 57.92 57.92 0 0 0-7.12-67.95zM126.16 216a42.93 42.93 0 0 1-27.58-10c.34-.19 1-.52 1.38-.77l45.8-26.44a7.43 7.43 0 0 0 3.76-6.51V107.7l19.35 11.17a.67.67 0 0 1 .38.54v53.45A43.14 43.14 0 0 1 126.16 216zm-92.59-39.54a43 43 0 0 1-5.15-28.88c.34.21.94.57 1.36.81l45.81 26.45a7.44 7.44 0 0 0 7.52 0L139 142.52v22.34a.67.67 0 0 1-.27.6l-46.3 26.72a43.14 43.14 0 0 1-58.86-15.77zm-12-100A42.92 42.92 0 0 1 44 57.56V112a7.45 7.45 0 0 0 3.76 6.51l55.9 32.28L84.24 162a.68.68 0 0 1-.65.06L37.3 135.33a43.13 43.13 0 0 1-15.77-58.87zm159 37l-55.9-32.28L144 70a.69.69 0 0 1 .65-.06l46.29 26.73a43.1 43.1 0 0 1-6.66 77.76V120a7.44 7.44 0 0 0-3.74-6.54zm19.27-29c-.34-.21-.94-.57-1.36-.81L152.67 57.2a7.44 7.44 0 0 0-7.52 0l-55.9 32.27V67.14a.73.73 0 0 1 .28-.6l46.29-26.72a43.1 43.1 0 0 1 64 44.65zM78.7 124.3l-19.36-11.17a.73.73 0 0 1-.37-.54V59.14A43.09 43.09 0 0 1 129.64 26c-.34.19-.95.52-1.38.77l-45.8 26.44a7.45 7.45 0 0 0-3.76 6.51zm10.51-22.67l24.9-14.38L139 101.63v28.74l-24.9 14.38-24.9-14.38z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto text-secondary-content"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 2428 1002"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M311.5 389.8h191.8l67 117.5 77.8-117.5h178.3L682.7 590.7l154 220.7H648.1l-77.8-135.8-91.7 135.8h-175l153.2-220.7-145.3-200.9Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M1279.3 640.7H955.4c2.9 26 10 45.2 21 58a76.5 76.5 0 0 0 61.1 27.3c16 0 31.5-4 45.3-12 8.8-5 18.2-13.7 28.2-26.5l159.2 14.7c-24.4 42.4-53.7 72.7-88 91.2-34.5 18.2-83.8 27.5-148.2 27.5-55.8 0-99.7-7.9-131.8-23.6a193.2 193.2 0 0 1-79.6-75c-21-34.4-31.6-74.6-31.6-121 0-65.8 21.2-119.2 63.3-159.8 42.3-40.8 100.6-61.3 175-61.3 60.3 0 108 9.2 142.8 27.5a184 184 0 0 1 79.8 79.3c18.3 34.7 27.4 79.8 27.4 135.3v18.4ZM1115 563.3c-3.2-31.3-11.6-53.7-25.2-67.1a73.1 73.1 0 0 0-53.8-20.3 73.6 73.6 0 0 0-61.6 30.6c-9.7 12.7-16 31.6-18.5 56.8H1115Zm137-173.5h168.3l81.9 267.1 84.5-267H1750l-179.1 421.5h-143.3L1252 389.8Zm463.2 212c0-64.3 21.7-117.4 65-159 43.5-41.7 102-62.6 176-62.6 84.4 0 148.2 24.5 191.3 73.5 34.6 39.4 52 88 52 145.8 0 64.7-21.5 117.8-64.5 159.3-43 41.3-102.4 62-178.5 62-67.7 0-122.5-17.1-164.3-51.5-51.4-42.6-77-98.4-77-167.6Zm162-.5c0 37.7 7.5 65.5 22.8 83.4a72 72 0 0 0 57.3 27.1c23.4 0 42.5-9 57.4-26.7 15-17.8 22.5-46 22.5-85.4 0-36.4-7.6-63.7-22.7-81.5a70.5 70.5 0 0 0-56-26.7c-23.5 0-43 9-58.3 27-15.4 18.2-23 45.9-23 82.8ZM2363.1.1a64 64 0 0 1 0 127.9 64 64 0 0 1 0-128Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M1912.1 671.5c220.3-135 326.4-327 334-419.2 8.7-106.7-71-235.9-358.9-238-345 3.6-790 158.3-1163.6 360.4h138c315.8-152.6 672-266.2 1000.8-275.2 287.7-7.8 304.4 149.2 302 199-3.6 71-74.7 234.5-252.3 373Zm-1315.7-222-36 22.7 10 17.5 26-40.1ZM419.8 567.5C212 717 57 873.2.8 1001.9 77.8 897.1 217 771 394.9 647l40.4-58.1-15.5-21.4Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M2036.3 580a819.8 819.8 0 0 0 114.2-122.8l-3-3.5c-8-9.2-17-17.5-26.5-25-21 39.8-50 83.7-88.2 128.3 1.6 7 2.8 14.7 3.5 23Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto text-secondary-content"
|
||||
viewBox="0 -8.881784197001252e-16 267.51517722360785 65.24679557585003"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="2500"
|
||||
height="610"
|
||||
>
|
||||
<path
|
||||
d="M263.043 56.411a4.418 4.418 0 1 0 .085 0zm0 8.33a3.874 3.874 0 1 1 3.809-3.938v.065a3.791 3.791 0 0 1-3.708 3.871h-.1m-16.96-9.535h-9.6V40.17c0-3.585-.064-8.2-4.993-8.2-5 0-5.765 3.906-5.765 7.939v15.294h-9.6V24.287h9.216v4.225h.129a10.1 10.1 0 0 1 9.093-4.994c9.73 0 11.524 6.4 11.524 14.726zm-40.79-35.143a5.571 5.571 0 1 1 5.57-5.572 5.571 5.571 0 0 1-5.57 5.572m4.8 35.143h-9.61V24.287h9.61zM250.87.004h-55.21a4.728 4.728 0 0 0-4.781 4.67v55.439a4.731 4.731 0 0 0 4.781 4.675h55.21a4.741 4.741 0 0 0 4.8-4.675V4.67a4.738 4.738 0 0 0-4.8-4.67m-86.12 31.749c-4.8 0-7.68 3.205-7.68 7.875s2.879 7.878 7.68 7.878 7.687-3.2 7.687-7.878-2.881-7.875-7.687-7.875m16.525 23.437h-8.838v-4.1h-.131a12.071 12.071 0 0 1-9.544 4.868c-9.224 0-15.3-6.657-15.3-16.071 0-8.646 5.377-16.585 14.216-16.585 3.973 0 7.684 1.087 9.861 4.1h.126V9.577h9.609zm-46.139-19.048a5.756 5.756 0 0 0-5.894-5.89 6.406 6.406 0 0 0-6.784 5.89zm8.132 13.7a16.909 16.909 0 0 1-13.128 6.151c-9.6 0-17.286-6.408-17.286-16.331s7.685-16.328 17.286-16.328c8.973 0 14.6 6.4 14.6 16.328v3.01h-22.282a7.171 7.171 0 0 0 7.235 6.019 8.193 8.193 0 0 0 6.851-3.778zM47.834 24.279h9.219v4.225h.131a10.085 10.085 0 0 1 9.09-4.994c9.735 0 11.527 6.405 11.527 14.726V55.19h-9.6V40.159c0-3.588-.066-8.2-5-8.2-4.99 0-5.76 3.907-5.76 7.939v15.288h-9.6zM82.669 9.58h9.6v27.265l10.88-12.583h11.77l-12.6 14.313 12.335 16.63h-12.066L92.397 39.923h-.126v15.28h-9.6zM32.911 24.276h9.6v30.916h-9.6zm4.8-15.37a5.569 5.569 0 1 1-5.57 5.569 5.569 5.569 0 0 1 5.57-5.569M0 9.587h9.993v36.4h18.5v9.222H0zm263.744 51.522a1.2 1.2 0 0 0 1.21-1.269c0-.9-.543-1.33-1.657-1.33h-1.8v4.712h.677v-2.054h.832l.019.025 1.291 2.029h.724l-1.389-2.1zm-.783-.472h-.785v-1.593h.995c.514 0 1.1.084 1.1.757 0 .774-.593.836-1.314.836"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto text-secondary-content"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 127 33"
|
||||
>
|
||||
<path
|
||||
d="M9.3 16.5C9.3 9 14.3 2.7 21.2.7a16.5 16.5 0 1 0 0 31.6c-6.9-2-11.9-8.3-11.9-15.8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M21.7 10c4 0 7.4 2.8 8.5 6.4a8.9 8.9 0 1 0-17 0c1-3.6 4.4-6.3 8.5-6.3Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M24.8 19.4c0 3-2 5.5-4.8 6.3A6.6 6.6 0 1 0 20 13c2.8.8 4.8 3.4 4.8 6.4Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M39.6 13.5A4.4 4.4 0 0 1 44 9.1h1.3v2.7l-1 .2-1 .6-.2.4-.1.5h2.3v3H43v9.2h-3.4v-9.3h-1.3v-2.9h1.3ZM55.7 13.5h3.4v6.1a6.9 6.9 0 0 1-1.7 4.6 6 6 0 0 1-4.5 1.8c-1 0-1.8-.1-2.5-.5a6 6 0 0 1-3.2-3.4c-.3-.8-.4-1.6-.4-2.5v-6H50v6c0 .5 0 1 .2 1.3l.5 1c.2.4.5.6.9.8.3.2.8.3 1.2.3a2.6 2.6 0 0 0 2.1-1c.3-.3.4-.7.5-1l.2-1.4v-6ZM61.2 25.7V9.5h3.4v16.2h-3.4ZM66.9 25.7V9.5h3.3v16.2H67ZM78.5 21.2l3.3-7.7h3.7l-5.7 12.2h-2.7l-5.6-12.2H75l3.4 7.7ZM87 13.5h3.3v12.2H87V13.5Zm1.6-5 .8.1.6.4.4.7.2.7a1.9 1.9 0 0 1-.6 1.4l-.6.4a2 2 0 0 1-.8.1c-.5 0-1-.2-1.3-.5a2 2 0 0 1-.4-2.1c0-.3.2-.5.4-.7l.6-.4.7-.1ZM98.8 13.2a6.7 6.7 0 0 1 4.8 1.9 6.3 6.3 0 0 1 1.9 5.7h-9.8a3.3 3.3 0 0 0 3.2 2.2c.5 0 1-.1 1.4-.4.5-.2.9-.5 1.2-1h3.7c-.2.7-.5 1.3-1 1.8a6.1 6.1 0 0 1-3.3 2.3 7 7 0 0 1-6.9-1.6 6.1 6.1 0 0 1-2-4.5 6.1 6.1 0 0 1 2-4.5c.7-.6 1.4-1 2.2-1.4.8-.3 1.7-.5 2.6-.5Zm3.2 5.2c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.3-.7-2-.7s-1.4.3-2 .7c-.5.4-.9.9-1.1 1.5h6.3ZM123 13.5h3.6l-5 12.2H119l-2.5-6.5-2.5 6.5h-2.7l-5-12.2h3.6l2.7 7 2.8-7h2.2l2.8 7 2.7-7Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto text-secondary-content"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 120 32"
|
||||
>
|
||||
<g clip-path="url(#a)">
|
||||
<path
|
||||
d="M46.6 11c.5-.7 1-1.3 1.9-1.7.7-.5 1.6-.7 2.6-.7v3.9h-1c-1.1 0-2 .2-2.6.8-.6.5-1 1.5-1 2.8v7.3H43V8.8h3.7v2.3ZM53 16c0-1.4.2-2.7.8-3.9a6.6 6.6 0 0 1 5.9-3.6 6 6 0 0 1 4.9 2.4v-2h3.7v14.5h-3.7v-2.1c-.5.6-1.2 1.2-2 1.7-.9.4-1.8.6-3 .6a6.4 6.4 0 0 1-5.8-3.6 8.7 8.7 0 0 1-.9-4Zm11.6.1c0-.9-.2-1.7-.6-2.3-.3-.6-.8-1.1-1.4-1.5-.6-.3-1.3-.5-2-.5a3.8 3.8 0 0 0-3.3 2c-.4.6-.5 1.4-.5 2.2 0 1 .1 1.7.5 2.4a3.8 3.8 0 0 0 3.4 2 4 4 0 0 0 1.9-.5c.6-.4 1-.9 1.4-1.5.4-.6.6-1.4.6-2.3ZM86.4 8.8l-9.2 21.5h-4l3.3-7.3-6-14.2h4.2L78.5 19l3.9-10.2h4ZM95.2 23.6a8 8 0 0 1-3.8-.9 7 7 0 0 1-2.7-2.7 8 8 0 0 1-1-3.9c0-1.5.3-2.8 1-4a7 7 0 0 1 2.8-2.6 8 8 0 0 1 3.8-1 8 8 0 0 1 3.9 1 7.6 7.6 0 0 1 3.7 6.6c0 1.5-.3 2.8-1 4a7 7 0 0 1-2.8 2.6c-1.2.6-2.4 1-3.9 1Zm0-3.2a3.6 3.6 0 0 0 3.3-2c.4-.6.6-1.4.6-2.3 0-1.4-.4-2.4-1.1-3.2a3.6 3.6 0 0 0-2.7-1.1c-1.1 0-2 .4-2.7 1.1-.7.8-1.1 1.8-1.1 3.2 0 1.4.4 2.5 1 3.2.8.7 1.6 1.1 2.7 1.1ZM114.1 8.6c1.8 0 3.2.6 4.3 1.7 1 1 1.6 2.6 1.6 4.5v8.6h-3.7v-8c0-1.2-.3-2.1-1-2.7-.5-.7-1.3-1-2.3-1-1 0-1.9.3-2.5 1-.6.6-.8 1.5-.8 2.6v8h-3.8V8.9h3.8v1.8a5 5 0 0 1 1.8-1.4 6 6 0 0 1 2.6-.6ZM25.1 0H7C3 0 0 3 0 6.9V25C0 29 3 32 6.9 32H25c3.8 0 6.9-3 6.9-6.9V7C32 3 29 0 25.1 0Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M12.7 12a2.5 2.5 0 1 0 0-5.1 2.5 2.5 0 0 0 0 5Zm4-5.1a6.1 6.1 0 1 1 0 12.1V7Zm0 12.1 6.2 6.1H9V11.4l7.7 7.6Z"
|
||||
fill="currentColor"
|
||||
className="fill-base-100"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid grid-cols-3 md:grid-cols-5 gap-x-6 sm:gap-x-6">
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto text-secondary-content"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
x="0"
|
||||
y="0"
|
||||
viewBox="0 0 88 22"
|
||||
enable-background="new 0 0 88 22"
|
||||
>
|
||||
<path
|
||||
d="M36.3 14.6a7.3 7.3 0 0 1-5.6 2.8c-3.8 0-6.8-2.7-6.8-6.2a6 6 0 0 1 2-4.5A6 6 0 0 1 30.5 5c2.2 0 4.3 1 5.6 2.8l-2.5 1.8a3.7 3.7 0 0 0-3.1-1.8 3.5 3.5 0 0 0-3.5 3.5c.1 2 1.7 3.5 3.6 3.5 1.3 0 2.5-.6 3.2-1.7l2.5 1.5z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path d="M37.7 0H40.8V17.1H37.7z" fill="currentColor" />
|
||||
<path
|
||||
d="M49.1 14.7c2 0 3.7-1.6 3.8-3.6-.1-2-1.8-3.6-3.8-3.6s-3.7 1.6-3.8 3.6c.1 2 1.7 3.6 3.8 3.6m0-9.8c1.7-.1 3.4.5 4.7 1.7 1.3 1.2 2 2.8 2.1 4.5a6.4 6.4 0 0 1-2.1 4.5 6.4 6.4 0 0 1-4.7 1.7c-3.8 0-6.8-2.7-6.8-6.2s3-6.2 6.8-6.2"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M55.3 5.1 59 5.1 62 11.5 65.2 5.1 68.6 5.1 62 17.8z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M77.5 9.4a3 3 0 0 0-2.9-1.9c-1.3 0-2.5.7-3.1 1.9h6zm2 6.3a7 7 0 0 1-4.6 1.6c-3.8 0-6.8-2.7-6.8-6.2 0-1.7.7-3.3 1.9-4.5a6 6 0 0 1 4.6-1.7c1.7-.1 3.3.6 4.5 1.8s1.8 2.8 1.7 4.5v.8h-9.6a3.9 3.9 0 0 0 6.5 1.5l1.8 2.2zm2.8-5.3c0-2.9 2.2-5.2 5.7-5.2V8c-.7 0-1.5.3-2 .8s-.7 1.3-.6 2v6.3h-3.1v-6.7z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M9.7 5.6a5 5 0 0 0-8.3-3.5C0 3.5-.4 5.6.3 7.4s2.5 3 4.5 3h4.9V5.6zm1.4 0a5 5 0 0 1 8.3-3.5c1.4 1.4 1.8 3.5 1.1 5.3s-2.5 3-4.5 3h-4.9V5.6zm0 11a5 5 0 0 0 8.3 3.5c1.4-1.4 1.8-3.5 1.1-5.3s-2.5-3-4.5-3h-4.9v4.8zm-6.3 3.5c1.9 0 3.5-1.5 3.5-3.5v-3.5H4.8c-1.9 0-3.5 1.5-3.5 3.5s1.6 3.5 3.5 3.5zm4.9-3.5a5 5 0 0 1-8.3 3.5C0 18.7-.4 16.6.3 14.8s2.5-3 4.5-3h4.9v4.8z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto text-secondary-content"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 151 32"
|
||||
>
|
||||
<path
|
||||
d="M.7 7.6v7.6h15.1V0H.7v7.6ZM17.4 0v15.2h15.1V0H17.4ZM139.3 5.1a5 5 0 0 0-3 2.2c-.6 1-.8 1.8-.8 3.2v1.3h-2.2v1.4l-.1 1.3h2.3v11.1h3.3V14.5h4.8V18c0 4.2.1 5 .6 6 .4.9 1.1 1.5 2 1.7a8 8 0 0 0 3.2 0l.7-.3v-2.6l-.6.2c-1 .4-2 .2-2.4-.6-.1-.3-.2-.8-.2-4.2v-3.7h3.2v-2.7H147v-4h-.3l-1.7.6-1.3.4v3.1h-2.4l-2.4-.1v-1.4c0-1.5.2-2 .9-2.4.4-.3 1.4-.4 2-.1l.6.1V6.7c0-1.2 0-1.4-.2-1.5-.3-.1-2.3-.2-2.8 0ZM66.6 6.3c-.6.4-1 .9-1 1.6 0 1.1 1 1.9 2.2 1.8 1-.1 1.7-.8 1.7-1.8 0-.7-.2-1.1-.9-1.6-.5-.3-1.5-.3-2 0ZM42.1 16v9.6h3.2V10.9l3 7.3 3 7.4h2.3l2.9-7.4 3-7.3v14.7h3.3V6.4h-4.5L55.6 13l-2.9 7-.2.6-1-2.6-2.8-7-1.8-4.6H42V16ZM76.8 11.7a6.8 6.8 0 0 0-5 4.7c-.4 1-.5 3.3-.2 4.4a6.8 6.8 0 0 0 3.2 4.3c1.8 1 4.5 1 6.5.2l.7-.2v-3l-.7.4c-2 1-4.1.9-5.4-.5-1-1-1.3-2.4-1-4.1a4 4 0 0 1 2.4-3.4 5 5 0 0 1 4.3.5l.5.3v-3.1l-.8-.3c-1-.3-3.4-.4-4.5-.2ZM90.7 11.7c-1.1.2-2 .8-2.6 2l-.3.5v-2.4h-3.2v13.8h3.2V17l.4-.7c.5-1 1-1.6 2-1.8a4 4 0 0 1 2 .3l.4.2v-1.6c0-1.1 0-1.6-.2-1.7a4 4 0 0 0-1.7-.1ZM98 11.7a6.4 6.4 0 0 0-5 5c-.3 1-.3 3.1 0 4.3.5 2.3 2.3 4 4.6 4.7 1 .2 3 .2 4.1 0 2.1-.6 3.8-2 4.5-4 .5-1.1.7-2.4.6-3.7a6.6 6.6 0 0 0-1.9-4.6c-.7-.8-1.3-1.1-2.4-1.5-.9-.3-3.5-.4-4.5-.2Zm3.4 2.8c.8.4 1.5 1.2 1.8 2 .1.6.2 1 .2 2.3 0 1.4 0 1.7-.3 2.3-.3.8-.8 1.4-1.6 1.8-.5.2-.7.3-1.6.3-1.2 0-1.8-.2-2.5-.8-1.1-1-1.6-3.2-1.2-5.2.4-1.4 1-2.2 2-2.7.9-.4 2.4-.4 3.2 0ZM111.8 11.7a4.9 4.9 0 0 0-3.1 2.5c-.4.8-.4 2.4 0 3.3.5 1 1 1.4 3 2.4L114 21c.3.3.4 1.2.1 1.6-.7 1-3.1 1-5-.2l-.7-.4V25l.5.2c1.3.5 3.8.7 5.1.3a4.6 4.6 0 0 0 3.2-2.3c.2-.5.3-.8.3-1.7 0-1 0-1.2-.3-1.6-.6-1-1.3-1.7-3.4-2.6-1.5-.7-2-1-2-1.7-.3-1.6 2.1-2.1 4.5-1l.6.4v-1.5l-.1-1.5-.7-.2a11 11 0 0 0-4.2-.2ZM124 11.8c-1.7.4-3.2 1.4-4 2.7a9 9 0 0 0-.6 7.3c1 2.8 4 4.4 7.4 4 1.9-.2 3-.7 4.1-2 1.5-1.3 2-2.8 2-5.2 0-2.4-.5-4-1.8-5.2a5.6 5.6 0 0 0-2.9-1.6c-1.1-.3-3.1-.3-4.3 0Zm3.7 2.8c.6.3 1.2 1 1.6 1.8.2.6.2 1 .2 2.2 0 2.4-.5 3.5-1.8 4.2-.6.3-.8.4-1.7.4-1.3 0-2-.3-2.7-1-.8-1-1-1.7-1-3.4 0-2.3.5-3.5 2-4.2.6-.4.7-.4 1.8-.3.8 0 1.2 0 1.6.3ZM66 18.7v6.9h3.2V11.9h-1.6l-1.7-.1v6.9ZM.7 24.4V32h15.1V16.8H.7v7.6ZM17.4 24.4v7.5H25l7.5.1V16.8H17.4v7.6Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto text-secondary-content"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 107 32"
|
||||
>
|
||||
<g clip-path="url(#a)" fill="currentColor">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M3.1 0A3.1 3.1 0 0 0 0 3.1v25.2c0 1.7 1.4 3.1 3.1 3.1h25.2c1.7 0 3.1-1.4 3.1-3.1V3C31.4 1.4 30 0 28.3 0H3Zm7.3 18H13c2 0 3.3-2 2.5-3.8l-2.7-6a2.4 2.4 0 0 1 4.4-2L24.7 23a2.5 2.5 0 1 1-4.6 2l-.5-1c-.4-1-1.4-1.6-2.5-1.6h-3c-1 0-2 .6-2.5 1.6l-.4 1a2.5 2.5 0 0 1-4.7-2L8 19.6c.4-1 1.3-1.6 2.4-1.6Zm10.7-9.4L22.5 5c0-.3.5-.3.6 0l.6 1.2.1.1 1.5.8c.2.1.2.5 0 .6L21.5 9a.3.3 0 0 1-.5-.4ZM7.4 13.4l3.6 1.3c.3.1.5-.1.4-.4l-1.3-3.6a.3.3 0 0 0-.6 0L8.7 12l-.1.2-1.3.6c-.2.1-.2.5 0 .6ZM42.1 26.7h-3l6.6-20.3c.1-.3.4-.4.6-.4h4.5c.2 0 .5.1.6.4L58 26.7h-3l-2-6.3H44l-2 6.3Zm2.9-9 2.8-8.6a.8.8 0 0 1 1.5 0l2.8 8.7H45Z"
|
||||
/>
|
||||
<path d="M60.5 11.3v15.4h2.7V12c0-.3-.3-.6-.7-.6h-2ZM106 6h-2v20.7h2.7V6.6c0-.3-.3-.6-.7-.6ZM68.2 13.5a2.2 2.2 0 1 1-4.4 0 2.2 2.2 0 0 1 4.4 0ZM77.9 11.4c3.9.3 5.4 3.8 5.7 5.4h-2.9c-.3-2-2.7-3.9-5.7-2.8-3.3 1.2-3.2 4.8-3 6 .2 1.1.6 3 3 4 3 1.1 5.4-.8 5.7-2.8h2.9c-.3 1.7-1.8 5-5.7 5.4-4.3.5-6-1.5-6.8-2.4a7 7 0 0 1-1.4-2.8c-.8-3.5.4-6.5 1.4-7.6.7-1 2.5-2.8 6.8-2.4Z" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M87.8 13.8c-1 1-2.2 4-1.5 7.6.2.8.8 2 1.5 2.8.7.9 2.3 2.5 5.8 2.5 3.6 0 5.1-1.6 5.9-2.5a7 7 0 0 0 1.4-2.8c.8-3.5-.5-6.5-1.4-7.6-.7-1-2.3-2.5-5.9-2.5-3.5 0-5.1 1.6-5.8 2.5Zm1 6.3c-.2-1.3-.4-4.9 3-6a5.4 5.4 0 0 1 3.6 0c3.4 1.1 3.3 4.7 3.1 6-.2 1-.6 3-3 4a5.4 5.4 0 0 1-3.7 0c-2.4-1-2.9-3-3-4Z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto text-secondary-content"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="2500"
|
||||
height="1036"
|
||||
viewBox="0 -6.166 294.398 121.975"
|
||||
>
|
||||
<path
|
||||
d="M12.139 90.511c-3.939 0-7.799-.479-10.938-1.292l.487-8.277c3.053 1.123 7.313 2.012 11.254 2.012 5.952 0 10.775-2.492 10.775-8.359C23.718 63.172 0 68.002 0 50.466c0-9.325 7.315-15.834 19.941-15.834 3.214 0 6.51.397 9.809.959l-.485 7.802c-3.132-.963-6.591-1.527-9.806-1.527-6.754 0-10.211 3.134-10.211 7.638 0 10.855 23.72 6.839 23.72 23.798-.005 9.973-7.882 17.209-20.829 17.209M54.106 90.264c-2.249 0-3.938-.076-6.03-.479v17.397h-8.601V49.746h8.12c0 2.094-.082 5.309-.484 7.476h.162c2.25-5.068 6.833-8.283 12.944-8.283 9.487 0 14.712 6.75 14.712 18.814.001 14.076-7.473 22.511-20.823 22.511m3.861-34.246c-6.434 0-9.892 7.558-9.892 14.384v12.312c1.852.562 3.86.804 6.272.804 6.833 0 11.497-4.182 11.497-14.958.001-8.039-2.49-12.542-7.877-12.542zM102.519 57.381C94.561 55.936 90.7 61.485 90.7 73.466v16.238h-8.606V49.746H90.3c0 2.246-.246 5.791-.809 8.844h.162c1.771-5.388 5.79-10.377 13.271-9.651l-.405 8.442M114.803 43.797c-3.056 0-5.55-2.414-5.55-5.393 0-2.971 2.494-5.385 5.55-5.385 2.974 0 5.467 2.333 5.467 5.385 0 2.979-2.493 5.393-5.467 5.393m4.26 45.907h-8.6V49.746h8.6v39.958zM154.449 89.704V63.975c0-4.982-1.374-7.875-5.951-7.875-6.03 0-10.457 6.345-10.457 14.302v19.303h-8.603V49.746h8.203c0 2.094-.162 5.546-.563 7.796l.082.075c2.33-5.141 7.157-8.68 13.91-8.68 9.084 0 11.9 5.711 11.9 12.787v27.979h-8.521M186.675 90.425c-8.524 0-11.1-3.294-11.1-12.214V56.417h-7.634v-6.671h7.634V37.04l8.523-2.333v15.039h10.532v6.671h-10.448v19.137c0 5.954 1.205 7.558 5.224 7.558 1.769 0 3.699-.24 5.226-.643v7.076c-2.331.486-5.307.88-7.957.88"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M233.712 78.636c11.72-15.086 20.938-32.809 20.938-45.537 0-6.652-4.765-11.295-10.978-14.823.123 13.831-4.668 46.263-9.96 60.36M195.279 115.809c27.47-9.188 67.29-30.598 94.985-49.725 2.324-1.6 4.135-3.085 4.135-5.685 0-4.519-8.275-10.576-12.292-12.987-21.792 22.653-65.163 56.596-86.828 68.397"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M220.76 96.567c16.938-11.709 41.545-33.739 49.873-45.727 1.963-2.82 3.416-4.454 3.416-7.405 0-4.839-5.644-8.382-9.703-10.849-9.727 22.924-31.579 51.469-43.586 63.981M236.192 64.087c2.191-14.477.903-31.952-1.894-42.913-1.521-5.969-6.901-12.706-11.88-14.812 6.526 18.522 12.128 44.898 13.774 57.725"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M231.367 43.779C226.235 29.91 213.446.998 194.633-6.165c12.247 13.516 30.417 40.337 36.734 49.944"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 mx-auto text-secondary-content"
|
||||
width="2500"
|
||||
height="728"
|
||||
viewBox="0 0 512 149"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M.06 27.679h17.852v39.662h37.651V27.679h17.875v97.358H55.563V84.542H17.912v40.495H.06V27.679zM129.993 93.326c0 8.15-6.64 14.782-14.788 14.782-8.151 0-14.787-6.632-14.787-14.782V51.41h-16.93v41.916c0 17.487 14.229 31.711 31.717 31.711 17.484 0 31.712-14.224 31.712-31.711V51.41h-16.924v41.916M194.179 51.901c-8.398 0-14.26 2.437-19.921 7.994V27.679h-16.985v59.705c0 22.348 16.158 37.653 34.311 37.653 20.181 0 37.863-15.578 37.863-36.567 0-20.723-16.305-36.569-35.268-36.569zm.422 57.423c-11.509 0-20.31-9.612-20.31-20.854 0-11.244 8.801-20.859 20.31-20.859 9.752 0 18.558 9.615 18.558 20.859 0 11.242-8.806 20.854-18.558 20.854zM257.974 56.18c0-8.538 5.689-11.245 11.917-11.245 5.014 0 11.649 3.792 15.979 8.398l11.103-13.001c-5.549-7.448-16.788-12.596-25.998-12.596-18.421 0-31.694 10.7-31.694 28.444 0 32.91 40.497 22.478 40.497 40.902 0 5.682-5.551 10.698-11.913 10.698-10.026 0-13.278-4.876-17.881-10.024l-12.327 12.729c7.86 9.617 17.608 14.495 29.257 14.495 17.47 0 31.556-10.835 31.556-27.767 0-36.566-40.496-25.188-40.496-41.033M343.184 50.947c-18.151 0-34.311 15.296-34.311 37.649v59.859h16.984v-32.369c5.662 5.553 11.521 7.994 19.922 7.994 18.962 0 35.269-15.844 35.269-36.567 0-20.992-17.687-36.566-37.864-36.566zm3.018 57.425c-11.508 0-20.31-9.625-20.31-20.859 0-11.244 8.802-20.859 20.31-20.859 9.75 0 18.557 9.615 18.557 20.859 0 11.234-8.807 20.859-18.557 20.859zM506.069 109.324c-10.018 0-12.862-4.332-12.862-10.971V68.965h15.572V54.069h-15.572v-19.64l-17.195 7.718v59.863c0 15.306 10.56 23.027 25.045 23.027 2.167 0 5.15-.14 6.777-.541l4.199-15.438c-1.896.131-4.062.266-5.964.266"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M461.278 69.831c-3.256-5.602-7.836-10.093-13.562-13.474-4.279-2.491-8.716-4.072-13.716-4.751v-17.8c5-2.123 8.103-6.822 8.103-12.304 0-7.472-5.992-13.527-13.458-13.527-7.472 0-13.569 6.055-13.569 13.527 0 5.482 2.924 10.181 7.924 12.304v17.808c-4 .578-8.148 1.825-11.936 3.741-7.737-5.876-33.107-25.153-47.948-36.412.352-1.269.623-2.577.623-3.957 0-8.276-6.702-14.984-14.981-14.984S333.78 6.71 333.78 14.986c0 8.275 6.706 14.985 14.985 14.985 2.824 0 5.436-.826 7.69-2.184l3.132 2.376 43.036 31.008c-2.275 2.089-4.394 4.465-6.089 7.131C393.099 73.737 391 79.717 391 86.24v1.361c0 4.579.87 8.902 2.352 12.963 1.305 3.546 3.213 6.77 5.576 9.685l-14.283 14.318a11.501 11.501 0 0 0-12.166 2.668 11.499 11.499 0 0 0-3.388 8.19c.001 3.093 1.206 6 3.394 8.187a11.5 11.5 0 0 0 8.188 3.394 11.51 11.51 0 0 0 8.191-3.394 11.514 11.514 0 0 0 3.39-8.187c0-1.197-.185-2.365-.533-3.475l14.763-14.765c2.024 1.398 4.21 2.575 6.56 3.59 4.635 2.004 9.751 3.225 15.35 3.225h1.026c6.19 0 12.029-1.454 17.518-4.428 5.784-3.143 10.311-7.441 13.731-12.928 3.438-5.502 5.331-11.581 5.331-18.269v-.334c0-6.579-1.523-12.649-4.722-18.21zm-18.038 30.973c-4.007 4.453-8.613 7.196-13.82 7.196h-.858c-2.974 0-5.883-.822-8.731-2.317-3.21-1.646-5.65-3.994-7.647-6.967-2.064-2.918-3.184-6.104-3.184-9.482v-1.026c0-3.321.637-6.47 2.243-9.444 1.717-3.251 4.036-5.779 7.12-7.789 3.028-1.996 6.262-2.975 9.864-2.975h.335c3.266 0 6.358.644 9.276 2.137 2.973 1.592 5.402 3.767 7.285 6.628 1.829 2.862 2.917 5.949 3.267 9.312.055.699.083 1.415.083 2.099 0 4.564-1.744 8.791-5.233 12.628z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
|
||||
<div className="mt-8 text-center">
|
||||
<a
|
||||
className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-full border border-base-200 bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
Read case studies
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Clients --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,298 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# With Stats
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/ClientSections/WithStats.tsx"
|
||||
<>
|
||||
{/* <!-- Clients --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Title --> */}
|
||||
<div className="sm:w-1/2 xl:w-1/3 mx-auto text-center mb-6">
|
||||
<h2 className="text-xl font-semibold md:text-2xl md:leading-tight text-secondary-content">
|
||||
Trusted by Open Source, enterprise, and more than 99,000 of you
|
||||
</h2>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="my-8 md:my-16 grid grid-cols-3 sm:flex sm:justify-center gap-6 sm:gap-x-12 lg:gap-x-20">
|
||||
<a className="flex-shrink-0 transition hover:-translate-y-1" href="#">
|
||||
<svg
|
||||
className="w-6 md:w-10 mx-auto sm:mx-0"
|
||||
width="48"
|
||||
height="55"
|
||||
viewBox="0 0 48 55"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M48 27.3522C48 24.1724 44.0179 21.159 37.9128 19.2902C39.3216 13.0677 38.6955 8.11699 35.9364 6.53199C35.3004 6.1602 34.5569 5.98409 33.7448 5.98409V8.16591C34.1949 8.16591 34.5569 8.25396 34.8602 8.42029C36.1908 9.18344 36.768 12.0893 36.318 15.8267C36.2104 16.7464 36.0342 17.715 35.819 18.7032C33.9013 18.2336 31.8076 17.8716 29.6062 17.6368C28.2854 15.8267 26.9156 14.183 25.5361 12.7448C28.7256 9.78026 31.7195 8.15612 33.7546 8.15612V5.9743C31.064 5.9743 27.5418 7.89196 23.9804 11.2185C20.4191 7.91152 16.8969 6.01344 14.2063 6.01344V8.19526C16.2316 8.19526 19.2352 9.80961 22.4248 12.7546C21.055 14.1928 19.6853 15.8267 18.384 17.6368C16.1729 17.8716 14.0791 18.2336 12.1614 18.713C11.9364 17.7346 11.7701 16.7856 11.6527 15.8756C11.1928 12.1382 11.7603 9.23236 13.0811 8.45942C13.3746 8.28331 13.7562 8.20504 14.2063 8.20504V6.02322C13.3844 6.02322 12.6408 6.19933 11.9951 6.57112C9.24582 8.15612 8.62943 13.097 10.0481 19.3C3.96249 21.1785 0 24.1822 0 27.3522C0 30.532 3.98206 33.5454 10.0872 35.4142C8.67835 41.6368 9.30453 46.5874 12.0636 48.1724C12.6996 48.5442 13.4431 48.7203 14.265 48.7203C16.9556 48.7203 20.4778 46.8027 24.0391 43.4761C27.6005 46.7831 31.1227 48.6812 33.8133 48.6812C34.6351 48.6812 35.3787 48.5051 36.0245 48.1333C38.7737 46.5483 39.3901 41.6074 37.9715 35.4044C44.0375 33.5357 48 30.5222 48 27.3522V27.3522ZM35.2613 20.8263C34.8993 22.0884 34.4492 23.3897 33.9405 24.691C33.5393 23.9083 33.1186 23.1255 32.6588 22.3428C32.2087 21.5601 31.7293 20.797 31.2499 20.0534C32.6392 20.2589 33.9796 20.5132 35.2613 20.8263ZM30.7803 31.2462C30.0171 32.567 29.2344 33.8194 28.4223 34.9837C26.9645 35.1109 25.4872 35.1794 24 35.1794C22.5226 35.1794 21.0453 35.1109 19.5972 34.9935C18.7852 33.8292 17.9927 32.5866 17.2295 31.2756C16.4859 29.9939 15.8108 28.6926 15.1945 27.3816C15.8011 26.0705 16.4859 24.7595 17.2197 23.4778C17.9829 22.1569 18.7656 20.9046 19.5777 19.7403C21.0355 19.6131 22.5128 19.5446 24 19.5446C25.4774 19.5446 26.9547 19.6131 28.4028 19.7305C29.2148 20.8948 30.0073 22.1374 30.7705 23.4484C31.5141 24.7301 32.1892 26.0314 32.8055 27.3424C32.1892 28.6535 31.5141 29.9645 30.7803 31.2462ZM33.9405 29.9743C34.4688 31.2854 34.9189 32.5964 35.2907 33.8683C34.009 34.1814 32.6588 34.4456 31.2597 34.651C31.7391 33.8977 32.2185 33.1247 32.6686 32.3322C33.1186 31.5495 33.5393 30.757 33.9405 29.9743ZM24.0196 40.4138C23.1097 39.4745 22.1998 38.4276 21.2996 37.2829C22.1802 37.322 23.0803 37.3514 23.9902 37.3514C24.9099 37.3514 25.8198 37.3318 26.7102 37.2829C25.8296 38.4276 24.9197 39.4745 24.0196 40.4138ZM16.7403 34.651C15.351 34.4456 14.0106 34.1912 12.7289 33.8781C13.0909 32.616 13.541 31.3147 14.0497 30.0134C14.4509 30.7962 14.8716 31.5789 15.3314 32.3616C15.7913 33.1443 16.2609 33.9074 16.7403 34.651ZM23.9707 14.2907C24.8806 15.2299 25.7905 16.2768 26.6906 17.4215C25.81 17.3824 24.9099 17.353 24 17.353C23.0803 17.353 22.1704 17.3726 21.2801 17.4215C22.1606 16.2768 23.0705 15.2299 23.9707 14.2907ZM16.7305 20.0534C16.2511 20.8068 15.7717 21.5797 15.3216 22.3722C14.8716 23.1549 14.4509 23.9376 14.0497 24.7203C13.5214 23.4093 13.0713 22.0982 12.6996 20.8263C13.9812 20.523 15.3314 20.2589 16.7305 20.0534V20.0534ZM7.87607 32.3029C4.41256 30.8255 2.17203 28.8883 2.17203 27.3522C2.17203 25.8161 4.41256 23.8691 7.87607 22.4015C8.71749 22.0395 9.63718 21.7167 10.5862 21.4134C11.1439 23.331 11.8777 25.3269 12.7876 27.3718C11.8875 29.4068 11.1635 31.393 10.6156 33.3008C9.64696 32.9975 8.72727 32.6649 7.87607 32.3029ZM13.1398 46.2841C11.8092 45.521 11.232 42.6152 11.682 38.8777C11.7896 37.958 11.9658 36.9894 12.181 36.0012C14.0987 36.4708 16.1924 36.8328 18.3938 37.0677C19.7146 38.8777 21.0844 40.5214 22.4639 41.9596C19.2744 44.9242 16.2805 46.5483 14.2454 46.5483C13.8051 46.5385 13.4333 46.4505 13.1398 46.2841V46.2841ZM36.3473 38.8288C36.8072 42.5662 36.2397 45.4721 34.9189 46.245C34.6254 46.4211 34.2438 46.4994 33.7937 46.4994C31.7684 46.4994 28.7648 44.885 25.5752 41.9401C26.945 40.5018 28.3147 38.8679 29.616 37.0579C31.8272 36.8231 33.9209 36.4611 35.8386 35.9816C36.0636 36.9698 36.2397 37.9189 36.3473 38.8288V38.8288ZM40.1141 32.3029C39.2727 32.6649 38.353 32.9878 37.404 33.2911C36.8463 31.3734 36.1125 29.3775 35.2026 27.3326C36.1027 25.2976 36.8267 23.3114 37.3746 21.4036C38.3433 21.7069 39.2629 22.0395 40.1239 22.4015C43.5874 23.8789 45.828 25.8161 45.828 27.3522C45.8182 28.8883 43.5777 30.8353 40.1141 32.3029V32.3029Z"
|
||||
fill="#61DAFB"
|
||||
/>
|
||||
<path
|
||||
d="M23.9898 31.8234C26.4592 31.8234 28.4611 29.8216 28.4611 27.3522C28.4611 24.8828 26.4592 22.8809 23.9898 22.8809C21.5204 22.8809 19.5186 24.8828 19.5186 27.3522C19.5186 29.8216 21.5204 31.8234 23.9898 31.8234Z"
|
||||
fill="#61DAFB"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a className="flex-shrink-0 transition hover:-translate-y-1" href="#">
|
||||
<svg
|
||||
className="w-6 md:w-10 mx-auto sm:mx-0"
|
||||
width="48"
|
||||
height="42"
|
||||
viewBox="0 0 48 42"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_1306_13)">
|
||||
<path
|
||||
d="M38.3964 0H47.9955L23.9977 41.3961L0 0H18.3583L23.9977 9.5991L29.5172 0H38.3964Z"
|
||||
fill="#41B883"
|
||||
/>
|
||||
<path
|
||||
d="M0 0L23.9977 41.3961L47.9955 0H38.3964L23.9977 24.8377L9.47911 0H0Z"
|
||||
fill="#41B883"
|
||||
/>
|
||||
<path
|
||||
d="M9.479 0L23.9976 24.9576L38.3963 0H29.5171L23.9976 9.5991L18.3582 0H9.479Z"
|
||||
fill="#35495E"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1306_13">
|
||||
<rect width="48" height="41.4336" fill="base-100" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a className="flex-shrink-0 transition hover:-translate-y-1" href="#">
|
||||
<svg
|
||||
className="w-6 md:w-10 mx-auto sm:mx-0"
|
||||
width="48"
|
||||
height="51"
|
||||
viewBox="0 0 48 51"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_1314_2)">
|
||||
<path
|
||||
d="M0.0193481 8.53515L23.6078 0.130676L47.8314 8.38572L43.9092 39.5943L23.6078 50.8377L3.62395 39.7437L0.0193481 8.53515Z"
|
||||
fill="#E23237"
|
||||
/>
|
||||
<path
|
||||
d="M47.8314 8.38572L23.6078 0.130676V50.8377L43.9092 39.6131L47.8314 8.38572V8.38572Z"
|
||||
fill="#B52E31"
|
||||
/>
|
||||
<path
|
||||
d="M23.6451 6.05121L8.94678 38.754L14.4376 38.6606L17.3886 31.2832H30.5742L33.8053 38.754L39.0533 38.8473L23.6451 6.05121ZM23.6826 16.5288L28.6505 26.9129H19.3121L23.6826 16.5288Z"
|
||||
fill="base-100"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1314_2">
|
||||
<rect width="48" height="50.9987" fill="base-100" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a className="flex-shrink-0 transition hover:-translate-y-1" href="#">
|
||||
<svg
|
||||
className="w-6 md:w-10 mx-auto sm:mx-0"
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14.7298 40.1472C14.695 40.0857 14.6639 40.0221 14.6368 39.9568C14.4497 39.5235 14.3922 39.0453 14.4713 38.58H3.39139L19.8574 9.60244L25.2634 19.1057L26.8305 16.3324L22.1181 8.0309C21.8923 7.60574 21.5635 7.24396 21.1618 6.97863C20.7601 6.71331 20.2983 6.5529 19.8186 6.51208C19.3399 6.53384 18.877 6.68951 18.4824 6.96138C18.0878 7.23325 17.7774 7.6104 17.5865 8.04994L0.905195 37.3791C0.655848 37.7931 0.512082 38.2622 0.486543 38.7448C0.461003 39.2275 0.554474 39.7091 0.758732 40.1472C1.01527 40.5518 1.3799 40.8765 1.81137 41.0846C2.24285 41.2927 2.72396 41.3759 3.20026 41.3248H17.1721C16.6957 41.3766 16.2143 41.2938 15.7827 41.0856C15.351 40.8774 14.9865 40.5523 14.7305 40.1472H14.7298Z"
|
||||
fill="#00C492"
|
||||
/>
|
||||
<path
|
||||
d="M46.852 37.3783L33.1438 13.2318C32.919 12.8021 32.5895 12.436 32.1858 12.1672C31.7821 11.8984 31.3173 11.7357 30.8341 11.6939C30.356 11.7146 29.8934 11.8693 29.499 12.1403C29.1046 12.4114 28.7943 12.7878 28.6035 13.2266L26.8306 16.3316L28.408 19.1056L30.8488 14.7843L44.4105 38.5793H39.2535C39.3194 38.9726 39.2823 39.3763 39.1459 39.751C39.1171 39.8338 39.0811 39.914 39.0382 39.9905L38.9943 40.0783C38.7141 40.474 38.3408 40.7946 37.9073 41.0118C37.4738 41.2289 36.9935 41.3359 36.5088 41.3233H44.576C45.0607 41.3363 45.5412 41.2295 45.9747 41.0123C46.4083 40.7951 46.7816 40.4743 47.0614 40.0783C47.2824 39.6537 47.3798 39.1756 47.3428 38.6984C47.3058 38.2211 47.1358 37.7638 46.852 37.3783V37.3783Z"
|
||||
fill="#008776"
|
||||
/>
|
||||
<path
|
||||
d="M38.9949 40.0791L39.0389 39.9912C39.0815 39.9147 39.1173 39.8346 39.1458 39.7517C39.2823 39.377 39.3193 38.9734 39.2534 38.5801C39.1773 38.1559 39.025 37.749 38.8038 37.3791L28.4181 19.1057L26.8312 16.3324L25.2538 19.1057L14.8718 37.3791C14.6703 37.7534 14.5348 38.1597 14.4713 38.5801C14.3877 39.0442 14.4403 39.5226 14.6228 39.9575C14.6499 40.0228 14.681 40.0864 14.7159 40.1479C14.9725 40.5524 15.3372 40.8769 15.7686 41.0849C16.2001 41.2928 16.6811 41.3759 17.1574 41.3248H36.4941C36.9811 41.3392 37.4641 41.2331 37.9003 41.0159C38.3364 40.7987 38.7122 40.4772 38.9942 40.0798L38.9949 40.0791ZM26.8305 21.8797L36.3235 38.5793H17.3419L26.8305 21.8797Z"
|
||||
fill="#2D4A5D"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a className="flex-shrink-0 transition hover:-translate-y-1" href="#">
|
||||
<svg
|
||||
className="w-6 md:w-10 mx-auto sm:mx-0"
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M22.4295 0.0375632C22.3263 0.0469373 21.9982 0.0797466 21.703 0.103182C14.8927 0.717184 8.51362 4.39183 4.47339 10.0397C2.22361 13.18 0.784692 16.7422 0.240995 20.5153C0.0488258 21.8323 0.0253906 22.2213 0.0253906 24.0071C0.0253906 25.7929 0.0488258 26.1819 0.240995 27.4989C1.54399 36.5028 7.95118 44.0676 16.641 46.8705C18.1971 47.372 19.8375 47.7142 21.703 47.9204C22.4295 48.0001 25.5698 48.0001 26.2963 47.9204C29.5163 47.5642 32.2441 46.7674 34.9345 45.3941C35.3469 45.1832 35.4266 45.1269 35.3704 45.08C35.3329 45.0519 33.5752 42.6943 31.4661 39.8446L27.6321 34.6654L22.8279 27.5552C20.1844 23.6462 18.0096 20.4496 17.9908 20.4496C17.9721 20.4449 17.9533 23.604 17.944 27.4615C17.9299 34.2155 17.9252 34.4873 17.8408 34.6467C17.719 34.8764 17.6252 34.9701 17.4284 35.0732C17.2784 35.1482 17.1472 35.1623 16.4394 35.1623H15.6286L15.413 35.0263C15.2723 34.9373 15.1692 34.8201 15.0989 34.6842L15.0005 34.4733L15.0099 25.0757L15.0239 15.6735L15.1692 15.4907C15.2442 15.3923 15.4036 15.2658 15.5161 15.2048C15.7082 15.1111 15.7832 15.1017 16.5941 15.1017C17.5502 15.1017 17.7096 15.1392 17.958 15.4111C18.0283 15.4861 20.6296 19.4044 23.7418 24.1243C26.854 28.8441 31.1099 35.2888 33.2003 38.4526L36.9968 44.2036L37.189 44.077C38.8903 42.9709 40.6902 41.396 42.115 39.7556C45.1475 36.2731 47.102 32.0266 47.7582 27.4989C47.9504 26.1819 47.9738 25.7929 47.9738 24.0071C47.9738 22.2213 47.9504 21.8323 47.7582 20.5153C46.4552 11.5114 40.048 3.94656 31.3583 1.14371C29.8256 0.646879 28.1945 0.304725 26.3666 0.0984947C25.9166 0.0516243 22.8185 6.68575e-05 22.4295 0.0375632V0.0375632ZM32.2441 14.5393C32.4691 14.6518 32.6519 14.8674 32.7175 15.0923C32.755 15.2142 32.7644 17.8202 32.755 23.6931L32.7409 32.1204L31.2552 29.8425L29.7647 27.5646V21.4386C29.7647 17.478 29.7834 15.2517 29.8115 15.1439C29.8865 14.8814 30.0506 14.6752 30.2756 14.5533C30.4677 14.4549 30.538 14.4455 31.2739 14.4455C31.9676 14.4455 32.0894 14.4549 32.2441 14.5393V14.5393Z"
|
||||
fill="currentColor"
|
||||
className="fill-black dark:fill-base-100"
|
||||
/>
|
||||
<path
|
||||
d="M36.7627 44.3067C36.5986 44.4098 36.5471 44.4801 36.6924 44.4004C36.7955 44.3395 36.9642 44.2129 36.9361 44.2083C36.922 44.2083 36.8423 44.2551 36.7627 44.3067ZM36.4393 44.5176C36.3549 44.5832 36.3549 44.5879 36.458 44.5363C36.5142 44.5082 36.5611 44.4754 36.5611 44.466C36.5611 44.4285 36.5377 44.4379 36.4393 44.5176ZM36.2049 44.6582C36.1205 44.7238 36.1205 44.7285 36.2237 44.677C36.2799 44.6488 36.3268 44.616 36.3268 44.6067C36.3268 44.5692 36.3033 44.5785 36.2049 44.6582ZM35.9706 44.7988C35.8862 44.8644 35.8862 44.8691 35.9893 44.8176C36.0455 44.7894 36.0924 44.7566 36.0924 44.7473C36.0924 44.7098 36.069 44.7191 35.9706 44.7988ZM35.6143 44.9863C35.4362 45.08 35.4456 45.1175 35.6237 45.0285C35.7034 44.9863 35.7643 44.9441 35.7643 44.9347C35.7643 44.9019 35.7596 44.9066 35.6143 44.9863Z"
|
||||
fill="currentColor"
|
||||
className="fill-black dark:fill-base-100"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a className="flex-shrink-0 transition hover:-translate-y-1" href="#">
|
||||
<svg
|
||||
className="w-6 md:w-10 mx-auto sm:mx-0"
|
||||
width="48"
|
||||
height="50"
|
||||
viewBox="0 0 48 50"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_1314_6)">
|
||||
<path
|
||||
d="M47.8876 11.3229C47.9054 11.3887 47.9145 11.4565 47.9146 11.5246V22.1123C47.9146 22.2481 47.8788 22.3816 47.8107 22.4992C47.7425 22.6168 47.6446 22.7143 47.5267 22.7819L38.6403 27.8982V38.0391C38.6403 38.3151 38.4936 38.5698 38.2543 38.7088L19.7047 49.3871C19.6622 49.4113 19.6159 49.4267 19.5696 49.4431C19.5522 49.4489 19.5358 49.4595 19.5175 49.4643C19.3878 49.4985 19.2515 49.4985 19.1219 49.4643C19.1006 49.4585 19.0813 49.447 19.0611 49.4392C19.0186 49.4238 18.9742 49.4103 18.9337 49.3871L0.387918 38.7088C0.270102 38.6411 0.172209 38.5436 0.104105 38.426C0.0360015 38.3084 9.33506e-05 38.175 0 38.0391L0 6.27612C0 6.20664 0.00964971 6.1391 0.0270192 6.07348C0.032809 6.05128 0.0463186 6.03102 0.0540383 6.00883C0.0685129 5.9683 0.0820225 5.9268 0.103252 5.88917C0.117726 5.86408 0.138956 5.84382 0.156325 5.82066C0.17852 5.78978 0.198784 5.75793 0.224838 5.73091C0.247032 5.70872 0.275982 5.69232 0.301071 5.67302C0.329055 5.64986 0.354144 5.62477 0.385988 5.60643H0.386953L9.66032 0.267251C9.77774 0.199684 9.91084 0.164124 10.0463 0.164124C10.1818 0.164124 10.3149 0.199684 10.4323 0.267251L19.7057 5.60643H19.7076C19.7385 5.62573 19.7645 5.64986 19.7925 5.67205C19.8176 5.69135 19.8456 5.70872 19.8678 5.72995C19.8948 5.75793 19.9141 5.78978 19.9373 5.82066C19.9537 5.84382 19.9759 5.86408 19.9894 5.88917C20.0116 5.92777 20.0241 5.9683 20.0395 6.00883C20.0473 6.03102 20.0608 6.05128 20.0666 6.07444C20.0843 6.1402 20.0934 6.20801 20.0936 6.27612V26.1149L27.8211 21.6655V11.5236C27.8211 11.4561 27.8307 11.3876 27.8481 11.3229C27.8548 11.2998 27.8674 11.2795 27.8751 11.2573C27.8905 11.2168 27.904 11.1753 27.9253 11.1376C27.9398 11.1126 27.961 11.0923 27.9774 11.0691C28.0005 11.0383 28.0198 11.0064 28.0469 10.9794C28.0691 10.9572 28.097 10.9408 28.1221 10.9215C28.1511 10.8983 28.1762 10.8732 28.207 10.8549H28.208L37.4823 5.51573C37.5997 5.44806 37.7328 5.41245 37.8683 5.41245C38.0038 5.41245 38.1369 5.44806 38.2543 5.51573L47.5277 10.8549C47.5605 10.8742 47.5856 10.8983 47.6145 10.9205C47.6387 10.9398 47.6666 10.9572 47.6888 10.9784C47.7159 11.0064 47.7352 11.0383 47.7583 11.0691C47.7757 11.0923 47.7969 11.1126 47.8104 11.1376C47.8326 11.1753 47.8452 11.2168 47.8606 11.2573C47.8693 11.2795 47.8818 11.2998 47.8876 11.3229V11.3229ZM46.3688 21.6655V12.8611L43.1236 14.7293L38.6403 17.3106V26.1149L46.3697 21.6655H46.3688ZM37.0954 37.5923V28.7821L32.6855 31.3007L20.0926 38.4878V47.381L37.0954 37.5923ZM1.54588 7.61261V37.5923L18.5467 47.38V38.4888L9.66514 33.4622L9.66225 33.4603L9.65839 33.4584C9.62847 33.441 9.60339 33.4159 9.5754 33.3947C9.55128 33.3754 9.52329 33.3599 9.50206 33.3387L9.50013 33.3358C9.47504 33.3117 9.45767 33.2818 9.43645 33.2548C9.41715 33.2287 9.39399 33.2065 9.37855 33.1795L9.37758 33.1766C9.36021 33.1477 9.3496 33.1129 9.33705 33.0801C9.32451 33.0512 9.3081 33.0241 9.30038 32.9933V32.9923C9.29073 32.9556 9.2888 32.917 9.28494 32.8794C9.28108 32.8504 9.27336 32.8215 9.27336 32.7925V12.0621L4.79108 9.47982L1.54588 7.61357V7.61261ZM10.0473 1.82857L2.32075 6.27612L10.0453 10.7237L17.7709 6.27516L10.0453 1.82857H10.0473ZM14.0654 29.585L18.5477 27.0047V7.61261L15.3025 9.48079L10.8192 12.0621V31.4541L14.0654 29.585ZM37.8683 7.07705L30.1428 11.5246L37.8683 15.9721L45.5929 11.5236L37.8683 7.07705ZM37.0954 17.3106L32.6121 14.7293L29.3669 12.8611V21.6655L33.8492 24.2458L37.0954 26.1149V17.3106ZM19.3187 37.1513L30.6504 30.6822L36.3147 27.4495L28.595 23.0048L19.7066 28.1221L11.6057 32.7858L19.3187 37.1513Z"
|
||||
fill="#FF2D20"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1314_6">
|
||||
<rect width="48" height="49.6278" fill="base-100" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a className="flex-shrink-0 transition hover:-translate-y-1" href="#">
|
||||
<svg
|
||||
className="w-6 md:w-10 mx-auto sm:mx-0"
|
||||
width="48"
|
||||
height="50"
|
||||
viewBox="0 0 1280 1280"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M815.039 94.6439C824.758 106.709 829.714 122.99 839.626 155.553L1056.17 866.901C976.107 825.368 889.072 795.413 797.281 779.252L656.29 302.798C653.983 295.002 646.822 289.654 638.693 289.654C630.542 289.654 623.368 295.03 621.08 302.853L481.795 779.011C389.579 795.1 302.146 825.109 221.741 866.793L439.347 155.388L439.348 155.388C449.291 122.882 454.262 106.629 463.982 94.5853C472.562 83.9531 483.723 75.6958 496.4 70.6002C510.76 64.8284 527.756 64.8284 561.749 64.8284H717.174C751.212 64.8284 768.23 64.8284 782.603 70.6123C795.292 75.7184 806.459 83.9923 815.039 94.6439Z"
|
||||
fill="url(#paint0_linear_709_11012gh4)"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M840.951 900.754C805.253 931.279 734.002 952.097 651.929 952.097C551.197 952.097 466.767 920.737 444.363 878.561C436.354 902.732 434.558 930.396 434.558 948.068C434.558 948.068 429.281 1034.84 489.636 1095.2C489.636 1063.86 515.042 1038.46 546.381 1038.46C600.097 1038.46 600.036 1085.32 599.987 1123.34C599.986 1124.48 599.984 1125.61 599.984 1126.73C599.984 1184.44 635.255 1233.91 685.416 1254.77C677.924 1239.36 673.721 1222.05 673.721 1203.77C673.721 1148.73 706.034 1128.23 743.588 1104.41L743.588 1104.41C773.469 1085.46 806.668 1064.41 829.548 1022.17C841.486 1000.13 848.265 974.893 848.265 948.068C848.265 931.573 845.702 915.676 840.951 900.754Z"
|
||||
fill="#FF5D01"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M840.951 900.754C805.253 931.279 734.002 952.097 651.929 952.097C551.197 952.097 466.767 920.737 444.363 878.561C436.354 902.732 434.558 930.396 434.558 948.068C434.558 948.068 429.281 1034.84 489.636 1095.2C489.636 1063.86 515.042 1038.46 546.381 1038.46C600.097 1038.46 600.036 1085.32 599.987 1123.34C599.986 1124.48 599.984 1125.61 599.984 1126.73C599.984 1184.44 635.255 1233.91 685.416 1254.77C677.924 1239.36 673.721 1222.05 673.721 1203.77C673.721 1148.73 706.034 1128.23 743.588 1104.41L743.588 1104.41C773.469 1085.46 806.668 1064.41 829.548 1022.17C841.486 1000.13 848.265 974.893 848.265 948.068C848.265 931.573 845.702 915.676 840.951 900.754Z"
|
||||
fill="url(#paint1_linear_709_1103afaw)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_709_11012gh4"
|
||||
x1="882.997"
|
||||
y1="27.1132"
|
||||
x2="638.955"
|
||||
y2="866.902"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#000014" />
|
||||
<stop offset="1" stop-color="#150426" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_709_1103afaw"
|
||||
x1="1001.68"
|
||||
y1="652.45"
|
||||
x2="790.326"
|
||||
y2="1094.91"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#FF1639" />
|
||||
<stop offset="1" stop-color="#FF1639" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a className="flex-shrink-0 transition hover:-translate-y-1" href="#">
|
||||
<svg
|
||||
className="w-6 md:w-10 mx-auto sm:mx-0"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 70 70"
|
||||
>
|
||||
<mask
|
||||
id="a"
|
||||
style={{ maskType: "luminance" }}
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="0"
|
||||
y="0"
|
||||
width="70"
|
||||
height="70"
|
||||
>
|
||||
<path
|
||||
d="M62 0H8a8 8 0 0 0-8 8v54a8 8 0 0 0 8 8h54a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8Z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#a)">
|
||||
<path
|
||||
d="M69.8 70H.1V8a8 8 0 0 1 8-8h54a8 8 0 0 1 8 8v61.8l-.3.2Zm-12-24.2-.4-.4c-1.3-1.3-3-1.6-4.7-1.4-1.5 0-2.8.8-4 1.8l-.2-.1c0-.6-.2-1-.7-1.2-.4-.2-.9-.2-1.3 0-.5.4-.6.8-.6 1.3v12.8c0 .7.3 1.2.8 1.4 1 .2 1.8-.4 1.8-1.3v-8.3c0-.8.2-1.5.7-2.1 1.2-1.4 2.7-2 4.5-1.8.8.1 1.6.5 2 1.3.5.7.7 1.5.7 2.3v8.7c0 1 1 1.5 1.9 1 .5-.2.7-.7.7-1.3V49a6.3 6.3 0 0 0-1.2-3.1Zm-16.3-1.3c-.3-.1-.6-.2-1-.1-.6.2-1 .7-1 1.4V55a3 3 0 0 1-2 2.4 5 5 0 0 1-3.2.1 3 3 0 0 1-1.8-1.5c-.3-.5-.5-1-.5-1.7v-8.5c0-.8-.5-1.4-1.2-1.4-.9 0-1.5.5-1.5 1.4v8c0 1 .1 2 .5 2.9.7 1.7 2 2.7 3.7 3.3a8.4 8.4 0 0 0 5.9-.6c1.8-1 2.7-2.7 2.8-4.7v-9c0-.6-.3-1-.7-1.2Z"
|
||||
fill="#EFDA4F"
|
||||
/>
|
||||
<path
|
||||
d="M57.8 45.8c.7 1 1 2 1.1 3.1l.1 1.9v7.7c0 .6-.2 1-.7 1.4-.9.4-1.9-.2-2-1.1V50c0-.8-.1-1.6-.6-2.3a2.7 2.7 0 0 0-2-1.3c-1.8-.2-3.3.4-4.5 1.8-.5.6-.7 1.3-.7 2v8.4c0 1-.8 1.5-1.8 1.3-.5-.2-.8-.7-.8-1.4V46c0-.6.1-1 .6-1.3.4-.3.9-.3 1.3-.1a1.3 1.3 0 0 1 .7 1.2c0 .1.2.2.2 0 1.2-1 2.5-1.6 4-1.7 1.8-.2 3.4 0 4.7 1.4l.4.4ZM40.5 44.4l1 .1c.5.2.7.7.7 1.2v9c-.1 2-1 3.6-2.8 4.7a8.4 8.4 0 0 1-5.8.6c-1.8-.6-3.1-1.6-3.8-3.3-.4-1-.5-1.9-.5-2.8v-8.1c0-1 .6-1.5 1.5-1.4.7 0 1.2.6 1.2 1.4v8.5c0 .6.2 1.2.5 1.7a3 3 0 0 0 1.8 1.5 5 5 0 0 0 3.3-.1 3 3 0 0 0 1.9-2.4V45.8c0-.7.4-1.2 1-1.4Z"
|
||||
fill="#000"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid grid-cols-12 sm:flex sm:justify-center gap-6 sm:gap-x-12 lg:gap-x-20">
|
||||
<div className="col-span-6 text-center">
|
||||
<h4 className="text-xl md:text-3xl font-semibold text-secondary-content">
|
||||
250+
|
||||
</h4>
|
||||
<h4 className="text-sm text-secondary-content">Components</h4>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="col-span-6 text-center">
|
||||
<h4 className="text-xl md:text-3xl font-semibold text-secondary-content">
|
||||
160+
|
||||
</h4>
|
||||
<h4 className="text-sm text-secondary-content">
|
||||
Starter Pages & Examples
|
||||
</h4>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="col-start-4 col-span-6 text-center">
|
||||
<h4 className="text-xl md:text-3xl font-semibold text-secondary-content">
|
||||
10+
|
||||
</h4>
|
||||
<h4 className="text-sm text-secondary-content">
|
||||
Tailwind CSS Plugins
|
||||
</h4>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Clients --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"label": "Client Sections",
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Cards On A Background Image
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/FeaturesGeneral/CardsOnABackgroundImage.tsx"
|
||||
<>
|
||||
{/* <!-- Features --> */}
|
||||
<div className="flex justify-center px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
|
||||
<div className="w-full min-h-[35vh] max-w-6xl bg-[url('https://images.unsplash.com/photo-1665686374006-b8f04cf62d57?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80')] bg-center bg-cover bg-no-repeat relative rounded-xl md:min-h-[75vh]">
|
||||
<div className="absolute bottom-0 start-0 end-0 max-w-xs text-center mx-auto p-6 md:start-auto md:text-start md:mx-0">
|
||||
{/* <!-- Card --> */}
|
||||
<div className="px-5 py-4 inline-block bg-white rounded-lg md:p-7">
|
||||
<div className="hidden md:block">
|
||||
<h3 className="text-lg font-bold text-gray-800 sm:text-2xl">
|
||||
How does FastPocket work?
|
||||
</h3>
|
||||
<p className="mt-2 text-gray-800">
|
||||
Learn more about FastPocket.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="md:mt-16">
|
||||
<a
|
||||
className="flex items-center gap-2 text-sm font-medium text-gray-800 hover:text-gray-500"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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"
|
||||
>
|
||||
<polygon points="5 3 19 12 5 21 5 3" />
|
||||
</svg>
|
||||
Watch our story
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Features --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Container Size Image With Icon Blocks
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/FeaturesGeneral/ContainerSizeImageWithIconBlocks.tsx"
|
||||
<>
|
||||
{/* <!-- Features --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div className="aspect-w-16 aspect-h-7">
|
||||
<img
|
||||
className="w-full object-cover rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1624571409412-1f253e1ecc89?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="mt-5 lg:mt-16 grid lg:grid-cols-3 gap-8 lg:gap-12">
|
||||
<div className="lg:col-span-1">
|
||||
<h2 className="font-bold text-2xl md:text-3xl text-secondary-content">
|
||||
We tackle the challenges start-ups face
|
||||
</h2>
|
||||
<p className="mt-2 md:mt-4 text-secondary-content">
|
||||
Besides working with start-up enterprises as a partner for
|
||||
digitalization, we have built enterprise products for common pain
|
||||
points that we have encountered in various products and projects.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="lg:col-span-2">
|
||||
<div className="grid sm:grid-cols-2 gap-8 md:gap-12">
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="flex gap-x-5">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-1 w-6 text-primary"
|
||||
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"
|
||||
>
|
||||
<rect width="18" height="10" x="3" y="11" rx="2" />
|
||||
<circle cx="12" cy="5" r="2" />
|
||||
<path d="M12 7v4" />
|
||||
<line x1="8" x2="8" y1="16" y2="16" />
|
||||
<line x1="16" x2="16" y1="16" y2="16" />
|
||||
</svg>
|
||||
<div className="grow">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
Creative minds
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
We choose our teams carefully. Our people are the secret to
|
||||
great work.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="flex gap-x-5">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-1 w-6 text-primary"
|
||||
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="M7 10v12" />
|
||||
<path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" />
|
||||
</svg>
|
||||
<div className="grow">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
Simple and affordable
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
From boarding passes to movie tickets, there's pretty much
|
||||
nothing you can't store with Preline.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="flex gap-x-5">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-1 w-6 text-primary"
|
||||
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="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
|
||||
</svg>
|
||||
<div className="grow">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
Industry-leading documentation
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Our documentation and extensive Client libraries contain
|
||||
everything a business needs to build a custom integration.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="flex gap-x-5">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-1 w-6 text-primary"
|
||||
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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
<div className="grow">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
Designing for people
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
We actively pursue the right balance between functionality
|
||||
and aesthetics, creating delightful experiences.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Features --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Simple With A Single Image
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/FeaturesGeneral/SimpleWithASingleImage.tsx"
|
||||
<>
|
||||
{/* <!-- Features --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="md:grid md:grid-cols-2 md:items-center md:gap-12 xl:gap-32">
|
||||
<div>
|
||||
<img
|
||||
className="rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1648737963503-1a26da876aca?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="mt-5 sm:mt-10 lg:mt-0">
|
||||
<div className="space-y-6 sm:space-y-8">
|
||||
{/* <!-- Title --> */}
|
||||
<div className="space-y-2 md:space-y-4">
|
||||
<h2 className="font-bold text-3xl lg:text-4xl text-secondary-content">
|
||||
We tackle the challenges start-ups face
|
||||
</h2>
|
||||
<p className="text-secondary-content">
|
||||
Besides working with start-up enterprises as a partner for
|
||||
digitalization, we have built enterprise products for common
|
||||
pain points that we have encountered in various products and
|
||||
projects.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
{/* <!-- List --> */}
|
||||
<ul role="list" className="space-y-2 sm:space-y-4">
|
||||
<li className="flex space-x-3">
|
||||
<span className="mt-0.5 w-5 flex justify-center items-center rounded-full bg-base-100 text-primary">
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
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"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<span className="text-sm sm:text-base text-secondary-content">
|
||||
<span className="font-bold">Easy & fast</span> designing
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li className="flex space-x-3">
|
||||
<span className="mt-0.5 w-5 flex justify-center items-center rounded-full bg-base-100 text-primary">
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
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"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<span className="text-sm sm:text-base text-secondary-content">
|
||||
Powerful <span className="font-bold">features</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li className="flex space-x-3">
|
||||
<span className="mt-0.5 w-5 flex justify-center items-center rounded-full bg-base-100 text-primary">
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
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"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<span className="text-sm sm:text-base text-secondary-content">
|
||||
User Experience Design
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
{/* <!-- End List --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Features --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Three Center Aligned Images With A Content
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/FeaturesGeneral/ThreeCenterAlignedImagesWithAContent.tsx"
|
||||
<>
|
||||
{/* <!-- Features --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center">
|
||||
<div className="lg:col-span-7">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid grid-cols-12 gap-2 sm:gap-6 items-center lg:-translate-x-10">
|
||||
<div className="col-span-4">
|
||||
<img
|
||||
className="rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1606868306217-dbf5046868d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1981&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="col-span-3">
|
||||
<img
|
||||
className="rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1605629921711-2f6b00c6bbf4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="col-span-5">
|
||||
<img
|
||||
className="rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1600194992440-50b26e0a0309?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="mt-5 sm:mt-10 lg:mt-0 lg:col-span-5">
|
||||
<div className="space-y-6 sm:space-y-8">
|
||||
{/* <!-- Title --> */}
|
||||
<div className="space-y-2 md:space-y-4">
|
||||
<h2 className="font-bold text-3xl lg:text-4xl text-secondary-content">
|
||||
Collaborative tools to design user experience
|
||||
</h2>
|
||||
<p className="text-secondary-content">
|
||||
Use our tools to explore your ideas and make your vision come
|
||||
true. Then share your work easily.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
{/* <!-- List --> */}
|
||||
<ul role="list" className="space-y-2 sm:space-y-4">
|
||||
<li className="flex space-x-3">
|
||||
{/* <!-- Solid Check --> */}
|
||||
<span className="mt-0.5 size-5 flex justify-center items-center rounded-full bg-base-100 text-primary">
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
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"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</span>
|
||||
{/* <!-- End Solid Check --> */}
|
||||
|
||||
<span className="text-sm sm:text-base text-secondary-content">
|
||||
<span className="font-bold">Less routine</span> – more
|
||||
creativity
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li className="flex space-x-3">
|
||||
{/* <!-- Solid Check --> */}
|
||||
<span className="mt-0.5 size-5 flex justify-center items-center rounded-full bg-base-100 text-primary">
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
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"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</span>
|
||||
{/* <!-- End Solid Check --> */}
|
||||
|
||||
<span className="text-sm sm:text-base text-secondary-content">
|
||||
Hundreds of thousands saved
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li className="flex space-x-3">
|
||||
{/* <!-- Solid Check --> */}
|
||||
<span className="mt-0.5 size-5 flex justify-center items-center rounded-full bg-base-100 text-primary">
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
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"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</span>
|
||||
{/* <!-- End Solid Check --> */}
|
||||
|
||||
<span className="text-sm sm:text-base text-secondary-content">
|
||||
Scale budgets <span className="font-bold">efficiently</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
{/* <!-- End List --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Features --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# With 4 Center Aligned Images And Icon Blocks
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/FeaturesGeneral/With4CenterAlignedImagesAndIconBlocks.tsx"
|
||||
<>
|
||||
{/* <!-- Features --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Title --> */}
|
||||
<div className="mx-auto max-w-2xl mb-8 lg:mb-14 text-center">
|
||||
<h2 className="text-3xl lg:text-4xl text-secondary-content font-bold">
|
||||
Explore tools
|
||||
</h2>
|
||||
<p className="mt-3 text-secondary-content">
|
||||
The powerful and flexible theme for all kinds of businesses.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="mx-auto max-w-3xl grid grid-cols-12 gap-6 lg:gap-8">
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="col-span-6 sm:col-span-4 text-center">
|
||||
<svg
|
||||
className="mx-auto h-auto w-7 md:w-9 text-secondary-content"
|
||||
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"
|
||||
>
|
||||
<rect width="10" height="14" x="3" y="8" rx="2" />
|
||||
<path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4" />
|
||||
<path d="M8 18h.01" />
|
||||
</svg>
|
||||
<div className="mt-2 sm:mt-6">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
Responsive
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="col-span-6 sm:col-span-4 text-center">
|
||||
<svg
|
||||
className="mx-auto h-auto w-7 md:w-9 text-secondary-content"
|
||||
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="M20 7h-9" />
|
||||
<path d="M14 17H5" />
|
||||
<circle cx="17" cy="17" r="3" />
|
||||
<circle cx="7" cy="7" r="3" />
|
||||
</svg>
|
||||
<div className="mt-2 sm:mt-6">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
Customizable
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="col-span-6 col-start-4 sm:col-span-4 text-center">
|
||||
<svg
|
||||
className="mx-auto h-auto w-7 md:w-9 text-secondary-content"
|
||||
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="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z" />
|
||||
<path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
|
||||
</svg>
|
||||
<div className="mt-2 sm:mt-6">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
24/7 Support
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="mt-20 grid grid-cols-12 items-center gap-x-2 sm:gap-x-6 lg:gap-x-8">
|
||||
<div className="hidden md:block col-span-4 md:col-span-3">
|
||||
<img
|
||||
className="rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1606868306217-dbf5046868d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1981&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="col-span-4 md:col-span-3">
|
||||
<img
|
||||
className="rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1587613991119-fbbe8e90531d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1003&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="col-span-4 md:col-span-3">
|
||||
<img
|
||||
className="rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1554295405-abb8fd54f153?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=652&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="col-span-4 md:col-span-3">
|
||||
<img
|
||||
className="rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1640622300473-977435c38c04?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2072&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Features --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"label": "Features: General",
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,235 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Horizontal Tabs With Icon And Description
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/FeaturesNavs/HorizontalTabsWithIconAndDescription.tsx"
|
||||
<>
|
||||
{/* <!-- Features --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div className="relative p-6 md:p-16">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="relative z-10 lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center">
|
||||
<div className="mb-10 lg:mb-0 lg:col-span-6 lg:col-start-8 lg:order-2">
|
||||
<h2 className="text-2xl text-secondary-content font-bold sm:text-3xl">
|
||||
Fully customizable rules to match your unique needs
|
||||
</h2>
|
||||
|
||||
{/* <!-- Tab Navs --> */}
|
||||
<nav
|
||||
className="grid gap-4 mt-5 md:mt-10"
|
||||
aria-label="Tabs"
|
||||
role="tablist"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="hs-tab-active:bg-base-100 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent text-start hover:bg-base-300 p-4 md:p-5 rounded-xl dark:focus:outline-none dark:focus:ring-1 active"
|
||||
id="tabs-with-card-item-1"
|
||||
data-hs-tab="#tabs-with-card-1"
|
||||
aria-controls="tabs-with-card-1"
|
||||
role="tab"
|
||||
>
|
||||
<span className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 w-6 md:w-7 hs-tab-active:text-primary text-secondary-content"
|
||||
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="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" />
|
||||
<path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" />
|
||||
<path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" />
|
||||
<path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" />
|
||||
<path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" />
|
||||
</svg>
|
||||
<span className="grow ms-6">
|
||||
<span className="block text-lg font-semibold hs-tab-active:text-primary text-secondary-content">
|
||||
Advanced tools
|
||||
</span>
|
||||
<span className="block mt-1 text-secondary-content">
|
||||
Use FastPocket thoroughly thought and automated
|
||||
libraries to manage your businesses.
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="hs-tab-active:bg-base-100 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent text-start hover:bg-base-300 p-4 md:p-5 rounded-xl dark:focus:outline-none dark:focus:ring-1"
|
||||
id="tabs-with-card-item-2"
|
||||
data-hs-tab="#tabs-with-card-2"
|
||||
aria-controls="tabs-with-card-2"
|
||||
role="tab"
|
||||
>
|
||||
<span className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 w-6 md:w-7 hs-tab-active:text-primary text-secondary-content"
|
||||
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="m12 14 4-4" />
|
||||
<path d="M3.34 19a10 10 0 1 1 17.32 0" />
|
||||
</svg>
|
||||
<span className="grow ms-6">
|
||||
<span className="block text-lg font-semibold hs-tab-active:text-primary text-secondary-content">
|
||||
Smart dashboards
|
||||
</span>
|
||||
<span className="block mt-1 text-secondary-content">
|
||||
Quickly FastPocket sample components, copy-paste codes,
|
||||
and start right off.
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="hs-tab-active:bg-base-100 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent text-start hover:bg-base-300 p-4 md:p-5 rounded-xl dark:focus:outline-none dark:focus:ring-1"
|
||||
id="tabs-with-card-item-3"
|
||||
data-hs-tab="#tabs-with-card-3"
|
||||
aria-controls="tabs-with-card-3"
|
||||
role="tab"
|
||||
>
|
||||
<span className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 w-6 md:w-7 hs-tab-active:text-primary text-secondary-content"
|
||||
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="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
|
||||
<path d="M5 3v4" />
|
||||
<path d="M19 17v4" />
|
||||
<path d="M3 5h4" />
|
||||
<path d="M17 19h4" />
|
||||
</svg>
|
||||
<span className="grow ms-6">
|
||||
<span className="block text-lg font-semibold hs-tab-active:text-primary text-secondary-content">
|
||||
Powerful features
|
||||
</span>
|
||||
<span className="block mt-1 text-secondary-content">
|
||||
Reduce time and effort on building modern look design
|
||||
with FastPocket only.
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</nav>
|
||||
{/* <!-- End Tab Navs --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="lg:col-span-6">
|
||||
<div className="relative">
|
||||
{/* <!-- Tab Content --> */}
|
||||
<div>
|
||||
<div
|
||||
id="tabs-with-card-1"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tabs-with-card-item-1"
|
||||
>
|
||||
<img
|
||||
className="shadow-xl shadow-base-200 rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1605629921711-2f6b00c6bbf4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&h=1220&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="tabs-with-card-2"
|
||||
className="hidden"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tabs-with-card-item-2"
|
||||
>
|
||||
<img
|
||||
className="shadow-xl shadow-base-200 rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1665686306574-1ace09918530?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&h=1220&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="tabs-with-card-3"
|
||||
className="hidden"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tabs-with-card-item-3"
|
||||
>
|
||||
<img
|
||||
className="shadow-xl shadow-base-200 rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1598929213452-52d72f63e307?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&h=1220&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Tab Content --> */}
|
||||
|
||||
{/* <!-- SVG Element --> */}
|
||||
<div className="hidden absolute top-0 end-0 translate-x-20 md:block lg:translate-x-20">
|
||||
<svg
|
||||
className="w-16 h-auto text-orange-500"
|
||||
width="121"
|
||||
height="135"
|
||||
viewBox="0 0 121 135"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 16.4754C11.7688 27.4499 21.2452 57.3224 5 89.0164"
|
||||
stroke="currentColor"
|
||||
stroke-width="10"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M33.6761 112.104C44.6984 98.1239 74.2618 57.6776 83.4821 5"
|
||||
stroke="currentColor"
|
||||
stroke-width="10"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M50.5525 130C68.2064 127.495 110.731 117.541 116 78.0874"
|
||||
stroke="currentColor"
|
||||
stroke-width="10"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/* <!-- End SVG Element --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
|
||||
{/* <!-- Background Color --> */}
|
||||
<div className="absolute inset-0 grid grid-cols-12 w-full">
|
||||
<div className="col-span-full lg:col-span-7 lg:col-start-6 bg-base-100 w-full h-5/6 rounded-xl sm:h-3/4 lg:h-full"></div>
|
||||
</div>
|
||||
{/* <!-- End Background Color --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Features --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,235 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Vertical Tabs With Overlapping Background
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/FeaturesNavs/VerticalTabsWithOverlappingBackground.tsx"
|
||||
<>
|
||||
{/* <!-- Features --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div className="relative p-6 md:p-16">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="relative z-10 lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center">
|
||||
<div className="mb-10 lg:mb-0 lg:col-span-6 lg:col-start-8 lg:order-2">
|
||||
<h2 className="text-2xl text-secondary-content font-bold sm:text-3xl">
|
||||
Fully customizable rules to match your unique needs
|
||||
</h2>
|
||||
|
||||
{/* <!-- Tab Navs --> */}
|
||||
<nav
|
||||
className="grid gap-4 mt-5 md:mt-10"
|
||||
aria-label="Tabs"
|
||||
role="tablist"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="hs-tab-active:bg-base-100 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent text-start hover:bg-base-300 p-4 md:p-5 rounded-xl dark:focus:outline-none dark:focus:ring-1 active"
|
||||
id="tabs-with-card-item-1"
|
||||
data-hs-tab="#tabs-with-card-1"
|
||||
aria-controls="tabs-with-card-1"
|
||||
role="tab"
|
||||
>
|
||||
<span className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 w-6 md:w-7 hs-tab-active:text-primary text-secondary-content"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" />
|
||||
<path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" />
|
||||
<path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" />
|
||||
<path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" />
|
||||
<path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" />
|
||||
</svg>
|
||||
<span className="grow ms-6">
|
||||
<span className="block text-lg font-semibold hs-tab-active:text-primary text-secondary-content">
|
||||
Advanced tools
|
||||
</span>
|
||||
<span className="block mt-1 text-secondary-content">
|
||||
Use FastPocket thoroughly thought and automated
|
||||
libraries to manage your businesses.
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="hs-tab-active:bg-base-100 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent text-start hover:bg-base-300 p-4 md:p-5 rounded-xl dark:focus:outline-none dark:focus:ring-1"
|
||||
id="tabs-with-card-item-2"
|
||||
data-hs-tab="#tabs-with-card-2"
|
||||
aria-controls="tabs-with-card-2"
|
||||
role="tab"
|
||||
>
|
||||
<span className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 w-6 md:w-7 hs-tab-active:text-primary text-secondary-content"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m12 14 4-4" />
|
||||
<path d="M3.34 19a10 10 0 1 1 17.32 0" />
|
||||
</svg>
|
||||
<span className="grow ms-6">
|
||||
<span className="block text-lg font-semibold hs-tab-active:text-primary text-secondary-content">
|
||||
Smart dashboards
|
||||
</span>
|
||||
<span className="block mt-1 text-secondary-content">
|
||||
Quickly FastPocket sample components, copy-paste codes,
|
||||
and start right off.
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="hs-tab-active:bg-base-100 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent text-start hover:bg-base-300 p-4 md:p-5 rounded-xl dark:focus:outline-none dark:focus:ring-1"
|
||||
id="tabs-with-card-item-3"
|
||||
data-hs-tab="#tabs-with-card-3"
|
||||
aria-controls="tabs-with-card-3"
|
||||
role="tab"
|
||||
>
|
||||
<span className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 w-6 md:w-7 hs-tab-active:text-primary text-secondary-content"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
|
||||
<path d="M5 3v4" />
|
||||
<path d="M19 17v4" />
|
||||
<path d="M3 5h4" />
|
||||
<path d="M17 19h4" />
|
||||
</svg>
|
||||
<span className="grow ms-6">
|
||||
<span className="block text-lg font-semibold hs-tab-active:text-primary text-secondary-content">
|
||||
Powerful features
|
||||
</span>
|
||||
<span className="block mt-1 text-secondary-content">
|
||||
Reduce time and effort on building modern look design
|
||||
with FastPocket only.
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</nav>
|
||||
{/* <!-- End Tab Navs --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="lg:col-span-6">
|
||||
<div className="relative">
|
||||
{/* <!-- Tab Content --> */}
|
||||
<div>
|
||||
<div
|
||||
id="tabs-with-card-1"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tabs-with-card-item-1"
|
||||
>
|
||||
<img
|
||||
className="shadow-xl shadow-base-200 rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1605629921711-2f6b00c6bbf4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&h=1220&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="tabs-with-card-2"
|
||||
className="hidden"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tabs-with-card-item-2"
|
||||
>
|
||||
<img
|
||||
className="shadow-xl shadow-base-200 rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1665686306574-1ace09918530?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&h=1220&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="tabs-with-card-3"
|
||||
className="hidden"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tabs-with-card-item-3"
|
||||
>
|
||||
<img
|
||||
className="shadow-xl shadow-base-200 rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1598929213452-52d72f63e307?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&h=1220&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Tab Content --> */}
|
||||
|
||||
{/* <!-- SVG Element --> */}
|
||||
<div className="hidden absolute top-0 end-0 translate-x-20 md:block lg:translate-x-20">
|
||||
<svg
|
||||
className="w-16 h-auto text-orange-500"
|
||||
width="121"
|
||||
height="135"
|
||||
viewBox="0 0 121 135"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 16.4754C11.7688 27.4499 21.2452 57.3224 5 89.0164"
|
||||
stroke="currentColor"
|
||||
strokeWidth="10"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M33.6761 112.104C44.6984 98.1239 74.2618 57.6776 83.4821 5"
|
||||
stroke="currentColor"
|
||||
strokeWidth="10"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M50.5525 130C68.2064 127.495 110.731 117.541 116 78.0874"
|
||||
stroke="currentColor"
|
||||
strokeWidth="10"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/* <!-- End SVG Element --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
|
||||
{/* <!-- Background Color --> */}
|
||||
<div className="absolute inset-0 grid grid-cols-12 w-full">
|
||||
<div className="col-span-full lg:col-span-7 lg:col-start-6 bg-base-100 w-full h-5/6 rounded-xl sm:h-3/4 lg:h-full"></div>
|
||||
</div>
|
||||
{/* <!-- End Background Color --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Features --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"label": "Features: Navs",
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Container Image Icon Blocks
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/Features/ContainerImageIconBlocksFeature.tsx"
|
||||
<>
|
||||
{/* Features */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* HIDDEN */}
|
||||
<div className="hidden aspect-w-16 aspect-h-7 rounded-xl">
|
||||
<Image
|
||||
className="w-full object-contain max-h-[40rem] rounded-xl"
|
||||
width="1000"
|
||||
height="1000"
|
||||
src="/images/fastpocket-diagram.png"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
{/* Grid */}
|
||||
<div className="mt-5 lg:mt-16 grid lg:grid-cols-3 gap-8 lg:gap-12">
|
||||
<div className="lg:col-span-1">
|
||||
<h2 className="font-bold text-2xl md:text-3xl text-base-content ">
|
||||
Want To Build Fast?
|
||||
</h2>
|
||||
<p className="mt-2 md:mt-4 text-base-content/80">
|
||||
There is so much to do in order to get an application developed.
|
||||
Just getting the essentials together like payments and emails is
|
||||
an enormous undertaking. That's why FastPocket exists. To
|
||||
give you the essentials so you can focus on what makes your app
|
||||
unique.
|
||||
</p>
|
||||
</div>
|
||||
{/* End Col */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="grid sm:grid-cols-2 gap-8 md:gap-12">
|
||||
{/* Icon Block */}
|
||||
<div className="flex gap-x-5">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-1 size-6 text-primary "
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect width={18} height={10} x={3} y={11} rx={2} />
|
||||
<circle cx={12} cy={5} r={2} />
|
||||
<path d="M12 7v4" />
|
||||
<line x1={8} x2={8} y1={16} y2={16} />
|
||||
<line x1={16} x2={16} y1={16} y2={16} />
|
||||
</svg>
|
||||
<div className="grow">
|
||||
<h3 className="text-lg font-semibold text-base-content">
|
||||
Payments
|
||||
</h3>
|
||||
<p className="mt-1 text-base-content/80 ">
|
||||
FastPocket includes Stripe for simple payment so that you
|
||||
can get profitable quickly. All your products in Stripe
|
||||
automatically syncronize with Pocketbase meaning no
|
||||
additional work for you
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Icon Block */}
|
||||
{/* Icon Block */}
|
||||
<div className="flex gap-x-5">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-1 size-6 text-primary "
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M7 10v12" />
|
||||
<path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" />
|
||||
</svg>
|
||||
<div className="grow">
|
||||
<h3 className="text-lg font-semibold text-base-content">
|
||||
Style
|
||||
</h3>
|
||||
<p className="mt-1 text-base-content/80 ">
|
||||
FastPocket includes components to help you get styling your
|
||||
codebase really quickly. We use TailwindCSS, DaisyUI and
|
||||
Modified Preline components in order to fit the look and
|
||||
feel of your brand
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Icon Block */}
|
||||
{/* Icon Block */}
|
||||
<div className="flex gap-x-5">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-1 size-6 text-primary "
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
|
||||
</svg>
|
||||
<div className="grow">
|
||||
<h3 className="text-lg font-semibold text-base-content">
|
||||
Email
|
||||
</h3>
|
||||
<p className="mt-1 text-base-content/80 ">
|
||||
We know how annoying it is to setup email and that is why we
|
||||
provide email templates as well as frameworks for building
|
||||
your own emails for signup verifications and more
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Icon Block */}
|
||||
{/* Icon Block */}
|
||||
<div className="flex gap-x-5">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-1 size-6 text-primary "
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
||||
<circle cx={9} cy={7} r={4} />
|
||||
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
<div className="grow">
|
||||
<h3 className="text-lg font-semibold text-base-content">
|
||||
Backend
|
||||
</h3>
|
||||
<p className="mt-1 text-base-content/80 ">
|
||||
We provide Pocketbase + stripe build templates to ship your
|
||||
product with no hassle. This includes login and payment for
|
||||
reoccuring and one time transactions
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Icon Block */}
|
||||
</div>
|
||||
</div>
|
||||
{/* End Col */}
|
||||
</div>
|
||||
{/* End Grid */}
|
||||
</div>
|
||||
{/* End Features */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Solid Backgrond Icon Feature
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/Features/SolidBackgrondIconFeature.tsx"
|
||||
<>
|
||||
{/* Icon Blocks */}
|
||||
<div className="max-w-5xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 items-center gap-2">
|
||||
{/* Icon Block */}
|
||||
<a
|
||||
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
|
||||
href="#"
|
||||
>
|
||||
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
|
||||
<Image
|
||||
src={"/images/stripe-icon.png"}
|
||||
alt={""}
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
|
||||
Stripe Payments
|
||||
</h3>
|
||||
<p className="mt-1 text-base-content ">
|
||||
We have built stripe payments for 1 off and reoccuring payments
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/* End Icon Block */}
|
||||
{/* Icon Block */}
|
||||
<a
|
||||
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
|
||||
href="#"
|
||||
>
|
||||
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
|
||||
<Image
|
||||
src={"/images/daisyui-icon.png"}
|
||||
alt={""}
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
|
||||
Theming
|
||||
</h3>
|
||||
<p className="mt-1 text-base-content ">
|
||||
All our components include intuative theming with a js utility
|
||||
class that uses your themes colors programmatically
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/* End Icon Block */}
|
||||
{/* Icon Block */}
|
||||
<a
|
||||
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
|
||||
href="#"
|
||||
>
|
||||
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
|
||||
<Icon name="Library32Filled" style={{ height: 32, width: 32 }} />
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
|
||||
Documentation
|
||||
</h3>
|
||||
<p className="mt-1 text-base-content ">
|
||||
Every component and plugin is well documented
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/* End Icon Block */}
|
||||
{/* Icon Block */}
|
||||
<a
|
||||
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
|
||||
href="#"
|
||||
>
|
||||
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
|
||||
<Image
|
||||
src={"/images/pocketbase-icon.png"}
|
||||
alt={""}
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
|
||||
Deployment Templates
|
||||
</h3>
|
||||
<p className="mt-1 text-base-content ">
|
||||
For fly.io, raleway, and more so you can get running with
|
||||
PocketBase as quickly as possible
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/* End Icon Block */}
|
||||
{/* Icon Block */}
|
||||
<a
|
||||
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
|
||||
href="#"
|
||||
>
|
||||
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
|
||||
<Image
|
||||
src={"/images/daisyui-icon.png"}
|
||||
alt={""}
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
|
||||
Component Library
|
||||
</h3>
|
||||
<p className="mt-1 text-base-content ">
|
||||
We provide fully customisable sections and components that you
|
||||
can drop in
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/* End Icon Block */}
|
||||
{/* Icon Block */}
|
||||
<a
|
||||
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
|
||||
href="#"
|
||||
>
|
||||
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
|
||||
<Image
|
||||
src={"/images/nextjs-icon.png"}
|
||||
alt={""}
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
|
||||
Resources
|
||||
</h3>
|
||||
<p className="mt-1 text-base-content ">
|
||||
A growing list of resources to help you build your products
|
||||
faster
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/* End Icon Block */}
|
||||
</div>
|
||||
</div>
|
||||
{/* End Icon Blocks */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -1,249 +0,0 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Vertical Tabs
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/Features/VerticalTabsFeature.tsx"
|
||||
const [tab, setTab] = useState("1");
|
||||
return (
|
||||
<>
|
||||
{/* Features */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div className="relative p-6 md:p-16">
|
||||
{/* Grid */}
|
||||
<div className="relative z-10 lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center">
|
||||
<div className="mb-10 lg:mb-0 lg:col-span-6 lg:col-start-8 lg:order-2">
|
||||
<h2 className="text-2xl text-base-content font-bold sm:text-3xl ">
|
||||
Save 20+ hours of app development with FastPocket
|
||||
</h2>
|
||||
{/* Tab Navs */}
|
||||
<nav
|
||||
className="grid gap-4 mt-5 md:mt-10"
|
||||
aria-label="Tabs"
|
||||
role="tablist"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={`hover:bg-base-content/5 ${
|
||||
tab === "1" && "bg-base-300 shadow-lg hover:bg-base-300"
|
||||
} text-start p-4 md:p-5 rounded-xl`}
|
||||
id="tabs-with-card-item-1"
|
||||
aria-controls="tabs-with-card-1"
|
||||
role="tab"
|
||||
onClick={() => setTab("1")}
|
||||
>
|
||||
<span className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 size-6 md:size-7 text-base-content "
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" />
|
||||
<path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" />
|
||||
<path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" />
|
||||
<path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" />
|
||||
<path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" />
|
||||
</svg>
|
||||
<span className="grow ms-6">
|
||||
<span className="block text-lg font-semibold text-base-content ">
|
||||
Simple Setup
|
||||
</span>
|
||||
<span className="block mt-1 text-base-content ">
|
||||
FastPocket already has a codebase with all of the
|
||||
necessary integrations to start an online business out of
|
||||
the box AND excellent documentation
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`hover:bg-base-content/5 ${
|
||||
tab === "2" && "bg-base-300 shadow-lg hover:bg-base-300"
|
||||
} text-start p-4 md:p-5 rounded-xl `}
|
||||
id="tabs-with-card-item-2"
|
||||
aria-controls="tabs-with-card-2"
|
||||
role="tab"
|
||||
onClick={() => setTab("2")}
|
||||
>
|
||||
<span className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 size-6 md:size-7 text-base-content "
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m12 14 4-4" />
|
||||
<path d="M3.34 19a10 10 0 1 1 17.32 0" />
|
||||
</svg>
|
||||
<span className="grow ms-6">
|
||||
<span className="block text-lg font-semibold text-base-content ">
|
||||
Copy Paste Components
|
||||
</span>
|
||||
<span className="block mt-1 text-base-content ">
|
||||
We give you cookie cutter copy paste setup for your SaaS
|
||||
with unopinionated SaaS styling that can be modified to
|
||||
suite whatever app you are building
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`hover:bg-base-content/5 ${
|
||||
tab === "3" && "bg-base-300 shadow-lg hover:bg-base-300"
|
||||
} text-start p-4 md:p-5 rounded-xl `}
|
||||
id="tabs-with-card-item-3"
|
||||
aria-controls="tabs-with-card-3"
|
||||
role="tab"
|
||||
onClick={() => setTab("3")}
|
||||
>
|
||||
<span className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 size-6 md:size-7 text-base-content "
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
|
||||
<path d="M5 3v4" />
|
||||
<path d="M19 17v4" />
|
||||
<path d="M3 5h4" />
|
||||
<path d="M17 19h4" />
|
||||
</svg>
|
||||
<span className="grow ms-6">
|
||||
<span className="block text-lg font-semibold text-base-content ">
|
||||
Simple Bring Your Own Backend
|
||||
</span>
|
||||
<span className="block mt-1 text-base-content ">
|
||||
We offer deployment templates that allow you to deploy to
|
||||
Digital Ocean, Fly.io, Pockethost or any other backend you
|
||||
want to use. You have the control over your hosting
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</nav>
|
||||
{/* End Tab Navs */}
|
||||
</div>
|
||||
{/* End Col */}
|
||||
<div className="lg:col-span-6">
|
||||
<div className="relative">
|
||||
{/* Tab Content */}
|
||||
<div>
|
||||
{tab == "1" && (
|
||||
<div
|
||||
id="tabs-with-card-1"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tabs-with-card-item-1"
|
||||
>
|
||||
<Image
|
||||
className="shadow-xl shadow-gray-200 rounded-xl dark:shadow-gray-900/[.2] bg-base-300"
|
||||
src="/images/vertical-tabs-feature-1.png"
|
||||
alt="Image Description"
|
||||
width="987"
|
||||
height="1220"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{tab == "2" && (
|
||||
<div
|
||||
id="tabs-with-card-2"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tabs-with-card-item-2"
|
||||
>
|
||||
<Image
|
||||
className="shadow-xl shadow-gray-200 rounded-xl dark:shadow-gray-900/[.2] bg-base-300"
|
||||
src="/images/vertical-tabs-feature-2.png"
|
||||
alt="Image Description"
|
||||
width="987"
|
||||
height="1220"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{tab == "3" && (
|
||||
<div
|
||||
id="tabs-with-card-3"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tabs-with-card-item-3"
|
||||
>
|
||||
<Image
|
||||
className="shadow-xl shadow-gray-200 rounded-xl dark:shadow-gray-900/[.2] bg-base-300"
|
||||
src="/images/vertical-tabs-feature-3.png"
|
||||
alt="Image Description"
|
||||
width="987"
|
||||
height="1220"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* End Tab Content */}
|
||||
{/* SVG Element */}
|
||||
<div className="hidden absolute top-0 end-0 translate-x-20 md:block lg:translate-x-20">
|
||||
<svg
|
||||
className="w-16 h-auto text-secondary"
|
||||
width={121}
|
||||
height={135}
|
||||
viewBox="0 0 121 135"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 16.4754C11.7688 27.4499 21.2452 57.3224 5 89.0164"
|
||||
stroke="currentColor"
|
||||
strokeWidth={10}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M33.6761 112.104C44.6984 98.1239 74.2618 57.6776 83.4821 5"
|
||||
stroke="currentColor"
|
||||
strokeWidth={10}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M50.5525 130C68.2064 127.495 110.731 117.541 116 78.0874"
|
||||
stroke="currentColor"
|
||||
strokeWidth={10}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/* End SVG Element */}
|
||||
</div>
|
||||
</div>
|
||||
{/* End Col */}
|
||||
</div>
|
||||
{/* End Grid */}
|
||||
{/* Background Color */}
|
||||
<div className="absolute inset-0 grid grid-cols-12 size-full">
|
||||
<div className="col-span-full lg:col-span-7 lg:col-start-6 bg-gray-100 w-full h-5/6 rounded-xl sm:h-3/4 lg:h-full dark:bg-base-300/[.075]" />
|
||||
</div>
|
||||
{/* End Background Color */}
|
||||
</div>
|
||||
</div>
|
||||
{/* End Features */}
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
|
@ -0,0 +1,250 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Vertical Tabs Feature
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/Features/VerticalTabsFeature.tsx"
|
||||
const [tab, setTab] = useState("1");
|
||||
return (
|
||||
<>
|
||||
{/* Features */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div className="relative p-6 md:p-16">
|
||||
{/* Grid */}
|
||||
<div className="relative z-10 lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center">
|
||||
<div className="mb-10 lg:mb-0 lg:col-span-6 lg:col-start-8 lg:order-2">
|
||||
<h2 className="text-2xl text-secondary-content font-bold sm:text-3xl ">
|
||||
Save 20+ hours of app development with FastPocket
|
||||
</h2>
|
||||
{/* Tab Navs */}
|
||||
<nav
|
||||
className="grid gap-4 mt-5 md:mt-10"
|
||||
aria-label="Tabs"
|
||||
role="tablist"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={`hover:bg-base-content/5 ${
|
||||
tab === "1" && "bg-base-300 shadow-lg hover:bg-base-300"
|
||||
} text-start p-4 md:p-5 rounded-xl`}
|
||||
id="tabs-with-card-item-1"
|
||||
aria-controls="tabs-with-card-1"
|
||||
role="tab"
|
||||
onClick={() => setTab("1")}
|
||||
>
|
||||
<span className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 size-6 md:size-7 text-secondary-content "
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" />
|
||||
<path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" />
|
||||
<path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" />
|
||||
<path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" />
|
||||
<path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" />
|
||||
</svg>
|
||||
<span className="grow ms-6">
|
||||
<span className="block text-lg font-semibold text-secondary-content ">
|
||||
Simple Setup
|
||||
</span>
|
||||
<span className="block mt-1 text-secondary-content ">
|
||||
FastPocket already has a codebase with all of the
|
||||
necessary integrations to start an online business out
|
||||
of the box AND excellent documentation
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`hover:bg-base-content/5 ${
|
||||
tab === "2" && "bg-base-300 shadow-lg hover:bg-base-300"
|
||||
} text-start p-4 md:p-5 rounded-xl `}
|
||||
id="tabs-with-card-item-2"
|
||||
aria-controls="tabs-with-card-2"
|
||||
role="tab"
|
||||
onClick={() => setTab("2")}
|
||||
>
|
||||
<span className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 size-6 md:size-7 text-secondary-content "
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m12 14 4-4" />
|
||||
<path d="M3.34 19a10 10 0 1 1 17.32 0" />
|
||||
</svg>
|
||||
<span className="grow ms-6">
|
||||
<span className="block text-lg font-semibold text-secondary-content ">
|
||||
Copy Paste Components
|
||||
</span>
|
||||
<span className="block mt-1 text-secondary-content ">
|
||||
We give you cookie cutter copy paste setup for your SaaS
|
||||
with unopinionated SaaS styling that can be modified to
|
||||
suite whatever app you are building
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`hover:bg-base-content/5 ${
|
||||
tab === "3" && "bg-base-300 shadow-lg hover:bg-base-300"
|
||||
} text-start p-4 md:p-5 rounded-xl `}
|
||||
id="tabs-with-card-item-3"
|
||||
aria-controls="tabs-with-card-3"
|
||||
role="tab"
|
||||
onClick={() => setTab("3")}
|
||||
>
|
||||
<span className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 size-6 md:size-7 text-secondary-content "
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
|
||||
<path d="M5 3v4" />
|
||||
<path d="M19 17v4" />
|
||||
<path d="M3 5h4" />
|
||||
<path d="M17 19h4" />
|
||||
</svg>
|
||||
<span className="grow ms-6">
|
||||
<span className="block text-lg font-semibold text-secondary-content ">
|
||||
Simple Bring Your Own Backend
|
||||
</span>
|
||||
<span className="block mt-1 text-secondary-content ">
|
||||
We offer deployment templates that allow you to deploy
|
||||
to Digital Ocean, Fly.io, Pockethost or any other
|
||||
backend you want to use. You have the control over your
|
||||
hosting
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</nav>
|
||||
{/* End Tab Navs */}
|
||||
</div>
|
||||
{/* End Col */}
|
||||
<div className="lg:col-span-6">
|
||||
<div className="relative">
|
||||
{/* Tab Content */}
|
||||
<div>
|
||||
{tab == "1" && (
|
||||
<div
|
||||
id="tabs-with-card-1"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tabs-with-card-item-1"
|
||||
>
|
||||
<Image
|
||||
className="shadow-xl shadow-base-200 rounded-xl bg-base-300"
|
||||
src="/images/vertical-tabs-feature-1.png"
|
||||
alt="Image Description"
|
||||
width="987"
|
||||
height="1220"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{tab == "2" && (
|
||||
<div
|
||||
id="tabs-with-card-2"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tabs-with-card-item-2"
|
||||
>
|
||||
<Image
|
||||
className="shadow-xl shadow-base-200 rounded-xl bg-base-300"
|
||||
src="/images/vertical-tabs-feature-2.png"
|
||||
alt="Image Description"
|
||||
width="987"
|
||||
height="1220"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{tab == "3" && (
|
||||
<div
|
||||
id="tabs-with-card-3"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tabs-with-card-item-3"
|
||||
>
|
||||
<Image
|
||||
className="shadow-xl shadow-base-200 rounded-xl bg-base-300"
|
||||
src="/images/vertical-tabs-feature-3.png"
|
||||
alt="Image Description"
|
||||
width="987"
|
||||
height="1220"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* End Tab Content */}
|
||||
{/* SVG Element */}
|
||||
<div className="hidden absolute top-0 end-0 translate-x-20 md:block lg:translate-x-20">
|
||||
<svg
|
||||
className="w-16 h-auto text-secondary"
|
||||
width={121}
|
||||
height={135}
|
||||
viewBox="0 0 121 135"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 16.4754C11.7688 27.4499 21.2452 57.3224 5 89.0164"
|
||||
stroke="currentColor"
|
||||
strokeWidth={10}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M33.6761 112.104C44.6984 98.1239 74.2618 57.6776 83.4821 5"
|
||||
stroke="currentColor"
|
||||
strokeWidth={10}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M50.5525 130C68.2064 127.495 110.731 117.541 116 78.0874"
|
||||
stroke="currentColor"
|
||||
strokeWidth={10}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/* End SVG Element */}
|
||||
</div>
|
||||
</div>
|
||||
{/* End Col */}
|
||||
</div>
|
||||
{/* End Grid */}
|
||||
{/* Background Color */}
|
||||
<div className="absolute inset-0 grid grid-cols-12 size-full">
|
||||
<div className="col-span-full lg:col-span-7 lg:col-start-6 bg-base-300 w-full h-5/6 rounded-xl sm:h-3/4 lg:h-full" />
|
||||
</div>
|
||||
{/* End Background Color */}
|
||||
</div>
|
||||
</div>
|
||||
{/* End Features */}
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Masonry 4 Cols
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/BlogArticles/Masonry4Cols.tsx"
|
||||
<>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
|
||||
<div className="space-y-2">
|
||||
<img
|
||||
className="w-full h-auto object-cover"
|
||||
src="https://images.unsplash.com/photo-1540575861501-7cf05a4b125a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<img
|
||||
className="w-full h-auto object-cover"
|
||||
src="https://images.unsplash.com/photo-1668906093328-99601a1aa584?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=986&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<img
|
||||
className="w-full h-auto object-cover"
|
||||
src="https://images.unsplash.com/photo-1567016526105-22da7c13161a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<img
|
||||
className="w-full h-auto object-cover"
|
||||
src="https://images.unsplash.com/photo-1668584054131-d5721c515211?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<img
|
||||
className="w-full h-auto object-cover"
|
||||
src="https://images.unsplash.com/photo-1664574654529-b60630f33fdb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<img
|
||||
className="w-full h-auto object-cover"
|
||||
src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<img
|
||||
className="w-full h-auto object-cover"
|
||||
src="https://images.unsplash.com/photo-1586232702178-f044c5f4d4b7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<img
|
||||
className="w-full h-auto object-cover"
|
||||
src="https://images.unsplash.com/photo-1542125387-c71274d94f0a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<img
|
||||
className="w-full h-auto object-cover"
|
||||
src="https://images.unsplash.com/photo-1668869713519-9bcbb0da7171?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<img
|
||||
className="w-full h-auto object-cover"
|
||||
src="https://images.unsplash.com/photo-1668584054035-f5ba7d426401?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3465&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Squared 4 Cols
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/BlogArticles/Squared4Cols.tsx"
|
||||
<>
|
||||
<div className="mt-8 md:max-w-2xl md:mx-auto">
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
|
||||
<div className="space-y-2">
|
||||
<img
|
||||
className="w-full sm:w-40 sm:h-40 object-cover"
|
||||
src="https://images.unsplash.com/photo-1540575861501-7cf05a4b125a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<img
|
||||
className="w-full sm:w-40 sm:h-40 object-cover"
|
||||
src="https://images.unsplash.com/photo-1668906093328-99601a1aa584?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=986&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<img
|
||||
className="w-full sm:w-40 sm:h-40 object-cover"
|
||||
src="https://images.unsplash.com/photo-1567016526105-22da7c13161a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<img
|
||||
className="w-full sm:w-40 sm:h-40 object-cover"
|
||||
src="https://images.unsplash.com/photo-1668584054131-d5721c515211?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<img
|
||||
className="w-full sm:w-40 sm:h-40 object-cover"
|
||||
src="https://images.unsplash.com/photo-1664574654529-b60630f33fdb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<img
|
||||
className="w-full sm:w-40 sm:h-40 object-cover"
|
||||
src="https://images.unsplash.com/photo-1669824774762-65ddf29bee56?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<img
|
||||
className="w-full sm:w-40 sm:h-40 object-cover"
|
||||
src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<img
|
||||
className="w-full sm:w-40 sm:h-40 object-cover"
|
||||
src="https://images.unsplash.com/photo-1586232702178-f044c5f4d4b7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<img
|
||||
className="w-full sm:w-40 sm:h-40 object-cover"
|
||||
src="https://images.unsplash.com/photo-1542125387-c71274d94f0a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<img
|
||||
className="w-full sm:w-40 sm:h-40 object-cover"
|
||||
src="https://images.unsplash.com/photo-1668869713519-9bcbb0da7171?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<img
|
||||
className="w-full sm:w-40 sm:h-40 object-cover"
|
||||
src="https://images.unsplash.com/photo-1668584054035-f5ba7d426401?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3465&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<img
|
||||
className="w-full sm:w-40 sm:h-40 object-cover"
|
||||
src="https://images.unsplash.com/photo-1668863699009-1e3b4118675d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3387&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"label": "Galleries",
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Center Aligned Search With Tags
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/HeroSections/CenterAlignedSearchWithTags.tsx"
|
||||
<>
|
||||
{/* <!-- Hero --> */}
|
||||
<div className="relative overflow-hidden">
|
||||
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-24">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl sm:text-6xl font-bold text-secondary-content">
|
||||
Insights
|
||||
</h1>
|
||||
|
||||
<p className="mt-3 text-secondary-content">
|
||||
Stay in the know with insights from industry experts.
|
||||
</p>
|
||||
|
||||
<div className="mt-7 sm:mt-12 mx-auto max-w-xl relative">
|
||||
{/* <!-- Form --> */}
|
||||
<form>
|
||||
<div className="relative z-10 flex space-x-3 p-3 bg-white border rounded-lg shadow-lg shadow-base-100">
|
||||
<div className="flex-[1_0_0%]">
|
||||
<label
|
||||
htmlFor="hs-search-article-1"
|
||||
className="block text-sm text-base-content font-medium"
|
||||
>
|
||||
<span className="sr-only">Search article</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="hs-search-article-1"
|
||||
id="hs-search-article-1"
|
||||
className="py-2.5 px-4 block w-full text-neutral border-transparent rounded-lg focus:border-primary focus:ring-primary"
|
||||
placeholder="Search article"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-[0_0_auto]">
|
||||
<a
|
||||
className="size-[46px] inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-primary text-base-100 hover:bg-primary/50 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{/* <!-- End Form --> */}
|
||||
|
||||
{/* <!-- SVG Element --> */}
|
||||
<div className="hidden md:block absolute top-0 end-0 -translate-y-12 translate-x-20">
|
||||
<svg
|
||||
className="w-16 h-auto text-orange-500"
|
||||
width="121"
|
||||
height="135"
|
||||
viewBox="0 0 121 135"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 16.4754C11.7688 27.4499 21.2452 57.3224 5 89.0164"
|
||||
stroke="currentColor"
|
||||
stroke-width="10"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M33.6761 112.104C44.6984 98.1239 74.2618 57.6776 83.4821 5"
|
||||
stroke="currentColor"
|
||||
stroke-width="10"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M50.5525 130C68.2064 127.495 110.731 117.541 116 78.0874"
|
||||
stroke="currentColor"
|
||||
stroke-width="10"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/* <!-- End SVG Element --> */}
|
||||
|
||||
{/* <!-- SVG Element --> */}
|
||||
<div className="hidden md:block absolute bottom-0 start-0 translate-y-10 -translate-x-32">
|
||||
<svg
|
||||
className="w-40 h-auto text-cyan-500"
|
||||
width="347"
|
||||
height="188"
|
||||
viewBox="0 0 347 188"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4 82.4591C54.7956 92.8751 30.9771 162.782 68.2065 181.385C112.642 203.59 127.943 78.57 122.161 25.5053C120.504 2.2376 93.4028 -8.11128 89.7468 25.5053C85.8633 61.2125 130.186 199.678 180.982 146.248L214.898 107.02C224.322 95.4118 242.9 79.2851 258.6 107.02C274.299 134.754 299.315 125.589 309.861 117.539L343 93.4426"
|
||||
stroke="currentColor"
|
||||
stroke-width="7"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/* <!-- End SVG Element --> */}
|
||||
</div>
|
||||
|
||||
<div className="mt-10 sm:mt-20">
|
||||
<a
|
||||
className="m-1 py-3 px-4 inline-flex items-center gap-x-2 text-sm rounded-lg border border-base-200 bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3 h-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v8A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zm1.886 6.914L15 7.151V12.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V7.15l6.614 1.764a1.5 1.5 0 0 0 .772 0zM1.5 4h13a.5.5 0 0 1 .5.5v1.616L8.129 7.948a.5.5 0 0 1-.258 0L1 6.116V4.5a.5.5 0 0 1 .5-.5z" />
|
||||
</svg>
|
||||
Business
|
||||
</a>
|
||||
<a
|
||||
className="m-1 py-3 px-4 inline-flex items-center gap-x-2 text-sm rounded-lg border border-base-200 bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3 h-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z" />
|
||||
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z" />
|
||||
</svg>
|
||||
Strategy
|
||||
</a>
|
||||
<a
|
||||
className="m-1 py-3 px-4 inline-flex items-center gap-x-2 text-sm rounded-lg border border-base-200 bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3 h-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z" />
|
||||
</svg>
|
||||
Health
|
||||
</a>
|
||||
<a
|
||||
className="m-1 py-3 px-4 inline-flex items-center gap-x-2 text-sm rounded-lg border border-base-200 bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3 h-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z" />
|
||||
</svg>
|
||||
Creative
|
||||
</a>
|
||||
<a
|
||||
className="m-1 py-3 px-4 inline-flex items-center gap-x-2 text-sm rounded-lg border border-base-200 bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3 h-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022zM6 8.694 1 10.36V15h5V8.694zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15z"
|
||||
/>
|
||||
<path d="M2 11h1v1H2v-1zm2 0h1v1H4v-1zm-2 2h1v1H2v-1zm2 0h1v1H4v-1zm4-4h1v1H8V9zm2 0h1v1h-1V9zm-2 2h1v1H8v-1zm2 0h1v1h-1v-1zm2-2h1v1h-1V9zm0 2h1v1h-1v-1zM8 7h1v1H8V7zm2 0h1v1h-1V7zm2 0h1v1h-1V7zM8 5h1v1H8V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm0-2h1v1h-1V3z"/>
|
||||
</svg>
|
||||
Environment
|
||||
</a>
|
||||
<a
|
||||
className="m-1 py-3 px-4 inline-flex items-center gap-x-2 text-sm rounded-lg border border-base-200 bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3 h-auto"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M7 7V1.414a1 1 0 0 1 2 0V2h5a1 1 0 0 1 .8.4l.975 1.3a.5.5 0 0 1 0 .6L14.8 5.6a1 1 0 0 1-.8.4H9v10H7v-5H2a1 1 0 0 1-.8-.4L.225 9.3a.5.5 0 0 1 0-.6L1.2 7.4A1 1 0 0 1 2 7h5zm1 3V8H2l-.75 1L2 10h6zm0-5h6l.75-1L14 3H8v2z" />
|
||||
</svg>
|
||||
Adventure
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Hero --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Center Aligned With A Form
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/HeroSections/CenterAlignedWithAForm.tsx"
|
||||
<>
|
||||
{/* <!-- Hero ---> */}
|
||||
<div className="overflow-hidden">
|
||||
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
||||
<div className="relative mx-auto max-w-4xl grid space-y-5 sm:space-y-10">
|
||||
{/* <!-- Title ---> */}
|
||||
<div className="text-center">
|
||||
<p className="text-xs font-semibold text-secondary-content tracking-wide uppercase mb-3">
|
||||
Small business solutions
|
||||
</p>
|
||||
<h1 className="text-3xl text-secondary-content font-bold sm:text-5xl lg:text-6xl lg:leading-tight">
|
||||
Turn online shoppers into{" "}
|
||||
<span className="text-primary">lifetime customers</span>
|
||||
</h1>
|
||||
</div>
|
||||
{/* <!-- End Title ---> */}
|
||||
|
||||
{/* <!-- Avatar Group ---> */}
|
||||
<div className="sm:flex sm:justify-center sm:items-center text-center sm:text-start">
|
||||
<div className="flex-shrink-0 pb-5 sm:flex sm:pb-0 sm:pe-5">
|
||||
{/* <!-- Avatar Group ---> */}
|
||||
<div className="flex justify-center -space-x-3">
|
||||
<img
|
||||
className="inline-block w-8 rounded-full ring-2 ring-base-100"
|
||||
src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<img
|
||||
className="inline-block w-8 rounded-full ring-2 ring-base-100"
|
||||
src="https://images.unsplash.com/photo-1531927557220-a9e23c1e4794?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<img
|
||||
className="inline-block w-8 rounded-full ring-2 ring-base-100"
|
||||
src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&&auto=format&fit=facearea&facepad=3&w=300&h=300&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<img
|
||||
className="inline-block w-8 rounded-full ring-2 ring-base-100"
|
||||
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<span className="inline-flex items-center justify-center w-8 rounded-full ring-2 ring-base-100 bg-secondary-content">
|
||||
<span className="text-xs font-medium leading-none text-base-100 uppercase">
|
||||
7k+
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
{/* <!-- End Avatar Group ---> */}
|
||||
</div>
|
||||
|
||||
<div className="border-t sm:border-t-0 sm:border-s border-base-200 w-32 h-px sm:w-auto sm:h-full mx-auto sm:mx-0"></div>
|
||||
|
||||
<div className="pt-5 sm:pt-0 sm:ps-5">
|
||||
<div className="text-lg font-semibold text-secondary-content">
|
||||
Trust pilot
|
||||
</div>
|
||||
<div className="text-sm text-secondary-content">
|
||||
Rated best over 37k reviews
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Avatar Group ---> */}
|
||||
|
||||
{/* <!-- Form ---> */}
|
||||
<form>
|
||||
<div className="mx-auto max-w-2xl sm:flex sm:space-x-3 p-3 bg-base-100 border rounded-lg shadow-lg shadow-base-100">
|
||||
<div className="pb-2 sm:pb-0 sm:flex-[1_0_0%]">
|
||||
<label
|
||||
htmlFor="hs-hero-name-1"
|
||||
className="block text-sm font-medium"
|
||||
>
|
||||
<span className="sr-only">Your name</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="hs-hero-name-1"
|
||||
className="text-neutral py-3 px-4 block w-full border-transparent rounded-lg text-sm focus:border-primary focus:ring-primary dark:border-transparent"
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
<div className="pt-2 sm:pt-0 sm:ps-3 border-t border-base-200 sm:border-t-0 sm:border-s sm:flex-[1_0_0%]">
|
||||
<label
|
||||
htmlFor="hs-hero-email-1"
|
||||
className="block text-sm font-medium"
|
||||
>
|
||||
<span className="sr-only">Your email address</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="hs-hero-email-1"
|
||||
className="text-neutral py-3 px-4 block w-full border-transparent rounded-lg text-sm focus:border-primary focus:ring-primary dark:border-transparent"
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
<div className="pt-2 sm:pt-0 grid sm:block sm:flex-[0_0_auto]">
|
||||
<a
|
||||
className="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-primary text-primary-content hover:bg-primary/50 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{/* <!-- End Form ---> */}
|
||||
|
||||
{/* <!-- SVG Element ---> */}
|
||||
<div
|
||||
className="hidden absolute top-2/4 start-0 transform -translate-y-2/4 -translate-x-40 md:block lg:-translate-x-80"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
className="w-52 h-auto"
|
||||
width="717"
|
||||
height="653"
|
||||
viewBox="0 0 717 653"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M170.176 228.357C177.176 230.924 184.932 227.329 187.498 220.329C190.064 213.329 186.47 205.574 179.47 203.007L170.176 228.357ZM98.6819 71.4156L85.9724 66.8638L85.8472 67.2136L85.7413 67.5698L98.6819 71.4156ZM336.169 77.9736L328.106 88.801L328.288 88.9365L328.475 89.0659L336.169 77.9736ZM616.192 128.685C620.658 122.715 619.439 114.254 613.469 109.788L516.183 37.0035C510.213 32.5371 501.753 33.756 497.286 39.726C492.82 45.696 494.039 54.1563 500.009 58.6227L586.485 123.32L521.788 209.797C517.322 215.767 518.541 224.227 524.511 228.694C530.481 233.16 538.941 231.941 543.407 225.971L616.192 128.685ZM174.823 215.682C179.47 203.007 179.475 203.009 179.48 203.011C179.482 203.012 179.486 203.013 179.489 203.014C179.493 203.016 179.496 203.017 179.498 203.018C179.501 203.019 179.498 203.018 179.488 203.014C179.469 203.007 179.425 202.99 179.357 202.964C179.222 202.912 178.991 202.822 178.673 202.694C178.035 202.437 177.047 202.026 175.768 201.456C173.206 200.314 169.498 198.543 165.106 196.099C156.27 191.182 144.942 183.693 134.609 173.352C114.397 153.124 97.7311 122.004 111.623 75.2614L85.7413 67.5698C68.4512 125.748 89.856 166.762 115.51 192.436C128.11 205.047 141.663 213.953 151.976 219.692C157.158 222.575 161.591 224.698 164.777 226.118C166.371 226.828 167.659 227.365 168.578 227.736C169.038 227.921 169.406 228.065 169.675 228.168C169.809 228.22 169.919 228.261 170.002 228.293C170.044 228.309 170.08 228.322 170.109 228.333C170.123 228.338 170.136 228.343 170.147 228.347C170.153 228.349 170.16 228.352 170.163 228.353C170.17 228.355 170.176 228.357 174.823 215.682ZM111.391 75.9674C118.596 55.8511 137.372 33.9214 170.517 28.6833C204.135 23.3705 255.531 34.7533 328.106 88.801L344.233 67.1462C268.876 11.0269 210.14 -4.91361 166.303 2.01428C121.993 9.01681 95.9904 38.8917 85.9724 66.8638L111.391 75.9674ZM328.475 89.0659C398.364 137.549 474.018 153.163 607.307 133.96L603.457 107.236C474.34 125.837 406.316 110.204 343.864 66.8813L328.475 89.0659Z"
|
||||
fill="currentColor"
|
||||
className="fill-secondary-content"
|
||||
/>
|
||||
<path
|
||||
d="M17.863 238.22C10.4785 237.191 3.6581 242.344 2.62917 249.728C1.60024 257.113 6.75246 263.933 14.137 264.962L17.863 238.22ZM117.548 265.74L119.421 252.371L119.411 252.37L117.548 265.74ZM120.011 466.653L132.605 471.516L132.747 471.147L132.868 470.771L120.011 466.653ZM285.991 553.767C291.813 549.109 292.756 540.613 288.098 534.792L212.193 439.92C207.536 434.098 199.04 433.154 193.218 437.812C187.396 442.47 186.453 450.965 191.111 456.787L258.582 541.118L174.251 608.589C168.429 613.247 167.486 621.742 172.143 627.564C176.801 633.386 185.297 634.329 191.119 629.672L285.991 553.767ZM14.137 264.962L115.685 279.111L119.411 252.37L17.863 238.22L14.137 264.962ZM115.675 279.11C124.838 280.393 137.255 284.582 145.467 291.97C149.386 295.495 152.093 299.505 153.39 304.121C154.673 308.691 154.864 314.873 152.117 323.271L177.779 331.665C181.924 318.993 182.328 307.301 179.383 296.818C176.451 286.381 170.485 278.159 163.524 271.897C149.977 259.71 131.801 254.105 119.421 252.371L115.675 279.11ZM152.117 323.271C138.318 365.454 116.39 433.697 107.154 462.535L132.868 470.771C142.103 441.936 164.009 373.762 177.779 331.665L152.117 323.271ZM107.417 461.79C103.048 473.105 100.107 491.199 107.229 508.197C114.878 526.454 132.585 539.935 162.404 543.488L165.599 516.678C143.043 513.99 135.175 505.027 132.132 497.764C128.562 489.244 129.814 478.743 132.605 471.516L107.417 461.79ZM162.404 543.488C214.816 549.734 260.003 554.859 276.067 556.643L279.047 529.808C263.054 528.032 217.939 522.915 165.599 516.678L162.404 543.488Z"
|
||||
fill="currentColor"
|
||||
className="fill-secondary"
|
||||
/>
|
||||
<path
|
||||
d="M229.298 165.61C225.217 159.371 216.85 157.621 210.61 161.702C204.371 165.783 202.621 174.15 206.702 180.39L229.298 165.61ZM703.921 410.871C711.364 410.433 717.042 404.045 716.605 396.602L709.47 275.311C709.032 267.868 702.643 262.189 695.2 262.627C687.757 263.065 682.079 269.454 682.516 276.897L688.858 384.71L581.045 391.052C573.602 391.49 567.923 397.879 568.361 405.322C568.799 412.765 575.187 418.444 582.63 418.006L703.921 410.871ZM206.702 180.39C239.898 231.14 343.567 329.577 496.595 322.758L495.394 295.785C354.802 302.049 259.09 211.158 229.298 165.61L206.702 180.39ZM496.595 322.758C567.523 319.598 610.272 335.61 637.959 353.957C651.944 363.225 662.493 373.355 671.17 382.695C675.584 387.447 679.351 391.81 683.115 396.047C686.719 400.103 690.432 404.172 694.159 407.484L712.097 387.304C709.691 385.166 706.92 382.189 703.298 378.113C699.837 374.217 695.636 369.362 690.951 364.319C681.43 354.07 669.255 342.306 652.874 331.451C619.829 309.553 571.276 292.404 495.394 295.785L496.595 322.758Z"
|
||||
fill="currentColor"
|
||||
className="fill-accent"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/* <!-- End SVG Element ---> */}
|
||||
|
||||
{/* <!-- SVG Element ---> */}
|
||||
<div
|
||||
className="hidden absolute top-2/4 end-0 transform -translate-y-2/4 translate-x-40 md:block lg:translate-x-80"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
className="w-72 h-auto"
|
||||
width="1115"
|
||||
height="636"
|
||||
viewBox="0 0 1115 636"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.990203 279.321C-1.11035 287.334 3.68307 295.534 11.6966 297.634L142.285 331.865C150.298 333.965 158.497 329.172 160.598 321.158C162.699 313.145 157.905 304.946 149.892 302.845L33.8132 272.418L64.2403 156.339C66.3409 148.326 61.5475 140.127 53.5339 138.026C45.5204 135.926 37.3213 140.719 35.2207 148.733L0.990203 279.321ZM424.31 252.289C431.581 256.26 440.694 253.585 444.664 246.314C448.635 239.044 445.961 229.931 438.69 225.96L424.31 252.289ZM23.0706 296.074C72.7581 267.025 123.056 230.059 187.043 212.864C249.583 196.057 325.63 198.393 424.31 252.289L438.69 225.96C333.77 168.656 249.817 164.929 179.257 183.892C110.144 202.465 54.2419 243.099 7.92943 270.175L23.0706 296.074Z"
|
||||
fill="currentColor"
|
||||
className="fill-secondary"
|
||||
/>
|
||||
<path
|
||||
d="M451.609 382.417C446.219 388.708 446.95 398.178 453.241 403.567L555.763 491.398C562.054 496.788 571.524 496.057 576.913 489.766C582.303 483.474 581.572 474.005 575.281 468.615L484.15 390.544L562.222 299.413C567.612 293.122 566.881 283.652 560.59 278.263C554.299 272.873 544.829 273.604 539.44 279.895L451.609 382.417ZM837.202 559.655C841.706 566.608 850.994 568.593 857.947 564.09C864.9 559.586 866.885 550.298 862.381 543.345L837.202 559.655ZM464.154 407.131C508.387 403.718 570.802 395.25 638.136 410.928C704.591 426.401 776.318 465.66 837.202 559.655L862.381 543.345C797.144 442.631 718.724 398.89 644.939 381.709C572.033 364.734 504.114 373.958 461.846 377.22L464.154 407.131Z"
|
||||
fill="currentColor"
|
||||
className="fill-accent"
|
||||
/>
|
||||
<path
|
||||
d="M447.448 0.194357C439.203 -0.605554 431.87 5.43034 431.07 13.6759L418.035 148.045C417.235 156.291 423.271 163.623 431.516 164.423C439.762 165.223 447.095 159.187 447.895 150.942L459.482 31.5025L578.921 43.0895C587.166 43.8894 594.499 37.8535 595.299 29.6079C596.099 21.3624 590.063 14.0296 581.818 13.2297L447.448 0.194357ZM1086.03 431.727C1089.68 439.166 1098.66 442.239 1106.1 438.593C1113.54 434.946 1116.62 425.96 1112.97 418.521L1086.03 431.727ZM434.419 24.6572C449.463 42.934 474.586 81.0463 521.375 116.908C568.556 153.07 637.546 187.063 742.018 200.993L745.982 171.256C646.454 157.985 582.444 125.917 539.625 93.0974C496.414 59.978 474.537 26.1903 457.581 5.59138L434.419 24.6572ZM742.018 200.993C939.862 227.372 1054.15 366.703 1086.03 431.727L1112.97 418.521C1077.85 346.879 956.138 199.277 745.982 171.256L742.018 200.993Z"
|
||||
fill="currentColor"
|
||||
className="fill-secondary-content"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/* <!-- End SVG Element ---> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Hero ---> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,760 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Sign Up Form
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/HeroSections/SignUpForm.tsx"
|
||||
<>
|
||||
{/* <!-- Hero --> */}
|
||||
<div className="relative bg-gradient-to-bl from-base-100 via-transparent dark:via-transparent">
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid items-center md:grid-cols-2 gap-8 lg:gap-12">
|
||||
<div>
|
||||
<p className="inline-block text-sm font-medium bg-clip-text bg-gradient-to-l from-primary to-accent text-transparent">
|
||||
FastPocket: A vision for 2024
|
||||
</p>
|
||||
|
||||
{/* <!-- Title --> */}
|
||||
<div className="mt-4 md:mb-12 max-w-2xl">
|
||||
<h1 className="mb-4 font-semibold text-base-content text-4xl lg:text-5xl">
|
||||
Fully customizable rules to match your unique needs
|
||||
</h1>
|
||||
<p className="text-base-content">
|
||||
We provide you with a test account that can be set up in
|
||||
seconds. Our main focus is getting responses to you as soon as
|
||||
we can.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
{/* <!-- Blockquote --> */}
|
||||
<blockquote className="hidden md:block relative max-w-sm">
|
||||
<svg
|
||||
className="absolute top-0 start-0 transform -translate-x-6 -translate-y-8 size-16 text-base-200 dark:text-base-content"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M7.39762 10.3C7.39762 11.0733 7.14888 11.7 6.6514 12.18C6.15392 12.6333 5.52552 12.86 4.76621 12.86C3.84979 12.86 3.09047 12.5533 2.48825 11.94C1.91222 11.3266 1.62421 10.4467 1.62421 9.29999C1.62421 8.07332 1.96459 6.87332 2.64535 5.69999C3.35231 4.49999 4.33418 3.55332 5.59098 2.85999L6.4943 4.25999C5.81354 4.73999 5.26369 5.27332 4.84476 5.85999C4.45201 6.44666 4.19017 7.12666 4.05926 7.89999C4.29491 7.79332 4.56983 7.73999 4.88403 7.73999C5.61716 7.73999 6.21938 7.97999 6.69067 8.45999C7.16197 8.93999 7.39762 9.55333 7.39762 10.3ZM14.6242 10.3C14.6242 11.0733 14.3755 11.7 13.878 12.18C13.3805 12.6333 12.7521 12.86 11.9928 12.86C11.0764 12.86 10.3171 12.5533 9.71484 11.94C9.13881 11.3266 8.85079 10.4467 8.85079 9.29999C8.85079 8.07332 9.19117 6.87332 9.87194 5.69999C10.5789 4.49999 11.5608 3.55332 12.8176 2.85999L13.7209 4.25999C13.0401 4.73999 12.4903 5.27332 12.0713 5.85999C11.6786 6.44666 11.4168 7.12666 11.2858 7.89999C11.5215 7.79332 11.7964 7.73999 12.1106 7.73999C12.8437 7.73999 13.446 7.97999 13.9173 8.45999C14.3886 8.93999 14.6242 9.55333 14.6242 10.3Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div className="relative z-10">
|
||||
<p className="text-xl italic text-base-content dark:text-base-100">
|
||||
Amazing people to work with. Very fast and professional
|
||||
partner.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<footer className="mt-3">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="size-8 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="grow ms-4">
|
||||
<div className="font-semibold text-base-content dark:text-base-200">
|
||||
Josh Grazioso
|
||||
</div>
|
||||
<div className="text-xs text-base-content">
|
||||
Director Payments & Risk | Airbnb
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
{/* <!-- End Blockquote --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div>
|
||||
{/* <!-- Form --> */}
|
||||
<form>
|
||||
<div className="lg:max-w-lg lg:mx-auto lg:me-0 ms-auto">
|
||||
{/* <!-- Card --> */}
|
||||
<div className="p-4 sm:p-7 flex flex-col bg-base-100 rounded-2xl shadow-lg">
|
||||
<div className="text-center">
|
||||
<h1 className="block text-2xl font-bold text-base-content">
|
||||
Start your free trial
|
||||
</h1>
|
||||
<p className="mt-2 text-sm text-base-content dark:text-base-300">
|
||||
Already have an account?
|
||||
<a
|
||||
className="text-primary decoration-2 hover:underline font-medium dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral"
|
||||
href="#"
|
||||
>
|
||||
Sign in here
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-5">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-base-300 bg-base-100 text-base-content shadow-sm hover:bg-base-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-base-100 dark:hover:bg-base-content dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-auto"
|
||||
width="46"
|
||||
height="47"
|
||||
viewBox="0 0 46 47"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M46 24.0287C46 22.09 45.8533 20.68 45.5013 19.2112H23.4694V27.9356H36.4069C36.1429 30.1094 34.7347 33.37 31.5957 35.5731L31.5663 35.8669L38.5191 41.2719L38.9885 41.3306C43.4477 37.2181 46 31.1669 46 24.0287Z"
|
||||
fill="#4285F4"
|
||||
></path>
|
||||
<path
|
||||
d="M23.4694 47C29.8061 47 35.1161 44.9144 39.0179 41.3012L31.625 35.5437C29.6301 36.9244 26.9898 37.8937 23.4987 37.8937C17.2793 37.8937 12.0281 33.7812 10.1505 28.1412L9.88649 28.1706L2.61097 33.7812L2.52296 34.0456C6.36608 41.7125 14.287 47 23.4694 47Z"
|
||||
fill="#34A853"
|
||||
></path>
|
||||
<path
|
||||
d="M10.1212 28.1413C9.62245 26.6725 9.32908 25.1156 9.32908 23.5C9.32908 21.8844 9.62245 20.3275 10.0918 18.8588V18.5356L2.75765 12.8369L2.52296 12.9544C0.909439 16.1269 0 19.7106 0 23.5C0 27.2894 0.909439 30.8731 2.49362 34.0456L10.1212 28.1413Z"
|
||||
fill="#FBBC05"
|
||||
></path>
|
||||
<path
|
||||
d="M23.4694 9.07688C27.8699 9.07688 30.8622 10.9863 32.5344 12.5725L39.1645 6.11C35.0867 2.32063 29.8061 0 23.4694 0C14.287 0 6.36607 5.2875 2.49362 12.9544L10.0918 18.8588C11.9987 13.1894 17.25 9.07688 23.4694 9.07688Z"
|
||||
fill="#EB4335"
|
||||
></path>
|
||||
</svg>
|
||||
Sign up with Google
|
||||
</button>
|
||||
|
||||
<div className="py-3 flex items-center text-xs text-base-300 uppercase before:flex-[1_1_0%] before:border-t before:border-base-300 before:me-6 after:flex-[1_1_0%] after:border-t after:border-base-300 after:ms-6 dark:text-neutral dark:before:border-gray-700 dark:after:border-gray-700">
|
||||
Or
|
||||
</div>
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* <!-- Input Group --> */}
|
||||
<div>
|
||||
{/* <!-- Floating Input --> */}
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="hs-hero-signup-form-floating-input-first-name"
|
||||
className="peer p-4 block w-full border-base-300 rounded-lg text-sm text-neutral placeholder:text-transparent focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:focus:ring-neutral
|
||||
focus:pt-6
|
||||
focus:pb-2
|
||||
[&:not(:placeholder-shown)]:pt-6
|
||||
[&:not(:placeholder-shown)]:pb-2
|
||||
autofill:pt-6
|
||||
autofill:pb-2"
|
||||
placeholder="John"
|
||||
/>
|
||||
<label
|
||||
htmlFor="hs-hero-signup-form-floating-input-first-name"
|
||||
className="absolute top-0 start-0 p-4 h-full text-sm text-neutral truncate pointer-events-none transition ease-in-out duration-100 border border-transparent peer-disabled:opacity-50 peer-disabled:pointer-events-none
|
||||
peer-focus:text-xs
|
||||
peer-focus:-translate-y-1.5
|
||||
peer-focus:text-neutral
|
||||
peer-[:not(:placeholder-shown)]:text-xs
|
||||
peer-[:not(:placeholder-shown)]:-translate-y-1.5
|
||||
peer-[:not(:placeholder-shown)]:text-neutral"
|
||||
>
|
||||
First name
|
||||
</label>
|
||||
</div>
|
||||
{/* <!-- End Floating Input --> */}
|
||||
</div>
|
||||
{/* <!-- End Input Group --> */}
|
||||
|
||||
{/* <!-- Input Group --> */}
|
||||
<div>
|
||||
{/* <!-- Floating Input --> */}
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="hs-hero-signup-form-floating-input-last-name"
|
||||
className="peer p-4 block w-full border-base-300 rounded-lg text-sm text-neutral placeholder:text-transparent focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-nonedark:focus:ring-neutral
|
||||
focus:pt-6
|
||||
focus:pb-2
|
||||
[&:not(:placeholder-shown)]:pt-6
|
||||
[&:not(:placeholder-shown)]:pb-2
|
||||
autofill:pt-6
|
||||
autofill:pb-2"
|
||||
placeholder="Doe"
|
||||
/>
|
||||
<label
|
||||
htmlFor="hs-hero-signup-form-floating-input-last-name"
|
||||
className="absolute top-0 start-0 p-4 h-full text-sm text-neutral truncate pointer-events-none transition ease-in-out duration-100 border border-transparent peer-disabled:opacity-50 peer-disabled:pointer-events-none
|
||||
peer-focus:text-xs
|
||||
peer-focus:-translate-y-1.5
|
||||
peer-focus:text-neutral
|
||||
peer-[:not(:placeholder-shown)]:text-xs
|
||||
peer-[:not(:placeholder-shown)]:-translate-y-1.5
|
||||
peer-[:not(:placeholder-shown)]:text-neutral"
|
||||
>
|
||||
Last name
|
||||
</label>
|
||||
</div>
|
||||
{/* <!-- End Floating Input --> */}
|
||||
</div>
|
||||
{/* <!-- End Input Group --> */}
|
||||
|
||||
{/* <!-- Input Group --> */}
|
||||
<div>
|
||||
{/* <!-- Floating Input --> */}
|
||||
<div className="relative">
|
||||
<input
|
||||
type="email"
|
||||
id="hs-hero-signup-form-floating-input-email"
|
||||
className="peer p-4 block w-full border-base-300 rounded-lg text-sm text-neutral placeholder:text-transparent focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:focus:ring-neutral
|
||||
focus:pt-6
|
||||
focus:pb-2
|
||||
[&:not(:placeholder-shown)]:pt-6
|
||||
[&:not(:placeholder-shown)]:pb-2
|
||||
autofill:pt-6
|
||||
autofill:pb-2"
|
||||
placeholder="you@email.com"
|
||||
/>
|
||||
<label
|
||||
htmlFor="hs-hero-signup-form-floating-input-email"
|
||||
className="absolute top-0 start-0 p-4 h-full text-sm text-neutral truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-base-100 peer-disabled:opacity-50 peer-disabled:pointer-events-none
|
||||
peer-focus:text-xs
|
||||
peer-focus:-translate-y-1.5
|
||||
peer-focus:text-neutral
|
||||
peer-[:not(:placeholder-shown)]:text-xs
|
||||
peer-[:not(:placeholder-shown)]:-translate-y-1.5
|
||||
peer-[:not(:placeholder-shown)]:text-neutral"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
</div>
|
||||
{/* <!-- End Floating Input --> */}
|
||||
</div>
|
||||
{/* <!-- End Input Group --> */}
|
||||
|
||||
{/* <!-- Input Group --> */}
|
||||
<div>
|
||||
{/* <!-- Floating Input --> */}
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="hs-hero-signup-form-floating-input-company-name"
|
||||
className="peer p-4 block w-full border-base-300 rounded-lg text-sm text-neutral placeholder:text-transparent focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-base-300 dark:focus:ring-neutral
|
||||
focus:pt-6
|
||||
focus:pb-2
|
||||
[&:not(:placeholder-shown)]:pt-6
|
||||
[&:not(:placeholder-shown)]:pb-2
|
||||
autofill:pt-6
|
||||
autofill:pb-2"
|
||||
placeholder="FastPocket"
|
||||
/>
|
||||
<label
|
||||
htmlFor="hs-hero-signup-form-floating-input-company-name"
|
||||
className="absolute top-0 start-0 p-4 h-full text-sm text-neutral truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-base-100 peer-disabled:opacity-50 peer-disabled:pointer-events-none
|
||||
peer-focus:text-xs
|
||||
peer-focus:-translate-y-1.5
|
||||
peer-focus:text-neutral
|
||||
peer-[:not(:placeholder-shown)]:text-xs
|
||||
peer-[:not(:placeholder-shown)]:-translate-y-1.5
|
||||
peer-[:not(:placeholder-shown)]:text-neutral"
|
||||
>
|
||||
Company name
|
||||
</label>
|
||||
</div>
|
||||
{/* <!-- End Floating Input --> */}
|
||||
</div>
|
||||
{/* <!-- End Input Group --> */}
|
||||
|
||||
{/* <!-- Input Group --> */}
|
||||
<div className="relative col-span-full">
|
||||
{/* <!-- Floating Input --> */}
|
||||
<div className="relative">
|
||||
<input
|
||||
type="password"
|
||||
id="hs-hero-signup-form-floating-input-new-password"
|
||||
className="peer p-4 block w-full border-base-300 rounded-lg text-sm text-neutral placeholder:text-transparent focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-base-300 dark:focus:ring-neutral
|
||||
focus:pt-6
|
||||
focus:pb-2
|
||||
[&:not(:placeholder-shown)]:pt-6
|
||||
[&:not(:placeholder-shown)]:pb-2
|
||||
autofill:pt-6
|
||||
autofill:pb-2"
|
||||
placeholder="********"
|
||||
/>
|
||||
<label
|
||||
htmlFor="hs-hero-signup-form-floating-input-new-password"
|
||||
className="absolute top-0 start-0 p-4 h-full text-sm text-neutral truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-base-100 peer-disabled:opacity-50 peer-disabled:pointer-events-none
|
||||
peer-focus:text-xs
|
||||
peer-focus:-translate-y-1.5
|
||||
peer-focus:text-neutral
|
||||
peer-[:not(:placeholder-shown)]:text-xs
|
||||
peer-[:not(:placeholder-shown)]:-translate-y-1.5
|
||||
peer-[:not(:placeholder-shown)]:text-neutral"
|
||||
>
|
||||
New password
|
||||
</label>
|
||||
</div>
|
||||
{/* <!-- End Floating Input --> */}
|
||||
|
||||
<div
|
||||
id="hs-strong-password-popover"
|
||||
className="hidden absolute z-10 w-full bg-blue-50 rounded-lg p-4 dark:bg-blue-950"
|
||||
>
|
||||
<div
|
||||
id="hs-strong-password-in-popover"
|
||||
data-hs-strong-password='{
|
||||
"target": "#hs-hero-signup-form-floating-input-new-password",
|
||||
"hints": "#hs-strong-password-popover",
|
||||
"stripclassNamees": "hs-strong-password:opacity-100 hs-strong-password-accepted:bg-teal-500 h-2 flex-auto rounded-full bg-primary opacity-50 mx-1",
|
||||
"mode": "popover"
|
||||
}'
|
||||
className="flex mt-2 -mx-1"
|
||||
></div>
|
||||
|
||||
<h4 className="mt-3 text-sm font-semibold text-neutral dark:text-base-100">
|
||||
Your password must contain:
|
||||
</h4>
|
||||
|
||||
<ul className="space-y-1 text-sm text-neutral">
|
||||
<li
|
||||
data-hs-strong-password-hints-rule-text="min-length"
|
||||
className="hs-strong-password-active:text-teal-500 flex items-center gap-x-2"
|
||||
>
|
||||
<span className="hidden" data-check>
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</span>
|
||||
<span data-uncheck>
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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="M18 6 6 18" />
|
||||
<path d="m6 6 12 12" />
|
||||
</svg>
|
||||
</span>
|
||||
Minimum number of characters is 6.
|
||||
</li>
|
||||
<li
|
||||
data-hs-strong-password-hints-rule-text="lowercase"
|
||||
className="hs-strong-password-active:text-teal-500 flex items-center gap-x-2"
|
||||
>
|
||||
<span className="hidden" data-check>
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</span>
|
||||
<span data-uncheck>
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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="M18 6 6 18" />
|
||||
<path d="m6 6 12 12" />
|
||||
</svg>
|
||||
</span>
|
||||
Should contain lowercase.
|
||||
</li>
|
||||
<li
|
||||
data-hs-strong-password-hints-rule-text="uppercase"
|
||||
className="hs-strong-password-active:text-teal-500 flex items-center gap-x-2"
|
||||
>
|
||||
<span className="hidden" data-check>
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</span>
|
||||
<span data-uncheck>
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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="M18 6 6 18" />
|
||||
<path d="m6 6 12 12" />
|
||||
</svg>
|
||||
</span>
|
||||
Should contain uppercase.
|
||||
</li>
|
||||
<li
|
||||
data-hs-strong-password-hints-rule-text="numbers"
|
||||
className="hs-strong-password-active:text-teal-500 flex items-center gap-x-2"
|
||||
>
|
||||
<span className="hidden" data-check>
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</span>
|
||||
<span data-uncheck>
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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="M18 6 6 18" />
|
||||
<path d="m6 6 12 12" />
|
||||
</svg>
|
||||
</span>
|
||||
Should contain numbers.
|
||||
</li>
|
||||
<li
|
||||
data-hs-strong-password-hints-rule-text="special-characters"
|
||||
className="hs-strong-password-active:text-teal-500 flex items-center gap-x-2"
|
||||
>
|
||||
<span className="hidden" data-check>
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
</span>
|
||||
<span data-uncheck>
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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="M18 6 6 18" />
|
||||
<path d="m6 6 12 12" />
|
||||
</svg>
|
||||
</span>
|
||||
Should contain special characters.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Input Group --> */}
|
||||
|
||||
{/* <!-- Input Group --> */}
|
||||
<div className="col-span-full">
|
||||
{/* <!-- Floating Input --> */}
|
||||
<div className="relative">
|
||||
<input
|
||||
type="password"
|
||||
id="hs-hero-signup-form-floating-input-current-password"
|
||||
className="peer p-4 block w-full border-base-300 rounded-lg text-sm text-neutral placeholder:text-transparent focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-base-300 dark:focus:ring-neutral
|
||||
focus:pt-6
|
||||
focus:pb-2
|
||||
[&:not(:placeholder-shown)]:pt-6
|
||||
[&:not(:placeholder-shown)]:pb-2
|
||||
autofill:pt-6
|
||||
autofill:pb-2"
|
||||
placeholder="********"
|
||||
/>
|
||||
<label
|
||||
htmlFor="hs-hero-signup-form-floating-input-current-password"
|
||||
className="absolute top-0 start-0 p-4 h-full text-sm text-neutral truncate pointer-events-none transition ease-in-out duration-100 border border-transparent dark:text-base-100 peer-disabled:opacity-50 peer-disabled:pointer-events-none
|
||||
peer-focus:text-xs
|
||||
peer-focus:-translate-y-1.5
|
||||
peer-focus:text-neutral
|
||||
peer-[:not(:placeholder-shown)]:text-xs
|
||||
peer-[:not(:placeholder-shown)]:-translate-y-1.5
|
||||
peer-[:not(:placeholder-shown)]:text-neutral"
|
||||
>
|
||||
Current password
|
||||
</label>
|
||||
</div>
|
||||
{/* <!-- End Floating Input --> */}
|
||||
</div>
|
||||
{/* <!-- End Input Group --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
|
||||
{/* <!-- Checkbox --> */}
|
||||
<div className="mt-5 flex items-center">
|
||||
<div className="flex">
|
||||
<input
|
||||
id="remember-me"
|
||||
name="remember-me"
|
||||
type="checkbox"
|
||||
className="shrink-0 mt-0.5 border-base-300 rounded text-blue-600 pointer-events-none focus:ring-primary dark:focus:ring-offset-base-content"
|
||||
/>
|
||||
</div>
|
||||
<div className="ms-3">
|
||||
<label
|
||||
htmlFor="remember-me"
|
||||
className="text-sm dark:text-base-100"
|
||||
>
|
||||
I accept the{" "}
|
||||
<a
|
||||
className="text-primary decoration-2 hover:underline font-medium dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral"
|
||||
href="#"
|
||||
>
|
||||
Terms and Conditions
|
||||
</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Checkbox --> */}
|
||||
|
||||
<div className="mt-5">
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-primary text-base-100 hover:bg-primary/50 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral"
|
||||
>
|
||||
Get started
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
</form>
|
||||
{/* <!-- End Form --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
|
||||
{/* <!-- Clients Section --> */}
|
||||
<div className="mt-6 md:mt-12 py-3 flex items-center text-sm text-base-content gap-x-1.5 after:flex-[1_1_0%] after:border-t after:border-base-300 after:ms-6 dark:text-base-100 dark:after:border-gray-700">
|
||||
<span className="font-semibold bg-clip-text bg-gradient-to-l from-primary to-accent text-transparent">
|
||||
50,000
|
||||
</span>
|
||||
individuals and companies trust FastPocket
|
||||
</div>
|
||||
|
||||
{/* <!-- Clients --> */}
|
||||
<div className="flex flex-wrap gap-x-6 sm:gap-x-12 lg:gap-x-24">
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 text-neutral"
|
||||
enable-background="new 0 0 2499 614"
|
||||
viewBox="0 0 2499 614"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m431.7 0h-235.5v317.8h317.8v-235.5c0-45.6-36.7-82.3-82.3-82.3zm-308.9 0h-40.5c-45.6 0-82.3 36.7-82.3 82.3v40.5h122.8zm-122.8 196.2h122.8v122.8h-122.8zm392.5 317.8h40.5c45.6 0 82.3-36.7 82.3-82.3v-39.2h-122.8zm-196.3-121.5h122.8v122.8h-122.8zm-196.2 0v40.5c0 45.6 36.7 82.3 82.3 82.3h40.5v-122.8zm828-359.6h-48.1v449.4h254.5v-43h-206.4zm360.8 119c-93.7 0-159.5 69.6-159.5 169.6v11.5c1.3 43 20.3 83.6 51.9 113.9 30.4 27.9 69.6 44.3 111.4 44.3h6.3c44.3 0 86.1-16.5 119-44.3l1.3-1.3-21.5-35.4-2.5 1.3c-26.6 24.1-59.5 38-94.9 38-58.2 0-117.7-38-121.5-122.8h243.1v-2.5s1.3-15.2 1.3-22.8c-.3-91.2-53.4-149.5-134.4-149.5zm-108.9 134.2c10.1-57 51.9-93.7 106.3-93.7 40.5 0 84.8 24.1 88.6 93.7zm521.6-96.2v16.5c-20.3-34.2-58.2-55.7-97.5-55.7h-3.8c-86.1 0-145.6 68.4-145.6 168.4 0 101.3 57 169.6 141.8 169.6 67.1 0 97.5-40.5 107.6-58.2v49.4h45.6v-447h-46.8v157zm-98.8 257c-59.5 0-98.7-50.6-98.7-126.6 0-73.4 41.8-125.3 100-125.3 49.4 0 98.7 39.2 98.7 125.3 0 93.7-51.9 126.6-100 126.6zm424.1-250.7v2.5c-8.9-15.2-36.7-48.1-103.8-48.1-84.8 0-140.5 64.6-140.5 163.3s58.2 165.8 144.3 165.8c46.8 0 78.5-16.5 100-50.6v44.3c0 62-39.2 97.5-108.9 97.5-29.1 0-59.5-7.6-86.1-21.5l-2.5-1.3-17.7 39.2 2.5 1.3c32.9 16.5 69.6 25.3 105.1 25.3 74.7 0 154.4-38 154.4-143.1v-311.3h-46.8zm-93.7 241.8c-62 0-102.5-48.1-102.5-122.8 0-76 35.4-119 96.2-119 67.1 0 98.7 39.2 98.7 119 1.3 78.5-31.6 122.8-92.4 122.8zm331.7-286.1c-93.7 0-158.2 69.6-158.2 168.4v11.4c1.3 43 20.3 83.6 51.9 113.9 30.4 27.9 69.6 44.3 111.4 44.3h6.3c44.3 0 86.1-16.5 119-44.3l1.3-1.3-22.8-35.4-2.5 1.3c-26.6 24.1-59.5 38-94.9 38-58.2 0-117.7-38-121.5-122.8h244.2v-2.5s1.3-15.2 1.3-22.8c0-89.9-53.2-148.2-135.5-148.2zm-107.6 134.2c10.1-57 51.9-93.7 106.3-93.7 40.5 0 84.8 24.1 88.6 93.7zm440.6-127.9c-6.3-1.3-11.4-1.3-17.7-2.5-44.3 0-81 27.9-100 74.7v-72.2h-46.8l1.3 320.3v2.5h48.1v-135.4c0-20.3 2.5-41.8 8.9-60.8 15.2-49.4 49.4-81 89.9-81 5.1 0 10.1 0 15.2 1.3h2.5v-46.8z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 text-neutral"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="-4.126838974812941 0.900767442746961 939.436838974813 230.18142889845947"
|
||||
width="2500"
|
||||
height="607"
|
||||
>
|
||||
<path
|
||||
d="M667.21 90.58c-13.76 0-23.58 4.7-28.4 13.6l-2.59 4.82V92.9h-22.39v97.86h23.55v-58.22c0-13.91 7.56-21.89 20.73-21.89 12.56 0 19.76 7.77 19.76 21.31v58.8h23.56v-63c0-23.3-12.79-37.18-34.22-37.18zm-114.21 0c-27.79 0-45 17.34-45 45.25v13.74c0 26.84 17.41 43.51 45.44 43.51 18.75 0 31.89-6.87 40.16-21l-14.6-8.4c-6.11 8.15-15.87 13.2-25.55 13.2-14.19 0-22.66-8.76-22.66-23.44v-3.89h65.73v-16.23c0-26-17.07-42.74-43.5-42.74zm22.09 43.15h-44.38v-2.35c0-16.11 7.91-25 22.27-25 13.83 0 22.09 8.76 22.09 23.44zm360.22-56.94V58.07h-81.46v18.72h28.56V172h-28.56v18.72h81.46V172h-28.57V76.79zM317.65 55.37c-36.38 0-59 22.67-59 59.18v19.74c0 36.5 22.61 59.18 59 59.18s59-22.68 59-59.18v-19.74c-.01-36.55-22.65-59.18-59-59.18zm34.66 80.27c0 24.24-12.63 38.14-34.66 38.14S283 159.88 283 135.64v-22.45c0-24.24 12.64-38.14 34.66-38.14s34.66 13.9 34.66 38.14zm98.31-45.06c-12.36 0-23.06 5.12-28.64 13.69l-2.53 3.9V92.9h-22.4v131.53h23.56v-47.64l2.52 3.74c5.3 7.86 15.65 12.55 27.69 12.55 20.31 0 40.8-13.27 40.8-42.93v-16.64c0-21.37-12.63-42.93-41-42.93zM468.06 149c0 15.77-9.2 25.57-24 25.57-13.8 0-23.43-10.36-23.43-25.18v-14.72c0-15 9.71-25.56 23.63-25.56 14.69 0 23.82 9.79 23.82 25.56zm298.47-90.92L719 190.76h23.93l9.1-28.44h54.64l.09.28 9 28.16h23.92L792.07 58.07zm-8.66 85.53l21.44-67.08 21.22 67.08zM212.59 95.12a57.27 57.27 0 0 0-4.92-47.05 58 58 0 0 0-62.4-27.79A57.29 57.29 0 0 0 102.06 1a57.94 57.94 0 0 0-55.27 40.14A57.31 57.31 0 0 0 8.5 68.93a58 58 0 0 0 7.13 67.94 57.31 57.31 0 0 0 4.92 47A58 58 0 0 0 83 211.72 57.31 57.31 0 0 0 126.16 231a57.94 57.94 0 0 0 55.27-40.14 57.3 57.3 0 0 0 38.28-27.79 57.92 57.92 0 0 0-7.12-67.95zM126.16 216a42.93 42.93 0 0 1-27.58-10c.34-.19 1-.52 1.38-.77l45.8-26.44a7.43 7.43 0 0 0 3.76-6.51V107.7l19.35 11.17a.67.67 0 0 1 .38.54v53.45A43.14 43.14 0 0 1 126.16 216zm-92.59-39.54a43 43 0 0 1-5.15-28.88c.34.21.94.57 1.36.81l45.81 26.45a7.44 7.44 0 0 0 7.52 0L139 142.52v22.34a.67.67 0 0 1-.27.6l-46.3 26.72a43.14 43.14 0 0 1-58.86-15.77zm-12-100A42.92 42.92 0 0 1 44 57.56V112a7.45 7.45 0 0 0 3.76 6.51l55.9 32.28L84.24 162a.68.68 0 0 1-.65.06L37.3 135.33a43.13 43.13 0 0 1-15.77-58.87zm159 37l-55.9-32.28L144 70a.69.69 0 0 1 .65-.06l46.29 26.73a43.1 43.1 0 0 1-6.66 77.76V120a7.44 7.44 0 0 0-3.74-6.54zm19.27-29c-.34-.21-.94-.57-1.36-.81L152.67 57.2a7.44 7.44 0 0 0-7.52 0l-55.9 32.27V67.14a.73.73 0 0 1 .28-.6l46.29-26.72a43.1 43.1 0 0 1 64 44.65zM78.7 124.3l-19.36-11.17a.73.73 0 0 1-.37-.54V59.14A43.09 43.09 0 0 1 129.64 26c-.34.19-.95.52-1.38.77l-45.8 26.44a7.45 7.45 0 0 0-3.76 6.51zm10.51-22.67l24.9-14.38L139 101.63v28.74l-24.9 14.38-24.9-14.38z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 text-neutral"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
x="0"
|
||||
y="0"
|
||||
viewBox="0 0 88 22"
|
||||
enable-background="new 0 0 88 22"
|
||||
>
|
||||
<path
|
||||
d="M36.3 14.6a7.3 7.3 0 0 1-5.6 2.8c-3.8 0-6.8-2.7-6.8-6.2a6 6 0 0 1 2-4.5A6 6 0 0 1 30.5 5c2.2 0 4.3 1 5.6 2.8l-2.5 1.8a3.7 3.7 0 0 0-3.1-1.8 3.5 3.5 0 0 0-3.5 3.5c.1 2 1.7 3.5 3.6 3.5 1.3 0 2.5-.6 3.2-1.7l2.5 1.5z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path d="M37.7 0H40.8V17.1H37.7z" fill="currentColor" />
|
||||
<path
|
||||
d="M49.1 14.7c2 0 3.7-1.6 3.8-3.6-.1-2-1.8-3.6-3.8-3.6s-3.7 1.6-3.8 3.6c.1 2 1.7 3.6 3.8 3.6m0-9.8c1.7-.1 3.4.5 4.7 1.7 1.3 1.2 2 2.8 2.1 4.5a6.4 6.4 0 0 1-2.1 4.5 6.4 6.4 0 0 1-4.7 1.7c-3.8 0-6.8-2.7-6.8-6.2s3-6.2 6.8-6.2"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M55.3 5.1 59 5.1 62 11.5 65.2 5.1 68.6 5.1 62 17.8z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M77.5 9.4a3 3 0 0 0-2.9-1.9c-1.3 0-2.5.7-3.1 1.9h6zm2 6.3a7 7 0 0 1-4.6 1.6c-3.8 0-6.8-2.7-6.8-6.2 0-1.7.7-3.3 1.9-4.5a6 6 0 0 1 4.6-1.7c1.7-.1 3.3.6 4.5 1.8s1.8 2.8 1.7 4.5v.8h-9.6a3.9 3.9 0 0 0 6.5 1.5l1.8 2.2zm2.8-5.3c0-2.9 2.2-5.2 5.7-5.2V8c-.7 0-1.5.3-2 .8s-.7 1.3-.6 2v6.3h-3.1v-6.7z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M9.7 5.6a5 5 0 0 0-8.3-3.5C0 3.5-.4 5.6.3 7.4s2.5 3 4.5 3h4.9V5.6zm1.4 0a5 5 0 0 1 8.3-3.5c1.4 1.4 1.8 3.5 1.1 5.3s-2.5 3-4.5 3h-4.9V5.6zm0 11a5 5 0 0 0 8.3 3.5c1.4-1.4 1.8-3.5 1.1-5.3s-2.5-3-4.5-3h-4.9v4.8zm-6.3 3.5c1.9 0 3.5-1.5 3.5-3.5v-3.5H4.8c-1.9 0-3.5 1.5-3.5 3.5s1.6 3.5 3.5 3.5zm4.9-3.5a5 5 0 0 1-8.3 3.5C0 18.7-.4 16.6.3 14.8s2.5-3 4.5-3h4.9v4.8z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 text-neutral"
|
||||
viewBox="0 -8.881784197001252e-16 267.51517722360785 65.24679557585003"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="2500"
|
||||
height="610"
|
||||
>
|
||||
<path
|
||||
d="M263.043 56.411a4.418 4.418 0 1 0 .085 0zm0 8.33a3.874 3.874 0 1 1 3.809-3.938v.065a3.791 3.791 0 0 1-3.708 3.871h-.1m-16.96-9.535h-9.6V40.17c0-3.585-.064-8.2-4.993-8.2-5 0-5.765 3.906-5.765 7.939v15.294h-9.6V24.287h9.216v4.225h.129a10.1 10.1 0 0 1 9.093-4.994c9.73 0 11.524 6.4 11.524 14.726zm-40.79-35.143a5.571 5.571 0 1 1 5.57-5.572 5.571 5.571 0 0 1-5.57 5.572m4.8 35.143h-9.61V24.287h9.61zM250.87.004h-55.21a4.728 4.728 0 0 0-4.781 4.67v55.439a4.731 4.731 0 0 0 4.781 4.675h55.21a4.741 4.741 0 0 0 4.8-4.675V4.67a4.738 4.738 0 0 0-4.8-4.67m-86.12 31.749c-4.8 0-7.68 3.205-7.68 7.875s2.879 7.878 7.68 7.878 7.687-3.2 7.687-7.878-2.881-7.875-7.687-7.875m16.525 23.437h-8.838v-4.1h-.131a12.071 12.071 0 0 1-9.544 4.868c-9.224 0-15.3-6.657-15.3-16.071 0-8.646 5.377-16.585 14.216-16.585 3.973 0 7.684 1.087 9.861 4.1h.126V9.577h9.609zm-46.139-19.048a5.756 5.756 0 0 0-5.894-5.89 6.406 6.406 0 0 0-6.784 5.89zm8.132 13.7a16.909 16.909 0 0 1-13.128 6.151c-9.6 0-17.286-6.408-17.286-16.331s7.685-16.328 17.286-16.328c8.973 0 14.6 6.4 14.6 16.328v3.01h-22.282a7.171 7.171 0 0 0 7.235 6.019 8.193 8.193 0 0 0 6.851-3.778zM47.834 24.279h9.219v4.225h.131a10.085 10.085 0 0 1 9.09-4.994c9.735 0 11.527 6.405 11.527 14.726V55.19h-9.6V40.159c0-3.588-.066-8.2-5-8.2-4.99 0-5.76 3.907-5.76 7.939v15.288h-9.6zM82.669 9.58h9.6v27.265l10.88-12.583h11.77l-12.6 14.313 12.335 16.63h-12.066L92.397 39.923h-.126v15.28h-9.6zM32.911 24.276h9.6v30.916h-9.6zm4.8-15.37a5.569 5.569 0 1 1-5.57 5.569 5.569 5.569 0 0 1 5.57-5.569M0 9.587h9.993v36.4h18.5v9.222H0zm263.744 51.522a1.2 1.2 0 0 0 1.21-1.269c0-.9-.543-1.33-1.657-1.33h-1.8v4.712h.677v-2.054h.832l.019.025 1.291 2.029h.724l-1.389-2.1zm-.783-.472h-.785v-1.593h.995c.514 0 1.1.084 1.1.757 0 .774-.593.836-1.314.836"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 text-neutral"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 127 33"
|
||||
>
|
||||
<path
|
||||
d="M9.3 16.5C9.3 9 14.3 2.7 21.2.7a16.5 16.5 0 1 0 0 31.6c-6.9-2-11.9-8.3-11.9-15.8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M21.7 10c4 0 7.4 2.8 8.5 6.4a8.9 8.9 0 1 0-17 0c1-3.6 4.4-6.3 8.5-6.3Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M24.8 19.4c0 3-2 5.5-4.8 6.3A6.6 6.6 0 1 0 20 13c2.8.8 4.8 3.4 4.8 6.4Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M39.6 13.5A4.4 4.4 0 0 1 44 9.1h1.3v2.7l-1 .2-1 .6-.2.4-.1.5h2.3v3H43v9.2h-3.4v-9.3h-1.3v-2.9h1.3ZM55.7 13.5h3.4v6.1a6.9 6.9 0 0 1-1.7 4.6 6 6 0 0 1-4.5 1.8c-1 0-1.8-.1-2.5-.5a6 6 0 0 1-3.2-3.4c-.3-.8-.4-1.6-.4-2.5v-6H50v6c0 .5 0 1 .2 1.3l.5 1c.2.4.5.6.9.8.3.2.8.3 1.2.3a2.6 2.6 0 0 0 2.1-1c.3-.3.4-.7.5-1l.2-1.4v-6ZM61.2 25.7V9.5h3.4v16.2h-3.4ZM66.9 25.7V9.5h3.3v16.2H67ZM78.5 21.2l3.3-7.7h3.7l-5.7 12.2h-2.7l-5.6-12.2H75l3.4 7.7ZM87 13.5h3.3v12.2H87V13.5Zm1.6-5 .8.1.6.4.4.7.2.7a1.9 1.9 0 0 1-.6 1.4l-.6.4a2 2 0 0 1-.8.1c-.5 0-1-.2-1.3-.5a2 2 0 0 1-.4-2.1c0-.3.2-.5.4-.7l.6-.4.7-.1ZM98.8 13.2a6.7 6.7 0 0 1 4.8 1.9 6.3 6.3 0 0 1 1.9 5.7h-9.8a3.3 3.3 0 0 0 3.2 2.2c.5 0 1-.1 1.4-.4.5-.2.9-.5 1.2-1h3.7c-.2.7-.5 1.3-1 1.8a6.1 6.1 0 0 1-3.3 2.3 7 7 0 0 1-6.9-1.6 6.1 6.1 0 0 1-2-4.5 6.1 6.1 0 0 1 2-4.5c.7-.6 1.4-1 2.2-1.4.8-.3 1.7-.5 2.6-.5Zm3.2 5.2c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.3-.7-2-.7s-1.4.3-2 .7c-.5.4-.9.9-1.1 1.5h6.3ZM123 13.5h3.6l-5 12.2H119l-2.5-6.5-2.5 6.5h-2.7l-5-12.2h3.6l2.7 7 2.8-7h2.2l2.8 7 2.7-7Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 text-neutral"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 120 32"
|
||||
>
|
||||
<g clip-path="url(#a)">
|
||||
<path
|
||||
d="M46.6 11c.5-.7 1-1.3 1.9-1.7.7-.5 1.6-.7 2.6-.7v3.9h-1c-1.1 0-2 .2-2.6.8-.6.5-1 1.5-1 2.8v7.3H43V8.8h3.7v2.3ZM53 16c0-1.4.2-2.7.8-3.9a6.6 6.6 0 0 1 5.9-3.6 6 6 0 0 1 4.9 2.4v-2h3.7v14.5h-3.7v-2.1c-.5.6-1.2 1.2-2 1.7-.9.4-1.8.6-3 .6a6.4 6.4 0 0 1-5.8-3.6 8.7 8.7 0 0 1-.9-4Zm11.6.1c0-.9-.2-1.7-.6-2.3-.3-.6-.8-1.1-1.4-1.5-.6-.3-1.3-.5-2-.5a3.8 3.8 0 0 0-3.3 2c-.4.6-.5 1.4-.5 2.2 0 1 .1 1.7.5 2.4a3.8 3.8 0 0 0 3.4 2 4 4 0 0 0 1.9-.5c.6-.4 1-.9 1.4-1.5.4-.6.6-1.4.6-2.3ZM86.4 8.8l-9.2 21.5h-4l3.3-7.3-6-14.2h4.2L78.5 19l3.9-10.2h4ZM95.2 23.6a8 8 0 0 1-3.8-.9 7 7 0 0 1-2.7-2.7 8 8 0 0 1-1-3.9c0-1.5.3-2.8 1-4a7 7 0 0 1 2.8-2.6 8 8 0 0 1 3.8-1 8 8 0 0 1 3.9 1 7.6 7.6 0 0 1 3.7 6.6c0 1.5-.3 2.8-1 4a7 7 0 0 1-2.8 2.6c-1.2.6-2.4 1-3.9 1Zm0-3.2a3.6 3.6 0 0 0 3.3-2c.4-.6.6-1.4.6-2.3 0-1.4-.4-2.4-1.1-3.2a3.6 3.6 0 0 0-2.7-1.1c-1.1 0-2 .4-2.7 1.1-.7.8-1.1 1.8-1.1 3.2 0 1.4.4 2.5 1 3.2.8.7 1.6 1.1 2.7 1.1ZM114.1 8.6c1.8 0 3.2.6 4.3 1.7 1 1 1.6 2.6 1.6 4.5v8.6h-3.7v-8c0-1.2-.3-2.1-1-2.7-.5-.7-1.3-1-2.3-1-1 0-1.9.3-2.5 1-.6.6-.8 1.5-.8 2.6v8h-3.8V8.9h3.8v1.8a5 5 0 0 1 1.8-1.4 6 6 0 0 1 2.6-.6ZM25.1 0H7C3 0 0 3 0 6.9V25C0 29 3 32 6.9 32H25c3.8 0 6.9-3 6.9-6.9V7C32 3 29 0 25.1 0Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M12.7 12a2.5 2.5 0 1 0 0-5.1 2.5 2.5 0 0 0 0 5Zm4-5.1a6.1 6.1 0 1 1 0 12.1V7Zm0 12.1 6.2 6.1H9V11.4l7.7 7.6Z"
|
||||
fill="currentColor"
|
||||
className="fill-base-300"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="py-3 lg:py-5 w-16 h-auto md:w-20 lg:w-24 text-neutral"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="2500"
|
||||
height="1036"
|
||||
viewBox="0 -6.166 294.398 121.975"
|
||||
>
|
||||
<path
|
||||
d="M12.139 90.511c-3.939 0-7.799-.479-10.938-1.292l.487-8.277c3.053 1.123 7.313 2.012 11.254 2.012 5.952 0 10.775-2.492 10.775-8.359C23.718 63.172 0 68.002 0 50.466c0-9.325 7.315-15.834 19.941-15.834 3.214 0 6.51.397 9.809.959l-.485 7.802c-3.132-.963-6.591-1.527-9.806-1.527-6.754 0-10.211 3.134-10.211 7.638 0 10.855 23.72 6.839 23.72 23.798-.005 9.973-7.882 17.209-20.829 17.209M54.106 90.264c-2.249 0-3.938-.076-6.03-.479v17.397h-8.601V49.746h8.12c0 2.094-.082 5.309-.484 7.476h.162c2.25-5.068 6.833-8.283 12.944-8.283 9.487 0 14.712 6.75 14.712 18.814.001 14.076-7.473 22.511-20.823 22.511m3.861-34.246c-6.434 0-9.892 7.558-9.892 14.384v12.312c1.852.562 3.86.804 6.272.804 6.833 0 11.497-4.182 11.497-14.958.001-8.039-2.49-12.542-7.877-12.542zM102.519 57.381C94.561 55.936 90.7 61.485 90.7 73.466v16.238h-8.606V49.746H90.3c0 2.246-.246 5.791-.809 8.844h.162c1.771-5.388 5.79-10.377 13.271-9.651l-.405 8.442M114.803 43.797c-3.056 0-5.55-2.414-5.55-5.393 0-2.971 2.494-5.385 5.55-5.385 2.974 0 5.467 2.333 5.467 5.385 0 2.979-2.493 5.393-5.467 5.393m4.26 45.907h-8.6V49.746h8.6v39.958zM154.449 89.704V63.975c0-4.982-1.374-7.875-5.951-7.875-6.03 0-10.457 6.345-10.457 14.302v19.303h-8.603V49.746h8.203c0 2.094-.162 5.546-.563 7.796l.082.075c2.33-5.141 7.157-8.68 13.91-8.68 9.084 0 11.9 5.711 11.9 12.787v27.979h-8.521M186.675 90.425c-8.524 0-11.1-3.294-11.1-12.214V56.417h-7.634v-6.671h7.634V37.04l8.523-2.333v15.039h10.532v6.671h-10.448v19.137c0 5.954 1.205 7.558 5.224 7.558 1.769 0 3.699-.24 5.226-.643v7.076c-2.331.486-5.307.88-7.957.88"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M233.712 78.636c11.72-15.086 20.938-32.809 20.938-45.537 0-6.652-4.765-11.295-10.978-14.823.123 13.831-4.668 46.263-9.96 60.36M195.279 115.809c27.47-9.188 67.29-30.598 94.985-49.725 2.324-1.6 4.135-3.085 4.135-5.685 0-4.519-8.275-10.576-12.292-12.987-21.792 22.653-65.163 56.596-86.828 68.397"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M220.76 96.567c16.938-11.709 41.545-33.739 49.873-45.727 1.963-2.82 3.416-4.454 3.416-7.405 0-4.839-5.644-8.382-9.703-10.849-9.727 22.924-31.579 51.469-43.586 63.981M236.192 64.087c2.191-14.477.903-31.952-1.894-42.913-1.521-5.969-6.901-12.706-11.88-14.812 6.526 18.522 12.128 44.898 13.774 57.725"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M231.367 43.779C226.235 29.91 213.446.998 194.633-6.165c12.247 13.516 30.417 40.337 36.734 49.944"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/* <!-- End Clients --> */}
|
||||
</div>
|
||||
{/* <!-- End Clients Section --> */}
|
||||
</div>
|
||||
{/* <!-- End Hero --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Split Section With An Image And A Form
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/HeroSections/SplitSectionWithAnImageAndAForm.tsx"
|
||||
<>
|
||||
{/* <!-- Hero --> */}
|
||||
<div className="relative overflow-hidden">
|
||||
<div className="mx-auto max-w-screen-md py-12 px-4 sm:px-6 md:max-w-screen-xl md:py-20 lg:py-32 md:px-8">
|
||||
<div className="md:pe-8 md:w-1/2 xl:pe-0 xl:w-5/12">
|
||||
{/* <!-- Title --> */}
|
||||
<h1 className="text-3xl text-base-content font-bold md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight dark:text-base-200">
|
||||
Solving problems for every{" "}
|
||||
<span className="text-primary dark:text-primary">team</span>
|
||||
</h1>
|
||||
<p className="mt-3 text-base text-secondary-content">
|
||||
Built on standard web technology, teams use FastPocket to build
|
||||
beautiful cross-platform hybrid apps in a fraction of the time.
|
||||
</p>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
<div className="mt-8 grid">
|
||||
<button
|
||||
type="button"
|
||||
className="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-base-200 bg-base-100 text-base-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 "
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-auto"
|
||||
width="46"
|
||||
height="47"
|
||||
viewBox="0 0 46 47"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M46 24.0287C46 22.09 45.8533 20.68 45.5013 19.2112H23.4694V27.9356H36.4069C36.1429 30.1094 34.7347 33.37 31.5957 35.5731L31.5663 35.8669L38.5191 41.2719L38.9885 41.3306C43.4477 37.2181 46 31.1669 46 24.0287Z"
|
||||
fill="#4285F4"
|
||||
/>
|
||||
<path
|
||||
d="M23.4694 47C29.8061 47 35.1161 44.9144 39.0179 41.3012L31.625 35.5437C29.6301 36.9244 26.9898 37.8937 23.4987 37.8937C17.2793 37.8937 12.0281 33.7812 10.1505 28.1412L9.88649 28.1706L2.61097 33.7812L2.52296 34.0456C6.36608 41.7125 14.287 47 23.4694 47Z"
|
||||
fill="#34A853"
|
||||
/>
|
||||
<path
|
||||
d="M10.1212 28.1413C9.62245 26.6725 9.32908 25.1156 9.32908 23.5C9.32908 21.8844 9.62245 20.3275 10.0918 18.8588V18.5356L2.75765 12.8369L2.52296 12.9544C0.909439 16.1269 0 19.7106 0 23.5C0 27.2894 0.909439 30.8731 2.49362 34.0456L10.1212 28.1413Z"
|
||||
fill="#FBBC05"
|
||||
/>
|
||||
<path
|
||||
d="M23.4694 9.07688C27.8699 9.07688 30.8622 10.9863 32.5344 12.5725L39.1645 6.11C35.0867 2.32063 29.8061 0 23.4694 0C14.287 0 6.36607 5.2875 2.49362 12.9544L10.0918 18.8588C11.9987 13.1894 17.25 9.07688 23.4694 9.07688Z"
|
||||
fill="#EB4335"
|
||||
/>
|
||||
</svg>
|
||||
Sign up with Google
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="py-6 flex items-center text-sm text-secondary-content uppercase before:flex-[1_1_0%] before:border-t before:me-6 after:flex-[1_1_0%] after:border-t after:ms-6">
|
||||
Or
|
||||
</div>
|
||||
|
||||
{/* <!-- Form --> */}
|
||||
<form>
|
||||
<div className="mb-4">
|
||||
<label
|
||||
htmlFor="hs-hero-name-2"
|
||||
className="block text-sm font-medium dark:text-base-100"
|
||||
>
|
||||
<span className="sr-only">Full name</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="hs-hero-name-2"
|
||||
className="py-3 px-4 block w-full border-base-200 rounded-lg text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none"
|
||||
placeholder="Full name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<label
|
||||
htmlFor="hs-hero-email-2"
|
||||
className="block text-sm font-medium dark:text-base-100"
|
||||
>
|
||||
<span className="sr-only">Email address</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="hs-hero-email-2"
|
||||
className="py-3 px-4 block w-full border-base-200 rounded-lg text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none"
|
||||
placeholder="Email address"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<label
|
||||
htmlFor="hs-hero-password-2"
|
||||
className="block text-sm font-medium dark:text-base-100"
|
||||
>
|
||||
<span className="sr-only">Password</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="hs-hero-password-2"
|
||||
className="py-3 px-4 block w-full border-base-200 rounded-lg text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid">
|
||||
<button
|
||||
type="submit"
|
||||
className="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-primary text-base-100 hover:bg-primary/50 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 "
|
||||
>
|
||||
Sign up
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{/* <!-- End Form --> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:block md:absolute md:top-0 md:start-1/2 md:end-0 h-full bg-[url('https://images.unsplash.com/photo-1606868306217-dbf5046868d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1981&q=80')] bg-no-repeat bg-center bg-cover"></div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Hero --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"label": "Hero Forms",
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Center Aligned In Dark Background
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/HeroSections/CenterAlignedInDarkBackground.tsx"
|
||||
<>
|
||||
{/* <!-- Hero --> */}
|
||||
<div className="bg-neutral">
|
||||
<div className="bg-gradient-to-b from-primary/[.15] via-transparent">
|
||||
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-24 space-y-8">
|
||||
{/* <!-- Announcement Banner --> */}
|
||||
<div className="flex justify-center">
|
||||
<a
|
||||
className="group inline-block bg-primary-content/[.05] hover:bg-primary-content/[.1] border border-primary-content/[.05] p-1 ps-4 rounded-full shadow-md"
|
||||
href="../figma.html"
|
||||
>
|
||||
<p className="me-2 inline-block text-primary-content text-sm">
|
||||
FastPocket UI Figma is live.
|
||||
</p>
|
||||
<span className="group-hover:bg-base-100/[.1] py-1.5 px-2.5 inline-flex justify-center items-center gap-x-2 rounded-full bg-base-100/[.075] font-semibold text-base-100 text-sm">
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Announcement Banner --> */}
|
||||
|
||||
{/* <!-- Title --> */}
|
||||
<div className="max-w-3xl text-center mx-auto">
|
||||
<h1 className="block font-medium text-primary-content text-4xl sm:text-5xl md:text-6xl lg:text-7xl">
|
||||
Now it's easier than ever to build products
|
||||
</h1>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
<div className="max-w-3xl text-center mx-auto">
|
||||
<p className="text-lg text-primary-content">
|
||||
FastPocket is a large open-source project, crafted with Tailwind CSS
|
||||
framework by Hmlstream.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* <!-- Buttons --> */}
|
||||
<div className="text-center">
|
||||
<a
|
||||
className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-primary to-accent shadow-lg shadow-transparent hover:shadow-primary/50 border border-transparent text-primary-content text-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-primary-content py-3 px-6 dark:focus:ring-offset-base-200"
|
||||
href="#"
|
||||
>
|
||||
Get started
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Buttons --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Hero --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Center Aligned With Video Play Button On Image
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/HeroSections/CenterAlignedWithVideoPlayButtonOnImage.tsx"
|
||||
<>
|
||||
{/* <!-- Hero --> */}
|
||||
<div className="relative overflow-hidden">
|
||||
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||||
<div className="max-w-2xl text-center mx-auto">
|
||||
<h1 className="block text-3xl font-bold text-base-content sm:text-4xl md:text-5xl">
|
||||
Designed for you to get more{" "}
|
||||
<span className="text-primary">simple</span>
|
||||
</h1>
|
||||
<p className="mt-3 text-lg text-secondary-content">
|
||||
Build your business here. Take it anywhere.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-10 relative max-w-5xl mx-auto">
|
||||
<div className="w-full object-cover h-96 sm:h-[480px] bg-[url('https://images.unsplash.com/photo-1606868306217-dbf5046868d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1981&q=80')] bg-no-repeat bg-center bg-cover rounded-xl"></div>
|
||||
|
||||
<div className="absolute inset-0 size-full">
|
||||
<div className="flex flex-col justify-center items-center size-full">
|
||||
<a
|
||||
className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-base-200 bg-base-100 text-base-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-non dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-base-100"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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"
|
||||
>
|
||||
<polygon points="5 3 19 12 5 21 5 3" />
|
||||
</svg>
|
||||
Play the overview
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-12 -start-20 -z-[1] size-48 bg-gradient-to-b from-orange-500 to-white p-px rounded-lg dark:to-slate-900">
|
||||
<div className="bg-white size-48 rounded-lg dark:bg-slate-900"></div>
|
||||
</div>
|
||||
|
||||
<div className="absolute -top-12 -end-20 -z-[1] size-48 bg-gradient-to-t from-blue-600 to-cyan-400 p-px rounded-full">
|
||||
<div className="bg-white size-48 rounded-full dark:bg-slate-900"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Hero --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Gradient Background
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/HeroSections/GradientBackground.tsx"
|
||||
<>
|
||||
{/* <!-- Hero --> */}
|
||||
<div className="relative overflow-hidden">
|
||||
{/* <!-- Gradients --> */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="flex absolute -top-96 start-1/2 transform -translate-x-1/2"
|
||||
>
|
||||
<div className="bg-gradient-to-r from-primary/50 to-primary blur-3xl w-[25rem] h-[44rem] rotate-[-60deg] transform -translate-x-[10rem]"></div>
|
||||
<div className="bg-gradient-to-tl from-primary via-primary to-primary blur-3xl w-[90rem] h-[50rem] rounded-fulls origin-top-left -rotate-12 -translate-x-[15rem]"></div>
|
||||
</div>
|
||||
{/* <!-- End Gradients --> */}
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10 lg:py-16">
|
||||
<div className="max-w-2xl text-center mx-auto">
|
||||
<p className="inline-block text-sm font-medium bg-clip-text bg-gradient-to-l from-secondary-content to-neutral text-transparent">
|
||||
Preline: A vision for 2023
|
||||
</p>
|
||||
|
||||
{/* <!-- Title --> */}
|
||||
<div className="mt-5 max-w-2xl">
|
||||
<h1 className="block font-semibold text-base-content text-4xl md:text-5xl lg:text-6xl">
|
||||
The Intuitive Web Solutions
|
||||
</h1>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
<div className="mt-5 max-w-3xl">
|
||||
<p className="text-lg text-secondary-content">
|
||||
Preline UI is an open-source set of prebuilt UI components,
|
||||
ready-to-use examples and Figma design system based on the
|
||||
utility-first Tailwind CSS framework.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* <!-- Buttons --> */}
|
||||
<div className="mt-8 gap-3 flex justify-center">
|
||||
<a
|
||||
className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-primary text-primary-content hover:bg-primary/50 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-base-100"
|
||||
href="#"
|
||||
>
|
||||
Get started
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-secondary-content hover:bg-base-200 disabled:opacity-50 disabled:pointer-events-none"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
width="19"
|
||||
height="18"
|
||||
viewBox="0 0 19 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.875 18C8.531 18 9.875 16.656 9.875 15V12H6.875C5.219 12 3.875 13.344 3.875 15C3.875 16.656 5.219 18 6.875 18Z"
|
||||
fill="#0ACF83"
|
||||
></path>
|
||||
<path
|
||||
d="M3.875 9C3.875 7.344 5.219 6 6.875 6H9.875V12H6.875C5.219 12 3.875 10.656 3.875 9Z"
|
||||
fill="#A259FF"
|
||||
></path>
|
||||
<path
|
||||
d="M3.875 3C3.875 1.344 5.219 0 6.875 0H9.875V6H6.875C5.219 6 3.875 4.656 3.875 3Z"
|
||||
fill="#F24E1E"
|
||||
></path>
|
||||
<path
|
||||
d="M9.87501 0H12.875C14.531 0 15.875 1.344 15.875 3C15.875 4.656 14.531 6 12.875 6H9.87501V0Z"
|
||||
fill="#FF7262"
|
||||
></path>
|
||||
<path
|
||||
d="M15.875 9C15.875 10.656 14.531 12 12.875 12C11.219 12 9.87501 10.656 9.87501 9C9.87501 7.344 11.219 6 12.875 6C14.531 6 15.875 7.344 15.875 9Z"
|
||||
fill="#1ABCFE"
|
||||
></path>
|
||||
</svg>
|
||||
Preline Figma
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Buttons --> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Hero --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Polygon Background Element
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/HeroSections/PolygonBackgroundElement.tsx"
|
||||
<>
|
||||
{/* <!-- Hero --> */}
|
||||
<div className="relative overflow-hidden before:absolute before:top-0 before:start-1/2 before:bg-[url('https://preline.co/assets/svg/examples/polygon-bg-element.svg')] before:bg-no-repeat before:bg-top before:bg-cover before:size-full before:-z-[1] before:transform before:-translate-x-1/2 dark:before:bg-[url('https://preline.co/assets/svg/examples-dark/polygon-bg-element.svg')]">
|
||||
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
|
||||
{/* <!-- Announcement Banner --> */}
|
||||
<div className="flex justify-center">
|
||||
<a
|
||||
className="inline-flex items-center gap-x-2 bg-base-100 border border-base-200 text-sm text-base-content p-1 ps-3 rounded-full transition hover:base-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-base-100"
|
||||
href="#"
|
||||
>
|
||||
PRO release - Join to waitlist
|
||||
<span className="py-1.5 px-2.5 inline-flex justify-center items-center gap-x-2 rounded-full bg-base-200 font-semibold text-sm text-base-content">
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Announcement Banner --> */}
|
||||
|
||||
{/* <!-- Title --> */}
|
||||
<div className="mt-5 max-w-2xl text-center mx-auto">
|
||||
<h1 className="block font-bold text-base-content text-4xl md:text-5xl lg:text-6xl">
|
||||
Let's Build
|
||||
<span className="bg-clip-text bg-gradient-to-tl from-primary to-accent text-transparent">
|
||||
Together
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
<div className="mt-5 max-w-3xl text-center mx-auto">
|
||||
<p className="text-lg text-base-content">
|
||||
FastPocket UI is an open-source set of prebuilt UI components,
|
||||
ready-to-use examples and Figma design system based on the
|
||||
utility-first Tailwind CSS framework.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* <!-- Buttons --> */}
|
||||
<div className="mt-8 gap-3 flex justify-center">
|
||||
<a
|
||||
className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-primary to-accent hover:from-accent hover:to-primary border border-transparent text-base-100 text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-base-100 py-3 px-4 dark:focus:ring-offset-base-200"
|
||||
href="#"
|
||||
>
|
||||
Get started
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
className="relative group p-2 ps-3 inline-flex items-center gap-x-2 text-sm font-mono rounded-lg border border-base-200 bg-base-100 text-base-content shadow-sm hover:bg-base-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-base-300 dark:border-base-100 dark:hover:bg-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
>
|
||||
$ npm i FastPocket
|
||||
<span className="flex justify-center items-center bg-base-200 rounded-md size-7 text-base-300">
|
||||
<svg
|
||||
className="flex-shrink-0 size-4 group-hover:rotate-6 transition"
|
||||
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"
|
||||
>
|
||||
<rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
|
||||
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{/* <!-- End Buttons --> */}
|
||||
|
||||
<div className="mt-5 flex justify-center items-center gap-x-1 sm:gap-x-3">
|
||||
<span className="text-sm text-base-content">
|
||||
Package Manager:
|
||||
</span>
|
||||
<span className="text-sm font-bold text-base-content">
|
||||
npm
|
||||
</span>
|
||||
<svg
|
||||
className="size-5 text-base-200"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M6 13L10 3"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
<a
|
||||
className="inline-flex items-center gap-x-1.5 text-sm text-primary decoration-2 hover:underline font-medium"
|
||||
href="#"
|
||||
>
|
||||
Installation Guide
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Hero --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Square Background Element
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/HeroSections/SquaredBackgroundElement.tsx"
|
||||
<>
|
||||
{/* {/* <!-- Hero --> */}
|
||||
<div className="relative overflow-hidden before:absolute before:top-0 before:start-1/2 before:bg-[url('https://preline.co/assets/svg/examples/squared-bg-element.svg')] before:bg-no-repeat before:bg-top before:size-full before:-z-[1] before:transform before:-translate-x-1/2 dark:before:bg-[url('https://preline.co/assets/svg/examples-dark/squared-bg-element.svg')]">
|
||||
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
|
||||
{/* <!-- Announcement Banner --> */}
|
||||
<div className="flex justify-center">
|
||||
<a
|
||||
className="inline-flex items-center gap-x-2 bg-base-100 border border-base-300 text-xs text-secondary-content p-2 px-3 rounded-full transition hover:border-neutral"
|
||||
href="#"
|
||||
>
|
||||
Explore the Capital Product
|
||||
<span className="flex items-center gap-x-1">
|
||||
<span className="border-s border-base-200 text-primary ps-2">
|
||||
Explore
|
||||
</span>
|
||||
<svg
|
||||
className="flex-shrink-0 size-4 text-primary"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Announcement Banner --> */}
|
||||
|
||||
{/* <!-- Title --> */}
|
||||
<div className="mt-5 max-w-xl text-center mx-auto">
|
||||
<h1 className="block font-bold text-secondary-content text-4xl md:text-5xl lg:text-6xl">
|
||||
Supercharged Preline Experience
|
||||
</h1>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
<div className="mt-5 max-w-3xl text-center mx-auto">
|
||||
<p className="text-lg text-base-content">
|
||||
Preline is a large open-source project, crafted with Tailwind CSS
|
||||
framework by Hmlstream.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* <!-- Buttons --> */}
|
||||
<div className="mt-8 gap-3 flex justify-center">
|
||||
<a
|
||||
className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-primary to-accent hover:from-accent hover:to-primary border border-transparent text-base-100 text-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-base-100 py-3 px-4"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
|
||||
</svg>
|
||||
Continue with Github
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Buttons --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Hero --> */}
|
||||
</>
|
||||
```
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,322 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# With Images and Reviews
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/HeroSections/WithImageAndReviews.tsx"
|
||||
<>
|
||||
{/* <!-- Hero --> */}
|
||||
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid md:grid-cols-2 gap-4 md:gap-8 xl:gap-20 md:items-center">
|
||||
<div>
|
||||
<h1 className="block text-3xl font-bold text-gray-800 sm:text-4xl lg:text-6xl lg:leading-tight dark:text-white">
|
||||
Start your journey with <span className="text-blue-600">FastPocket</span>
|
||||
</h1>
|
||||
<p className="mt-3 text-lg text-gray-800 dark:text-gray-400">
|
||||
Hand-picked professionals and expertly crafted components, designed
|
||||
for any kind of entrepreneur.
|
||||
</p>
|
||||
|
||||
{/* <!-- Buttons --> */}
|
||||
<div className="mt-7 grid gap-3 w-full sm:inline-flex">
|
||||
<a
|
||||
className="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
href="#"
|
||||
>
|
||||
Get started
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
href="#"
|
||||
>
|
||||
Contact sales team
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Buttons --> */}
|
||||
|
||||
{/* <!-- Review --> */}
|
||||
<div className="mt-6 lg:mt-10 grid grid-cols-2 gap-x-5">
|
||||
{/* <!-- Review --> */}
|
||||
<div className="py-5">
|
||||
<div className="flex space-x-1">
|
||||
<svg
|
||||
className="size-4 text-gray-800 dark:text-gray-200"
|
||||
width="51"
|
||||
height="51"
|
||||
viewBox="0 0 51 51"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="size-4 text-gray-800 dark:text-gray-200"
|
||||
width="51"
|
||||
height="51"
|
||||
viewBox="0 0 51 51"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="size-4 text-gray-800 dark:text-gray-200"
|
||||
width="51"
|
||||
height="51"
|
||||
viewBox="0 0 51 51"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="size-4 text-gray-800 dark:text-gray-200"
|
||||
width="51"
|
||||
height="51"
|
||||
viewBox="0 0 51 51"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="size-4 text-gray-800 dark:text-gray-200"
|
||||
width="51"
|
||||
height="51"
|
||||
viewBox="0 0 51 51"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-sm text-gray-800 dark:text-gray-200">
|
||||
<span className="font-bold">4.6</span> /5 - from 12k reviews
|
||||
</p>
|
||||
|
||||
<div className="mt-5">
|
||||
{/* <!-- Star --> */}
|
||||
<svg
|
||||
className="h-auto w-16 text-gray-800 dark:text-white"
|
||||
width="80"
|
||||
height="27"
|
||||
viewBox="0 0 80 27"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20.558 9.74046H11.576V12.3752H17.9632C17.6438 16.0878 14.5301 17.7245 11.6159 17.7245C7.86341 17.7245 4.58995 14.7704 4.58995 10.6586C4.58995 6.62669 7.70373 3.51291 11.6159 3.51291C14.6498 3.51291 16.4063 5.42908 16.4063 5.42908L18.2426 3.51291C18.2426 3.51291 15.8474 0.878184 11.4961 0.878184C5.94724 0.838264 1.67578 5.50892 1.67578 10.5788C1.67578 15.5289 5.70772 20.3592 11.6558 20.3592C16.8854 20.3592 20.7177 16.8063 20.7177 11.4969C20.7177 10.3792 20.558 9.74046 20.558 9.74046Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M27.8621 7.78442C24.1894 7.78442 21.5547 10.6587 21.5547 14.012C21.5547 17.4451 24.1096 20.3593 27.9419 20.3593C31.415 20.3593 34.2094 17.7645 34.2094 14.0918C34.1695 9.94011 30.896 7.78442 27.8621 7.78442ZM27.902 10.2994C29.6984 10.2994 31.415 11.7764 31.415 14.0918C31.415 16.4072 29.7383 17.8842 27.902 17.8842C25.906 17.8842 24.3491 16.2874 24.3491 14.0519C24.3092 11.8962 25.8661 10.2994 27.902 10.2994Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M41.5964 7.78442C37.9238 7.78442 35.2891 10.6587 35.2891 14.012C35.2891 17.4451 37.844 20.3593 41.6763 20.3593C45.1493 20.3593 47.9438 17.7645 47.9438 14.0918C47.9038 9.94011 44.6304 7.78442 41.5964 7.78442ZM41.6364 10.2994C43.4328 10.2994 45.1493 11.7764 45.1493 14.0918C45.1493 16.4072 43.4727 17.8842 41.6364 17.8842C39.6404 17.8842 38.0835 16.2874 38.0835 14.0519C38.0436 11.8962 39.6004 10.2994 41.6364 10.2994Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M55.0475 7.82434C51.6543 7.82434 49.0195 10.7784 49.0195 14.0918C49.0195 17.8443 52.0934 20.3992 54.9676 20.3992C56.764 20.3992 57.6822 19.7205 58.4407 18.8822V20.1198C58.4407 22.2754 57.1233 23.5928 55.1273 23.5928C53.2111 23.5928 52.2531 22.1557 51.8938 21.3573L49.4587 22.3553C50.297 24.1517 52.0135 26.0279 55.0874 26.0279C58.4407 26.0279 60.9956 23.9122 60.9956 19.481V8.18362H58.3608V9.26147C57.6423 8.38322 56.5245 7.82434 55.0475 7.82434ZM55.287 10.2994C56.9237 10.2994 58.6403 11.7365 58.6403 14.1317C58.6403 16.6068 56.9636 17.9241 55.2471 17.9241C53.4507 17.9241 51.774 16.4471 51.774 14.1716C51.8139 11.6966 53.5305 10.2994 55.287 10.2994Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M72.8136 7.78442C69.62 7.78442 66.9453 10.2994 66.9453 14.0519C66.9453 18.004 69.9393 20.3593 73.093 20.3593C75.7278 20.3593 77.4044 18.8822 78.3625 17.6048L76.1669 16.1277C75.608 17.006 74.6499 17.8443 73.093 17.8443C71.3365 17.8443 70.5381 16.8862 70.0192 15.9281L78.4423 12.4152L78.0032 11.3772C77.1649 9.46107 75.2886 7.78442 72.8136 7.78442ZM72.8934 10.2196C74.0511 10.2196 74.8495 10.8184 75.2487 11.5768L69.6599 13.9321C69.3405 12.0958 71.097 10.2196 72.8934 10.2196Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M62.9531 19.9999H65.7076V1.47693H62.9531V19.9999Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
{/* <!-- End Star --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Review --> */}
|
||||
|
||||
{/* <!-- Review --> */}
|
||||
<div className="py-5">
|
||||
<div className="flex space-x-1">
|
||||
<svg
|
||||
className="size-4 text-gray-800 dark:text-gray-200"
|
||||
width="51"
|
||||
height="51"
|
||||
viewBox="0 0 51 51"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="size-4 text-gray-800 dark:text-gray-200"
|
||||
width="51"
|
||||
height="51"
|
||||
viewBox="0 0 51 51"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="size-4 text-gray-800 dark:text-gray-200"
|
||||
width="51"
|
||||
height="51"
|
||||
viewBox="0 0 51 51"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="size-4 text-gray-800 dark:text-gray-200"
|
||||
width="51"
|
||||
height="51"
|
||||
viewBox="0 0 51 51"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className="size-4 text-gray-800 dark:text-gray-200"
|
||||
width="51"
|
||||
height="51"
|
||||
viewBox="0 0 51 51"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M49.6867 20.0305C50.2889 19.3946 49.9878 18.1228 49.0846 18.1228L33.7306 15.8972C33.4296 15.8972 33.1285 15.8972 32.8275 15.2613L25.9032 0.317944C25.6021 0 25.3011 0 25 0V42.6046C25 42.6046 25.3011 42.6046 25.6021 42.6046L39.7518 49.9173C40.3539 50.2352 41.5581 49.5994 41.2571 48.6455L38.5476 32.4303C38.5476 32.1124 38.5476 31.7944 38.8486 31.4765L49.6867 20.0305Z"
|
||||
fill="transparent"
|
||||
/>
|
||||
<path
|
||||
d="M0.313299 20.0305C-0.288914 19.3946 0.0122427 18.1228 0.915411 18.1228L16.2694 15.8972C16.5704 15.8972 16.8715 15.8972 17.1725 15.2613L24.0968 0.317944C24.3979 0 24.6989 0 25 0V42.6046C25 42.6046 24.6989 42.6046 24.3979 42.6046L10.2482 49.9173C9.64609 50.2352 8.44187 49.5994 8.74292 48.6455L11.4524 32.4303C11.4524 32.1124 11.4524 31.7944 11.1514 31.4765L0.313299 20.0305Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-sm text-gray-800 dark:text-gray-200">
|
||||
<span className="font-bold">4.8</span> /5 - from 5k reviews
|
||||
</p>
|
||||
|
||||
<div className="mt-5">
|
||||
{/* <!-- Star --> */}
|
||||
<svg
|
||||
className="h-auto w-16 text-gray-800 dark:text-white"
|
||||
width="110"
|
||||
height="28"
|
||||
viewBox="0 0 110 28"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M66.6601 8.35107C64.8995 8.35107 63.5167 8.72875 62.1331 9.48265C62.1331 5.4582 62.1331 1.81143 62.2594 0.554199L53.8321 2.06273V2.81736L54.7124 2.94301C55.8433 3.19431 56.2224 3.82257 56.4715 5.33255C56.725 8.35107 56.5979 24.4496 56.4715 27.0912C58.7354 27.5945 61.1257 27.9722 63.5159 27.9722C70.1819 27.9722 74.2064 23.8213 74.2064 17.281C74.2064 12.1249 70.9366 8.35107 66.6601 8.35107ZM63.7672 26.5878C63.2639 26.5878 62.6342 26.5878 62.258 26.4629C62.1316 24.7023 62.0067 17.281 62.1316 10.7413C62.8862 10.4893 63.3888 10.3637 64.0185 10.3637C66.7872 10.3637 68.2965 13.6335 68.2965 17.6572C68.2957 22.6898 66.4088 26.5878 63.7672 26.5878ZM22.1363 1.0568H0V2.18838L1.25796 2.31403C2.89214 2.56533 3.52184 3.57127 3.77242 5.9608C4.15082 10.4886 4.02445 18.6646 3.77242 22.5619C3.52112 24.9522 2.89287 26.0845 1.25796 26.2087L0 26.4615V27.4674H14.2123V26.4615L12.703 26.2087C11.0681 26.0838 10.4392 24.9522 10.1879 22.5619C10.0615 20.9263 9.93583 18.2847 9.93583 15.0156L12.9543 15.1413C14.8413 15.1413 15.7208 16.6505 16.0985 18.7881H17.2308V9.86106H16.0985C15.7201 11.9993 14.8413 13.5078 12.9543 13.5078L9.93655 13.6342C9.93655 9.35773 10.0622 5.33328 10.1886 2.94374H14.59C17.9869 2.94374 19.7475 5.08125 21.0047 8.85513L22.2626 8.47745L22.1363 1.0568Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M29.3053 8.09998C35.5944 8.09998 38.7385 12.3764 38.7385 18.0358C38.7385 23.4439 35.2167 27.9731 28.9276 27.9731C22.6393 27.9731 19.4951 23.6959 19.4951 18.0358C19.4951 12.6277 23.0162 8.09998 29.3053 8.09998ZM28.9276 9.35793C26.1604 9.35793 25.4058 13.1311 25.4058 18.0358C25.4058 22.8149 26.6637 26.7137 29.1796 26.7137C32.0703 26.7137 32.8264 22.9405 32.8264 18.0358C32.8264 13.2567 31.5699 9.35793 28.9276 9.35793ZM75.8403 18.1622C75.8403 13.0054 79.1101 8.09998 85.5248 8.09998C90.8057 8.09998 93.3224 11.9995 93.3224 17.1555H81.6253C81.4989 21.8089 83.7628 25.2051 88.2913 25.2051C90.3038 25.2051 91.3098 24.7033 92.5685 23.8223L93.0703 24.4505C91.8124 26.2111 89.0459 27.9731 85.5248 27.9731C79.8647 27.9724 75.8403 23.9479 75.8403 18.1622ZM81.6253 15.7726L87.5366 15.6463C87.5366 13.1311 87.159 9.35793 85.0214 9.35793C82.8839 9.35793 81.7502 12.8791 81.6253 15.7726ZM108.291 9.10663C106.782 8.47693 104.77 8.09998 102.506 8.09998C97.8538 8.09998 94.9594 10.8665 94.9594 14.137C94.9594 17.4075 97.0955 18.7904 100.118 19.7971C103.261 20.9279 104.142 21.8089 104.142 23.3182C104.142 24.8275 103.01 26.2103 100.997 26.2103C98.6084 26.2103 96.8464 24.8275 95.4635 21.0536L94.5825 21.3063L94.7089 26.84C96.2181 27.4683 98.9846 27.9724 101.375 27.9724C106.28 27.9724 109.425 25.4557 109.425 21.5576C109.425 18.9161 108.041 17.4075 104.771 16.1489C101.249 14.766 99.992 13.8857 99.992 12.2501C99.992 10.6152 101.126 9.48286 102.635 9.48286C104.897 9.48286 106.407 10.8665 107.54 14.2627L108.42 14.0114L108.291 9.10663ZM55.0883 8.6033C52.9508 7.3468 49.1769 7.97433 47.1651 12.5028L47.29 8.1007L38.8642 9.73561V10.4902L39.7444 10.6159C40.8775 10.7423 41.3794 11.3705 41.5057 13.0062C41.757 16.0247 41.6314 21.3078 41.5057 23.9486C41.3794 25.4564 40.8775 26.2111 39.7444 26.3374L38.8642 26.4638V27.4697H50.5606V26.4638L49.0513 26.3374C47.7941 26.2111 47.4164 25.4564 47.29 23.9486C47.0387 21.5584 47.0387 16.7793 47.1651 13.7608C47.7933 12.8798 50.5606 12.1259 53.0757 13.7608L55.0883 8.6033Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
{/* <!-- End Star --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Review --> */}
|
||||
</div>
|
||||
{/* <!-- End Review --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="relative ms-4">
|
||||
<img
|
||||
className="w-full rounded-md"
|
||||
src="https://images.unsplash.com/photo-1665686377065-08ba896d16fd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=700&h=800&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="absolute inset-0 -z-[1] bg-gradient-to-tr from-gray-200 via-white/0 to-white/0 size-full rounded-md mt-4 -mb-4 me-4 -ms-4 lg:mt-6 lg:-mb-6 lg:me-6 lg:-ms-6 dark:from-slate-800 dark:via-slate-900/0 dark:to-slate-900/0"></div>
|
||||
|
||||
{/* <!-- SVG--> */}
|
||||
<div className="absolute bottom-0 start-0">
|
||||
<svg
|
||||
className="w-2/3 ms-auto h-auto text-white dark:text-slate-900"
|
||||
width="630"
|
||||
height="451"
|
||||
viewBox="0 0 630 451"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect x="531" y="352" width="99" height="99" fill="currentColor" />
|
||||
<rect x="140" y="352" width="106" height="99" fill="currentColor" />
|
||||
<rect x="482" y="402" width="64" height="49" fill="currentColor" />
|
||||
<rect x="433" y="402" width="63" height="49" fill="currentColor" />
|
||||
<rect x="384" y="352" width="49" height="50" fill="currentColor" />
|
||||
<rect x="531" y="328" width="50" height="50" fill="currentColor" />
|
||||
<rect x="99" y="303" width="49" height="58" fill="currentColor" />
|
||||
<rect x="99" y="352" width="49" height="50" fill="currentColor" />
|
||||
<rect x="99" y="392" width="49" height="59" fill="currentColor" />
|
||||
<rect x="44" y="402" width="66" height="49" fill="currentColor" />
|
||||
<rect x="234" y="402" width="62" height="49" fill="currentColor" />
|
||||
<rect x="334" y="303" width="50" height="49" fill="currentColor" />
|
||||
<rect x="581" width="49" height="49" fill="currentColor" />
|
||||
<rect x="581" width="49" height="64" fill="currentColor" />
|
||||
<rect x="482" y="123" width="49" height="49" fill="currentColor" />
|
||||
<rect x="507" y="124" width="49" height="24" fill="currentColor" />
|
||||
<rect x="531" y="49" width="99" height="99" fill="currentColor" />
|
||||
</svg>
|
||||
</div>
|
||||
{/* <!-- End SVG--> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Hero --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"label": "Hero Sections",
|
||||
"position": 4,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Border Gradient
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/IconSections/BorderGradient.tsx"
|
||||
<>
|
||||
{/* <!-- Icon Blocks --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 items-center gap-12">
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div>
|
||||
<div className="relative flex justify-center items-center size-12 rounded-xl bg-gradient-to-br from-primary via-transparent to-accent">
|
||||
<div className="absolute flex justify-center items-center w-[90%] h-[90%] bg-base-100 rounded-xl">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect width="10" height="14" x="3" y="8" rx="2" />
|
||||
<path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4" />
|
||||
<path d="M8 18h.01" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
Responsive
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Responsive, and mobile-first project on the web
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div>
|
||||
<div className="relative flex justify-center items-center size-12 rounded-xl bg-gradient-to-br from-primary via-transparent to-accent">
|
||||
<div className="absolute flex justify-center items-center w-[90%] h-[90%] bg-base-100 rounded-xl">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M20 7h-9" />
|
||||
<path d="M14 17H5" />
|
||||
<circle cx="17" cy="17" r="3" />
|
||||
<circle cx="7" cy="7" r="3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
Customizable
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Components are easily customized and extendable
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div>
|
||||
<div className="relative flex justify-center items-center size-12 rounded-xl bg-gradient-to-br from-primary via-transparent to-accent">
|
||||
<div className="absolute flex justify-center items-center w-[90%] h-[90%] bg-base-100 rounded-xl">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
Documentation
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Every component and plugin is well documented
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div>
|
||||
<div className="relative flex justify-center items-center size-12 rounded-xl bg-gradient-to-br from-primary via-transparent to-accent">
|
||||
<div className="absolute flex justify-center items-center w-[90%] h-[90%] bg-base-100 rounded-xl">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z" />
|
||||
<path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
24/7 Support
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Contact us 24 hours a day, 7 days a week
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Blocks --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Center Aligned
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/IconSections/CenterAligned.tsx"
|
||||
<>
|
||||
{/* <!-- Icon Blocks --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 items-center gap-12">
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="text-center">
|
||||
<div className="flex justify-center items-center w-12 bg-base-100 border border-base-200 rounded-full mx-auto">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5 text-secondary-content"
|
||||
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"
|
||||
>
|
||||
<rect width="10" height="14" x="3" y="8" rx="2" />
|
||||
<path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4" />
|
||||
<path d="M8 18h.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
Responsive
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Responsive, and mobile-first project on the web
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="text-center">
|
||||
<div className="flex justify-center items-center w-12 bg-base-100 border border-base-200 rounded-full mx-auto">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5 text-secondary-content"
|
||||
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="M20 7h-9" />
|
||||
<path d="M14 17H5" />
|
||||
<circle cx="17" cy="17" r="3" />
|
||||
<circle cx="7" cy="7" r="3" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
Customizable
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Components are easily customized and extendable
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="text-center">
|
||||
<div className="flex justify-center items-center w-12 bg-base-100 border border-base-200 rounded-full mx-auto">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5 text-secondary-content"
|
||||
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="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
Documentation
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Every component and plugin is well documented
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="text-center">
|
||||
<div className="flex justify-center items-center w-12 bg-base-100 border border-base-200 rounded-full mx-auto">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5 text-secondary-content"
|
||||
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="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z" />
|
||||
<path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
24/7 Support
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Contact us 24 hours a day, 7 days a week
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Blocks --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Description On Left Icon Blocks On Right
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/IconSections/DescriptionOnLeftIconBlocksOnRight.tsx"
|
||||
<>
|
||||
{/* <!-- Icon Blocks --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid md:grid-cols-2 gap-12">
|
||||
<div className="lg:w-3/4">
|
||||
<h2 className="text-3xl text-secondary-content font-bold lg:text-4xl">
|
||||
Collaborative tools to design better user experience
|
||||
</h2>
|
||||
<p className="mt-3 text-secondary-content">
|
||||
We help businesses bring ideas to life in the digital world, by
|
||||
designing and implementing the technology tools that they need to
|
||||
win.
|
||||
</p>
|
||||
<p className="mt-5">
|
||||
<a
|
||||
className="inline-flex items-center gap-x-1 font-medium text-primary"
|
||||
href="#"
|
||||
>
|
||||
Contact sales to learn more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4 transition ease-in-out group-hover:translate-x-1"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="space-y-6 lg:space-y-10">
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="flex">
|
||||
{/* <!-- Icon --> */}
|
||||
<span className="flex-shrink-0 inline-flex justify-center items-center w-[46px] rounded-full border border-base-200 bg-base-100 text-secondary-content shadow-sm mx-auto">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
|
||||
</svg>
|
||||
</span>
|
||||
<div className="ms-5 sm:ms-8">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-secondary-content">
|
||||
Industry-leading documentation
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Our documentation and extensive Client libraries contain
|
||||
everything a business needs to build a custom integration in a
|
||||
fraction of the time.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="flex">
|
||||
{/* <!-- Icon --> */}
|
||||
<span className="flex-shrink-0 inline-flex justify-center items-center w-[46px] rounded-full border border-base-200 bg-base-100 text-secondary-content shadow-sm mx-auto">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z" />
|
||||
<path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
|
||||
</svg>
|
||||
</span>
|
||||
<div className="ms-5 sm:ms-8">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-secondary-content">
|
||||
Developer community support
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
We actively contribute to open-source projects—giving back to
|
||||
the community through development, patches, and sponsorships.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="flex">
|
||||
{/* <!-- Icon --> */}
|
||||
<span className="flex-shrink-0 inline-flex justify-center items-center w-[46px] rounded-full border border-base-200 bg-base-100 text-secondary-content shadow-sm mx-auto">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5"
|
||||
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="M7 10v12" />
|
||||
<path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<div className="ms-5 sm:ms-8">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-secondary-content">
|
||||
Simple and affordable
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
From boarding passes to movie tickets, there's pretty much
|
||||
nothing you can't store with FastPocket.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Icon Blocks --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Icon Gray Background On Hover
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/IconSections/IconGrayBackgroundOnHover.tsx"
|
||||
<>
|
||||
{/* <!-- Icon Blocks --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 items-center gap-6">
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex gap-y-6 w-full hover:bg-base-300 rounded-lg p-5 transition-all dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-8 text-secondary-content mt-0.5 me-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"
|
||||
>
|
||||
<circle cx="13.5" cy="6.5" r=".5" />
|
||||
<circle cx="17.5" cy="10.5" r=".5" />
|
||||
<circle cx="8.5" cy="7.5" r=".5" />
|
||||
<circle cx="6.5" cy="12.5" r=".5" />
|
||||
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<h3 className="block font-bold text-secondary-content">
|
||||
Build your portfolio
|
||||
</h3>
|
||||
<p className="text-secondary-content">
|
||||
The simplest way to keep your portfolio always up-to-date.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold text-secondary-content">
|
||||
Learn more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4 transition ease-in-out group-hover:translate-x-1"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex gap-y-6 w-full hover:bg-base-300 rounded-lg p-5 transition-all dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-8 text-secondary-content mt-0.5 me-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="M2 3h20" />
|
||||
<path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" />
|
||||
<path d="m7 21 5-5 5 5" />
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<h3 className="block font-bold text-secondary-content">
|
||||
Get freelance work
|
||||
</h3>
|
||||
<p className="text-secondary-content">
|
||||
New design projects delivered to your inbox each morning.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold text-secondary-content">
|
||||
Learn more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4 transition ease-in-out group-hover:translate-x-1"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group flex gap-y-6 w-full hover:bg-base-300 rounded-lg p-5 transition-all dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-8 text-secondary-content mt-0.5 me-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="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7" />
|
||||
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
|
||||
<path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4" />
|
||||
<path d="M2 7h20" />
|
||||
<path d="M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7" />
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<h3 className="block font-bold text-secondary-content">
|
||||
Sell your goods
|
||||
</h3>
|
||||
<p className="text-secondary-content">
|
||||
Get your goods in front of millions of potential customers
|
||||
with ease.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold text-secondary-content">
|
||||
Learn more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4 transition ease-in-out group-hover:translate-x-1"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Blocks --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Medium Size Description With Icon Blocks
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/IconSections/MediumSizeDescriptionWithIconBlocks.tsx"
|
||||
<>
|
||||
{/* <!-- Icon Blocks --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid gap-12">
|
||||
<div>
|
||||
<h2 className="text-3xl text-secondary-content font-bold lg:text-4xl">
|
||||
Our vision
|
||||
</h2>
|
||||
<p className="mt-3 text-secondary-content">
|
||||
For as long as there have been cities, the public square has
|
||||
been a fundamental part of the urban landscape - an open,
|
||||
approachable space to meet and engage with friends and
|
||||
neighbours. Space aims to capture this spirit of bringing people
|
||||
together in an exciting, welcoming environment.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 lg:space-y-10">
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 w-6 text-secondary-content"
|
||||
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="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" />
|
||||
<path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" />
|
||||
<path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" />
|
||||
<path d="M10 6h4" />
|
||||
<path d="M10 10h4" />
|
||||
<path d="M10 14h4" />
|
||||
<path d="M10 18h4" />
|
||||
</svg>
|
||||
<div className="ms-5 sm:ms-8">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-secondary-content">
|
||||
High quality Co-Living spaces
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Our fully furnished spaces are designed and purpose-built
|
||||
with Co-Living in mind, featuring high-end finishes and
|
||||
amenities that go far beyond traditional apartment
|
||||
buildings.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 w-6 text-secondary-content"
|
||||
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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
<div className="ms-5 sm:ms-8">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-secondary-content">
|
||||
Fostering vibrant communities
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Our passion is bringing people together. Beyond creating
|
||||
beautiful spaces, we provide shared experiences.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 w-6 text-secondary-content"
|
||||
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="M7 10v12" />
|
||||
<path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" />
|
||||
</svg>
|
||||
<div className="ms-5 sm:ms-8">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-secondary-content">
|
||||
Simple and all-inclusive
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
We worry about the details so that our residents don't have
|
||||
to. From our online application process to simple,
|
||||
all-inclusive billing we aim to make the living experience
|
||||
as effortless as possible.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Blocks --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Simple Left Aligned
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/IconSections/SimpleLeftAligned.tsx"
|
||||
<>
|
||||
{/* <!-- Icon Blocks --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 items-center gap-12">
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div>
|
||||
<svg
|
||||
className="flex-shrink-0 w-9 text-secondary-content"
|
||||
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"
|
||||
>
|
||||
<rect width="10" height="14" x="3" y="8" rx="2" />
|
||||
<path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4" />
|
||||
<path d="M8 18h.01" />
|
||||
</svg>
|
||||
<div className="bg-gradient-to-r from-base-300 via-base-100 to-white/0 h-0.5 mt-6">
|
||||
<div className="bg-base-300 w-9 h-0.5"></div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
Responsive
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Responsive, and mobile-first project on the web
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div>
|
||||
<svg
|
||||
className="flex-shrink-0 w-9 text-secondary-content"
|
||||
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="M20 7h-9" />
|
||||
<path d="M14 17H5" />
|
||||
<circle cx="17" cy="17" r="3" />
|
||||
<circle cx="7" cy="7" r="3" />
|
||||
</svg>
|
||||
<div className="bg-gradient-to-r from-base-300 via-base-100 to-white/0 h-0.5 mt-6">
|
||||
<div className="bg-base-300 w-9 h-0.5"></div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
Customizable
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Components are easily customized and extendable
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div>
|
||||
<svg
|
||||
className="flex-shrink-0 w-9 text-secondary-content"
|
||||
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="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
|
||||
</svg>
|
||||
<div className="bg-gradient-to-r from-base-300 via-base-100 to-white/0 h-0.5 mt-6">
|
||||
<div className="bg-base-300 w-9 h-0.5"></div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
Documentation
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Every component and plugin is well documented
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div>
|
||||
<svg
|
||||
className="flex-shrink-0 w-9 text-secondary-content"
|
||||
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="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z" />
|
||||
<path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
|
||||
</svg>
|
||||
<div className="bg-gradient-to-r from-base-300 via-base-100 to-white/0 h-0.5 mt-6">
|
||||
<div className="bg-base-300 w-9 h-0.5"></div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="text-lg font-semibold text-secondary-content">
|
||||
24/7 Support
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Contact us 24 hours a day, 7 days a week
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Blocks --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Solid Blue Background Icon With Gray Background On Hover
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/IconSections/SolidBlueBackgroundIconWithGrayBackgroundOnHover.tsx"
|
||||
<>
|
||||
{/* <!-- Icon Blocks --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 items-center gap-2">
|
||||
{/* <!-- Icon Block --> */}
|
||||
<a
|
||||
className="group flex flex-col justify-center hover:bg-base-300 rounded-xl p-4 md:p-7"
|
||||
href="#"
|
||||
>
|
||||
<div className="flex justify-center items-center w-12 bg-primary rounded-xl">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary-content"
|
||||
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"
|
||||
>
|
||||
<rect width="10" height="14" x="3" y="8" rx="2" />
|
||||
<path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4" />
|
||||
<path d="M8 18h.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="group-hover:text-secondary-content text-lg font-semibold text-secondary-content">
|
||||
Responsive
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Responsive, and mobile-first project on the web
|
||||
</p>
|
||||
<span className="mt-2 inline-flex items-center gap-x-1.5 text-sm text-primary decoration-2 group-hover:underline font-medium">
|
||||
Learn more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<a
|
||||
className="group flex flex-col justify-center hover:bg-base-300 rounded-xl p-4 md:p-7"
|
||||
href="#"
|
||||
>
|
||||
<div className="flex justify-center items-center w-12 bg-primary rounded-xl">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary-content"
|
||||
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="M20 7h-9" />
|
||||
<path d="M14 17H5" />
|
||||
<circle cx="17" cy="17" r="3" />
|
||||
<circle cx="7" cy="7" r="3" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="group-hover:text-secondary-content text-lg font-semibold text-secondary-content">
|
||||
Customizable
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Components are easily customized and extendable
|
||||
</p>
|
||||
<span className="mt-2 inline-flex items-center gap-x-1.5 text-sm text-primary decoration-2 group-hover:underline font-medium">
|
||||
Learn more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<a
|
||||
className="group flex flex-col justify-center hover:bg-base-300 rounded-xl p-4 md:p-7"
|
||||
href="#"
|
||||
>
|
||||
<div className="flex justify-center items-center w-12 bg-primary rounded-xl">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary-content"
|
||||
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="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="group-hover:text-secondary-content text-lg font-semibold text-secondary-content">
|
||||
Documentation
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Every component and plugin is well documented
|
||||
</p>
|
||||
<span className="mt-2 inline-flex items-center gap-x-1.5 text-sm text-primary decoration-2 group-hover:underline font-medium">
|
||||
Learn more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<a
|
||||
className="group flex flex-col justify-center hover:bg-base-300 rounded-xl p-4 md:p-7"
|
||||
href="#"
|
||||
>
|
||||
<div className="flex justify-center items-center w-12 bg-primary rounded-xl">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary-content"
|
||||
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="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z" />
|
||||
<path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="group-hover:text-secondary-content text-lg font-semibold text-secondary-content">
|
||||
24/7 Support
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Contact us 24 hours a day, 7 days a week
|
||||
</p>
|
||||
<span className="mt-2 inline-flex items-center gap-x-1.5 text-sm text-primary decoration-2 group-hover:underline font-medium">
|
||||
Learn more
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Blocks --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Square Shape Bordered
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/IconSections/SquareShapeBordered.tsx"
|
||||
<>
|
||||
{/* <!-- Icon Blocks --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 items-center gap-6 md:gap-10">
|
||||
{/* <!-- Card --> */}
|
||||
<div className="w-full bg-base-100 shadow-lg rounded-lg p-5">
|
||||
<div className="flex items-center gap-x-4 mb-3">
|
||||
<div className="inline-flex justify-center items-center w-[62px] rounded-full border-4 border-base-100 bg-base-300">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary"
|
||||
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"
|
||||
>
|
||||
<circle cx="13.5" cy="6.5" r=".5" />
|
||||
<circle cx="17.5" cy="10.5" r=".5" />
|
||||
<circle cx="8.5" cy="7.5" r=".5" />
|
||||
<circle cx="6.5" cy="12.5" r=".5" />
|
||||
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<h3 className="block text-lg font-semibold text-secondary-content">
|
||||
Build your portfolio
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-secondary-content">
|
||||
The simplest way to keep your portfolio always up-to-date.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="w-full bg-base-100 shadow-lg rounded-lg p-5">
|
||||
<div className="flex items-center gap-x-4 mb-3">
|
||||
<div className="inline-flex justify-center items-center w-[62px] rounded-full border-4 border-base-100 bg-base-300">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary"
|
||||
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="M2 3h20" />
|
||||
<path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" />
|
||||
<path d="m7 21 5-5 5 5" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<h3 className="block text-lg font-semibold text-secondary-content">
|
||||
Get freelance work
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-secondary-content">
|
||||
New design projects delivered to your inbox each morning.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="w-full bg-base-100 shadow-lg rounded-lg p-5">
|
||||
<div className="flex items-center gap-x-4 mb-3">
|
||||
<div className="inline-flex justify-center items-center w-[62px] rounded-full border-4 border-base-100 bg-base-300">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary"
|
||||
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="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7" />
|
||||
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
|
||||
<path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4" />
|
||||
<path d="M2 7h20" />
|
||||
<path d="M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<h3 className="block text-lg font-semibold text-secondary-content">
|
||||
Sell your goods
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-secondary-content">
|
||||
Get your goods in front of millions of potential customers with
|
||||
ease.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="w-full bg-base-100 shadow-lg rounded-lg p-5">
|
||||
<div className="flex items-center gap-x-4 mb-3">
|
||||
<div className="inline-flex justify-center items-center w-[62px] rounded-full border-4 border-base-100 bg-base-300">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary"
|
||||
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="M5.5 8.5 9 12l-3.5 3.5L2 12l3.5-3.5Z" />
|
||||
<path d="m12 2 3.5 3.5L12 9 8.5 5.5 12 2Z" />
|
||||
<path d="M18.5 8.5 22 12l-3.5 3.5L15 12l3.5-3.5Z" />
|
||||
<path d="m12 15 3.5 3.5L12 22l-3.5-3.5L12 15Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<h3 className="block text-lg font-semibold text-secondary-content">
|
||||
Get freelance work
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-secondary-content">
|
||||
New design projects delivered to your inbox each morning.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="w-full bg-base-100 shadow-lg rounded-lg p-5">
|
||||
<div className="flex items-center gap-x-4 mb-3">
|
||||
<div className="inline-flex justify-center items-center w-[62px] rounded-full border-4 border-base-100 bg-base-300">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary"
|
||||
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="M16.466 7.5C15.643 4.237 13.952 2 12 2 9.239 2 7 6.477 7 12s2.239 10 5 10c.342 0 .677-.069 1-.2" />
|
||||
<path d="m15.194 13.707 3.814 1.86-1.86 3.814" />
|
||||
<path d="M19 15.57c-1.804.885-4.274 1.43-7 1.43-5.523 0-10-2.239-10-5s4.477-5 10-5c4.838 0 8.873 1.718 9.8 4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<h3 className="block text-lg font-semibold text-secondary-content">
|
||||
Sell your goods
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-secondary-content">
|
||||
Get your goods in front of millions of potential customers with
|
||||
ease.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="w-full bg-base-100 shadow-lg rounded-lg p-5">
|
||||
<div className="flex items-center gap-x-4 mb-3">
|
||||
<div className="inline-flex justify-center items-center w-[62px] rounded-full border-4 border-base-100 bg-base-300">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary"
|
||||
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="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z" />
|
||||
<rect x="3" y="14" width="7" height="7" rx="1" />
|
||||
<circle cx="17.5" cy="17.5" r="3.5" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<h3 className="block text-lg font-semibold text-secondary-content">
|
||||
Build your portfolio
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-secondary-content">
|
||||
The simplest way to keep your portfolio always up-to-date.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Blocks --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Stacked Cards
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/IconSections/StackedCards.tsx"
|
||||
<>
|
||||
{/* <!-- Icon Blocks --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 items-center gap-6 md:gap-10">
|
||||
{/* <!-- Card --> */}
|
||||
<div className="w-full bg-base-100 shadow-lg rounded-lg p-5">
|
||||
<div className="flex items-center gap-x-4 mb-3">
|
||||
<div className="inline-flex justify-center items-center w-[62px] rounded-full border-4 border-base-100 bg-base-300">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary"
|
||||
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"
|
||||
>
|
||||
<circle cx="13.5" cy="6.5" r=".5" />
|
||||
<circle cx="17.5" cy="10.5" r=".5" />
|
||||
<circle cx="8.5" cy="7.5" r=".5" />
|
||||
<circle cx="6.5" cy="12.5" r=".5" />
|
||||
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<h3 className="block text-lg font-semibold text-secondary-content">
|
||||
Build your portfolio
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-secondary-content">
|
||||
The simplest way to keep your portfolio always up-to-date.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="w-full bg-base-100 shadow-lg rounded-lg p-5">
|
||||
<div className="flex items-center gap-x-4 mb-3">
|
||||
<div className="inline-flex justify-center items-center w-[62px] rounded-full border-4 border-base-100 bg-base-300">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary"
|
||||
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="M2 3h20" />
|
||||
<path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3" />
|
||||
<path d="m7 21 5-5 5 5" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<h3 className="block text-lg font-semibold text-secondary-content">
|
||||
Get freelance work
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-secondary-content">
|
||||
New design projects delivered to your inbox each morning.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="w-full bg-base-100 shadow-lg rounded-lg p-5">
|
||||
<div className="flex items-center gap-x-4 mb-3">
|
||||
<div className="inline-flex justify-center items-center w-[62px] rounded-full border-4 border-base-100 bg-base-300">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary"
|
||||
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="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7" />
|
||||
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
|
||||
<path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4" />
|
||||
<path d="M2 7h20" />
|
||||
<path d="M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<h3 className="block text-lg font-semibold text-secondary-content">
|
||||
Sell your goods
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-secondary-content">
|
||||
Get your goods in front of millions of potential customers with
|
||||
ease.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="w-full bg-base-100 shadow-lg rounded-lg p-5">
|
||||
<div className="flex items-center gap-x-4 mb-3">
|
||||
<div className="inline-flex justify-center items-center w-[62px] rounded-full border-4 border-base-100 bg-base-300">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary"
|
||||
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="M5.5 8.5 9 12l-3.5 3.5L2 12l3.5-3.5Z" />
|
||||
<path d="m12 2 3.5 3.5L12 9 8.5 5.5 12 2Z" />
|
||||
<path d="M18.5 8.5 22 12l-3.5 3.5L15 12l3.5-3.5Z" />
|
||||
<path d="m12 15 3.5 3.5L12 22l-3.5-3.5L12 15Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<h3 className="block text-lg font-semibold text-secondary-content">
|
||||
Get freelance work
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-secondary-content">
|
||||
New design projects delivered to your inbox each morning.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="w-full bg-base-100 shadow-lg rounded-lg p-5">
|
||||
<div className="flex items-center gap-x-4 mb-3">
|
||||
<div className="inline-flex justify-center items-center w-[62px] rounded-full border-4 border-base-100 bg-base-300">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary"
|
||||
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="M16.466 7.5C15.643 4.237 13.952 2 12 2 9.239 2 7 6.477 7 12s2.239 10 5 10c.342 0 .677-.069 1-.2" />
|
||||
<path d="m15.194 13.707 3.814 1.86-1.86 3.814" />
|
||||
<path d="M19 15.57c-1.804.885-4.274 1.43-7 1.43-5.523 0-10-2.239-10-5s4.477-5 10-5c4.838 0 8.873 1.718 9.8 4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<h3 className="block text-lg font-semibold text-secondary-content">
|
||||
Sell your goods
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-secondary-content">
|
||||
Get your goods in front of millions of potential customers with
|
||||
ease.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="w-full bg-base-100 shadow-lg rounded-lg p-5">
|
||||
<div className="flex items-center gap-x-4 mb-3">
|
||||
<div className="inline-flex justify-center items-center w-[62px] rounded-full border-4 border-base-100 bg-base-300">
|
||||
<svg
|
||||
className="flex-shrink-0 w-6 text-primary"
|
||||
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="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z" />
|
||||
<rect x="3" y="14" width="7" height="7" rx="1" />
|
||||
<circle cx="17.5" cy="17.5" r="3.5" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<h3 className="block text-lg font-semibold text-secondary-content">
|
||||
Build your portfolio
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-secondary-content">
|
||||
The simplest way to keep your portfolio always up-to-date.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Blocks --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,210 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Two Cols Grid
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/IconSections/TwoColsGrid.tsx"
|
||||
<>
|
||||
{/* <!-- Icon Blocks --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid md:grid-cols-2 gap-6 lg:gap-12">
|
||||
<div className="space-y-6 lg:space-y-10">
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 w-8 text-secondary-content"
|
||||
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"
|
||||
>
|
||||
<rect width="18" height="10" x="3" y="11" rx="2" />
|
||||
<circle cx="12" cy="5" r="2" />
|
||||
<path d="M12 7v4" />
|
||||
<line x1="8" x2="8" y1="16" y2="16" />
|
||||
<line x1="16" x2="16" y1="16" y2="16" />
|
||||
</svg>
|
||||
<div className="ms-5 sm:ms-8">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-secondary-content">
|
||||
Creative minds
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
We choose our teams carefully. Our people are the secret to
|
||||
great work.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 w-8 text-secondary-content"
|
||||
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="m7.5 4.27 9 5.15" />
|
||||
<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
|
||||
<path d="m3.3 7 8.7 5 8.7-5" />
|
||||
<path d="M12 22V12" />
|
||||
</svg>
|
||||
<div className="ms-5 sm:ms-8">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-secondary-content">
|
||||
Effortless updates
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Benefit from automatic updates to all boards any time you
|
||||
need to make a change to your website.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 w-8 text-secondary-content"
|
||||
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"
|
||||
>
|
||||
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
|
||||
</svg>
|
||||
<div className="ms-5 sm:ms-8">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-secondary-content">
|
||||
Strong empathy
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
We've user tested our own process by shipping over 1k
|
||||
products for clients.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="space-y-6 lg:space-y-10">
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 w-8 text-secondary-content"
|
||||
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="M6 9H4.5a2.5 2.5 0 0 1 0-5H6" />
|
||||
<path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18" />
|
||||
<path d="M4 22h16" />
|
||||
<path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" />
|
||||
<path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" />
|
||||
<path d="M18 2H6v7a6 6 0 0 0 12 0V2Z" />
|
||||
</svg>
|
||||
<div className="ms-5 sm:ms-8">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-secondary-content">
|
||||
Conquer the best
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
We stay lean and help your product do one thing well.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 w-8 text-secondary-content"
|
||||
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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
<div className="ms-5 sm:ms-8">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-secondary-content">
|
||||
Designing for people
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
We actively pursue the right balance between functionality
|
||||
and aesthetics, creating delightful experiences.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
|
||||
{/* <!-- Icon Block --> */}
|
||||
<div className="flex">
|
||||
<svg
|
||||
className="flex-shrink-0 mt-2 w-8 text-secondary-content"
|
||||
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="M7 10v12" />
|
||||
<path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" />
|
||||
</svg>
|
||||
<div className="ms-5 sm:ms-8">
|
||||
<h3 className="text-base sm:text-lg font-semibold text-secondary-content">
|
||||
Simple and affordable
|
||||
</h3>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
From boarding passes to movie tickets, there's pretty much
|
||||
nothing you can't store with FastPocket.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Block --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Icon Blocks --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"label": "Icon Sections",
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Cards On Images
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/MansurySections/CardsOnImages.tsx"
|
||||
<>
|
||||
{/* <!-- Masonry Cards --> */}
|
||||
<div className="max-w-6xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid sm:grid-cols-12 gap-6">
|
||||
<div className="sm:self-end col-span-12 sm:col-span-7 md:col-span-8 lg:col-span-5 lg:col-start-3">
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group relative block rounded-xl overflow-hidden dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
|
||||
<img
|
||||
className="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover"
|
||||
src="https://images.unsplash.com/photo-1606868306217-dbf5046868d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3481&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute bottom-0 start-0 end-0 p-2 sm:p-4">
|
||||
<div className="text-sm font-bold text-secondary-content rounded-lg bg-base-100 p-4 md:text-xl">
|
||||
Workplace personalities
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="sm:self-end col-span-12 sm:col-span-5 md:col-span-4 lg:col-span-3">
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group relative block rounded-xl overflow-hidden dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
|
||||
<img
|
||||
className="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover"
|
||||
src="https://images.unsplash.com/photo-1605629921711-2f6b00c6bbf4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute bottom-0 start-0 end-0 p-2 sm:p-4">
|
||||
<div className="text-sm font-bold text-secondary-content rounded-lg bg-base-100 p-4 md:text-xl">
|
||||
Women in engineering
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="col-span-12 md:col-span-4">
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group relative block rounded-xl overflow-hidden dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
|
||||
<img
|
||||
className="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover"
|
||||
src="https://images.unsplash.com/photo-1606836576983-8b458e75221d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute bottom-0 start-0 end-0 p-2 sm:p-4">
|
||||
<div className="text-sm font-bold text-secondary-content rounded-lg bg-base-100 p-4 md:text-xl">
|
||||
Pride 2021
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="col-span-12 sm:col-span-6 md:col-span-4">
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group relative block rounded-xl overflow-hidden dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
|
||||
<img
|
||||
className="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover"
|
||||
src="https://images.unsplash.com/photo-1598929438701-ef29ab0bb61a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute bottom-0 start-0 end-0 p-2 sm:p-4">
|
||||
<div className="text-sm font-bold text-secondary-content rounded-lg bg-base-100 p-4 md:text-xl">
|
||||
Data at Preline
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="col-span-12 sm:col-span-6 md:col-span-4">
|
||||
{/* <!-- Card --> */}
|
||||
<a
|
||||
className="group relative block rounded-xl overflow-hidden dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<div className="aspect-w-12 aspect-h-7 sm:aspect-none rounded-xl overflow-hidden">
|
||||
<img
|
||||
className="group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl w-full object-cover"
|
||||
src="https://images.unsplash.com/photo-1467043153537-a4fba2cd39ef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1019&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute bottom-0 start-0 end-0 p-2 sm:p-4">
|
||||
<div className="text-sm font-bold text-secondary-content rounded-lg bg-base-100 p-4 md:text-xl">
|
||||
Empowered management
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Masonry Cards --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"label": "Mansury Sections",
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"label": "Pricing Sections",
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,647 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Card Style With Description And Socials
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/TeamSections/CardStyleWithDescriptionAndSocials.tsx"
|
||||
<>
|
||||
{/* <!-- Team --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Title --> */}
|
||||
<div className="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
|
||||
<h2 className="text-2xl font-bold md:text-4xl md:leading-tight">
|
||||
Our leadership
|
||||
</h2>
|
||||
<p className="mt-1 text-secondary-content">Creative people</p>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="flex flex-col rounded-xl p-4 md:p-6 bg-base-100 border border-base-200">
|
||||
<div className="flex items-center gap-x-4">
|
||||
<img
|
||||
className="rounded-full w-20"
|
||||
src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="grow">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
David Forren
|
||||
</h3>
|
||||
<p className="text-xs uppercase text-secondary-content">
|
||||
Founder / CEO
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-secondary-content">
|
||||
I am an ambitious workaholic, but apart from that, pretty simple
|
||||
person.
|
||||
</p>
|
||||
|
||||
{/* <!-- Social Brands --> */}
|
||||
<div className="mt-3 space-x-1">
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Social Brands --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="flex flex-col rounded-xl p-4 md:p-6 bg-base-100 border border-base-200">
|
||||
<div className="flex items-center gap-x-4">
|
||||
<img
|
||||
className="rounded-full w-20"
|
||||
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="grow">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Amil Evara
|
||||
</h3>
|
||||
<p className="text-xs uppercase text-secondary-content">
|
||||
UI/UX Designer
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-secondary-content">
|
||||
I am an ambitious workaholic, but apart from that, pretty simple
|
||||
person.
|
||||
</p>
|
||||
|
||||
{/* <!-- Social Brands --> */}
|
||||
<div className="mt-3 space-x-1">
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Social Brands --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="flex flex-col rounded-xl p-4 md:p-6 bg-base-100 border border-base-200">
|
||||
<div className="flex items-center gap-x-4">
|
||||
<img
|
||||
className="rounded-full w-20"
|
||||
src="https://images.unsplash.com/photo-1548142813-c348350df52b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="grow">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Ebele Egbuna
|
||||
</h3>
|
||||
<p className="text-xs uppercase text-secondary-content">
|
||||
Support Consultant
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-secondary-content">
|
||||
I am an ambitious workaholic, but apart from that, pretty simple
|
||||
person.
|
||||
</p>
|
||||
|
||||
{/* <!-- Social Brands --> */}
|
||||
<div className="mt-3 space-x-1">
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Social Brands --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="flex flex-col rounded-xl p-4 md:p-6 bg-base-100 border border-base-200">
|
||||
<div className="flex items-center gap-x-4">
|
||||
<img
|
||||
className="rounded-full w-20"
|
||||
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="grow">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Maria Powers
|
||||
</h3>
|
||||
<p className="text-xs uppercase text-secondary-content">
|
||||
Director of sales
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-secondary-content">
|
||||
I am an ambitious workaholic, but apart from that, pretty simple
|
||||
person.
|
||||
</p>
|
||||
|
||||
{/* <!-- Social Brands --> */}
|
||||
<div className="mt-3 space-x-1">
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Social Brands --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="flex flex-col rounded-xl p-4 md:p-6 bg-base-100 border border-base-200">
|
||||
<div className="flex items-center gap-x-4">
|
||||
<img
|
||||
className="rounded-full w-20"
|
||||
src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="grow">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Delia Pawelke
|
||||
</h3>
|
||||
<p className="text-xs uppercase text-secondary-content">
|
||||
Front-end Developer
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-secondary-content">
|
||||
I am an ambitious workaholic, but apart from that, pretty simple
|
||||
person.
|
||||
</p>
|
||||
|
||||
{/* <!-- Social Brands --> */}
|
||||
<div className="mt-3 space-x-1">
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Social Brands --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="flex flex-col rounded-xl p-4 md:p-6 bg-base-100 border border-base-200">
|
||||
<div className="flex items-center gap-x-4">
|
||||
<img
|
||||
className="rounded-full w-20"
|
||||
src="https://images.unsplash.com/photo-1624224971170-2f84fed5eb5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="grow">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Tom Lowry
|
||||
</h3>
|
||||
<p className="text-xs uppercase text-secondary-content">
|
||||
UI/UX Designer
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-secondary-content">
|
||||
I am an ambitious workaholic, but apart from that, pretty simple
|
||||
person.
|
||||
</p>
|
||||
|
||||
{/* <!-- Social Brands --> */}
|
||||
<div className="mt-3 space-x-1">
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Social Brands --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="flex flex-col rounded-xl p-4 md:p-6 bg-base-100 border border-base-200">
|
||||
<div className="flex items-center gap-x-4">
|
||||
<img
|
||||
className="rounded-full w-20"
|
||||
src="https://images.unsplash.com/photo-1579017331263-ef82f0bbc748?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="grow">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Louise Donadieu
|
||||
</h3>
|
||||
<p className="text-xs uppercase text-secondary-content">
|
||||
Support Consultant
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-secondary-content">
|
||||
I am an ambitious workaholic, but apart from that, pretty simple
|
||||
person.
|
||||
</p>
|
||||
|
||||
{/* <!-- Social Brands --> */}
|
||||
<div className="mt-3 space-x-1">
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Social Brands --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="flex flex-col rounded-xl p-4 md:p-6 bg-base-100 border border-base-200">
|
||||
<div className="flex items-center gap-x-4">
|
||||
<img
|
||||
className="rounded-full w-20"
|
||||
src="https://images.unsplash.com/photo-1514222709107-a180c68d72b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="grow">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Jeff Fisher
|
||||
</h3>
|
||||
<p className="text-xs uppercase text-secondary-content">
|
||||
Project Manager
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-secondary-content">
|
||||
I am an ambitious workaholic, but apart from that, pretty simple
|
||||
person.
|
||||
</p>
|
||||
|
||||
{/* <!-- Social Brands --> */}
|
||||
<div className="mt-3 space-x-1">
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center w-8 text-sm font-semibold rounded-lg border border-base-200 text-secondary-content hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Social Brands --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<a
|
||||
className="col-span-full lg:col-span-1 group flex flex-col justify-center text-center rounded-xl p-4 md:p-6 border border-dashed border-base-200 hover:shadow-sm dark:border-gray-700"
|
||||
href="#"
|
||||
>
|
||||
<h3 className="text-lg text-secondary-content">We are hiring!</h3>
|
||||
<div>
|
||||
<span className="inline-flex items-center gap-x-2 text-primary group-hover:text-primary/50 dark:text-primary dark:group-hover:text-blue-400">
|
||||
See all opening positions
|
||||
<svg
|
||||
className="flex-shrink-0 w-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Team --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,611 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Inline Small Squared Image With Socials
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/TeamSections/InlineSmallSquaredImageWithSocials.tsx"
|
||||
<>
|
||||
{/* <!-- Team --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Title --> */}
|
||||
<div className="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
|
||||
<h2 className="text-2xl font-bold md:text-4xl md:leading-tight">
|
||||
Meet the crew
|
||||
</h2>
|
||||
<p className="mt-1 text-secondary-content">
|
||||
Creative people
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-3 gap-8 md:gap-12">
|
||||
<div className="grid sm:flex sm:items-center gap-y-3 gap-x-4">
|
||||
<img
|
||||
className="rounded-lg w-20"
|
||||
src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
|
||||
<div className="sm:flex sm:flex-col sm:h-full">
|
||||
<div>
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
David Forren
|
||||
</h3>
|
||||
<p className="mt-1 text-xs uppercase text-secondary-content">
|
||||
Founder / CEO
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* <!-- Social Brands --> */}
|
||||
<div className="mt-2 sm:mt-auto space-x-2.5">
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Social Brands --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="grid sm:flex sm:items-center gap-y-3 gap-x-4">
|
||||
<img
|
||||
className="rounded-lg w-20"
|
||||
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
|
||||
<div className="sm:flex sm:flex-col sm:h-full">
|
||||
<div>
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Amil Evara
|
||||
</h3>
|
||||
<p className="mt-1 text-xs uppercase text-secondary-content">
|
||||
UI/UX Designer
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* <!-- Social Brands --> */}
|
||||
<div className="mt-2 sm:mt-auto space-x-2.5">
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Social Brands --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="grid sm:flex sm:items-center gap-y-3 gap-x-4">
|
||||
<img
|
||||
className="rounded-lg w-20"
|
||||
src="https://images.unsplash.com/photo-1548142813-c348350df52b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
|
||||
<div className="sm:flex sm:flex-col sm:h-full">
|
||||
<div>
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Ebele Egbuna
|
||||
</h3>
|
||||
<p className="mt-1 text-xs uppercase text-secondary-content">
|
||||
Support Consultant
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* <!-- Social Brands --> */}
|
||||
<div className="mt-2 sm:mt-auto space-x-2.5">
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Social Brands --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="grid sm:flex sm:items-center gap-y-3 gap-x-4">
|
||||
<img
|
||||
className="rounded-lg w-20"
|
||||
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
|
||||
<div className="sm:flex sm:flex-col sm:h-full">
|
||||
<div>
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Maria Powers
|
||||
</h3>
|
||||
<p className="mt-1 text-xs uppercase text-secondary-content">
|
||||
Director of sales
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* <!-- Social Brands --> */}
|
||||
<div className="mt-2 sm:mt-auto space-x-2.5">
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Social Brands --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="grid sm:flex sm:items-center gap-y-3 gap-x-4">
|
||||
<img
|
||||
className="rounded-lg w-20"
|
||||
src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
|
||||
<div className="sm:flex sm:flex-col sm:h-full">
|
||||
<div>
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Delia Pawelke
|
||||
</h3>
|
||||
<p className="mt-1 text-xs uppercase text-secondary-content">
|
||||
Front-end Developer
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* <!-- Social Brands --> */}
|
||||
<div className="mt-2 sm:mt-auto space-x-2.5">
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Social Brands --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="grid sm:flex sm:items-center gap-y-3 gap-x-4">
|
||||
<img
|
||||
className="rounded-lg w-20"
|
||||
src="https://images.unsplash.com/photo-1624224971170-2f84fed5eb5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
|
||||
<div className="sm:flex sm:flex-col sm:h-full">
|
||||
<div>
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Tom Lowry
|
||||
</h3>
|
||||
<p className="mt-1 text-xs uppercase text-secondary-content">
|
||||
UI/UX Designer
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* <!-- Social Brands --> */}
|
||||
<div className="mt-2 sm:mt-auto space-x-2.5">
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Social Brands --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="grid sm:flex sm:items-center gap-y-3 gap-x-4">
|
||||
<img
|
||||
className="rounded-lg w-20"
|
||||
src="https://images.unsplash.com/photo-1579017331263-ef82f0bbc748?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
|
||||
<div className="sm:flex sm:flex-col sm:h-full">
|
||||
<div>
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Louise Donadieu
|
||||
</h3>
|
||||
<p className="mt-1 text-xs uppercase text-secondary-content">
|
||||
Support Consultant
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* <!-- Social Brands --> */}
|
||||
<div className="mt-2 sm:mt-auto space-x-2.5">
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Social Brands --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="grid sm:flex sm:items-center gap-y-3 gap-x-4">
|
||||
<img
|
||||
className="rounded-lg w-20"
|
||||
src="https://images.unsplash.com/photo-1514222709107-a180c68d72b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
|
||||
<div className="sm:flex sm:flex-col sm:h-full">
|
||||
<div>
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Jeff Fisher
|
||||
</h3>
|
||||
<p className="mt-1 text-xs uppercase text-secondary-content">
|
||||
Project Manager
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* <!-- Social Brands --> */}
|
||||
<div className="mt-2 sm:mt-auto space-x-2.5">
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
className="inline-flex justify-center items-center text-secondary-content rounded-full hover:text-secondary-content/50 dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- End Social Brands --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="grid sm:flex sm:items-center gap-y-3 gap-x-4">
|
||||
<img
|
||||
className="rounded-lg w-20"
|
||||
src="../assets/img/160x160/img1.jpg"
|
||||
alt="Image Description"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
We are hiring!
|
||||
</h3>
|
||||
<a
|
||||
className="text-sm text-primary decoration-2 hover:underline"
|
||||
href="#"
|
||||
>
|
||||
Check out / Careers
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Team --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,293 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Squared Medium Size Image
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/TeamSections/SmallCircledImageSize.tsx"
|
||||
<>
|
||||
{/* <!-- Team --> */}
|
||||
<div className="max-w-5xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Title --> */}
|
||||
<div className="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
|
||||
<h2 className="text-2xl font-bold md:text-4xl md:leading-tight">
|
||||
Our team
|
||||
</h2>
|
||||
<p className="mt-1 text-secondary-content">Creative people</p>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-8 md:gap-12">
|
||||
<div className="text-center">
|
||||
<img
|
||||
className="rounded-full size-24 mx-auto"
|
||||
src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="mt-2 sm:mt-4">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
David Forren
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content">Founder / CEO</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="text-center">
|
||||
<img
|
||||
className="rounded-full size-24 mx-auto"
|
||||
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="mt-2 sm:mt-4">
|
||||
<h3 className="font-medium text-secondary-content">Amil Evara</h3>
|
||||
<p className="text-sm text-secondary-content">UI/UX Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="text-center">
|
||||
<img
|
||||
className="rounded-full size-24 mx-auto"
|
||||
src="https://images.unsplash.com/photo-1548142813-c348350df52b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="mt-2 sm:mt-4">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Ebele Egbuna
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content">
|
||||
Support Consultant
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="text-center">
|
||||
<img
|
||||
className="rounded-full size-24 mx-auto"
|
||||
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="mt-2 sm:mt-4">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Maria Powers
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content">
|
||||
Director of sales
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="text-center">
|
||||
<img
|
||||
className="rounded-full size-24 mx-auto"
|
||||
src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="mt-2 sm:mt-4">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Delia Pawelke
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content">
|
||||
Front-end Developer
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="text-center">
|
||||
<img
|
||||
className="rounded-full size-24 mx-auto"
|
||||
src="https://images.unsplash.com/photo-1624224971170-2f84fed5eb5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="mt-2 sm:mt-4">
|
||||
<h3 className="font-medium text-secondary-content">Tom Lowry</h3>
|
||||
<p className="text-sm text-secondary-content">UI/UX Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="text-center">
|
||||
<img
|
||||
className="rounded-full size-24 mx-auto"
|
||||
src="https://images.unsplash.com/photo-1579017331263-ef82f0bbc748?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="mt-2 sm:mt-4">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Louise Donadieu
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content">
|
||||
Support Consultant
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="text-center">
|
||||
<img
|
||||
className="rounded-full size-24 mx-auto"
|
||||
src="https://images.unsplash.com/photo-1514222709107-a180c68d72b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="mt-2 sm:mt-4">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Jeff Fisher
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content">Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="text-center">
|
||||
<img
|
||||
className="rounded-full size-24 mx-auto"
|
||||
src="https://images.unsplash.com/photo-1602452920335-6a132309c7c8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="mt-2 sm:mt-4">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Sophia Harrington
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content">Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="text-center">
|
||||
<img
|
||||
className="rounded-full size-24 mx-auto"
|
||||
src="https://images.unsplash.com/photo-1515621061946-eff1c2a352bd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="mt-2 sm:mt-4">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Christina Kray
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content">
|
||||
Support Consultant
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="text-center">
|
||||
<img
|
||||
className="rounded-full size-24 mx-auto"
|
||||
src="https://images.unsplash.com/photo-1514846226882-28b324ef7f28?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="mt-2 sm:mt-4">
|
||||
<h3 className="font-medium text-secondary-content">Amy Forren</h3>
|
||||
<p className="text-sm text-secondary-content">Product Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="text-center">
|
||||
<img
|
||||
className="rounded-full size-24 mx-auto"
|
||||
src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="mt-2 sm:mt-4">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Philip Williams
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content">
|
||||
Support Consultant
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="text-center">
|
||||
<img
|
||||
className="rounded-full size-24 mx-auto"
|
||||
src="https://images.unsplash.com/photo-1520409364224-63400afe26e5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="mt-2 sm:mt-4">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Brian Lofoten
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content">UI/UX Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="text-center">
|
||||
<img
|
||||
className="rounded-full size-24 mx-auto"
|
||||
src="https://images.unsplash.com/photo-1558507652-2d9626c4e67a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="mt-2 sm:mt-4">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Jessica Dorsey
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content">
|
||||
Director of sales
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="text-center">
|
||||
<img
|
||||
className="rounded-full size-24 mx-auto"
|
||||
src="https://images.unsplash.com/photo-1521151716396-b2da27b1a19f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
<div className="mt-2 sm:mt-4">
|
||||
<h3 className="font-medium text-secondary-content">
|
||||
Nick Jackson
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-content">UI/UX Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="mt-12 flex justify-center">
|
||||
<div className="border border-base-200 p-1.5 ps-5 rounded-full">
|
||||
<div className="flex items-center gap-x-3">
|
||||
<span className="text-sm text-base-3000">
|
||||
Want to work with us?
|
||||
</span>
|
||||
<a
|
||||
className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-full border border-base-200 bg-base-100 text-primary shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
We are hiring
|
||||
<svg
|
||||
className="flex-shrink-0 size-4"
|
||||
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="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Team --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Squared Medium Size Image
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/TeamSections/SquaredMediumSizeImage.tsx"
|
||||
<>
|
||||
{/* <!-- Card Blog --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* <!-- Card --> */}
|
||||
<div className="group flex flex-col h-full bg-base-100 border border-base-200 shadow-sm rounded-xl">
|
||||
<div className="h-52 flex flex-col justify-center items-center bg-primary rounded-t-xl">
|
||||
<svg
|
||||
className="size-28"
|
||||
width="56"
|
||||
height="56"
|
||||
viewBox="0 0 56 56"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="56" height="56" rx="10" fill="base-100" />
|
||||
<path
|
||||
d="M20.2819 26.7478C20.1304 26.5495 19.9068 26.4194 19.6599 26.386C19.4131 26.3527 19.1631 26.4188 18.9647 26.5698C18.848 26.6622 18.7538 26.78 18.6894 26.9144L10.6019 43.1439C10.4874 43.3739 10.4686 43.6401 10.5496 43.884C10.6307 44.1279 10.805 44.3295 11.0342 44.4446C11.1681 44.5126 11.3163 44.5478 11.4664 44.5473H22.7343C22.9148 44.5519 23.0927 44.5037 23.2462 44.4084C23.3998 44.3132 23.5223 44.1751 23.5988 44.011C26.0307 38.9724 24.5566 31.3118 20.2819 26.7478Z"
|
||||
fill="url(#paint0_linear_2204_541)"
|
||||
/>
|
||||
<path
|
||||
d="M28.2171 11.9791C26.201 15.0912 25.026 18.6755 24.8074 22.3805C24.5889 26.0854 25.3342 29.7837 26.9704 33.1126L32.403 44.0113C32.4833 44.1724 32.6067 44.3079 32.7593 44.4026C32.912 44.4973 33.088 44.5475 33.2675 44.5476H44.5331C44.6602 44.5479 44.7861 44.523 44.9035 44.4743C45.0209 44.4257 45.1276 44.3543 45.2175 44.2642C45.3073 44.1741 45.3785 44.067 45.427 43.9492C45.4755 43.8314 45.5003 43.7052 45.5 43.5777C45.5001 43.4274 45.4659 43.2791 45.3999 43.1441L29.8619 11.9746C29.7881 11.8184 29.6717 11.6864 29.5261 11.594C29.3805 11.5016 29.2118 11.4525 29.0395 11.4525C28.8672 11.4525 28.6984 11.5016 28.5529 11.594C28.4073 11.6864 28.2908 11.8184 28.2171 11.9746V11.9791Z"
|
||||
fill="#2684FF"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_2204_541"
|
||||
x1="24.734"
|
||||
y1="29.2284"
|
||||
x2="16.1543"
|
||||
y2="44.0429"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#0052CC" />
|
||||
<stop offset="0.92" stop-color="#2684FF" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="p-4 md:p-6">
|
||||
<span className="block mb-1 text-xs font-semibold uppercase text-primary dark:text-primary">
|
||||
Atlassian API
|
||||
</span>
|
||||
<h3 className="text-xl font-semibold text-secondary-content">
|
||||
Atlassian
|
||||
</h3>
|
||||
<p className="mt-3 text-secondary-content">
|
||||
A software that develops products for software developers and
|
||||
developments.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-auto flex border-t border-base-200 divide-x divide-base-200">
|
||||
<a
|
||||
className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-es-xl bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
View sample
|
||||
</a>
|
||||
<a
|
||||
className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-ee-xl bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
View API
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="group flex flex-col h-full bg-base-100 border border-base-200 shadow-sm rounded-xl">
|
||||
<div className="h-52 flex flex-col justify-center items-center bg-rose-500 rounded-t-xl">
|
||||
<svg
|
||||
className="size-28"
|
||||
width="56"
|
||||
height="56"
|
||||
viewBox="0 0 56 56"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="56" height="56" rx="10" fill="base-100" />
|
||||
<g clip-path="url(#clip0_2204_541)">
|
||||
<path
|
||||
d="M37.0409 28.8697C33.1968 28.8697 30.0811 31.9854 30.0811 35.8288C30.0811 39.6726 33.1968 42.789 37.0409 42.789C40.8843 42.789 44 39.6726 44 35.8288C44 31.9854 40.8843 28.8697 37.0409 28.8697ZM18.9594 28.8701C15.116 28.8704 12 31.9854 12 35.8292C12 39.6726 15.116 42.7886 18.9594 42.7886C22.8032 42.7886 25.9192 39.6726 25.9192 35.8292C25.9192 31.9854 22.8032 28.8701 18.9591 28.8701H18.9594ZM34.9595 20.1704C34.9595 24.0138 31.8438 27.1305 28.0004 27.1305C24.1563 27.1305 21.0406 24.0138 21.0406 20.1704C21.0406 16.3269 24.1563 13.2109 28.0003 13.2109C31.8438 13.2109 34.9591 16.3269 34.9591 20.1704H34.9595Z"
|
||||
fill="url(#paint0_radial_2204_541)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="paint0_radial_2204_541"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(28.0043 29.3944) scale(21.216 19.6102)"
|
||||
>
|
||||
<stop stop-color="#FFB900" />
|
||||
<stop offset="0.6" stop-color="#F95D8F" />
|
||||
<stop offset="0.999" stop-color="#F95353" />
|
||||
</radialGradient>
|
||||
<clipPath id="clip0_2204_541">
|
||||
<rect
|
||||
width="32"
|
||||
height="29.5808"
|
||||
fill="base-100"
|
||||
transform="translate(12 13.2096)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="p-4 md:p-6">
|
||||
<span className="block mb-1 text-xs font-semibold uppercase text-rose-600 dark:text-rose-500">
|
||||
Asana API
|
||||
</span>
|
||||
<h3 className="text-xl font-semibold text-secondary-content">
|
||||
Asana
|
||||
</h3>
|
||||
<p className="mt-3 text-secondary-content">
|
||||
Track tasks and projects, use agile boards, measure progress.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-auto flex border-t border-base-200 divide-x divide-base-200">
|
||||
<a
|
||||
className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-es-xl bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
View sample
|
||||
</a>
|
||||
<a
|
||||
className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-ee-xl bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
View API
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="group flex flex-col h-full bg-base-100 border border-base-200 shadow-sm rounded-xl">
|
||||
<div className="h-52 flex flex-col justify-center items-center bg-amber-500 rounded-t-xl">
|
||||
<svg
|
||||
className="size-28"
|
||||
width="56"
|
||||
height="56"
|
||||
viewBox="0 0 56 56"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="56" height="56" rx="10" fill="base-100" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M23.7326 11.968C21.9637 11.9693 20.5321 13.4049 20.5334 15.1738C20.5321 16.9427 21.965 18.3782 23.7339 18.3795H26.9345V15.1751C26.9358 13.4062 25.5029 11.9706 23.7326 11.968C23.7339 11.968 23.7339 11.968 23.7326 11.968M23.7326 20.5184H15.2005C13.4316 20.5197 11.9987 21.9553 12 23.7242C11.9974 25.4931 13.4303 26.9286 15.1992 26.9312H23.7326C25.5016 26.9299 26.9345 25.4944 26.9332 23.7255C26.9345 21.9553 25.5016 20.5197 23.7326 20.5184V20.5184Z"
|
||||
fill="#36C5F0"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M44.0001 23.7242C44.0014 21.9553 42.5684 20.5197 40.7995 20.5184C39.0306 20.5197 37.5977 21.9553 37.599 23.7242V26.9312H40.7995C42.5684 26.9299 44.0014 25.4944 44.0001 23.7242ZM35.4666 23.7242V15.1738C35.4679 13.4062 34.0363 11.9706 32.2674 11.968C30.4985 11.9693 29.0656 13.4049 29.0669 15.1738V23.7242C29.0643 25.4931 30.4972 26.9286 32.2661 26.9312C34.035 26.9299 35.4679 25.4944 35.4666 23.7242Z"
|
||||
fill="#2EB67D"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M32.2661 44.0322C34.035 44.0309 35.4679 42.5953 35.4666 40.8264C35.4679 39.0575 34.035 37.622 32.2661 37.6207H29.0656V40.8264C29.0642 42.594 30.4972 44.0295 32.2661 44.0322ZM32.2661 35.4804H40.7995C42.5684 35.4791 44.0013 34.0436 44 32.2747C44.0026 30.5058 42.5697 29.0702 40.8008 29.0676H32.2674C30.4985 29.0689 29.0656 30.5045 29.0669 32.2734C29.0656 34.0436 30.4972 35.4791 32.2661 35.4804V35.4804Z"
|
||||
fill="#ECB22E"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M12 32.2746C11.9987 34.0435 13.4316 35.479 15.2005 35.4804C16.9694 35.479 18.4024 34.0435 18.401 32.2746V29.0688H15.2005C13.4316 29.0702 11.9987 30.5057 12 32.2746ZM20.5334 32.2746V40.825C20.5308 42.5939 21.9637 44.0295 23.7326 44.0321C25.5016 44.0308 26.9345 42.5952 26.9332 40.8263V32.2772C26.9358 30.5083 25.5029 29.0728 23.7339 29.0702C21.9637 29.0702 20.5321 30.5057 20.5334 32.2746C20.5334 32.2759 20.5334 32.2746 20.5334 32.2746Z"
|
||||
fill="#E01E5A"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="p-4 md:p-6">
|
||||
<span className="block mb-1 text-xs font-semibold uppercase text-amber-500">
|
||||
Slack API
|
||||
</span>
|
||||
<h3 className="text-xl font-semibold text-secondary-content">
|
||||
Slack
|
||||
</h3>
|
||||
<p className="mt-3 text-secondary-content">
|
||||
Email collaboration and email service desk made easy.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-auto flex border-t border-base-200 divide-x divide-base-200">
|
||||
<a
|
||||
className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-es-xl bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
View sample
|
||||
</a>
|
||||
<a
|
||||
className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-ee-xl bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
View API
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Card Blog --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"label": "Team Sections",
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Big Image
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/Testimonials/BigImage.tsx"
|
||||
<>
|
||||
{/* <!-- Testimonials --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="md:grid md:grid-cols-2 md:gap-10 lg:gap-16 md:items-center">
|
||||
<div className="hidden md:block mb-24 md:mb-0 sm:px-6">
|
||||
<div className="relative">
|
||||
<img
|
||||
className="rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=500&h=600&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
|
||||
{/* <!-- SVG Element --> */}
|
||||
<div className="absolute bottom-0 start-0 -z-[1] translate-y-10 -translate-x-14">
|
||||
<svg
|
||||
className="max-w-40 h-auto text-slate-400 dark:text-slate-700"
|
||||
width="696"
|
||||
height="653"
|
||||
viewBox="0 0 696 653"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="72.5" cy="29.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="171.5" cy="29.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="270.5" cy="29.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="369.5" cy="29.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="468.5" cy="29.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="567.5" cy="29.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="666.5" cy="29.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="29.5" cy="128.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="128.5" cy="128.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="227.5" cy="128.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="326.5" cy="128.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="425.5" cy="128.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="524.5" cy="128.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="623.5" cy="128.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="72.5" cy="227.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="171.5" cy="227.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="270.5" cy="227.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="369.5" cy="227.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="468.5" cy="227.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="567.5" cy="227.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="666.5" cy="227.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="29.5" cy="326.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="128.5" cy="326.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="227.5" cy="326.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="326.5" cy="326.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="425.5" cy="326.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="524.5" cy="326.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="623.5" cy="326.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="72.5" cy="425.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="171.5" cy="425.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="270.5" cy="425.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="369.5" cy="425.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="468.5" cy="425.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="567.5" cy="425.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="666.5" cy="425.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="29.5" cy="524.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="128.5" cy="524.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="227.5" cy="524.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="326.5" cy="524.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="425.5" cy="524.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="524.5" cy="524.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="623.5" cy="524.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="72.5" cy="623.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="171.5" cy="623.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="270.5" cy="623.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="369.5" cy="623.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="468.5" cy="623.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="567.5" cy="623.5" r="29.5" fill="currentColor" />
|
||||
<circle cx="666.5" cy="623.5" r="29.5" fill="currentColor" />
|
||||
</svg>
|
||||
</div>
|
||||
{/* <!-- End SVG Element --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div>
|
||||
{/* <!-- Blockquote --> */}
|
||||
<blockquote className="relative">
|
||||
<svg
|
||||
className="absolute top-0 start-0 transform -translate-x-8 -translate-y-4 size-24 text-base-200"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M7.39762 10.3C7.39762 11.0733 7.14888 11.7 6.6514 12.18C6.15392 12.6333 5.52552 12.86 4.76621 12.86C3.84979 12.86 3.09047 12.5533 2.48825 11.94C1.91222 11.3266 1.62421 10.4467 1.62421 9.29999C1.62421 8.07332 1.96459 6.87332 2.64535 5.69999C3.35231 4.49999 4.33418 3.55332 5.59098 2.85999L6.4943 4.25999C5.81354 4.73999 5.26369 5.27332 4.84476 5.85999C4.45201 6.44666 4.19017 7.12666 4.05926 7.89999C4.29491 7.79332 4.56983 7.73999 4.88403 7.73999C5.61716 7.73999 6.21938 7.97999 6.69067 8.45999C7.16197 8.93999 7.39762 9.55333 7.39762 10.3ZM14.6242 10.3C14.6242 11.0733 14.3755 11.7 13.878 12.18C13.3805 12.6333 12.7521 12.86 11.9928 12.86C11.0764 12.86 10.3171 12.5533 9.71484 11.94C9.13881 11.3266 8.85079 10.4467 8.85079 9.29999C8.85079 8.07332 9.19117 6.87332 9.87194 5.69999C10.5789 4.49999 11.5608 3.55332 12.8176 2.85999L13.7209 4.25999C13.0401 4.73999 12.4903 5.27332 12.0713 5.85999C11.6786 6.44666 11.4168 7.12666 11.2858 7.89999C11.5215 7.79332 11.7964 7.73999 12.1106 7.73999C12.8437 7.73999 13.446 7.97999 13.9173 8.45999C14.3886 8.93999 14.6242 9.55333 14.6242 10.3Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div className="relative z-10">
|
||||
<p className="text-xs font-semibold text-secondary-content tracking-wide uppercase mb-3">
|
||||
Featured client
|
||||
</p>
|
||||
|
||||
<p className="text-xl font-medium italic text-secondary-content md:text-2xl md:leading-normal xl:text-3xl xl:leading-normal">
|
||||
To say that switching to Preline has been life-changing is an
|
||||
understatement. My business has tripled and I got my life
|
||||
back.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<footer className="mt-6">
|
||||
<div className="flex items-center">
|
||||
<div className="md:hidden flex-shrink-0">
|
||||
<img
|
||||
className="size-12 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="ms-4 md:ms-0">
|
||||
<div className="text-base font-semibold text-secondary-content">
|
||||
Nicole Grazioso
|
||||
</div>
|
||||
<div className="text-xs text-secondary-content">
|
||||
Director Payments & Risk | Airbnb
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div className="mt-8 lg:mt-14">
|
||||
<a
|
||||
className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-neutral text-primary-content hover:bg-neutral/50 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
||||
href="#"
|
||||
>
|
||||
Read the story
|
||||
</a>
|
||||
</div>
|
||||
</blockquote>
|
||||
{/* <!-- End Blockquote --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Testimonials --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Card Testimonial
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/Testimonials/CardTestimonial.tsx"
|
||||
<>
|
||||
{/* Testimonials */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
|
||||
{/* Card */}
|
||||
<div className="flex flex-col bg-base-100 /40 shadow-sm rounded-xl ">
|
||||
<div className="flex-auto p-4 md:p-6">
|
||||
<Image
|
||||
width="500"
|
||||
height="500"
|
||||
className="h-9 w-9 rounded-full"
|
||||
src={
|
||||
"https://pbs.twimg.com/profile_images/1432517677864607745/spXCJfPY_400x400.jpg"
|
||||
}
|
||||
alt={"Timmy"}
|
||||
/>
|
||||
<p className="mt-3 sm:mt-6 text-base text-base-content md:text-xl ">
|
||||
<em>I think its a good idea</em>
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 rounded-b-xl md:px-6">
|
||||
<h3 className="text-sm font-semibold text-base-content sm:text-base ">
|
||||
Mustafa Hanif
|
||||
</h3>
|
||||
<p className="text-sm text-base-content/80">Indie Hacker</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Card */}
|
||||
{/* Card */}
|
||||
<div className="flex flex-col bg-base-100 border border-primary/40 shadow-sm rounded-xl ">
|
||||
<div className="flex-auto p-4 md:p-6">
|
||||
<Image
|
||||
width="500"
|
||||
height="500"
|
||||
className="h-9 w-9 rounded-full"
|
||||
src={
|
||||
"https://pbs.twimg.com/profile_images/1647540692837597184/SyEB8Ehg_400x400.jpg"
|
||||
}
|
||||
alt={"Timmy"}
|
||||
/>
|
||||
<p className="mt-3 sm:mt-6 text-base text-base-content md:text-xl ">
|
||||
<em>I know it's worth it and very good</em>
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 rounded-b-xl md:px-6">
|
||||
<h3 className="text-sm font-semibold text-base-content sm:text-base ">
|
||||
Timmy D Turner
|
||||
</h3>
|
||||
<p className="text-sm text-base-content/80">Indie Hacker</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Card */}
|
||||
</div>
|
||||
{/* End Grid */}
|
||||
</div>
|
||||
{/* End Testimonials */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,210 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# CardsWithStatsInADarkBackground
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/Testimonials/CardsWithStatsInADarkBackground.tsx"
|
||||
<>
|
||||
{/* <!-- Testimonials --> */}
|
||||
<div className="overflow-hidden bg-neutral">
|
||||
<div className="relative max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Title --> */}
|
||||
<div className="max-w-2xl w-3/4 lg:w-1/2 mb-6 sm:mb-10 md:mb-16">
|
||||
<h2 className="text-2xl sm:text-3xl lg:text-4xl text-primary-content font-semibold">
|
||||
Loved by business and individuals across the globe
|
||||
</h2>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* <!-- Card --> */}
|
||||
<div className="flex h-auto">
|
||||
<div className="flex flex-col bg-base-100 rounded-xl secondary-content">
|
||||
<div className="flex-auto p-4 md:p-6">
|
||||
<p className="text-base italic md:text-lg text-secondary-content">
|
||||
" With FastPocket, we're able to easily track our performance
|
||||
in full detail. It's become an essential tool for us to grow
|
||||
and engage with our audience. "
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-base-100 rounded-b-xl md:px-7">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="w-8 rounded-full sm:h-[2.875rem] sm:w-[2.875rem]"
|
||||
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grow ms-3">
|
||||
<p className="text-sm sm:text-base font-semibold text-secondary-content">
|
||||
Josh Tyson
|
||||
</p>
|
||||
<p className="text-xs text-secondary-content">
|
||||
Product Manager | Capsule
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="flex h-auto">
|
||||
<div className="flex flex-col bg-base-100 rounded-xl secondary-content">
|
||||
<div className="flex-auto p-4 md:p-6">
|
||||
<p className="text-base italic md:text-lg text-secondary-content">
|
||||
" In September, I will be using this theme for 2 years. I
|
||||
went through multiple updates and changes and I'm very glad
|
||||
to see the consistency and effort made by the team. "
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-base-100 rounded-b-xl md:px-7">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="w-8 rounded-full sm:h-[2.875rem] sm:w-[2.875rem]"
|
||||
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grow ms-3">
|
||||
<p className="text-sm sm:text-base font-semibold text-secondary-content">
|
||||
Luisa
|
||||
</p>
|
||||
<p className="text-xs text-secondary-content">
|
||||
Senior Director of Operations | Fitbit
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
|
||||
{/* <!-- Card --> */}
|
||||
<div className="flex h-auto">
|
||||
<div className="flex flex-col bg-base-100 rounded-xl secondary-content">
|
||||
<div className="flex-auto p-4 md:p-6">
|
||||
<p className="text-base italic md:text-lg text-secondary-content">
|
||||
" Refreshing and Thought provoking design and it changes my
|
||||
view about how I design the websites. Great typography,
|
||||
modern clean white design, nice tones of the color. "
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-base-100 rounded-b-xl md:px-7">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="w-8 rounded-full sm:h-[2.875rem] sm:w-[2.875rem]"
|
||||
src="https://images.unsplash.com/photo-1579017331263-ef82f0bbc748?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=900&h=900&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grow ms-3">
|
||||
<p className="text-sm sm:text-base font-semibold text-secondary-content">
|
||||
Alisa Williams
|
||||
</p>
|
||||
<p className="text-xs text-secondary-content">
|
||||
Entrepreneur | Happy customer
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Card --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="mt-20 grid gap-6 grid-cols-2 sm:gap-12 lg:grid-cols-3 lg:gap-8">
|
||||
{/* <!-- Stats --> */}
|
||||
<div>
|
||||
<h4 className="text-lg sm:text-xl font-semibold text-primary-content">
|
||||
Accuracy rate
|
||||
</h4>
|
||||
<p className="mt-2 sm:mt-3 text-4xl sm:text-6xl font-bold text-primary">
|
||||
99.95%
|
||||
</p>
|
||||
<p className="mt-1 text-primary-content">
|
||||
in fulfilling orders
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Stats --> */}
|
||||
|
||||
{/* <!-- Stats --> */}
|
||||
<div>
|
||||
<h4 className="text-lg sm:text-xl font-semibold text-primary-content">
|
||||
Startup businesses
|
||||
</h4>
|
||||
<p className="mt-2 sm:mt-3 text-4xl sm:text-6xl font-bold text-primary">
|
||||
2,000+
|
||||
</p>
|
||||
<p className="mt-1 text-primary-content">
|
||||
partner with FastPocket
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Stats --> */}
|
||||
|
||||
{/* <!-- Stats --> */}
|
||||
<div>
|
||||
<h4 className="text-lg sm:text-xl font-semibold text-primary-content">
|
||||
Happy customer
|
||||
</h4>
|
||||
<p className="mt-2 sm:mt-3 text-4xl sm:text-6xl font-bold text-primary">
|
||||
85%
|
||||
</p>
|
||||
<p className="mt-1 text-primary-content">this year alone</p>
|
||||
</div>
|
||||
{/* <!-- End Stats --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
|
||||
{/* <!-- SVG Element --> */}
|
||||
<div
|
||||
className="absolute bottom-0 end-0 transform lg:translate-x-32"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
className="w-40 h-auto sm:w-72"
|
||||
width="1115"
|
||||
height="636"
|
||||
viewBox="0 0 1115 636"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.990203 279.321C-1.11035 287.334 3.68307 295.534 11.6966 297.634L142.285 331.865C150.298 333.965 158.497 329.172 160.598 321.158C162.699 313.145 157.905 304.946 149.892 302.845L33.8132 272.418L64.2403 156.339C66.3409 148.326 61.5475 140.127 53.5339 138.026C45.5204 135.926 37.3213 140.719 35.2207 148.733L0.990203 279.321ZM424.31 252.289C431.581 256.26 440.694 253.585 444.664 246.314C448.635 239.044 445.961 229.931 438.69 225.96L424.31 252.289ZM23.0706 296.074C72.7581 267.025 123.056 230.059 187.043 212.864C249.583 196.057 325.63 198.393 424.31 252.289L438.69 225.96C333.77 168.656 249.817 164.929 179.257 183.892C110.144 202.465 54.2419 243.099 7.92943 270.175L23.0706 296.074Z"
|
||||
fill="currentColor"
|
||||
className="fill-orange-500"
|
||||
/>
|
||||
<path
|
||||
d="M451.609 382.417C446.219 388.708 446.95 398.178 453.241 403.567L555.763 491.398C562.054 496.788 571.524 496.057 576.913 489.766C582.303 483.474 581.572 474.005 575.281 468.615L484.15 390.544L562.222 299.413C567.612 293.122 566.881 283.652 560.59 278.263C554.299 272.873 544.829 273.604 539.44 279.895L451.609 382.417ZM837.202 559.655C841.706 566.608 850.994 568.593 857.947 564.09C864.9 559.586 866.885 550.298 862.381 543.345L837.202 559.655ZM464.154 407.131C508.387 403.718 570.802 395.25 638.136 410.928C704.591 426.401 776.318 465.66 837.202 559.655L862.381 543.345C797.144 442.631 718.724 398.89 644.939 381.709C572.033 364.734 504.114 373.958 461.846 377.22L464.154 407.131Z"
|
||||
fill="currentColor"
|
||||
className="fill-cyan-500"
|
||||
/>
|
||||
<path
|
||||
d="M447.448 0.194357C439.203 -0.605554 431.87 5.43034 431.07 13.6759L418.035 148.045C417.235 156.291 423.271 163.623 431.516 164.423C439.762 165.223 447.095 159.187 447.895 150.942L459.482 31.5025L578.921 43.0895C587.166 43.8894 594.499 37.8535 595.299 29.6079C596.099 21.3624 590.063 14.0296 581.818 13.2297L447.448 0.194357ZM1086.03 431.727C1089.68 439.166 1098.66 442.239 1106.1 438.593C1113.54 434.946 1116.62 425.96 1112.97 418.521L1086.03 431.727ZM434.419 24.6572C449.463 42.934 474.586 81.0463 521.375 116.908C568.556 153.07 637.546 187.063 742.018 200.993L745.982 171.256C646.454 157.985 582.444 125.917 539.625 93.0974C496.414 59.978 474.537 26.1903 457.581 5.59138L434.419 24.6572ZM742.018 200.993C939.862 227.372 1054.15 366.703 1086.03 431.727L1112.97 418.521C1077.85 346.879 956.138 199.277 745.982 171.256L742.018 200.993Z"
|
||||
fill="currentColor"
|
||||
className="fill-white"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{/* <!-- End SVG Element --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Testimonials --> */}
|
||||
</>
|
||||
```
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,82 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Small Image
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/Testimonials/SmallImage.tsx"
|
||||
<>
|
||||
{/* <!-- Testimonials --> */}
|
||||
<div className="relative overflow-hidden">
|
||||
<div className="max-w-[85rem] px-4 py-12 sm:px-6 lg:px-8 lg:py-16 mx-auto">
|
||||
{/* <!-- Gradients --> */}
|
||||
<div aria-hidden="true" className="flex absolute start-0 -z-[1]">
|
||||
<div className="bg-base-200 opacity-20 blur-3xl w-[1036px] h-[300px] dark:opacity-20"></div>
|
||||
</div>
|
||||
{/* <!-- End Gradients --> */}
|
||||
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="lg:grid lg:grid-cols-6 lg:gap-8 lg:items-center">
|
||||
<div className="hidden lg:block lg:col-span-2">
|
||||
<img
|
||||
className="rounded-xl"
|
||||
src="https://images.unsplash.com/photo-1671726203390-cdc4354ee2eb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="lg:col-span-4">
|
||||
{/* <!-- Blockquote --> */}
|
||||
<blockquote>
|
||||
<svg
|
||||
className="w-24 h-auto mb-4"
|
||||
viewBox="-0.3 0 320.3999999999999 99.9"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="2500"
|
||||
height="779"
|
||||
>
|
||||
<path
|
||||
d="M168.7 25.1c0 3.6-2.9 6.5-6.5 6.5s-6.5-2.9-6.5-6.5 2.8-6.5 6.5-6.5c3.7.1 6.5 3 6.5 6.5zm-26.8 13.1v1.6s-3.1-4-9.7-4c-10.9 0-19.4 8.3-19.4 19.8 0 11.4 8.4 19.8 19.4 19.8 6.7 0 9.7-4.1 9.7-4.1V73c0 .8.6 1.4 1.4 1.4h8.1V36.8h-8.1c-.8 0-1.4.7-1.4 1.4zm0 24.1c-1.5 2.2-4.5 4.1-8.1 4.1-6.4 0-11.3-4-11.3-10.8s4.9-10.8 11.3-10.8c3.5 0 6.7 2 8.1 4.1zm15.5-25.5h9.6v37.6h-9.6zm143.4-1c-6.6 0-9.7 4-9.7 4V18.7h-9.6v55.7h8.1c.8 0 1.4-.7 1.4-1.4v-1.7s3.1 4.1 9.7 4.1c10.9 0 19.4-8.4 19.4-19.8s-8.5-19.8-19.3-19.8zm-1.6 30.5c-3.7 0-6.6-1.9-8.1-4.1V48.8c1.5-2 4.7-4.1 8.1-4.1 6.4 0 11.3 4 11.3 10.8s-4.9 10.8-11.3 10.8zm-22.7-14.2v22.4h-9.6V53.2c0-6.2-2-8.7-7.4-8.7-2.9 0-5.9 1.5-7.8 3.7v26.2h-9.6V36.8h7.6c.8 0 1.4.7 1.4 1.4v1.6c2.8-2.9 6.5-4 10.2-4 4.2 0 7.7 1.2 10.5 3.6 3.4 2.8 4.7 6.4 4.7 12.7zm-57.7-16.3c-6.6 0-9.7 4-9.7 4V18.7h-9.6v55.7h8.1c.8 0 1.4-.7 1.4-1.4v-1.7s3.1 4.1 9.7 4.1c10.9 0 19.4-8.4 19.4-19.8.1-11.4-8.4-19.8-19.3-19.8zm-1.6 30.5c-3.7 0-6.6-1.9-8.1-4.1V48.8c1.5-2 4.7-4.1 8.1-4.1 6.4 0 11.3 4 11.3 10.8s-4.9 10.8-11.3 10.8zm-26-30.5c2.9 0 4.4.5 4.4.5v8.9s-8-2.7-13 3v26.3H173V36.8h8.1c.8 0 1.4.7 1.4 1.4v1.6c1.8-2.1 5.7-4 8.7-4zM91.5 71c-.5-1.2-1-2.5-1.5-3.6-.8-1.8-1.6-3.5-2.3-5.1l-.1-.1C80.7 47.2 73.3 32 65.5 17l-.3-.6c-.8-1.5-1.6-3.1-2.4-4.7-1-1.8-2-3.7-3.6-5.5C56 2.2 51.4 0 46.5 0c-5 0-9.5 2.2-12.8 6-1.5 1.8-2.6 3.7-3.6 5.5-.8 1.6-1.6 3.2-2.4 4.7l-.3.6C19.7 31.8 12.2 47 5.3 62l-.1.2c-.7 1.6-1.5 3.3-2.3 5.1-.5 1.1-1 2.3-1.5 3.6C.1 74.6-.3 78.1.2 81.7c1.1 7.5 6.1 13.8 13 16.6 2.6 1.1 5.3 1.6 8.1 1.6.8 0 1.8-.1 2.6-.2 3.3-.4 6.7-1.5 10-3.4 4.1-2.3 8-5.6 12.4-10.4 4.4 4.8 8.4 8.1 12.4 10.4 3.3 1.9 6.7 3 10 3.4.8.1 1.8.2 2.6.2 2.8 0 5.6-.5 8.1-1.6 7-2.8 11.9-9.2 13-16.6.8-3.5.4-7-.9-10.7zm-45.1 5.2C41 69.4 37.5 63 36.3 57.6c-.5-2.3-.6-4.3-.3-6.1.2-1.6.8-3 1.6-4.2 1.9-2.7 5.1-4.4 8.8-4.4s7 1.6 8.8 4.4c.8 1.2 1.4 2.6 1.6 4.2.3 1.8.2 3.9-.3 6.1-1.2 5.3-4.7 11.7-10.1 18.6zm39.9 4.7c-.7 5.2-4.2 9.7-9.1 11.7-2.4 1-5 1.3-7.6 1-2.5-.3-5-1.1-7.6-2.6-3.6-2-7.2-5.1-11.4-9.7 6.6-8.1 10.6-15.5 12.1-22.1.7-3.1.8-5.9.5-8.5-.4-2.5-1.3-4.8-2.7-6.8-3.1-4.5-8.3-7.1-14.1-7.1s-11 2.7-14.1 7.1c-1.4 2-2.3 4.3-2.7 6.8-.4 2.6-.3 5.5.5 8.5 1.5 6.6 5.6 14.1 12.1 22.2-4.1 4.6-7.8 7.7-11.4 9.7-2.6 1.5-5.1 2.3-7.6 2.6-2.7.3-5.3-.1-7.6-1-4.9-2-8.4-6.5-9.1-11.7-.3-2.5-.1-5 .9-7.8.3-1 .8-2 1.3-3.2.7-1.6 1.5-3.3 2.3-5l.1-.2c6.9-14.9 14.3-30.1 22-44.9l.3-.6c.8-1.5 1.6-3.1 2.4-4.6.8-1.6 1.7-3.1 2.8-4.4 2.1-2.4 4.9-3.7 8-3.7s5.9 1.3 8 3.7c1.1 1.3 2 2.8 2.8 4.4.8 1.5 1.6 3.1 2.4 4.6l.3.6c7.6 14.9 15 30.1 21.9 45v.1c.8 1.6 1.5 3.4 2.3 5 .5 1.2 1 2.2 1.3 3.2.8 2.6 1.1 5.1.7 7.7z"
|
||||
fill="#ff5a5f"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<p className="text-xl font-medium text-secondary-content lg:text-2xl lg:leading-normal">
|
||||
To say that switching to Preline has been life-changing is an
|
||||
understatement. My business has tripled and I got my life
|
||||
back.
|
||||
</p>
|
||||
|
||||
<footer className="mt-6">
|
||||
<div className="flex items-center">
|
||||
<div className="lg:hidden flex-shrink-0">
|
||||
<img
|
||||
className="w-12 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1671726203390-cdc4354ee2eb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="ms-4 lg:ms-0">
|
||||
<p className="font-medium text-secondary-content">
|
||||
Nicole Grazioso
|
||||
</p>
|
||||
<p className="text-sm text-secondary-content">
|
||||
Head of Finance
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
{/* <!-- End Blockquote --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Testimonials --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Testimonials With Stats
|
||||
|
||||
|
||||
|
||||
```jsx title="Frontend/sections/Testimonials/TestimonialsWithStats.tsx"
|
||||
<>
|
||||
{/* <!-- Testimonials with Stats --> */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* <!-- Grid --> */}
|
||||
<div className="lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center lg:justify-between">
|
||||
<div className="lg:col-span-5 lg:col-start-1">
|
||||
{/* <!-- Title --> */}
|
||||
<div className="mb-8">
|
||||
<h2 className="mb-2 text-3xl text-secondary-content font-bold lg:text-4xl">
|
||||
It's all about speed
|
||||
</h2>
|
||||
<p className="text-secondary-content">
|
||||
We provide you with a test account that can be set up in
|
||||
seconds. Our main focus is getting responses to you as soon as
|
||||
we can.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- End Title --> */}
|
||||
|
||||
{/* <!-- Blockquote --> */}
|
||||
<blockquote className="relative">
|
||||
<svg
|
||||
className="absolute top-0 start-0 transform -translate-x-6 -translate-y-8 w-16 text-base-200"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M7.39762 10.3C7.39762 11.0733 7.14888 11.7 6.6514 12.18C6.15392 12.6333 5.52552 12.86 4.76621 12.86C3.84979 12.86 3.09047 12.5533 2.48825 11.94C1.91222 11.3266 1.62421 10.4467 1.62421 9.29999C1.62421 8.07332 1.96459 6.87332 2.64535 5.69999C3.35231 4.49999 4.33418 3.55332 5.59098 2.85999L6.4943 4.25999C5.81354 4.73999 5.26369 5.27332 4.84476 5.85999C4.45201 6.44666 4.19017 7.12666 4.05926 7.89999C4.29491 7.79332 4.56983 7.73999 4.88403 7.73999C5.61716 7.73999 6.21938 7.97999 6.69067 8.45999C7.16197 8.93999 7.39762 9.55333 7.39762 10.3ZM14.6242 10.3C14.6242 11.0733 14.3755 11.7 13.878 12.18C13.3805 12.6333 12.7521 12.86 11.9928 12.86C11.0764 12.86 10.3171 12.5533 9.71484 11.94C9.13881 11.3266 8.85079 10.4467 8.85079 9.29999C8.85079 8.07332 9.19117 6.87332 9.87194 5.69999C10.5789 4.49999 11.5608 3.55332 12.8176 2.85999L13.7209 4.25999C13.0401 4.73999 12.4903 5.27332 12.0713 5.85999C11.6786 6.44666 11.4168 7.12666 11.2858 7.89999C11.5215 7.79332 11.7964 7.73999 12.1106 7.73999C12.8437 7.73999 13.446 7.97999 13.9173 8.45999C14.3886 8.93999 14.6242 9.55333 14.6242 10.3Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div className="relative z-10">
|
||||
<p className="text-xl italic text-secondary-content">
|
||||
Amazing people to work with. Very fast and professional
|
||||
partner.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<footer className="mt-6">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="w-8 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
<div className="grow ms-4">
|
||||
<div className="font-semibold text-secondary-content">
|
||||
Josh Grazioso
|
||||
</div>
|
||||
<div className="text-xs text-secondary-content">
|
||||
Director Payments & Risk | Airbnb
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
{/* <!-- End Blockquote --> */}
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
|
||||
<div className="mt-10 lg:mt-0 lg:col-span-6 lg:col-end-13">
|
||||
<div className="space-y-6 sm:space-y-8">
|
||||
{/* <!-- List --> */}
|
||||
<ul className="grid grid-cols-2 divide-y divide-y-2 divide-x divide-x-2 divide-base-200 overflow-hidden">
|
||||
<li className="flex flex-col -m-0.5 p-4 sm:p-8">
|
||||
<div className="flex items-end gap-x-2 text-3xl sm:text-5xl font-bold text-secondary-content mb-2">
|
||||
45k+
|
||||
</div>
|
||||
<p className="text-sm sm:text-base text-secondary-content">
|
||||
users - from new startups to public companies
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li className="flex flex-col -m-0.5 p-4 sm:p-8">
|
||||
<div className="flex items-end gap-x-2 text-3xl sm:text-5xl font-bold text-secondary-content mb-2">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5 text-primary"
|
||||
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="m5 12 7-7 7 7" />
|
||||
<path d="M12 19V5" />
|
||||
</svg>
|
||||
23%
|
||||
</div>
|
||||
<p className="text-sm sm:text-base text-secondary-content">
|
||||
increase in traffic on webpages with Looms
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li className="flex flex-col -m-0.5 p-4 sm:p-8">
|
||||
<div className="flex items-end gap-x-2 text-3xl sm:text-5xl font-bold text-secondary-content mb-2">
|
||||
<svg
|
||||
className="flex-shrink-0 w-5 text-primary"
|
||||
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="m5 12 7-7 7 7" />
|
||||
<path d="M12 19V5" />
|
||||
</svg>
|
||||
9.3%
|
||||
</div>
|
||||
<p className="text-sm sm:text-base text-secondary-content">
|
||||
boost in reply rates across sales outreach
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li className="flex flex-col -m-0.5 p-4 sm:p-8">
|
||||
<div className="flex items-end gap-x-2 text-3xl sm:text-5xl font-bold text-secondary-content mb-2">
|
||||
2x
|
||||
</div>
|
||||
<p className="text-sm sm:text-base text-secondary-content">
|
||||
faster than previous FastPocket versions
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
{/* <!-- End List --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- End Col --> */}
|
||||
</div>
|
||||
{/* <!-- End Grid --> */}
|
||||
</div>
|
||||
{/* <!-- End Testimonials with Stats --> */}
|
||||
</>
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"label": "Testimonials",
|
||||
"position": 2,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"description": "5 minutes to learn the most important Docusaurus concepts."
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 353 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 312 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 269 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue