24 KiB
24 KiB
| sidebar_position |
|---|
| 2 |
Center Aligned In Small Size
<>
{/* <!-- 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 --> */}
</>