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 <[email protected]> Co-authored-by: vincanger <[email protected]>
wasp-lang · Jul 17, 2024 · 5ea9f84 · 5ea9f84
1 parent 1abcdf7
commit 5ea9f84
Show file tree

Hide file tree

Showing 21 changed files with 770 additions and 742 deletions.
diff --git 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
diff --git a/opensaas-sh/app_diff/src/landing-page/components/Clients.tsx.diff b/opensaas-sh/app_diff/src/landing-page/components/Clients.tsx.diff
@@ -0,0 +1,78 @@
+--- template/app/src/landing-page/components/Clients.tsx
++++ opensaas-sh/app/src/landing-page/components/Clients.tsx
+@@ -1,23 +1,64 @@
++import logo from '../../client/static/logo.png';
+ import AstroLogo from "../logos/AstroLogo";
+-import OpenAILogo from "../logos/OpenAILogo";
+ import PrismaLogo from "../logos/PrismaLogo";
+-import SalesforceLogo from "../logos/SalesforceLogo";
++import OpenAILogo from "../logos/OpenAILogo";
+
+ export default function Clients() {
+   return (
+     <div className='mt-12 mx-auto max-w-7xl px-6 lg:px-8 flex flex-col items-between gap-y-6'>
+-      <h2 className='mb-6 text-center font-semibold tracking-wide text-gray-500 dark:text-white'>
+-        Built with / Used by:
++      <h2 className='mb-6 text-center font-semibold tracking-wide text-gray-500'>
++        Built and Ships with
+       </h2>
+
+       <div className='mx-auto grid max-w-lg grid-cols-2 items-center gap-x-8 gap-y-12 sm:max-w-xl md:grid-cols-4 sm:gap-x-10 sm:gap-y-14 lg:mx-0 lg:max-w-none'>
+-        {
+-          [<SalesforceLogo />, <PrismaLogo />, <AstroLogo />, <OpenAILogo />].map((logo, index) => (
+-            <div key={index} className='flex justify-center col-span-1 max-h-12 w-full object-contain dark:opacity-80'>
+-              {logo}
+-            </div>
+-          ))
+-        }
++
++        <img
++          className='col-span-1 max-h-12 w-full object-contain grayscale opacity-100'
++          src='https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png'
++          alt='React'
++          height={48}
++        />
++
++        <img
++          className='col-span-1 max-h-12 w-full object-contain grayscale opacity-60 dark:filter dark:brightness-0 dark:invert'
++          src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Node.js_logo.svg/590px-Node.js_logo.svg.png'
++          alt='NodeJS'
++          height={48}
++        />
++
++        <img
++          className='col-span-1 max-h-12 w-full object-contain grayscale opacity-80'
++          src={logo}
++          alt='Wasp'
++          height={48}
++        />
++
++        <div className='flex justify-center col-span-1 max-h-12 w-full object-contain grayscale opacity-80'>
++          <PrismaLogo />
++        </div>
++
++        <img
++          className='col-span-1 max-h-12 w-full object-contain grayscale '
++          src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Tailwind_CSS_Logo.svg/512px-Tailwind_CSS_Logo.svg.png'
++          alt='Tailwind CSS'
++          height={48}
++        />
++
++        <img
++          className='col-span-1 max-h-12 w-full object-contain grayscale opacity-80 dark:opacity-60 dark:filter dark:brightness-0 dark:invert'
++          src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Stripe_Logo%2C_revised_2016.svg/512px-Stripe_Logo%2C_revised_2016.svg.png'
++          alt='Stripe'
++          height={48}
++        />
++
++        <div className='flex justify-center col-span-1 w-full max-h-12 object-contain grayscale opacity-75'>
++          <AstroLogo />
++        </div>
++
++        <div className='flex justify-center col-span-1 w-full max-h-12 object-contain grayscale opacity-80'>
++          <OpenAILogo />
++        </div>
++
+       </div>
+     </div>
+   )
diff --git a/opensaas-sh/app_diff/src/landing-page/components/FAQ.tsx.diff b/opensaas-sh/app_diff/src/landing-page/components/FAQ.tsx.diff
@@ -0,0 +1,28 @@
+--- template/app/src/landing-page/components/FAQ.tsx
++++ opensaas-sh/app/src/landing-page/components/FAQ.tsx
+@@ -7,20 +7,20 @@
+
+ export default function FAQ({ faqs }: { faqs: FAQ[] }) {
+   return (
+-    <div className='mt-32 mx-auto max-w-2xl divide-y divide-gray-900/10 dark:divide-gray-200/10 px-6 pb-8 sm:pb-24 sm:pt-12 lg:max-w-7xl lg:px-8 lg:py-32'>
++    <div className='mt-32 mx-auto max-w-2xl divide-y divide-gray-900/10 px-6 pb-8 sm:pb-24 sm:pt-12 lg:max-w-7xl lg:px-8 lg:py-32'>
+       <h2 className='text-2xl font-bold leading-10 tracking-tight text-gray-900 dark:text-white'>
+         Frequently asked questions
+       </h2>
+-      <dl className='mt-10 space-y-8 divide-y divide-gray-900/10'>
++      <dl className='mt-10 space-y-8 divide-y divide-gray-900/10 dark:divide-gray-100/10'>
+         {faqs.map((faq) => (
+           <div key={faq.id} className='pt-8 lg:grid lg:grid-cols-12 lg:gap-8'>
+             <dt className='text-base font-semibold leading-7 text-gray-900 lg:col-span-5 dark:text-white'>
+               {faq.question}
+             </dt>
+-            <dd className='flex items-center justify-start gap-2 mt-4 lg:col-span-7 lg:mt-0'>
+-              <p className='text-base leading-7 text-gray-600 dark:text-white'>{faq.answer}</p>
++            <dd className='mt-4 lg:col-span-7 lg:mt-0'>
++              <p className='text-base leading-7 text-gray-600 dark:text-gray-400'>{faq.answer}</p>
+               {faq.href && (
+-                <a href={faq.href} className='text-base leading-7 text-yellow-500 hover:text-yellow-600'>
++                <a href={faq.href} className='mt-4 text-base leading-7 text-yellow-500 hover:text-yellow-600'>
+                   Learn more →
+                 </a>
+               )}
diff --git a/opensaas-sh/app_diff/src/landing-page/components/Features.tsx.diff b/opensaas-sh/app_diff/src/landing-page/components/Features.tsx.diff
@@ -0,0 +1,43 @@
+--- template/app/src/landing-page/components/Features.tsx
++++ opensaas-sh/app/src/landing-page/components/Features.tsx
+@@ -10,25 +10,27 @@
+     <div id='features' className='mx-auto mt-48 max-w-7xl px-6 lg:px-8'>
+       <div className='mx-auto max-w-2xl text-center'>
+         <p className='mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl dark:text-white'>
+-          The <span className='text-yellow-500'>Best</span> Features
++          <span className='text-yellow-500'>100%</span> Open-Source
+         </p>
+-        <p className='mt-6 text-lg leading-8 text-gray-600 dark:text-white'>
+-          Don't work harder.
+-          <br /> Work smarter.
++        <p className='mt-6 text-lg leading-8 text-gray-600 dark:text-gray-400'>
++          No vendor lock-in.
++          <br /> Deploy anywhere.
+         </p>
+       </div>
+       <div className='mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl'>
+         <dl className='grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16'>
+           {features.map((feature) => (
+-            <div key={feature.name} className='relative pl-16'>
+-              <dt className='text-base font-semibold leading-7 text-gray-900 dark:text-white'>
+-                <div className='absolute left-0 top-0 flex h-10 w-10 items-center justify-center border border-yellow-400 bg-yellow-100/50 dark:bg-boxdark rounded-lg'>
+-                  <div className='text-2xl'>{feature.icon}</div>
+-                </div>
+-                {feature.name}
+-              </dt>
+-              <dd className='mt-2 text-base leading-7 text-gray-600 dark:text-white'>{feature.description}</dd>
+-            </div>
++            <a href={feature.href} className='group'>
++              <div key={feature.name} className='relative pl-16'>
++                <dt className='text-base font-semibold leading-7 text-gray-900 dark:text-white group-hover:underline'>
++                  <div className='absolute left-0 top-0 flex h-10 w-10 items-center justify-center border border-yellow-400 bg-yellow-100/50 dark:bg-boxdark rounded-lg group-hover:border-yellow-500'>
++                    <div className='text-2xl group-hover:opacity-80 '>{feature.icon}</div>
++                  </div>
++                  {feature.name}
++                </dt>
++                <dd className='mt-2 text-base leading-7 text-gray-600 dark:text-gray-400'>{feature.description}</dd>
++              </div>
++            </a>
+           ))}
+         </dl>
+       </div>
diff --git a/opensaas-sh/app_diff/src/landing-page/components/Footer.tsx.diff b/opensaas-sh/app_diff/src/landing-page/components/Footer.tsx.diff
@@ -0,0 +1,11 @@
+--- template/app/src/landing-page/components/Footer.tsx
++++ opensaas-sh/app/src/landing-page/components/Footer.tsx
+@@ -13,7 +13,7 @@
+     <div className='mx-auto mt-6 max-w-7xl px-6 lg:px-8 dark:bg-boxdark-2'>
+       <footer
+         aria-labelledby='footer-heading'
+-        className='relative border-t border-gray-900/10 dark:border-gray-200/10 py-24 sm:mt-32'
++        className='relative border-t border-gray-900/10 dark:border-gray-100/10 py-24 sm:mt-32'
+       >
+         <h2 id='footer-heading' className='sr-only'>
+           Footer
diff --git a/opensaas-sh/app_diff/src/landing-page/components/Header.tsx.diff b/opensaas-sh/app_diff/src/landing-page/components/Header.tsx.diff
@@ -0,0 +1,59 @@
+--- template/app/src/landing-page/components/Header.tsx
++++ opensaas-sh/app/src/landing-page/components/Header.tsx
+@@ -1,4 +1,4 @@
+-import { useState } from 'react';
++import { useState, useEffect } from 'react';
+ import { HiBars3 } from 'react-icons/hi2';
+ import { BiLogIn } from 'react-icons/bi';
+ import { AiFillCloseCircle } from 'react-icons/ai';
+@@ -20,7 +20,7 @@
+
+   const { data: user, isLoading: isUserLoading } = useAuth();
+
+-  const NavLogo = () => <img className='h-8 w-8' src={logo} alt='Your SaaS App' />;
++  const NavLogo = () => <img className='h-8 w-8' src={logo} alt='Open SaaS App' />;
+
+   return (
+     <header className='absolute inset-x-0 top-0 z-50 dark:bg-boxdark-2'>
+@@ -28,10 +28,10 @@
+         <div className='flex items-center lg:flex-1'>
+           <a
+             href='/'
+-            className='flex items-center -m-1.5 p-1.5 text-gray-900 duration-300 ease-in-out hover:text-yellow-500'
++            className='flex items-center -m-1.5 p-1.5 text-gray-900 duration-300 ease-in-out hover:text-yellow-500 dark:text-white'
+           >
+             <NavLogo />
+-            <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Your Saas</span>
++            <span className='ml-2 text-sm font-semibold leading-6 dark:text-white'>Open Saas</span>
+           </a>
+         </div>
+         <div className='flex lg:hidden'>
+@@ -57,14 +57,14 @@
+         </div>
+         <div className='hidden lg:flex lg:flex-1 lg:justify-end lg:align-end'>
+           {/* <!-- Dark Mode Toggler --> */}
+-          <div className='flex items-center gap-3 2xsm:gap-7'>
++          <div className='flex items-center gap-3 2xsm:gap-7 text-sm font-semibold leading-6'>
+             <ul className='flex justify-center items-center gap-2 2xsm:gap-4'>
+               <DarkModeSwitcher />
+             </ul>
+             {isUserLoading ? null : !user ? (
+               <Link to='/login'>
+-                <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
+-                  Log in <BiLogIn size='1.1rem' className='ml-1' />
++                <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white test-sm'>
++                  Try the demo App <BiLogIn size='1.1rem' className='ml-1' />
+                 </div>
+               </Link>
+             ) : (
+@@ -107,8 +107,8 @@
+               <div className='py-6'>
+                 {isUserLoading ? null : !user ? (
+                   <Link to='/login'>
+-                    <div className='flex justify-start items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
+-                      Log in <BiLogIn size='1.1rem' className='ml-1' />
++                    <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
++                      Try the Demo App{' '} <BiLogIn size='1.1rem' className='ml-1' />
+                     </div>
+                   </Link>
+                 ) : (
diff --git a/opensaas-sh/app_diff/src/landing-page/components/Hero.tsx.diff b/opensaas-sh/app_diff/src/landing-page/components/Hero.tsx.diff
@@ -0,0 +1,91 @@
+--- template/app/src/landing-page/components/Hero.tsx
++++ opensaas-sh/app/src/landing-page/components/Hero.tsx
+@@ -1,7 +1,25 @@
+-import openSaasBanner from '../../client/static/open-saas-banner.png';
+-import { DocsUrl } from '../../shared/common';
++import { useState, useEffect } from 'react';
++import { AiFillGithub } from 'react-icons/ai';
++import { DocsUrl, GithubUrl } from '../../shared/common';
+
+ export default function Hero() {
++  const [repoInfo, setRepoInfo] = useState<null | any>(null);
++
++  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();
++  }, []);
++
+   return (
+     <div className='relative pt-14 w-full '>
+       <div
+@@ -29,30 +47,47 @@
+       <div className='py-24 sm:py-32'>
+         <div className='mx-auto max-w-8xl px-6 lg:px-8'>
+           <div className='lg:mb-18 mx-auto max-w-3xl text-center'>
+-            <h1 className='text-4xl font-bold text-gray-900 sm:text-6xl dark:text-white'>
+-              Some <span className='italic'>cool</span> words about your product
++            <h1 className='text-4xl font-bold text-gray-900 sm:text-6xl dark:text-white tracking-tight'>
++              The <span className='italic'>free</span> SaaS template with
++              superpowers
+             </h1>
+-            <p className='mt-6 mx-auto max-w-2xl text-lg leading-8 text-gray-600 dark:text-white'>
+-              With some more exciting words about your product!
++            <p className='mt-6 mx-auto max-w-2xl text-lg leading-8 text-gray-600 dark:text-gray-400'>
++              An open-source, feature-rich, full-stack React + NodeJS
++              template that manages features for you.
+             </p>
+             <div className='mt-10 flex items-center justify-center gap-x-6'>
+               <a
+                 href={DocsUrl}
+-                className='rounded-md px-3.5 py-2.5 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-200 hover:ring-2 hover:ring-yellow-300 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:text-white'
++                className='rounded-md px-6 py-4 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-200 hover:ring-2 hover:ring-yellow-300 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:text-white'
+               >
+                 Get Started <span aria-hidden='true'>→</span>
+               </a>
++              <a
++                href={GithubUrl}
++                className='group relative flex items-center justify-center rounded-md bg-gray-100 px-6 py-4 text-sm font-semibold shadow-sm ring-1 ring-inset ring-gray-200 dark:bg-gray-700 hover:ring-2 hover:ring-yellow-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
++              >
++                {/* <AiFillGithub size='1.25rem' className='mr-2' /> */}
++                View the Repo
++                {repoInfo!! && (
++                  <>
++                    <span className='absolute -top-3 -right-7 inline-flex items-center gap-x-1 rounded-full ring-1 group-hover:ring-2 ring-inset ring-yellow-300 bg-yellow-100 px-2 py-1 text-sm font-medium text-yellow-800'>
++                      <AiFillGithub size='1rem' />
++                      {repoInfo.stargazers_count}
++                    </span>
++                  </>
++                )}
++              </a>
+             </div>
+           </div>
+           <div className='mt-14 flow-root sm:mt-14 '>
+-            <div className='-m-2 rounded-xl  lg:-m-4 lg:rounded-2xl lg:p-4'>
+-              <img
+-                src={openSaasBanner}
+-                alt='App screenshot'
+-                width={2432}
+-                height={1442}
+-                className='rounded-md shadow-2xl ring-1 ring-gray-900/10'
+-              />
++            <div className='-m-2 mx-auto rounded-xl lg:-m-4 lg:rounded-2xl lg:p-4'>
++              <iframe
++                className=' mx-auto w-full md:w-[85%] aspect-[4/3] shadow-2xl'
++                src='https://cards.producthunt.com/cards/posts/436467?v=1'
++                // width={850}
++                // height={689}
++                allowFullScreen
++              ></iframe>
+             </div>
+           </div>
+         </div>
diff --git a/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff b/opensaas-sh/app_diff/src/landing-page/contentSections.ts.diff
@@ -131,7 +131,7 @@
 +  {
 +    name: 'Tim Skaggs',
 +    role: 'Founder @ Antler US',
-+    avatarSrc: 'https://pbs.twimg.com/profile_images/1486119226771480577/VptdEo6A_400x400.png',
++    avatarSrc: 'https://pbs.twimg.com/profile_images/1802196804236091392/ZG0OE_fO_400x400.jpg',
 +    socialUrl: 'https://twitter.com/tskaggs',
 +    quote: 'Nearly done with a MVP in 3 days of part-time work... and deployed on Fly.io in 10 minutes.',
 +  },