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 */}
<div className="md:col-span-3 space-y-6">
{/* 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
type="radio"
name="my-accordion-3"
@ -43,7 +43,7 @@ function RightAlignedBorderBottomFAQ() {
</div>
</div>
{/* What do I get exactly? */}
<div className="collapse collapse-plus bg-base-200">
<div className="collapse collapse-plus bg-base-300">
<input
type="radio"
name="my-accordion-3"
@ -68,7 +68,7 @@ function RightAlignedBorderBottomFAQ() {
</div>
</div>
{/* Is it a website template? */}
<div className="collapse collapse-plus bg-base-200">
<div className="collapse collapse-plus bg-base-300">
<input
type="radio"
name="my-accordion-3"
@ -89,7 +89,7 @@ function RightAlignedBorderBottomFAQ() {
</div>
</div>
{/* How is FastPocket different from other boilerplates */}
<div className="collapse collapse-plus bg-base-200">
<div className="collapse collapse-plus bg-base-300">
<input
type="radio"
name="my-accordion-3"
@ -108,7 +108,7 @@ function RightAlignedBorderBottomFAQ() {
</div>
</div>
{/* How is FastPocket different from other boilerplates */}
<div className="collapse collapse-plus bg-base-200">
<div className="collapse collapse-plus bg-base-300">
<input
type="radio"
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 Image from "next/image";
import React from "react";
@ -6,25 +7,32 @@ const SquaredBackgroundHero = () => {
return (
<>
{/* Hero */}
<Background>
<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 */}
<div className="grid md:grid-cols-2 gap-4 md:gap-0 xl:gap-20 md:items-center">
<div>
<h1 className="block text-3xl font-bold sm:text-4xl lg:text-6xl lg:leading-tight">
<div className="grid md:grid-cols-2 md:gap-0 xl:gap-20 md:items-center grid-flow-dense">
<div className="order-1">
<h1 className="block text-4xl font-extrabold sm:text-4xl lg:text-6xl leading-tight">
Build your app fast with{" "}
<span className="text-primary">{title}</span>
</h1>
<p className="mt-3 text-lg text-secondary-content">
Join in a tight knit community of like minded makers as we build
apps using Pocketbase and React
Join in a tight knit community of like minded makers as we
build apps using Pocketbase and React
</p>
{/* Buttons */}
<div className="mt-7 grid gap-3 w-full sm:inline-flex">
<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"
>
<Image
alt="fastpocket-icon"
src="/images/icon.png"
width="32"
height="32"
/>
Get FastPocket
<svg
className="flex-shrink-0 size-4"
@ -115,7 +123,8 @@ const SquaredBackgroundHero = () => {
</svg>
</div>
<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>
<div className="mt-5">
{/* Star */}
@ -230,7 +239,8 @@ const SquaredBackgroundHero = () => {
</svg>
</div>
<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>
<div className="mt-5">
{/* Star */}
@ -259,7 +269,7 @@ const SquaredBackgroundHero = () => {
{/* End Review */}
</div>
{/* End Col */}
<div className="relative ms-4">
<div className="-order-1 relative mr-4 sm:mr-0 sm:ms-4 sm:order-1">
<Image
className="w-full rounded-md"
width="700"
@ -274,6 +284,7 @@ const SquaredBackgroundHero = () => {
{/* End Grid */}
</div>
</div>
</Background>
{/* End Hero */}
</>
);