fixing VerticalTabsFeature.tsx

This commit is contained in:
Ciro de Oliveira 2024-05-02 18:08:54 -03:00
parent 3eebc2770d
commit 2a13a7725a
2 changed files with 3692 additions and 17 deletions

View File

@ -12,7 +12,7 @@ function VerticalTabsFeature() {
{/* Grid */}
<div className="relative z-10 lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center">
<div className="mb-10 lg:mb-0 lg:col-span-6 lg:col-start-8 lg:order-2">
<h2 className="text-2xl text-base-content font-bold sm:text-3xl ">
<h2 className="text-2xl text-secondary-content font-bold sm:text-3xl ">
Save 20+ hours of app development with FastPocket
</h2>
{/* Tab Navs */}
@ -27,13 +27,13 @@ function VerticalTabsFeature() {
tab === "1" && "bg-base-300 shadow-lg hover:bg-base-300"
} text-start p-4 md:p-5 rounded-xl`}
id="tabs-with-card-item-1"
aria-controls="tabs-with-card-1"
aria-controls="tabs-with-card-item-1"
role="tab"
onClick={() => setTab("1")}
>
<span className="flex">
<svg
className="flex-shrink-0 mt-2 size-6 md:size-7 text-base-content "
className="flex-shrink-0 mt-2 size-6 md:size-7 text-secondary-content "
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
@ -51,10 +51,10 @@ function VerticalTabsFeature() {
<path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" />
</svg>
<span className="grow ms-6">
<span className="block text-lg font-semibold text-base-content ">
<span className="block text-lg font-semibold text-secondary-content ">
Simple Setup
</span>
<span className="block mt-1 text-base-content ">
<span className="block mt-1 text-secondary-content ">
FastPocket already has a codebase with all of the
necessary integrations to start an online business out
of the box AND excellent documentation
@ -68,13 +68,13 @@ function VerticalTabsFeature() {
tab === "2" && "bg-base-300 shadow-lg hover:bg-base-300"
} text-start p-4 md:p-5 rounded-xl `}
id="tabs-with-card-item-2"
aria-controls="tabs-with-card-2"
aria-controls="tabs-with-card-item-2"
role="tab"
onClick={() => setTab("2")}
>
<span className="flex">
<svg
className="flex-shrink-0 mt-2 size-6 md:size-7 text-base-content "
className="flex-shrink-0 mt-2 size-6 md:size-7 text-secondary-content "
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
@ -89,10 +89,10 @@ function VerticalTabsFeature() {
<path d="M3.34 19a10 10 0 1 1 17.32 0" />
</svg>
<span className="grow ms-6">
<span className="block text-lg font-semibold text-base-content ">
<span className="block text-lg font-semibold text-secondary-content ">
Copy Paste Components
</span>
<span className="block mt-1 text-base-content ">
<span className="block mt-1 text-secondary-content ">
We give you cookie cutter copy paste setup for your SaaS
with unopinionated SaaS styling that can be modified to
suite whatever app you are building
@ -106,13 +106,13 @@ function VerticalTabsFeature() {
tab === "3" && "bg-base-300 shadow-lg hover:bg-base-300"
} text-start p-4 md:p-5 rounded-xl `}
id="tabs-with-card-item-3"
aria-controls="tabs-with-card-3"
aria-controls="tabs-with-card-item-3"
role="tab"
onClick={() => setTab("3")}
>
<span className="flex">
<svg
className="flex-shrink-0 mt-2 size-6 md:size-7 text-base-content "
className="flex-shrink-0 mt-2 size-6 md:size-7 text-secondary-content "
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
@ -130,10 +130,10 @@ function VerticalTabsFeature() {
<path d="M17 19h4" />
</svg>
<span className="grow ms-6">
<span className="block text-lg font-semibold text-base-content ">
<span className="block text-lg font-semibold text-secondary-content ">
Simple Bring Your Own Backend
</span>
<span className="block mt-1 text-base-content ">
<span className="block mt-1 text-secondary-content ">
We offer deployment templates that allow you to deploy
to Digital Ocean, Fly.io, Pockethost or any other
backend you want to use. You have the control over your
@ -157,7 +157,7 @@ function VerticalTabsFeature() {
aria-labelledby="tabs-with-card-item-1"
>
<Image
className="shadow-xl shadow-gray-200 rounded-xl dark:shadow-gray-900/[.2] bg-base-300"
className="shadow-xl shadow-base-200 rounded-xl bg-base-300"
src="/images/vertical-tabs-feature-1.png"
alt="Image Description"
width="987"
@ -172,7 +172,7 @@ function VerticalTabsFeature() {
aria-labelledby="tabs-with-card-item-2"
>
<Image
className="shadow-xl shadow-gray-200 rounded-xl dark:shadow-gray-900/[.2] bg-base-300"
className="shadow-xl shadow-base-200 rounded-xl bg-base-300"
src="/images/vertical-tabs-feature-2.png"
alt="Image Description"
width="987"
@ -187,7 +187,7 @@ function VerticalTabsFeature() {
aria-labelledby="tabs-with-card-item-3"
>
<Image
className="shadow-xl shadow-gray-200 rounded-xl dark:shadow-gray-900/[.2] bg-base-300"
className="shadow-xl shadow-base-200 rounded-xl bg-base-300"
src="/images/vertical-tabs-feature-3.png"
alt="Image Description"
width="987"
@ -235,7 +235,7 @@ function VerticalTabsFeature() {
{/* End Grid */}
{/* Background Color */}
<div className="absolute inset-0 grid grid-cols-12 size-full">
<div className="col-span-full lg:col-span-7 lg:col-start-6 bg-gray-100 w-full h-5/6 rounded-xl sm:h-3/4 lg:h-full dark:bg-base-300/[.075]" />
<div className="col-span-full lg:col-span-7 lg:col-start-6 bg-base-300 w-full h-5/6 rounded-xl sm:h-3/4 lg:h-full" />
</div>
{/* End Background Color */}
</div>

3675
Frontend/yarn.lock Normal file

File diff suppressed because it is too large Load Diff