forked from duniayetu/www_duniayetu
update banner component
This commit is contained in:
parent
062b06e528
commit
47c5710e54
@ -9,286 +9,64 @@ weight: 1
|
|||||||
|
|
||||||
<!-- section 1 (header) -->
|
<!-- section 1 (header) -->
|
||||||
|
|
||||||
{{ reviews(
|
|
||||||
reviews=[
|
|
||||||
{
|
|
||||||
"title":"Title1",
|
|
||||||
"date":"August 28, 2021",
|
|
||||||
"stars":[3,2],
|
|
||||||
"description":"This is the text which will be used"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title":"Title2",
|
|
||||||
"date":"August 29, 2021",
|
|
||||||
"stars":[4,1],
|
|
||||||
"description":"This is the text which will be used 2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title":"Title3",
|
|
||||||
"date":"August 30, 2022",
|
|
||||||
"stars":[5,0],
|
|
||||||
"description":"This is the text which will be used 3"
|
|
||||||
},
|
|
||||||
])
|
|
||||||
}}
|
|
||||||
|
|
||||||
|
|
||||||
{% row(style="left" margin="none" reverse="rightreserve" padding="bottom") %}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="px-4 md:px-16 lg:px-28">
|
|
||||||
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
|
|
||||||
## h2 title
|
|
||||||
|
|
||||||
|
|
||||||
<!-- {{ youtube(id="5q9maMxvrac") }} -->
|
|
||||||
|
|
||||||
{{ mycomponent(
|
|
||||||
subject="My Subject",
|
|
||||||
items=[
|
|
||||||
"aaa",
|
|
||||||
"bbb",
|
|
||||||
"cccc"
|
|
||||||
]
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### h3 subtitle
|
|
||||||
|
|
||||||
##### Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
||||||
|
|
||||||
<button onclick="yourlink">
|
|
||||||
button
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
|||
|
|
||||||
|
|
||||||
![placeholder](./img/img_header.png#mx-auto)
|
|
||||||
|
|
||||||
{% end %}
|
|
||||||
|
|
||||||
<!-- section 2 (header) -->
|
|
||||||
|
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
|
|
||||||
{% row(style="center" margin="withContainer" padding="none") %}
|
{% content1(
|
||||||
|
|
||||||
## h2 h2 h2
|
content1_title = "Our competitive advantage",
|
||||||
|
content1_text1 = "This is a section of some simple filler text,",
|
||||||
|
content1_text2 = "This is a section of some simple filler text, also known ",
|
||||||
|
|
||||||
### h3 h3 h3
|
) %}
|
||||||
|
|
||||||
|
|
||||||
|
# test
|
||||||
|
{% end %}
|
||||||
|
|
||||||
|
|
||||||
|
{% reviews(
|
||||||
|
reviews_name = "ehab",
|
||||||
|
reviews_date = "12/6/2023"
|
||||||
|
reviews_description = "test test"
|
||||||
|
|
||||||
|
) %},
|
||||||
|
|
||||||
{% end %}
|
{% end %}
|
||||||
|
|
||||||
{% row(style="center" margin="narrow" padding="bottom") %}
|
{% banner(
|
||||||
|
|
||||||
<div class="mx-4 my-4">
|
banner_text = "This is a section of some simple filler text, also known as placeholder text.",
|
||||||
|
banner_button_name = "Learn More"
|
||||||
|
|
||||||
![Image](./img/img_column_item.png#md#mx-auto)
|
) %}
|
||||||
|
|
||||||
#### item 1
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|||
|
|
||||||
|
|
||||||
<div class="mx-4 my-4">
|
|
||||||
|
|
||||||
![Image](./img/img_column_item.png#md#mx-auto)
|
|
||||||
|
|
||||||
#### item 2
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|||
|
|
||||||
|
|
||||||
<div class="mx-4 my-4">
|
|
||||||
|
|
||||||
![Image](./img/img_column_item.png#md#mx-auto)
|
|
||||||
|
|
||||||
#### item 3
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% end %}
|
|
||||||
|
|
||||||
<!-- section 2 security -->
|
|
||||||
|
|
||||||
{% row(style="left" margin="withContainer" padding="bottom") %}
|
|
||||||
|
|
||||||
![placeholder](./img/img_section.png#mx-auto)
|
|
||||||
|
|
||||||
|||
|
|
||||||
|
|
||||||
## h2h2h2
|
|
||||||
|
|
||||||
### h3 subtitle
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam <br>
|
|
||||||
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam<br><br>
|
|
||||||
|
|
||||||
<button onclick="yourlink">
|
|
||||||
button
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{% end %}
|
|
||||||
|
|
||||||
<!-- section 2 security -->
|
|
||||||
|
|
||||||
{% row(style="right" margin="withContainer" padding="bottom") %}
|
|
||||||
|
|
||||||
## h2 h2 h2
|
|
||||||
|
|
||||||
### h3 subtitle
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam <br>
|
|
||||||
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam<br><br>
|
|
||||||
|
|
||||||
<button onclick="yourlink">
|
|
||||||
button
|
|
||||||
</button>
|
|
||||||
|
|
||||||
|||
|
|
||||||
|
|
||||||
![placeholder](./img/img_section.png#mx-auto)
|
|
||||||
|
|
||||||
|
|
||||||
{% end %}
|
|
||||||
|
|
||||||
<!-- section 3 features title -->
|
|
||||||
|
|
||||||
{% row(style="center" margin="narrow" padding="none") %}
|
|
||||||
|
|
||||||
## middle title
|
|
||||||
### subtitle
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
{% end %}
|
|
||||||
|
|
||||||
{% row(style="center" margin="narrow" padding="none") %}
|
|
||||||
|
|
||||||
<div class="mx-4 my-4">
|
|
||||||
|
|
||||||
![Image](./img/img_column.png#sm#mx-auto)
|
|
||||||
|
|
||||||
#### Lorem ipsum
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|||
|
|
||||||
|
|
||||||
<div class="mx-4 my-4">
|
|
||||||
|
|
||||||
![Image](./img/img_column.png#sm#mx-auto)
|
|
||||||
|
|
||||||
#### Lorem ipsum
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|||
|
|
||||||
|
|
||||||
<div class="mx-4 my-4">
|
|
||||||
|
|
||||||
![Image](./img/img_column.png#sm#mx-auto)
|
|
||||||
|
|
||||||
#### Lorem ipsum
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% end %}
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
{% row(style="center" margin="narrow" padding="none") %}
|
|
||||||
|
|
||||||
<div class="mx-4 my-4">
|
|
||||||
|
|
||||||
![Image](./img/img_column.png#sm#mx-auto)
|
|
||||||
|
|
||||||
#### Lorem ipsum
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|||
|
|
||||||
|
|
||||||
<div class="mx-4 my-4">
|
|
||||||
|
|
||||||
![Image](./img/img_column.png#sm#mx-auto)
|
|
||||||
|
|
||||||
#### Lorem ipsum
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|||
|
|
||||||
|
|
||||||
<div class="mx-4 my-4">
|
|
||||||
|
|
||||||
![Image](./img/img_column.png#sm#mx-auto)
|
|
||||||
|
|
||||||
#### Lorem ipsum
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% end %}
|
|
||||||
|
|
||||||
<!-- section 5 subscription -->
|
|
||||||
|
|
||||||
{% row(style="left" margin="withContainer" padding="both") %}
|
|
||||||
|
|
||||||
![](./img/img_portrait.png#mx-auto)
|
|
||||||
|
|
||||||
|||
|
|
||||||
|
|
||||||
## h2 h2 h2
|
|
||||||
### h3 h3 h3 h3
|
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<button onclick="yourlink">
|
|
||||||
button
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{% end %}
|
|
||||||
|
|
||||||
<!-- section 6 in the news -->
|
<!-- section 6 in the news -->
|
||||||
|
|
||||||
{% row(style="center" padding="bottom") %}
|
{% row(style="center" padding="bottom") %}
|
||||||
|
|
||||||
[![logo1](img/logo_bottom.png#small)](yourlink)
|
|
||||||
|
|
||||||
|||
|
|
||||||
|
|
||||||
[![logo2](img/logo_bottom.png#small)](yourlink)
|
|
||||||
|
|
||||||
|||
|
|
||||||
|
|
||||||
[![logo3](img/logo_bottom.png#small)](yourlink)
|
|
||||||
|
|
||||||
|||
|
|
||||||
|
|
||||||
[![logo4](img/logo_bottom.png#small)](yourlink)
|
|
||||||
|
|
||||||
{% end %}
|
{% end %}
|
19
templates/shortcodes/banner.html
Normal file
19
templates/shortcodes/banner.html
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<div class="bg-white pb-6 sm:pb-8 lg:pb-12">
|
||||||
|
<!-- banner - start -->
|
||||||
|
<div class="relative flex flex-wrap bg-indigo-500 px-4 py-3 sm:flex-nowrap sm:items-center sm:justify-center sm:gap-3 sm:pr-8 md:px-8">
|
||||||
|
<div class="order-1 mb-2 inline-block w-11/12 max-w-screen-sm text-sm text-white sm:order-none sm:mb-0 sm:w-auto md:text-base">{{ banner_text }}</div>
|
||||||
|
|
||||||
|
<a href="#" class="order-last inline-block w-full whitespace-nowrap rounded-lg bg-indigo-600 px-4 py-2 text-center text-xs font-semibold text-white outline-none ring-indigo-300 transition duration-100 hover:bg-indigo-700 focus-visible:ring active:bg-indigo-800 sm:order-none sm:w-auto md:text-sm">{{ banner_button_name }}</a>
|
||||||
|
|
||||||
|
<!-- close button - start -->
|
||||||
|
<div class="order-2 flex w-1/12 items-start justify-end sm:absolute sm:right-0 sm:order-none sm:mr-1 sm:w-auto xl:mr-3">
|
||||||
|
<button type="button" class="text-black transition duration-100 hover:text-indigo-100 active:text-indigo-200">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- close button - end -->
|
||||||
|
</div>
|
||||||
|
<!-- banner - end -->
|
||||||
|
</div>
|
31
templates/shortcodes/content1.html
Normal file
31
templates/shortcodes/content1.html
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
<div class="bg-white py-6 sm:py-8 lg:py-12">
|
||||||
|
<div class="mx-auto max-w-screen-md px-4 md:px-8">
|
||||||
|
<h1 class="mb-4 text-center text-2xl font-bold text-gray-800 sm:text-3xl md:mb-6">{{ content1_title }}</h1>
|
||||||
|
|
||||||
|
<p class="mb-6 text-gray-500 sm:text-lg md:mb-8">
|
||||||
|
{{ content1_text }}
|
||||||
|
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="mb-2 text-xl font-semibold text-gray-800 sm:text-2xl md:mb-4">About us</h2>
|
||||||
|
|
||||||
|
<p class="mb-6 text-gray-500 sm:text-lg md:mb-8">This is a section of some simple filler text, also known as placeholder text. It shares some characteristics of a real written text but is random or otherwise generated. It may be used to display a sample of fonts or generate text for testing. Filler text is dummy text which has no meaning however looks very similar to real text.</p>
|
||||||
|
|
||||||
|
<ul class="mb-6 list-inside list-disc text-gray-500 sm:text-lg md:mb-8">
|
||||||
|
<li>This is a section of some simple filler text</li>
|
||||||
|
<li>Also known as placeholder text</li>
|
||||||
|
<li>It shares some characteristics of a real written text</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<blockquote class="mb-6 border-l-4 pl-4 italic text-gray-500 sm:text-lg md:mb-8 md:pl-6">“This is a section of some simple filler text, also known as placeholder text. It shares some characteristics of a real written text but is random or otherwise generated.”</blockquote>
|
||||||
|
|
||||||
|
<div class="relative mb-6 overflow-hidden rounded-lg bg-gray-100 shadow-lg md:mb-8">
|
||||||
|
<img src="https://images.unsplash.com/photo-1593508512255-86ab42a8e620?auto=format&q=75&fit=crop&w=600&h=350" loading="lazy" alt="Photo by Minh Pham" class="h-full w-full object-cover object-center" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="mb-2 text-xl font-semibold text-gray-800 sm:text-2xl md:mb-4">Features</h2>
|
||||||
|
|
||||||
|
<p class="text-gray-500 sm:text-lg">This is a section of some simple filler text, also known as placeholder text. It shares some characteristics of a real written text but is random or otherwise generated. It may be used to display a sample of fonts or generate text for testing. Filler text is dummy text which has no meaning however looks very similar to real text.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -46,10 +46,11 @@
|
|||||||
|
|
||||||
<div class="divide-y">
|
<div class="divide-y">
|
||||||
<!-- review - start -->
|
<!-- review - start -->
|
||||||
|
|
||||||
<div class="flex flex-col gap-3 py-4 md:py-8">
|
<div class="flex flex-col gap-3 py-4 md:py-8">
|
||||||
<div>
|
<div>
|
||||||
<span class="block text-sm font-bold">John McCulling</span>
|
<span class="block text-sm font-bold">{{ reviews_name }}</span>
|
||||||
<span class="block text-sm text-gray-500">August 28, 2021</span>
|
<span class="block text-sm text-gray-500">{{ reviews_date }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- stars - start -->
|
<!-- stars - start -->
|
||||||
@ -76,78 +77,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- stars - end -->
|
<!-- stars - end -->
|
||||||
|
|
||||||
<p class="text-gray-600">This is a section of some simple filler text, also known as placeholder text. It shares some characteristics of a real written text but is random or otherwise generated. It may be used to display a sample of fonts or generate text for testing.</p>
|
<p class="text-gray-600">{{ reviews_description }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- review - end -->
|
<!-- review - end -->
|
||||||
|
|
||||||
<!-- review - start -->
|
|
||||||
<div class="flex flex-col gap-3 py-4 md:py-8">
|
|
||||||
<div>
|
|
||||||
<span class="block text-sm font-bold">Kate Berg</span>
|
|
||||||
<span class="block text-sm text-gray-500">July 21, 2021</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- stars - start -->
|
|
||||||
<div class="-ml-1 flex gap-0.5">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
|
|
||||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
|
|
||||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
|
|
||||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
|
|
||||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
|
|
||||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<!-- stars - end -->
|
|
||||||
|
|
||||||
<p class="text-gray-600">This is a section of some simple filler text, also known as placeholder text. It shares some characteristics of a real written text but is random or otherwise generated. It may be used to display a sample of fonts or generate text for testing.</p>
|
|
||||||
</div>
|
|
||||||
<!-- review - end -->
|
|
||||||
|
|
||||||
<!-- review - start -->
|
|
||||||
<div class="flex flex-col gap-3 py-4 md:py-8">
|
|
||||||
<div>
|
|
||||||
<span class="block text-sm font-bold">Greg Jackson</span>
|
|
||||||
<span class="block text-sm text-gray-500">March 16, 2021</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- stars - start -->
|
|
||||||
<div class="-ml-1 flex gap-0.5">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
|
|
||||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
|
|
||||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
|
|
||||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-300" viewBox="0 0 20 20" fill="currentColor">
|
|
||||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-300" viewBox="0 0 20 20" fill="currentColor">
|
|
||||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<!-- stars - end -->
|
|
||||||
|
|
||||||
<p class="text-gray-600">This is a section of some simple filler text, also known as placeholder text. It shares some characteristics of a real written text but is random or otherwise generated. It may be used to display a sample of fonts or generate text for testing.</p>
|
|
||||||
</div>
|
|
||||||
<!-- review - end -->
|
<!-- review - end -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user