514 lines
26 KiB
Markdown
514 lines
26 KiB
Markdown
---
|
||
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 --> */}
|
||
</>
|
||
```
|