diff --git a/main.wasp b/main.wasp
index c78e15c..2e34854 100644
--- a/main.wasp
+++ b/main.wasp
@@ -56,7 +56,7 @@ app SaaSTemplate {
("@tailwindcss/forms", "^0.5.3"),
("@tailwindcss/typography", "^0.5.7"),
("react-hook-form", "7.43.1"),
- ("react-icons", "4.8.0"),
+ ("react-icons", "4.11.0"),
("request-ip", "3.3.0"),
("@types/request-ip", "0.0.37"),
("node-fetch", "3.3.0"),
@@ -117,6 +117,11 @@ page MainPage {
component: import Main from "@client/MainPage"
}
+route LandingPageRoute { path: "/landing-page", to: LandingPage }
+page LandingPage {
+ component: import LandingPage from "@client/LandingPage"
+}
+
route LoginRoute { path: "/login", to: LoginPage }
page LoginPage {
component: import Login from "@client/auth/LoginPage"
diff --git a/src/client/App.tsx b/src/client/App.tsx
index 45b230b..3d23bcc 100644
--- a/src/client/App.tsx
+++ b/src/client/App.tsx
@@ -10,7 +10,7 @@ export default function App({ children }: { children: ReactNode }) {
*/
return (
);
diff --git a/src/client/LandingPage.tsx b/src/client/LandingPage.tsx
new file mode 100644
index 0000000..2c7384f
--- /dev/null
+++ b/src/client/LandingPage.tsx
@@ -0,0 +1,626 @@
+import { useState } from 'react';
+import { Dialog } from '@headlessui/react';
+import { AiFillCheckCircle, AiFillCloseCircle } from 'react-icons/ai';
+import { FiKey } from 'react-icons/fi';
+import { MdPayments } from 'react-icons/md';
+import { HiDocumentText } from 'react-icons/hi';
+import { PiMagicWandFill } from 'react-icons/pi';
+import { HiBars3 } from 'react-icons/hi2';
+import logo from './static/logo.png';
+
+const navigation = [
+ { name: 'Product', href: '#' },
+ { name: 'Features', href: '#' },
+ { name: 'Marketplace', href: '#' },
+ { name: 'Company', href: '#' },
+];
+const features = [
+ {
+ name: 'Auto-magic Auth',
+ description:
+ 'Not only is Auth built-in, you can integrate Google, GitHub, Email Verified Login, and more with just a few lines of code, thanks to the power of Wasp',
+ icon: FiKey,
+ },
+ {
+ name: 'Stripe Integration',
+ description:
+ "No SaaS is complete without payments. That's why subscriptions and there necessary webhooks are built-in!",
+ icon: MdPayments,
+ },
+ {
+ name: 'Complete Documentation & Support',
+ description:
+ "We don't leave you hanging. We have a complete documentation site, and a Discord community to help you get along the way.",
+ icon: HiDocumentText,
+ },
+ {
+ name: 'OpenAI ChatGPT API Integration',
+ description: 'Technology is moving fast, and so are new ideas. Profit from yours quickly.',
+ icon: PiMagicWandFill,
+ },
+ {
+ name: 'No 3rd Party Services',
+ description: 'You own your data, and you own your code. No expensive 3rd party services to worry about.',
+ icon: PiMagicWandFill,
+ },
+];
+const tiers = [
+ {
+ name: 'Freelancer',
+ id: 'tier-freelancer',
+ href: '#',
+ priceMonthly: '$24',
+ description: 'The essentials to provide your best work for clients.',
+ features: ['5 products', 'Up to 1,000 subscribers', 'Basic analytics', '48-hour support response time'],
+ mostPopular: false,
+ },
+ {
+ name: 'Startup',
+ id: 'tier-startup',
+ href: '#',
+ priceMonthly: '$32',
+ description: 'A plan that scales with your rapidly growing business.',
+ features: [
+ '25 products',
+ 'Up to 10,000 subscribers',
+ 'Advanced analytics',
+ '24-hour support response time',
+ 'Marketing automations',
+ ],
+ mostPopular: true,
+ },
+ {
+ name: 'Enterprise',
+ id: 'tier-enterprise',
+ href: '#',
+ priceMonthly: '$48',
+ description: 'Dedicated support and infrastructure for your company.',
+ features: [
+ 'Unlimited products',
+ 'Unlimited subscribers',
+ 'Advanced analytics',
+ '1-hour, dedicated support response time',
+ 'Marketing automations',
+ ],
+ mostPopular: false,
+ },
+];
+const faqs = [
+ {
+ id: 1,
+ question: "What's the best thing about Switzerland?",
+ answer:
+ "I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
+ },
+ // More questions...
+];
+const footerNavigation = {
+ solutions: [
+ { name: 'Hosting', href: '#' },
+ { name: 'Data Services', href: '#' },
+ { name: 'Uptime Monitoring', href: '#' },
+ { name: 'Enterprise Services', href: '#' },
+ ],
+ support: [
+ { name: 'Pricing', href: '#' },
+ { name: 'Documentation', href: '#' },
+ { name: 'Guides', href: '#' },
+ { name: 'API Reference', href: '#' },
+ ],
+ company: [
+ { name: 'About', href: '#' },
+ { name: 'Blog', href: '#' },
+ { name: 'Jobs', href: '#' },
+ { name: 'Press', href: '#' },
+ { name: 'Partners', href: '#' },
+ ],
+ legal: [
+ { name: 'Claim', href: '#' },
+ { name: 'Privacy', href: '#' },
+ { name: 'Terms', href: '#' },
+ ],
+};
+
+function classNames(...classes: string[]) {
+ return classes.filter(Boolean).join(' ');
+}
+
+export default function LandingPage() {
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+ return (
+
+ {/* Header */}
+
+
+
+ {/* Hero section */}
+
+
+
+
+
+
+ The free SaaS template with superpowers
+
+
+ Get all the features of a modern SaaS app, in a ready-made teplate. Built on top of Wasp, the only
+ full-stack React + NodeJS framework that builds features for you.
+
+
+
+
+
+
+
+
+
+
+
+ {/*
*/}
+
+
+ {/* Logo cloud */}
+
+
+ {/* Feature section */}
+
+
+
Deploy faster
+
+ Everything you need to deploy your app
+
+
+ Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum
+ pulvinar et feugiat blandit at. In mi viverra elit nunc.
+
+
+
+
+ {features.map((feature) => (
+
+
+
+
+
+ {feature.name}
+
+
{feature.description}
+
+ ))}
+
+
+
+
+ {/* Testimonial section */}
+
+
+
+
+
+
+
+
+
+
+
+ “Amet amet eget scelerisque tellus sit neque faucibus non eleifend. Integer eu praesent at a. Ornare
+ arcu gravida natoque erat et cursus tortor consequat at. Vulputate gravida sociis enim nullam
+ ultricies habitant malesuada lorem ac.”
+
+
+
+ Judith Black
+ CEO of Tuple
+
+
+
+
+
+
+ {/* Pricing section */}
+
+
+
+
Pricing
+
+ Pricing plans for teams of all sizes
+
+
+
+ Distinctio et nulla eum soluta et neque labore quibusdam. Saepe et quasi iusto modi velit ut non voluptas
+ in. Explicabo id ut laborum.
+
+
+ {tiers.map((tier, tierIdx) => (
+
+
+
+
+ {tier.name}
+
+ {tier.mostPopular ? (
+
+ Most popular
+
+ ) : null}
+
+
{tier.description}
+
+ {tier.priceMonthly}
+ /month
+
+
+ {tier.features.map((feature) => (
+
+
+ {feature}
+
+ ))}
+
+
+
+ Buy plan
+
+
+ ))}
+
+
+
+
+ {/* FAQs */}
+
+
Frequently asked questions
+
+ {faqs.map((faq) => (
+
+
{faq.question}
+
+ {faq.answer}
+
+
+ ))}
+
+
+
+ {/* CTA section */}
+
+
+
+
+ Boost your productivity.
+
+ Start using our app today.
+
+
+ Incididunt sint fugiat pariatur cupidatat consectetur sit cillum anim id veniam aliqua proident excepteur
+ commodo do ea.
+
+
+
+
+
+
+
+ {/* Footer */}
+
+
+
+
+
+
+
+
+
Solutions
+
+ {footerNavigation.solutions.map((item) => (
+
+
+ {item.name}
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/client/NavBar.tsx b/src/client/NavBar.tsx
index 38a01b5..3231e59 100644
--- a/src/client/NavBar.tsx
+++ b/src/client/NavBar.tsx
@@ -1,5 +1,5 @@
-import logo from './static/logo.png'
+
import { Disclosure } from '@headlessui/react';
import { AiOutlineBars, AiOutlineClose, AiOutlineUser } from 'react-icons/ai';
import useAuth from '@wasp/auth/useAuth';