Skip to content

Commit

Permalink
style: fix styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@xn1cklas
xn1cklas committed Sep 7, 2024
1 parent 8c88b35 commit 4d4af8c
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 106 deletions.
11 changes: 5 additions & 6 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
"use client";

import { Section } from "@/components/Section";
import { Pricing } from "@/components/Pricing";

// import GetStartedButton from "@/components/Auth/GetStartedButton";
// import Button from "@/components/ui/atoms/button";

export default function Page() {
return (
<div className="flex w-full flex-col items-center">
<Section className="flex flex-col gap-y-24 md:py-24">
<div className="flex w-full flex-col items-center max-w-[100vw] md:max-w-7xl ">
<section className="flex flex-col gap-y-24 md:pt-24">
<div className="flex w-full flex-col items-center gap-24 md:pb-16">
<div className="relative z-20 flex w-full flex-col items-center gap-y-12 text-center">
<a
Expand Down Expand Up @@ -37,10 +36,10 @@ export default function Page() {
<div className="z-20 flex flex-row items-center gap-x-4"></div>
</div>
</div>
</Section>
<Section>
</section>
<section className="relative flex w-full flex-col items-center justify-stretch dark:bg-black">
<Pricing />
</Section>
</section>
</div>
);
}
13 changes: 1 addition & 12 deletions src/components/LandingLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,5 @@ const LandingPageTopbar = () => {
};

const LandingPageFooter = () => {
return (
// <motion.div
// className="dark:bg-polar-900 flex w-full flex-col items-center justify-center bg-white"
// initial="initial"
// variants={{ initial: { opacity: 0 }, animate: { opacity: 1 } }}
// transition={{ duration: 0.5, ease: "easeInOut" }}
// whileInView="animate"
// viewport={{ once: true }}
// >
<Footer wide={true} />
// </motion.div>
);
return <Footer wide={true} />;
};
210 changes: 123 additions & 87 deletions src/components/Pricing.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,124 @@
import { CheckIcon } from "lucide-react";
import { useState } from "react";
import { Button } from "./ui/button";

export function Pricing() {
const [isAnnual, setIsAnnual] = useState(false);

return (
<div>
<h1>Pricing</h1>
<div className="flex gap-8">
<PriceComponent />
<PriceComponent />
<PriceComponent />
<div className="container mx-auto px-4">
<h1 className="text-3xl font-bold text-center mb-8">Pricing</h1>
<div className="flex justify-center mb-8">
<div className="inline-flex rounded-md shadow-sm" role="group">
<Button
variant={isAnnual ? "outline" : "default"}
className="rounded-r-none"
onClick={() => setIsAnnual(false)}
>
Monthly
</Button>
<Button
variant={isAnnual ? "default" : "outline"}
className="rounded-l-none"
onClick={() => setIsAnnual(true)}
>
Annual
</Button>
</div>
</div>
<div className="flex flex-col md:flex-row gap-8 w-full mx-auto">
{pricingData.map((plan) => (
<div key={plan.id} className="flex-1 w-full md:w-auto">
<PriceComponent {...plan} isAnnual={isAnnual} />
</div>
))}
</div>
</div>
);
}

function PriceComponent() {
interface PriceComponentProps {
id: string;
title: string;
forType: string;
monthlyPrice: string;
annualPrice: string;
description: string;
features: string[];
isAnnual: boolean;
}

const pricingData: Omit<PriceComponentProps, "isAnnual">[] = [
{
id: "basic",
title: "Basic Plan",
forType: "For Individuals",
monthlyPrice: "$9",
annualPrice: "$90",
description:
"Get started with our basic features. Perfect for individual creators and small projects.",
features: [
"Private GitHub repository",
"Discord Support Channel",
"License Key",
"Binary Downloads",
],
},
{
id: "pro",
title: "Pro Plan",
forType: "For Teams",
monthlyPrice: "$29",
annualPrice: "$290",
description:
"Upgrade to Pro for advanced features and priority support. Ideal for growing teams and businesses.",
features: [
"Everything in Basic",
"Team Collaboration Tools",
"Advanced Analytics",
"Priority Support",
"Custom Integrations",
],
},
{
id: "enterprise",
title: "Enterprise",
forType: "For Large Organizations",
monthlyPrice: "Custom",
annualPrice: "Custom",
description:
"Tailored solutions for large-scale deployments with dedicated support and custom features.",
features: [
"Everything in Pro",
"Dedicated Account Manager",
"On-premise Deployment Option",
"Custom SLA",
"Advanced Security Features",
],
},
];

function PriceComponent({
id,
title,
forType,
monthlyPrice,
annualPrice,
description,
features,
isAnnual,
}: PriceComponentProps) {
const price = isAnnual ? annualPrice : monthlyPrice;
const period = isAnnual ? "/year" : "/mo";

return (
<div className="flex h-full flex-col">
<div
className="border bg-white text-gray-950 shadow-none dark:text-white dark:bg-polar-900 rounded-4xl relative flex flex-col gap-y-6 overflow-hidden border-none hover:bg-gray-50 p-8 min-h-[400px] h-full"
id="Just an Example"
id={id}
data-sentry-element="Card"
data-sentry-component="SubscriptionTierCard"
data-sentry-source-file="SubscriptionTierCard.tsx"
// style="--var-bg-color: rgba(31, 211, 154, 0.2); --var-border-color: rgba(31, 211, 154, 0.2); --var-muted-color: rgba(31, 211, 154, 0.7); --var-fg-color: #1fd39a; --var-dark-glow-color: rgba(31, 211, 154, 0.05); --var-dark-border-color: rgba(31, 211, 154, 0.15); --var-dark-muted-color: rgba(31, 211, 154, 0.5); --var-dark-fg-color: #1fd39a; --x: 101.828125; --y: 93.75;"
>
<div
className="pointer-events-none absolute h-[800px] w-[800px] opacity-0 transition-opacity duration-300"
Expand All @@ -30,11 +128,11 @@ function PriceComponent() {
<div className="flex flex-col gap-y-4">
<div className="flex flex-row items-center justify-between">
<span className="dark:text-polar-500 text-xs text-gray-500">
For Individuals
{forType}
</span>
</div>
<div className="flex justify-between">
<h3 className="truncate font-medium text-lg">Just an Example</h3>
<h3 className="truncate font-medium text-lg">{title}</h3>
<div
className="inline-flex items-center text-[--var-icon-color] h-8! w-8! ml-2 text-2xl"
// style="--var-icon-color: #1fd39a;"
Expand All @@ -53,16 +151,13 @@ function PriceComponent() {
</div>
<div className="flex flex-col gap-y-8 text-[--var-fg-color] dark:text-[--var-dark-fg-color]">
<div className="text-5xl !font-[200]">
$9
{price}
<span className="dark:text-polar-500 ml-2 text-xl font-normal text-gray-500">
/mo
{period}
</span>
</div>
<div className="text-sm prose dark:prose-invert prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl prose-h4:text-lg prose-h5:text-md prose-h6:text-sm dark:prose-headings:text-polar-50 dark:text-polar-300 max-h-64 max-w-4xl overflow-hidden text-gray-800">
<p>
Polar has no monthly fees. This tier is only an example of what
you could offer your audience in minutes using Polar.
</p>
<p>{description}</p>
</div>
</div>
</div>
Expand All @@ -76,76 +171,17 @@ function PriceComponent() {
data-sentry-element="CardContent"
data-sentry-source-file="SubscriptionTierCard.tsx"
>
<div className="flex flex-row items-start text-[--var-fg-color] dark:text-[--var-dark-fg-color]">
<span className="flex h-6 w-6 shrink-0 flex-row items-center justify-center rounded-full bg-[--var-border-color] text-[14px] dark:bg-[--var-dark-border-color]">
<svg
className="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit h-4 w-4 css-1cw4hi4"
focusable="false"
aria-hidden="true"
viewBox="0 0 24 24"
data-testid="GitHubIcon"
>
<path d="M12 1.27a11 11 0 00-3.48 21.46c.55.09.73-.28.73-.55v-1.84c-3.03.64-3.67-1.46-3.67-1.46-.55-1.29-1.28-1.65-1.28-1.65-.92-.65.1-.65.1-.65 1.1 0 1.73 1.1 1.73 1.1.92 1.65 2.57 1.2 3.21.92a2 2 0 01.64-1.47c-2.47-.27-5.04-1.19-5.04-5.5 0-1.1.46-2.1 1.2-2.84a3.76 3.76 0 010-2.93s.91-.28 3.11 1.1c1.8-.49 3.7-.49 5.5 0 2.1-1.38 3.02-1.1 3.02-1.1a3.76 3.76 0 010 2.93c.83.74 1.2 1.74 1.2 2.94 0 4.21-2.57 5.13-5.04 5.4.45.37.82.92.82 2.02v3.03c0 .27.1.64.73.55A11 11 0 0012 1.27"></path>
</svg>
</span>
<span className="ml-3 text-sm leading-relaxed">
Private GitHub repository
</span>
</div>
<div className="flex flex-row items-start text-[--var-fg-color] dark:text-[--var-dark-fg-color]">
<span className="flex h-6 w-6 shrink-0 flex-row items-center justify-center rounded-full bg-[--var-border-color] text-[14px] dark:bg-[--var-dark-border-color]">
<svg
viewBox="0 -28.5 256 256"
version="1.1"
preserveAspectRatio="xMidYMid"
fill="currentColor"
width="16"
height="16"
>
<g data-sentry-element="g" data-sentry-source-file="utils.tsx">
<path
d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
fill-rule="nonzero"
data-sentry-element="path"
data-sentry-source-file="utils.tsx"
></path>
</g>
</svg>
</span>
<span className="ml-3 text-sm leading-relaxed">
Discord Support Channel
</span>
</div>
<div className="flex flex-row items-start text-[--var-fg-color] dark:text-[--var-dark-fg-color]">
<span className="flex h-6 w-6 shrink-0 flex-row items-center justify-center rounded-full bg-[--var-border-color] text-[14px] dark:bg-[--var-dark-border-color]">
<svg
className="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit h-4 w-4 css-1cw4hi4"
focusable="false"
aria-hidden="true"
viewBox="0 0 24 24"
data-testid="KeyOutlinedIcon"
>
<path d="M21 10h-8.35C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H13l2 2 2-2 2 2 4-4.04zM7 15c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3"></path>
</svg>
</span>
<span className="ml-3 text-sm leading-relaxed">License Key</span>
</div>
<div className="flex flex-row items-start text-[--var-fg-color] dark:text-[--var-dark-fg-color]">
<span className="flex h-6 w-6 shrink-0 flex-row items-center justify-center rounded-full bg-[--var-border-color] text-[14px] dark:bg-[--var-dark-border-color]">
<svg
className="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit h-4 w-4 css-1cw4hi4"
focusable="false"
aria-hidden="true"
viewBox="0 0 24 24"
data-testid="FileDownloadOutlinedIcon"
>
<path d="M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3zm-1-4-1.41-1.41L13 12.17V4h-2v8.17L8.41 9.59 7 11l5 5z"></path>
</svg>
</span>
<span className="ml-3 text-sm leading-relaxed">
Binary Downloads
</span>
</div>
{features.map((feature, index) => (
<div
key={index}
className="flex flex-row items-start text-[--var-fg-color] dark:text-[--var-dark-fg-color]"
>
<span className="flex h-6 w-6 shrink-0 flex-row items-center justify-center rounded-full bg-[--var-border-color] text-[14px] dark:bg-[--var-dark-border-color]">
<CheckIcon />
</span>
<span className="ml-3 text-sm leading-relaxed">{feature}</span>
</div>
))}
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const Section = ({
>
<div
className={twMerge(
"flex w-full max-w-[100vw] flex-col px-4 py-16 md:max-w-7xl md:px-12 md:py-32",
"flex w-full max-w-[100vw] flex-col px-4 py-16 md:max-w-7xl md:px-12 md:py-16",
className
)}
>
Expand Down

0 comments on commit 4d4af8c

Please sign in to comment.