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

feature - added minor styling changes

This commit is contained in:
James Wyndham 2024-03-21 09:45:02 +08:00
parent acf59e8c24
commit 4cdb73a9fd
4 changed files with 269 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Frontend/public/images/fastpocket-diagram.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 139 KiB

BIN
Frontend/public/images/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

10
Frontend/sections/FAQ/RightAlignedBorderBottomFAQ.tsx
View File

@ -23,7 +23,7 @@ function RightAlignedBorderBottomFAQ() {
{/* Accordion */} {/* Accordion */}
<div className="md:col-span-3 space-y-6"> <div className="md:col-span-3 space-y-6">
{/* My tech stack is different can I still use it? */} {/* My tech stack is different can I still use it? */}
<div className="collapse collapse-plus bg-base-200"> <div className="collapse collapse-plus bg-base-300">
<input <input
type="radio" type="radio"
name="my-accordion-3" name="my-accordion-3"
@ -43,7 +43,7 @@ function RightAlignedBorderBottomFAQ() {
</div> </div>
</div> </div>
{/* What do I get exactly? */} {/* What do I get exactly? */}
<div className="collapse collapse-plus bg-base-200"> <div className="collapse collapse-plus bg-base-300">
<input <input
type="radio" type="radio"
name="my-accordion-3" name="my-accordion-3"
@ -68,7 +68,7 @@ function RightAlignedBorderBottomFAQ() {
</div> </div>
</div> </div>
{/* Is it a website template? */} {/* Is it a website template? */}
<div className="collapse collapse-plus bg-base-200"> <div className="collapse collapse-plus bg-base-300">
<input <input
type="radio" type="radio"
name="my-accordion-3" name="my-accordion-3"
@ -89,7 +89,7 @@ function RightAlignedBorderBottomFAQ() {
</div> </div>
</div> </div>
{/* How is FastPocket different from other boilerplates */} {/* How is FastPocket different from other boilerplates */}
<div className="collapse collapse-plus bg-base-200"> <div className="collapse collapse-plus bg-base-300">
<input <input
type="radio" type="radio"
name="my-accordion-3" name="my-accordion-3"
@ -108,7 +108,7 @@ function RightAlignedBorderBottomFAQ() {
</div> </div>
</div> </div>
{/* How is FastPocket different from other boilerplates */} {/* How is FastPocket different from other boilerplates */}
<div className="collapse collapse-plus bg-base-200"> <div className="collapse collapse-plus bg-base-300">
<input <input
type="radio" type="radio"
name="my-accordion-3" name="my-accordion-3"

31
Frontend/sections/Hero/SquaredBackgroundHero.tsx
View File

@ -1,3 +1,4 @@
import Background from "@/components/Utilities/Background";
import { title } from "@/constants"; import { title } from "@/constants";
import Image from "next/image"; import Image from "next/image";
import React from "react"; import React from "react";
@ -6,25 +7,32 @@ const SquaredBackgroundHero = () => {
return ( return (
<> <>
{/* Hero */} {/* Hero */}
<Background>
<div className="h-screen w-screen flex items-center"> <div className="h-screen w-screen flex items-center">
<div className="pt-48 md:max-w-[50rem] xl:max-w-[60rem] mx-auto px-6 sm:px-6 lg:px-8 md:pt-0"> <div className="pt-12 md:max-w-[50rem] xl:max-w-[60rem] mx-auto px-6 sm:px-6 lg:px-8 md:pt-0">
{/* Grid */} {/* Grid */}
<div className="grid md:grid-cols-2 gap-4 md:gap-0 xl:gap-20 md:items-center"> <div className="grid md:grid-cols-2 md:gap-0 xl:gap-20 md:items-center grid-flow-dense">
<div> <div className="order-1">
<h1 className="block text-3xl font-bold sm:text-4xl lg:text-6xl lg:leading-tight"> <h1 className="block text-4xl font-extrabold sm:text-4xl lg:text-6xl leading-tight">
Build your app fast with{" "} Build your app fast with{" "}
<span className="text-primary">{title}</span> <span className="text-primary">{title}</span>
</h1> </h1>
<p className="mt-3 text-lg text-secondary-content"> <p className="mt-3 text-lg text-secondary-content">
Join in a tight knit community of like minded makers as we build Join in a tight knit community of like minded makers as we
apps using Pocketbase and React build apps using Pocketbase and React
</p> </p>
{/* Buttons */} {/* Buttons */}
<div className="mt-7 grid gap-3 w-full sm:inline-flex"> <div className="mt-7 grid gap-3 w-full sm:inline-flex">
<a <a
className="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-primary text-primary-content hover:bg-opacity-60 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" className="py-3 px-4 inline-flex justify-center items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent bg-primary text-primary-content hover:bg-opacity-60 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
href="https://buy.stripe.com/4gwaGQa9egxb5rO9AA" href="https://buy.stripe.com/4gwaGQa9egxb5rO9AA"
> >
<Image
alt="fastpocket-icon"
src="/images/icon.png"
width="32"
height="32"
/>
Get FastPocket Get FastPocket
<svg <svg
className="flex-shrink-0 size-4" className="flex-shrink-0 size-4"
@ -115,7 +123,8 @@ const SquaredBackgroundHero = () => {
</svg> </svg>
</div> </div>
<p className="mt-3 text-sm"> <p className="mt-3 text-sm">
<span className="font-bold">4.6</span> /5 - from 12k reviews <span className="font-bold">4.6</span> /5 - from 12k
reviews
</p> </p>
<div className="mt-5"> <div className="mt-5">
{/* Star */} {/* Star */}
@ -230,7 +239,8 @@ const SquaredBackgroundHero = () => {
</svg> </svg>
</div> </div>
<p className="mt-3 text-sm"> <p className="mt-3 text-sm">
<span className="font-bold">4.8</span> /5 - from 5k reviews <span className="font-bold">4.8</span> /5 - from 5k
reviews
</p> </p>
<div className="mt-5"> <div className="mt-5">
{/* Star */} {/* Star */}
@ -259,7 +269,7 @@ const SquaredBackgroundHero = () => {
{/* End Review */} {/* End Review */}
</div> </div>
{/* End Col */} {/* End Col */}
<div className="relative ms-4"> <div className="-order-1 relative mr-4 sm:mr-0 sm:ms-4 sm:order-1">
<Image <Image
className="w-full rounded-md" className="w-full rounded-md"
width="700" width="700"
@ -274,6 +284,7 @@ const SquaredBackgroundHero = () => {
{/* End Grid */} {/* End Grid */}
</div> </div>
</div> </div>
</Background>
{/* End Hero */} {/* End Hero */}
</> </>
); );