From 5ea9f84064bcdb0f9191867e9ec4e001a6f9338f Mon Sep 17 00:00:00 2001 From: Surendra Manjhi <121970162+manjhss@users.noreply.github.com> Date: Wed, 17 Jul 2024 14:54:06 +0530 Subject: [PATCH] Break up LandingPage components into sub-components (#214) * Break up LandingPage components into sub-components * Resolve paths * Fixed formatting, Seperate svgs in icons folder, added types * Fixed formatting * resolve formatting issue * Update Header.tsx * Update Hero.tsx * Rename icons to logos, seperate components, remove types file, fix indentation * Renamed components dir, used interface * small fixes. * fix * Updated app_diff. * fix * Update contentSections.ts.diff --------- Co-authored-by: Martin Sosic Co-authored-by: vincanger <70215737+vincanger@users.noreply.github.com> --- opensaas-sh/app_diff/deletions | 1 + .../src/landing-page/LandingPage.tsx.diff | 379 ----------------- .../landing-page/components/Clients.tsx.diff | 78 ++++ .../src/landing-page/components/FAQ.tsx.diff | 28 ++ .../landing-page/components/Features.tsx.diff | 43 ++ .../landing-page/components/Footer.tsx.diff | 11 + .../landing-page/components/Header.tsx.diff | 59 +++ .../src/landing-page/components/Hero.tsx.diff | 91 +++++ .../src/landing-page/contentSections.ts.diff | 2 +- template/app/src/landing-page/LandingPage.tsx | 383 +----------------- .../src/landing-page/components/Clients.tsx | 24 ++ .../app/src/landing-page/components/FAQ.tsx | 33 ++ .../src/landing-page/components/Features.tsx | 37 ++ .../src/landing-page/components/Footer.tsx | 50 +++ .../src/landing-page/components/Header.tsx | 127 ++++++ .../app/src/landing-page/components/Hero.tsx | 62 +++ .../landing-page/components/Testimonials.tsx | 39 ++ .../app/src/landing-page/logos/AstroLogo.tsx | 16 + .../app/src/landing-page/logos/OpenAILogo.tsx | 11 + .../app/src/landing-page/logos/PrismaLogo.tsx | 11 + .../src/landing-page/logos/SalesforceLogo.tsx | 27 ++ 21 files changed, 770 insertions(+), 742 deletions(-) delete mode 100644 opensaas-sh/app_diff/src/landing-page/LandingPage.tsx.diff create mode 100644 opensaas-sh/app_diff/src/landing-page/components/Clients.tsx.diff create mode 100644 opensaas-sh/app_diff/src/landing-page/components/FAQ.tsx.diff create mode 100644 opensaas-sh/app_diff/src/landing-page/components/Features.tsx.diff create mode 100644 opensaas-sh/app_diff/src/landing-page/components/Footer.tsx.diff create mode 100644 opensaas-sh/app_diff/src/landing-page/components/Header.tsx.diff create mode 100644 opensaas-sh/app_diff/src/landing-page/components/Hero.tsx.diff create mode 100644 template/app/src/landing-page/components/Clients.tsx create mode 100644 template/app/src/landing-page/components/FAQ.tsx create mode 100644 template/app/src/landing-page/components/Features.tsx create mode 100644 template/app/src/landing-page/components/Footer.tsx create mode 100644 template/app/src/landing-page/components/Header.tsx create mode 100644 template/app/src/landing-page/components/Hero.tsx create mode 100644 template/app/src/landing-page/components/Testimonials.tsx create mode 100644 template/app/src/landing-page/logos/AstroLogo.tsx create mode 100644 template/app/src/landing-page/logos/OpenAILogo.tsx create mode 100644 template/app/src/landing-page/logos/PrismaLogo.tsx create mode 100644 template/app/src/landing-page/logos/SalesforceLogo.tsx diff --git a/opensaas-sh/app_diff/deletions b/opensaas-sh/app_diff/deletions index 115aa78..1c7e92b 100644 --- a/opensaas-sh/app_diff/deletions +++ b/opensaas-sh/app_diff/deletions @@ -1,3 +1,4 @@ public/public-banner.png src/client/static/avatar-placeholder.png src/client/static/open-saas-banner.png +src/landing-page/logos/SalesforceLogo.tsx diff --git a/opensaas-sh/app_diff/src/landing-page/LandingPage.tsx.diff b/opensaas-sh/app_diff/src/landing-page/LandingPage.tsx.diff deleted file mode 100644 index 88f8440..0000000 --- a/opensaas-sh/app_diff/src/landing-page/LandingPage.tsx.diff +++ /dev/null @@ -1,379 +0,0 @@ ---- template/app/src/landing-page/LandingPage.tsx -+++ opensaas-sh/app/src/landing-page/LandingPage.tsx -@@ -1,24 +1,45 @@ - import { Link } from 'wasp/client/router'; - import { useAuth } from 'wasp/client/auth'; --import { useState } from 'react'; -+import { useState, useEffect } from 'react'; - import { Dialog } from '@headlessui/react'; --import { AiFillCloseCircle } from 'react-icons/ai'; -+import { AiFillCloseCircle, AiFillGithub } from 'react-icons/ai'; - import { HiBars3 } from 'react-icons/hi2'; - import { BiLogIn } from 'react-icons/bi'; - import logo from '../client/static/logo.png'; --import openSaasBanner from '../client/static/open-saas-banner.png'; --import { features, navigation, faqs, footerNavigation, testimonials } from './contentSections'; --import DropdownUser from '../client/../user/DropdownUser'; --import { UserMenuItems } from '../client/../user/UserMenuItems'; --import { DocsUrl } from '../client/../shared/common'; - import DarkModeSwitcher from '../client/components/DarkModeSwitcher'; -+import { -+ features, -+ navigation, -+ faqs, -+ footerNavigation, -+ testimonials, -+} from './contentSections'; -+import DropdownUser from '../user/DropdownUser'; -+import { UserMenuItems } from '../user/UserMenuItems'; -+import { DocsUrl, GithubUrl } from '../shared/common'; - - export default function LandingPage() { - const [mobileMenuOpen, setMobileMenuOpen] = useState(false); -- -+ const [repoInfo, setRepoInfo] = useState(null); -+ - const { data: user, isLoading: isUserLoading } = useAuth(); - -- const NavLogo = () => Your SaaS App; -+ useEffect(() => { -+ const fetchRepoInfo = async () => { -+ try { -+ const response = await fetch( -+ 'https://api.github.com/repos/wasp-lang/open-saas' -+ ); -+ const data = await response.json(); -+ setRepoInfo(data); -+ } catch (error) { -+ console.error('Error fetching repo info', error); -+ } -+ }; -+ fetchRepoInfo(); -+ }, []); -+ -+ const NavLogo = () => Open SaaS App; - - return ( -
-@@ -28,10 +49,10 @@ -
- - -- Your Saas -+ Open Saas - -
-
-@@ -57,14 +78,14 @@ -
-
- {/* */} --
-+
-
    - -
- {isUserLoading ? null : !user ? ( - --
-- Log in -+
-+ Try the Demo App -
- - ) : ( -@@ -73,7 +94,12 @@ -
-
- -- -+ -
- -
-@@ -107,8 +133,8 @@ -
- {isUserLoading ? null : !user ? ( - --
-- Log in -+
-+ Try the Demo App{' '} -
- - ) : ( -@@ -134,7 +160,8 @@ -
-
-@@ -152,30 +179,47 @@ -
-
-
--

-- Some cool words about your product -+

-+ The free SaaS template with -+ superpowers -

--

-- With some more exciting words about your product! -+

-+ An open-source, feature-rich, full-stack React + NodeJS -+ template that manages features for you. -

- -
-
--
-- App screenshot -+
-+ -
-
-
-@@ -184,38 +228,36 @@ - - {/* Clients section */} -
--

-- Built with / Used by: -+

-+ Built and Ships with -

- -
--
-- -- -- -- -- -- -- -- -- -- --
--
-- -+ React -+ NodeJS -+ Wasp -+
-+ - - -
--
-+ Tailwind CSS -+ Stripe -+
- - -
-

-- The Best Features -+ 100% Open-Source -

--

-- Don't work harder. --
Work smarter. -+

-+ No vendor lock-in. -+
Deploy anywhere. -

-
-
-
- {features.map((feature) => ( --
--
--
--
{feature.icon}
--
-- {feature.name} --
--
{feature.description}
--
-+ -+
-+
-+
-+
{feature.icon}
-+
-+ {feature.name} -+
-+
{feature.description}
-+
-+ - ))} -
-
-@@ -291,10 +347,18 @@ -

{testimonial.quote}

- -
-- -- -+ -+ -
--
{testimonial.name}
-+
-+ {testimonial.name} -+
-
{testimonial.role}
-
- -@@ -307,20 +371,28 @@ -
- - {/* FAQ */} --
-+
-

- Frequently asked questions -

--
-+
- {faqs.map((faq) => ( --
--
-+
-+
- {faq.question} -
--
--

{faq.answer}

-+
-+

-+ {faq.answer} -+

- {faq.href && ( -- -+ - Learn more → - - )} -@@ -335,7 +407,7 @@ -
-