Skip to content

Commit

Permalink
Update - Simplify section components
Browse files Browse the repository at this point in the history
  • Loading branch information
@markmead
markmead committed Nov 22, 2024
1 parent 8530a18 commit fd3040e
Show file tree
Hide file tree
Showing 10 changed files with 77 additions and 870 deletions.
218 changes: 19 additions & 199 deletions public/components/marketing-sections/1.html
View file
Original file line number Diff line number Diff line change
@@ -1,206 +1,26 @@
<section class="bg-gray-900 text-white">
<div class="max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16">
<div class="max-w-xl">
<h2 class="text-3xl font-bold sm:text-4xl">What makes us special</h2>

<p class="mt-4 text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dolores iure fugit totam
iste obcaecati. Consequatur ipsa quod ipsum sequi culpa delectus, cumque id tenetur
quibusdam, quos fuga minima.
</p>
</div>

<div class="mt-8 grid grid-cols-1 gap-8 md:mt-16 md:grid-cols-2 md:gap-12 lg:grid-cols-3">
<div class="flex items-start gap-4">
<span class="shrink-0 rounded-lg bg-gray-800 p-4">
<svg
class="size-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M12 14l9-5-9-5-9 5 9 5z"></path>
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
></path>
</svg>
</span>

<div>
<h2 class="text-lg font-bold">Lorem, ipsum dolor.</h2>

<p class="mt-1 text-sm text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error cumque tempore est ab
possimus quisquam reiciendis tempora animi! Quaerat, saepe?
</p>
</div>
</div>

<div class="flex items-start gap-4">
<span class="shrink-0 rounded-lg bg-gray-800 p-4">
<svg
class="size-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M12 14l9-5-9-5-9 5 9 5z"></path>
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
></path>
</svg>
</span>

<div>
<h2 class="text-lg font-bold">Lorem, ipsum dolor.</h2>

<p class="mt-1 text-sm text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error cumque tempore est ab
possimus quisquam reiciendis tempora animi! Quaerat, saepe?
</p>
</div>
</div>

<div class="flex items-start gap-4">
<span class="shrink-0 rounded-lg bg-gray-800 p-4">
<svg
class="size-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M12 14l9-5-9-5-9 5 9 5z"></path>
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
></path>
</svg>
</span>

<div>
<h2 class="text-lg font-bold">Lorem, ipsum dolor.</h2>

<p class="mt-1 text-sm text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error cumque tempore est ab
possimus quisquam reiciendis tempora animi! Quaerat, saepe?
<section>
<div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 md:items-center md:gap-8">
<div>
<div class="max-w-lg md:max-w-none">
<h2 class="text-2xl font-semibold text-gray-900 sm:text-3xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</h2>

<p class="mt-4 text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe
architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas
sequi.
</p>
</div>
</div>

<div class="flex items-start gap-4">
<span class="shrink-0 rounded-lg bg-gray-800 p-4">
<svg
class="size-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M12 14l9-5-9-5-9 5 9 5z"></path>
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
></path>
</svg>
</span>

<div>
<h2 class="text-lg font-bold">Lorem, ipsum dolor.</h2>

<p class="mt-1 text-sm text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error cumque tempore est ab
possimus quisquam reiciendis tempora animi! Quaerat, saepe?
</p>
</div>
</div>

<div class="flex items-start gap-4">
<span class="shrink-0 rounded-lg bg-gray-800 p-4">
<svg
class="size-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M12 14l9-5-9-5-9 5 9 5z"></path>
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
></path>
</svg>
</span>

<div>
<h2 class="text-lg font-bold">Lorem, ipsum dolor.</h2>

<p class="mt-1 text-sm text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error cumque tempore est ab
possimus quisquam reiciendis tempora animi! Quaerat, saepe?
</p>
</div>
</div>

<div class="flex items-start gap-4">
<span class="shrink-0 rounded-lg bg-gray-800 p-4">
<svg
class="size-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M12 14l9-5-9-5-9 5 9 5z"></path>
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
></path>
</svg>
</span>

<div>
<h2 class="text-lg font-bold">Lorem, ipsum dolor.</h2>

<p class="mt-1 text-sm text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error cumque tempore est ab
possimus quisquam reiciendis tempora animi! Quaerat, saepe?
</p>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1731690415686-e68f78e2b5bd?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
class="rounded"
alt=""
/>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit fd3040e

Please sign in to comment.