mrwyndham
/
fastpocket
1
2
Fork 3
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

fixing VerticalTabsFeature.tsx #4

Merged
mrwyndham merged 2 commits from bugfix-VerticalTabsFeature into main 2024-06-18 20:29:20 +00:00
Conversation 0 Commits 2 Files Changed 1 +3692 -17
2 changed files with 3692 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2a13a7725a - Show all commits

34
Frontend/sections/Features/VerticalTabsFeature.tsx
View File

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

3675
Frontend/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff