482 lines
24 KiB
Markdown
482 lines
24 KiB
Markdown
---
|
||
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 FastPocket
|
||
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 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>
|
||
</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 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 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 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 md:text-2xl md: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 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 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 text-secondary-content">
|
||
<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 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. 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>
|
||
<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 --> */}
|
||
</>
|
||
```
|