blog singlePost page created
This commit is contained in:
parsa aghaei
parent
fb488c366c
commit
74eea9fd99
9
public/images/blog/icons/eye.svg
Normal file
9
public/images/blog/icons/eye.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect width="32" height="32" fill="url(#pattern0_0_583)"/>
|
||||
<defs>
|
||||
<pattern id="pattern0_0_583" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image0_0_583" transform="scale(0.03125)"/>
|
||||
</pattern>
|
||||
<image id="image0_0_583" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAA0mlDQ1BJQ0MgUHJvZmlsZQAAGJVjYGCsSCwoyGESYGDIzSspcg9yjIyIjFJgv8rAzsDIAAaJycUFjgEBPgw4wbdrELWXdUFm4VaHFbCkpBYnA+ktQFyaXFBUwsDAqANkq5eXFIDYIUC2SHZIkDOQnQFk80HVg4C0c2JOZlJRYklqioJ7UWKlgnN+Tn5RcUFiciqJriAClKRWlIBo5/yCyqLM9IwSBUegb1OBduYWlJakFukoeOYl6zEwgMIPouNzIDhcGMXOJJcWlUGNYWQyZmAAABFdNMUdedORAAABnUlEQVRIDe1UPWsCQRB9J1FSBmIIWAY58wcExT4p7ISAhT8gxbVWIZAUdpLGX5H8kyDap0llE7SI4geccJu53bt1Zg+LICGNs3C3++a9ud3ZmQOO9v8Z8PZu4QxXegCfenzvZWYcJTxhAuWMCaGlDDcD1PGK0JHuQoXkrWc0FijgBRETj9HHHQIMMGJoRGjeatikgjGjzdFhPo/CLJl3iDLz6mkbK0aYw3cJuBYhFmhxRhNbJlf260U84BmNhBoITojbNERNfF3RUYx1sdaSCD0NeCIXinZUjfEKZiKyoiTFdoGNxaNkFwOLmJuZws/RxZxrwe7xrqf3OLWQhxs9/7CImRTxlnOgeHmpsRPhCfXqS2DJwsfU2dhAexqsJtYoaqzvMGeUALKquCBFqTId0ktCbNDVcohKUZT6WoLThcjyDRJHgy7xkdJprCO+v0UzlcfvFhbMvaSycc3HnDFWaLuEMoaMsKTi5a3eEfKxObsbIk8VwJtpRG0UUDv1xdkjarmCK92tD2rnNMyvfij8nGkA8z7glyYDHVd/n4Ef+jMYfUWcnnYAAAAASUVORK5CYII="/>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
3
public/images/blog/icons/like.svg
Normal file
3
public/images/blog/icons/like.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="32" height="27" viewBox="0 0 32 27" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Shape" d="M30.134 3.16639C25.3721 -2.96807 16.0006 0.651643 16.0006 6.88136C16.0006 0.651643 6.62852 -2.96837 1.86596 3.16639C-3.05628 9.50847 1.79523 20.6182 16.0003 27C30.2048 20.6182 35.0563 9.50847 30.134 3.16639Z" fill="#FF5480"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 349 B |
21
public/images/blog/icons/socials-vertical.svg
Normal file
21
public/images/blog/icons/socials-vertical.svg
Normal file
@ -0,0 +1,21 @@
|
||||
<svg width="34" height="236" viewBox="0 0 34 236" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Social Media">
|
||||
<g id="Facebook">
|
||||
<circle id="Oval" cx="16.879" cy="16.879" r="16.879" fill="#9B9B9B"/>
|
||||
<path id="Shape" d="M21.1223 17.5398H18.1105V28.5738H13.5472V17.5398H11.377V13.662H13.5472V11.1526C13.5472 9.35812 14.3996 6.54816 18.1511 6.54816L21.5312 6.5623V10.3264H19.0787C18.6764 10.3264 18.1108 10.5274 18.1108 11.3834V13.6656H21.521L21.1223 17.5398Z" fill="white"/>
|
||||
</g>
|
||||
<g id="Twitter">
|
||||
<circle id="Oval_2" cx="16.879" cy="83.879" r="16.879" fill="#9B9B9B"/>
|
||||
<path id="Shape_2" d="M28.1652 79.092C27.4419 79.4127 26.6638 79.6297 25.8478 79.7265C26.681 79.2274 27.3204 78.4376 27.6221 77.4949C26.8425 77.9573 25.9787 78.2928 25.0601 78.4737C24.3241 77.6899 23.2756 77.2 22.1144 77.2C19.8867 77.2 18.0799 79.0068 18.0799 81.2346C18.0799 81.5508 18.1157 81.8586 18.1849 82.1541C14.8318 81.9859 11.8588 80.3798 9.86873 77.9381C9.5215 78.5338 9.32232 79.2274 9.32232 79.9666C9.32232 81.3661 10.0351 82.6015 11.1171 83.3248C10.4561 83.3041 9.83352 83.1226 9.28982 82.8196C9.28952 82.8368 9.28952 82.8539 9.28952 82.8708C9.28952 84.8256 10.6808 86.4561 12.5261 86.8265C12.1879 86.9192 11.8308 86.9682 11.4634 86.9682C11.2028 86.9682 10.9504 86.9433 10.7043 86.8963C11.2176 88.4988 12.7073 89.6654 14.4732 89.6982C13.0921 90.7805 11.3527 91.4253 9.46193 91.4253C9.13697 91.4253 8.81503 91.4063 8.5 91.3687C10.2845 92.5139 12.4058 93.1815 14.6841 93.1815C22.1051 93.1815 26.1635 87.0338 26.1635 81.7019C26.1635 81.527 26.1595 81.3528 26.1517 81.1801C26.9406 80.6114 27.6245 79.9011 28.1652 79.092Z" fill="white"/>
|
||||
</g>
|
||||
<g id="Instagram">
|
||||
<path id="Shape_3" fill-rule="evenodd" clip-rule="evenodd" d="M22.0074 144.021H11.9011C10.288 144.021 8.97559 145.334 8.97559 146.947V157.053C8.97559 158.666 10.288 159.979 11.9011 159.979H22.0074C23.6205 159.979 24.9333 158.667 24.9333 157.053V146.947C24.9333 145.334 23.6209 144.021 22.0074 144.021ZM16.9543 157.253C14.0578 157.253 11.7013 154.897 11.7013 152C11.7013 149.104 14.0578 146.747 16.9543 146.747C19.8511 146.747 22.2076 149.104 22.2076 152C22.2076 154.896 19.8507 157.253 16.9543 157.253ZM21.1332 146.59C21.1332 147.276 21.6908 147.833 22.3765 147.833C23.0618 147.833 23.6194 147.276 23.6194 146.59C23.6194 145.905 23.0618 145.347 22.3765 145.347C21.6908 145.347 21.1332 145.905 21.1332 146.59Z" fill="#9B9B9B"/>
|
||||
<path id="Shape_4" d="M16.9545 148.967C15.2824 148.967 13.9209 150.328 13.9209 152C13.9209 153.672 15.2824 155.034 16.9545 155.034C18.6273 155.034 19.9876 153.672 19.9876 152C19.9876 150.328 18.6269 148.967 16.9545 148.967Z" fill="#9B9B9B"/>
|
||||
<path id="Shape_5" fill-rule="evenodd" clip-rule="evenodd" d="M0 151.954C0 142.591 7.59107 135 16.9543 135C26.3175 135 33.9086 142.591 33.9086 151.954C33.9086 161.318 26.3175 168.909 16.9543 168.909C7.59107 168.909 0 161.318 0 151.954ZM22.0074 162.198C24.8449 162.198 27.1528 159.891 27.1528 157.053V146.947C27.1528 144.11 24.8449 141.802 22.0074 141.802H11.9011C9.06402 141.802 6.7558 144.11 6.7558 146.947V157.053C6.7558 159.891 9.06402 162.198 11.9011 162.198H22.0074Z" fill="#9B9B9B"/>
|
||||
</g>
|
||||
<g id="Pinterest">
|
||||
<circle id="Oval_3" cx="16.879" cy="218.88" r="16.879" fill="#9B9B9B"/>
|
||||
<path id="Shape_6" d="M18.2417 224.603C16.9656 224.504 16.4294 223.872 15.4287 223.264C14.8787 226.15 14.2065 228.916 12.2155 230.361C11.6002 226 13.1176 222.724 13.8223 219.246C12.6211 217.224 13.9667 213.155 16.5001 214.158C19.6182 215.391 13.8006 221.676 17.7061 222.461C21.7834 223.28 23.4479 215.386 20.9192 212.818C17.2659 209.111 10.2851 212.734 11.1435 218.041C11.3526 219.339 12.6933 219.732 11.6791 221.523C9.34088 221.005 8.64343 219.161 8.7331 216.702C8.87782 212.678 12.3491 209.86 15.831 209.47C20.2344 208.977 24.3674 211.087 24.9379 215.229C25.5796 219.904 22.9499 224.967 18.2417 224.603Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
BIN
public/images/blog/posts/post/1.png
Normal file
BIN
public/images/blog/posts/post/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
BIN
public/images/blog/posts/post/2.png
Normal file
BIN
public/images/blog/posts/post/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
BIN
public/images/blog/posts/post/3.png
Normal file
BIN
public/images/blog/posts/post/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
BIN
public/images/blog/posts/post/4.png
Normal file
BIN
public/images/blog/posts/post/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
BIN
public/images/blog/users/1.png
Normal file
BIN
public/images/blog/users/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
@ -59,7 +59,7 @@ export default function FilteredPosts({ params }: propsType) {
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/categories/categoryName"}
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
UI design
|
||||
@ -98,7 +98,7 @@ export default function FilteredPosts({ params }: propsType) {
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/categories/categoryName"}
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
UI design
|
||||
@ -137,7 +137,7 @@ export default function FilteredPosts({ params }: propsType) {
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/categories/categoryName"}
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
UI design
|
||||
@ -176,7 +176,7 @@ export default function FilteredPosts({ params }: propsType) {
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/categories/categoryName"}
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
UI design
|
||||
@ -215,7 +215,7 @@ export default function FilteredPosts({ params }: propsType) {
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/categories/categoryName"}
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
UI design
|
||||
@ -254,7 +254,7 @@ export default function FilteredPosts({ params }: propsType) {
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/categories/categoryName"}
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
UI design
|
||||
@ -293,7 +293,7 @@ export default function FilteredPosts({ params }: propsType) {
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/categories/categoryName"}
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
UI design
|
||||
@ -332,7 +332,7 @@ export default function FilteredPosts({ params }: propsType) {
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/categories/categoryName"}
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
UI design
|
||||
@ -371,7 +371,7 @@ export default function FilteredPosts({ params }: propsType) {
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/categories/categoryName"}
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
UI design
|
||||
@ -410,7 +410,7 @@ export default function FilteredPosts({ params }: propsType) {
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/categories/categoryName"}
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
UI design
|
||||
@ -449,7 +449,7 @@ export default function FilteredPosts({ params }: propsType) {
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/categories/categoryName"}
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
UI design
|
||||
@ -488,7 +488,7 @@ export default function FilteredPosts({ params }: propsType) {
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/categories/categoryName"}
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
UI design
|
||||
@ -527,7 +527,7 @@ export default function FilteredPosts({ params }: propsType) {
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/categories/categoryName"}
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
UI design
|
||||
@ -566,7 +566,7 @@ export default function FilteredPosts({ params }: propsType) {
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/categories/categoryName"}
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default">
|
||||
UI design
|
||||
|
||||
@ -23,7 +23,7 @@ export default function RootLayout({
|
||||
|
||||
<Header />
|
||||
|
||||
<div className="main blog relative my-[100px] flex w-full flex-wrap justify-center overflow-hidden md:my-[150px]">
|
||||
<div className="main blog relative my-[100px] flex w-full flex-wrap justify-center md:my-[150px]">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,7 +1,320 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
type propsType = {
|
||||
params: { slug: string };
|
||||
};
|
||||
|
||||
export default function SinglePost({ params }: propsType) {
|
||||
return <div>{params.slug}</div>;
|
||||
return (
|
||||
<div className="flex w-full max-w-[1280px] flex-wrap justify-center sm:my-10">
|
||||
<div className="flex w-full max-w-[90%] flex-col gap-5">
|
||||
<h1 className="text-[36px] font-[700] capitalize text-blog-text-default">
|
||||
{params.slug.replaceAll(/%20|-|_/g, " ")}
|
||||
</h1>
|
||||
<p className="text-[18px] font-[600] text-blog-text-default">
|
||||
People’s quest for creating websites has easily taken us to a new era
|
||||
of site development. Where, with the availability of robust page
|
||||
building tools, creating websites has become a lot more fun
|
||||
(especially for non-developers).
|
||||
</p>
|
||||
<div className="flex w-full flex-wrap gap-2">
|
||||
<div className="flex gap-2">
|
||||
<p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
|
||||
BY
|
||||
</p>
|
||||
<h2 className="whitespace-nowrap text-[14px] font-[400] text-blog-text-default md:text-[16px]">
|
||||
TOMAS LAURINAVICIUS
|
||||
</h2>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">IN</p>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-10 flex w-full max-w-[90%] flex-wrap justify-center gap-5">
|
||||
<ul className="my-10 flex w-full">
|
||||
<li className="text-[12px] font-[400] capitalize text-blog-text-passive">
|
||||
Home
|
||||
</li>
|
||||
<span className="mx-4 mt-[-2px] scale-[3] text-[12px] font-[400] text-blog-text-passive">
|
||||
-
|
||||
</span>
|
||||
<li className="text-[12px] font-[400] capitalize text-blog-text-passive">
|
||||
Categories
|
||||
</li>
|
||||
<span className="mx-4 mt-[-2px] scale-[3] text-[12px] font-[400] text-blog-text-passive">
|
||||
-
|
||||
</span>
|
||||
<li className="text-[12px] font-[400] capitalize text-blog-text-passive">
|
||||
Category Name
|
||||
</li>
|
||||
<span className="mx-4 mt-[-2px] scale-[3] text-[12px] font-[400] text-blog-text-passive">
|
||||
-
|
||||
</span>
|
||||
<li className="text-[12px] font-[600] capitalize text-blog-text-default">
|
||||
{params.slug.replaceAll(/%20|-|_/g, " ")}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="relative flex w-full items-start justify-center gap-10">
|
||||
<div className="sticky top-[150px] flex w-[5%] flex-col items-start">
|
||||
<Image
|
||||
src={"/images/blog/icons/socials-vertical.svg"}
|
||||
width={35}
|
||||
height={200}
|
||||
alt="socials-vertical icons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative flex w-[90%] flex-wrap gap-5">
|
||||
<img
|
||||
className="w-full"
|
||||
src={"/images/blog/posts/post/1.png"}
|
||||
alt={"post image 1"}
|
||||
/>
|
||||
<p className="text-[20px] font-[400] text-blog-text-default">
|
||||
People’s quest for creating websites has easily taken us to a new
|
||||
era of site development. Where, with the availability of robust
|
||||
page building tools, creating websites has become a lot more fun
|
||||
(especially for non-developers). The multitude of tools and
|
||||
plugins available to you is vast when you try building websites on
|
||||
WordPress. Today we’ll explore a new one,{" "}
|
||||
<span className="text-[20px] font-[400] text-blog-blue">
|
||||
WP Page Builder
|
||||
</span>
|
||||
. If you’re tired of the same old page builder plugins, this is
|
||||
one you should try out.
|
||||
</p>
|
||||
<h2 className="mt-20 text-[28px] font-[600] text-blog-text-default">
|
||||
What’s Special About WP Page Builder?
|
||||
</h2>
|
||||
<p className="text-[20px] font-[400] text-blog-text-default">
|
||||
Wondering what makes WP Page Builder so special? I would say, what
|
||||
doesn’t? It’s developed by the team over at Themeum, who has been
|
||||
creating WordPress themes since 2013. As mentioned above, the
|
||||
plugin is a full pack of essential site building elements with all
|
||||
modern the modern functionality you’ve come to expect from a page
|
||||
builder plugin. Let’s have a look below at all of the juicy
|
||||
features WP Page Builder includes.
|
||||
</p>
|
||||
<img
|
||||
className="w-full"
|
||||
src={"/images/blog/posts/post/2.png"}
|
||||
alt={"post image 2"}
|
||||
/>
|
||||
<p className="text-[20px] font-[400] text-blog-text-default">
|
||||
Here are some of the amazing add-ons included:
|
||||
</p>
|
||||
<ul className="flex list-disc flex-col gap-10">
|
||||
<li className="ms-5 text-[20px] font-[400] text-blog-text-default">
|
||||
<span className="font-bold">Form:</span> Create web forms
|
||||
effortlessly. It gives you a convenient way to style your forms
|
||||
as you desire. The Form add-on itself is capable of setting up
|
||||
any kind of form without needing to install any plugin.
|
||||
Moreover, you can manage form plugins and enable reCAPTCHA with
|
||||
just a simple click. There is also an add-on for Contact Form 7
|
||||
if you prefer.
|
||||
</li>
|
||||
<li className="ms-5 text-[20px] font-[400] text-blog-text-default">
|
||||
<span className="font-bold">Carousel:</span> It’s hard to find
|
||||
an advanced add-on like a carousel in a free page builder
|
||||
plugin, but WP Page Builder lets you create stunning hero
|
||||
sliders without having to pay for it.
|
||||
</li>
|
||||
<li className="ms-5 text-[20px] font-[400] text-blog-text-default">
|
||||
<span className="font-bold">Post Grid:</span> Display blog posts
|
||||
in grids defining the number of posts and styling the look.
|
||||
</li>
|
||||
<li className="ms-5 text-[20px] font-[400] text-blog-text-default">
|
||||
<span className="font-bold">Feature Box:</span> Use the Feature
|
||||
Box add-on to display the features of products on your website.
|
||||
</li>
|
||||
<li className="ms-5 text-[20px] font-[400] text-blog-text-default">
|
||||
<span className="font-bold">Accordion:</span> Need any collapse
|
||||
text content on your site? Use WP Page Builder’s Accordion
|
||||
add-on and modify the style the way you want.
|
||||
</li>
|
||||
</ul>
|
||||
<div className="my-10 flex w-full justify-between">
|
||||
<div className="w-[48%]">
|
||||
<img
|
||||
className="w-full"
|
||||
src={"/images/blog/posts/post/3.png"}
|
||||
alt={"post image 3"}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-[48%]">
|
||||
<img
|
||||
className="w-full"
|
||||
src={"/images/blog/posts/post/4.png"}
|
||||
alt={"post image 4"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className="my-10 text-center text-[24px] font-[400] text-blog-purple">
|
||||
“ WP Page Builder offers a lot of ready-to-use design blocks to
|
||||
make your site development process a lot faster and easier “
|
||||
</p>
|
||||
<div className="flex w-full justify-center">
|
||||
<div className="flex flex-col items-center">
|
||||
<Image
|
||||
src={"/images/blog/users/1.png"}
|
||||
alt={"user 1 image"}
|
||||
width={80}
|
||||
height={80}
|
||||
className="mb-2 rounded-full"
|
||||
/>
|
||||
<Link href={"/blog/authors/parsaaghayi"}>
|
||||
<h3 className="text-center text-[18px] font-[400] capitalize text-blog-text-default hover:underline">
|
||||
parsa aghayi
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="text-[16px] font-[400] text-blog-text-default">
|
||||
Follow me
|
||||
<Link
|
||||
href={"#"}
|
||||
className="ms-1 text-[16px] font-[400] text-blog-blue"
|
||||
>
|
||||
@JohnAMWill
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sticky top-[150px] flex w-[5%] flex-col items-end gap-5">
|
||||
<div className="flex cursor-pointer flex-col gap-1">
|
||||
<Image
|
||||
src={"/images/blog/icons/like.svg"}
|
||||
width={35}
|
||||
height={35}
|
||||
alt="socials-vertical icons"
|
||||
/>
|
||||
<p className="text-[18px] font-[600] text-blog-text-default">
|
||||
12 K
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex cursor-pointer flex-col gap-1">
|
||||
<Image
|
||||
src={"/images/blog/icons/eye.svg"}
|
||||
width={35}
|
||||
height={35}
|
||||
alt="socials-vertical icons"
|
||||
/>
|
||||
<p className="text-[18px] font-[600] text-blog-text-default">
|
||||
25 K
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="my-10 flex w-full flex-wrap gap-10">
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<p className="text-[36px] font-[600] text-blog-text-default">
|
||||
You might also like...
|
||||
</p>
|
||||
<Link
|
||||
href={"#"}
|
||||
className="text-[36px] font-[600] capitalize text-blog-text-passive hover:underline"
|
||||
>
|
||||
more
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex w-full justify-between">
|
||||
<div className="flex w-[45%] flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/1.png"}
|
||||
alt={"category 1"}
|
||||
loading="lazy"
|
||||
width={600}
|
||||
height={500}
|
||||
/>
|
||||
<div className="mb-2 flex w-full flex-wrap gap-2">
|
||||
<div className="flex gap-2">
|
||||
<p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
|
||||
BY
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="whitespace-nowrap text-[14px] font-[400] text-blog-text-default hover:underline md:text-[16px]">
|
||||
TOMAS LAURINAVICIUS
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex w-[45%] flex-col items-center justify-start gap-1 sm:w-[45%]">
|
||||
<Image
|
||||
className="mb-3 rounded-md"
|
||||
src={"/images/blog/posts/2.png"}
|
||||
alt={"post 2"}
|
||||
loading="lazy"
|
||||
width={600}
|
||||
height={500}
|
||||
/>
|
||||
<div className="mb-2 flex w-full flex-wrap gap-2">
|
||||
<div className="flex gap-2">
|
||||
<p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
|
||||
BY
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="whitespace-nowrap text-[14px] font-[400] text-blog-text-default hover:underline md:text-[16px]">
|
||||
TOMAS LAURINAVICIUS
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="whit flex gap-2">
|
||||
<p className="text-[16px] font-[600] text-blog-text-passive">
|
||||
IN
|
||||
</p>
|
||||
<Link href={"#"}>
|
||||
<h2 className="text-[16px] font-[400] text-blog-text-default hover:underline">
|
||||
RESOURCE
|
||||
</h2>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
className="w-full text-start"
|
||||
href={"/blog/posts/UI design"}
|
||||
>
|
||||
<h3 className="text-[24px] font-[600] text-blog-text-default hover:underline">
|
||||
UI design
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
|
||||
Every website is a user interface. Learn to build yours right.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user