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 (
- + {/* */}
{children}
); 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 */} +
+ + +
+ +
+ + Your Company + + + +
+
+
+
+ {navigation.map((item) => ( + + {item.name} + + ))} +
+ +
+
+ +
+
+ +
+ {/* Hero section */} +
+
+ + {/* Footer */} +
+ +
+
+ ); +} 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';