Skip to content

Commit

Permalink
Merge pull request #3 from creativetimofficial/dev-main
Browse files Browse the repository at this point in the history 
refactor: fix paths
  • Loading branch information
@groovemen
groovemen committed Aug 30, 2023
2 parents 88b6b87 + 9cb4714 commit e0b7b36
Show file tree
Hide file tree
Showing 6 changed files with 173 additions and 119 deletions.
4 changes: 2 additions & 2 deletions src/components/about/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,15 @@ export function HeroSectionTwo() {
<div className="mt-12 flex flex-wrap justify-center gap-3 lg:justify-start">
<Button color="dark" className="flex items-center">
<img
src=".//logos/logo-ios.svg"
src="/astro-launch-ui/logos/logo-ios.svg"
alt="ios"
className="-mt-1 mr-1.5 h-6 w-6"
/>
Download Ios
</Button>
<Button color="dark" className="flex items-center">
<img
src=".//logos/logo-android.svg"
src="/astro-launch-ui/logos/logo-android.svg"
alt="ios"
className="-mt-0.5 mr-1.5 h-6 w-6"
/>
Expand Down
4 changes: 2 additions & 2 deletions src/components/about/testimonials.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function TestimonialSectionTwo() {
<CardBody className="flex flex-col-reverse gap-16 py-20 px-14 lg:flex-row">
<div>
<img
src="logos/logo-spotify.svg"
src="/astro-launch-ui/logos/logo-spotify.svg"
alt="spotify"
className="mb-8 w-36"
/>
Expand Down Expand Up @@ -47,7 +47,7 @@ export function TestimonialSectionTwo() {
</div>
<div className="relative mx-auto grid shrink-0 place-items-center lg:ml-auto">
<img
src="avatars/avatar6.jpg"
src="/astro-launch-ui/avatars/avatar6.jpg"
alt="testimonial image"
className="h-80 w-80 rounded-full object-cover"
/>
Expand Down
6 changes: 3 additions & 3 deletions src/components/defaultNavbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ export default function Example() {
Sign In
</Button>
</a>
<a href="./signup">
<a href="/astro-launch-ui/signup">
<Button size="sm" color="dark">
Sign Up
</Button>
Expand All @@ -249,12 +249,12 @@ export default function Example() {
<Collapse open={openNav}>
<NavList />
<div className="flex w-full flex-nowrap items-center gap-2 lg:hidden">
<a href="./login">
<a href="/astro-launch-ui/login">
<Button variant="outlined" size="sm" color="dark" fullWidth>
Sign In
</Button>
</a>
<a href="./signup">
<a href="/astro-launch-ui/signup">
<Button size="sm" fullWidth color="dark">
Sign Up
</Button>
Expand Down
268 changes: 161 additions & 107 deletions src/components/presentation/pricing.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,124 +1,178 @@
import React from "react";
import React, { useEffect } from "react";
// import Script from "next/script";

import {
Typography,
Button,
Card,
CardBody,
CardHeader,
} from "@material-tailwind/react";
import { CheckIcon } from "@heroicons/react/24/outline";

function PricingCard({ title, desc, buttonText, price, options, marked, url }) {
return (
<Card
color={marked ? "blue-gray" : "transparent"}
className={
marked
? "bg-dark w-full md:w-1/2 lg:w-1/4"
: "border border-blue-gray-100 w-full md:w-1/2 lg:w-1/4 mb-8 md:mb-0"
}
>
<CardHeader
floated={false}
shadow={false}
color="transparent"
className="!m-0 pt-6 text-center"
>
<Typography
variant="h5"
color={marked ? "white" : "blue-gray"}
className="capitalize mb-2 text-center"
>
{title}
</Typography>
function PaddleLoader() {
useEffect(() => {
// Check if we are in the browser environment
if (typeof window !== 'undefined') {
const script = document.createElement('script');
script.src = 'https://cdn.paddle.com/paddle/paddle.js';
script.onload = () => {
// Access the Paddle global object from the script
window.Paddle.Setup({
vendor: Number(102023),
});
};
document.body.appendChild(script);
}
}, []);

<Typography
variant="h3"
color={marked ? "white" : "blue-gray"}
className="flex gap-1 justify-center"
>
{price[0]}
{price[1]}
</Typography>
</CardHeader>
<CardBody className="text-center">
<ul className="flex flex-col mb-8 px-5">
{options.map((option, key) => (
<li
key={key}
className={`flex items-center justify-center gap-3 border-b py-4 ${
marked ? "text-white border-white/30" : "text-gray-700"
}`}
>
<Typography variant="small" className="font-normal text-inherit">
{option}
</Typography>
</li>
))}
</ul>
<a href={url}>
<Button
size="sm"
variant="gradient"
color={marked ? "white" : "blue-gray"}
className={marked ? "" : "from-blue-gray-900 to-blue-gray-800"}
>
{buttonText}
</Button>
</a>
</CardBody>
</Card>
);
return null;
}

export function PricingSectionOne() {
const cards = [
{
title: "Open Source",
price: ["Free"],
options: [
"Documentation",
"20 Components",
"10 Blocks",
"3 Example Pages",
],
buttonText: "Download",
url: "https://github.com/creativetimofficial/astro-launch-ui",
},

{
marked: true,
title: "Pro Version",
price: ["$", "99"],
options: [
"Documentation",
"140+ Components",
"30+ Blocks",
"10+ Example Pages",
],
buttonText: "Get Access",
url: "",
},
];

return (
<section id="pricing" className="py-24 px-8">
<div className="container mx-auto text-center">
<Typography variant="h2" color="blue-gray" className="mb-4">
Pick the best plan for you
</Typography>
<Typography className="mb-8 font-normal !text-gray-500">
You have Free Unlimited Updates and Premium Support on each package.
</Typography>
</div>
<div className="mt-12">
<div className="container mx-auto md:flex justify-center gap-10">
{cards.map((props, key) => (
<PricingCard key={key} {...props} />
))}
<>
<PaddleLoader />
<section id="pricing" className="py-24 px-8">
<div className="container mx-auto text-center">
<Typography variant="h2" color="blue-gray" className="mb-4">
Pick the best plan for you
</Typography>
<Typography className="mb-8 font-normal !text-gray-500">
You have Free Unlimited Updates and Premium Support on each package.
</Typography>
</div>
<div className="mt-12">
<div className="container mx-auto md:flex justify-center gap-10">
<Card
color="transparent"
className="border border-blue-gray-100 w-full md:w-1/2 lg:w-1/4 mb-8 md:mb-0"
>
<CardHeader
floated={false}
shadow={false}
color="transparent"
className="!m-0 pt-6 text-center"
>
<Typography
variant="h5"
color="blue-gray"
className="capitalize mb-2 text-center"
>
Open Source
</Typography>

<Typography
variant="h3"
color="blue-gray"
className="flex gap-1 justify-center"
>
Free
</Typography>
</CardHeader>
<CardBody className="text-center">
<ul className="flex flex-col mb-8 px-5">
<li className="flex items-center justify-center gap-3 border-b py-4 text-gray-700">
<Typography variant="small" className="font-normal text-inherit">
Documentation
</Typography>
</li>
<li className="flex items-center justify-center gap-3 border-b py-4 text-gray-700">
<Typography variant="small" className="font-normal text-inherit">
20 Components
</Typography>
</li>
<li className="flex items-center justify-center gap-3 border-b py-4 text-gray-700">
<Typography variant="small" className="font-normal text-inherit">
10 Blocks
</Typography>
</li>
<li className="flex items-center justify-center gap-3 border-b py-4 text-gray-700">
<Typography variant="small" className="font-normal text-inherit">
3 Example Pages
</Typography>
</li>
</ul>
<a href="https://github.com/creativetimofficial/astro-launch-ui?ref=astroLaunch-UI-landing" target="_blank">
<Button
size="sm"
variant="gradient"
color="blue-gray"
className="from-blue-gray-900 to-blue-gray-800"
>
Download
</Button>
</a>
</CardBody>
</Card>

<Card
color="blue-gray"
className="bg-dark w-full md:w-1/2 lg:w-1/4">
<CardHeader
floated={false}
shadow={false}
color="transparent"
className="!m-0 pt-6 text-center"
>
<Typography
variant="h5"
color="white"
className="capitalize mb-2 text-center"
>
Pro Version
</Typography>

<Typography
variant="h3"
color="white"
className="flex gap-1 justify-center"
>
$99
</Typography>
</CardHeader>
<CardBody className="text-center">
<ul className="flex flex-col mb-8 px-5">
<li
className="flex items-center justify-center gap-3 border-b py-4 text-white border-white/30">
<Typography variant="small" className="font-normal text-inherit">
Documentation
</Typography>
</li>
<li
className="flex items-center justify-center gap-3 border-b py-4 text-white border-white/30">
<Typography variant="small" className="font-normal text-inherit">
140+ Components
</Typography>
</li>
<li
className="flex items-center justify-center gap-3 border-b py-4 text-white border-white/30">
<Typography variant="small" className="font-normal text-inherit">
30+ Blocks
</Typography>
</li>
<li
className="flex items-center justify-center gap-3 border-b py-4 text-white border-white/30">
<Typography variant="small" className="font-normal text-inherit">
10+ Example Pages
</Typography>
</li>
</ul>
<a href="#" onClick={() => { Paddle.Checkout.open ({ product: 847482 });} }>
<Button
id="847482"
size="sm"
variant="gradient"
color="white"
>
Get Access
</Button>
</a>
</CardBody>
</Card>
</div>
</div>
</div>
</section>
</section>
</>
);
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/signin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export function SignIn() {
fullWidth
>
<img
src="logos/logo-google.png"
src="/astro-launch-ui/logos/logo-google.png"
alt="google"
className="-mt-0.5 h-7 w-7"
/>
Expand Down
8 changes: 4 additions & 4 deletions src/components/signup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export function SignUp() {
fullWidth
>
<img
src="logos/logo-google.png"
src="/astro-launch-ui/logos/logo-google.png"
alt="google"
className="h-6 w-6"
/>{" "}
Expand All @@ -53,7 +53,7 @@ export function SignUp() {
fullWidth
>
<img
src="logos/logo-facebook.png"
src="/astro-launch-ui/logos/logo-facebook.png"
alt="facebook"
className="-mt-0.5 h-7 w-7"
/>
Expand All @@ -67,7 +67,7 @@ export function SignUp() {
fullWidth
>
<img
src="logos/logo-apple.png"
src="/astro-launch-ui/logos/logo-apple.png"
alt="apple"
className="-mt-1 h-7 w-7"
/>
Expand All @@ -79,7 +79,7 @@ export function SignUp() {
>
Already have an account?{" "}
<a
href="./login"
href="/astro-launch-ui/login"
className="font-medium text-dark transition-colors hover:text-blue-700"
>
Log in
Expand Down

0 comments on commit e0b7b36

Please sign in to comment.