Merge pull request #8 from goinvo/copy-tweaks

Copy tweaks to homepage
goinvo · Dec 11, 2024 · 2fa0eb4 · 2fa0eb4
2 parents 9e55ca6 + caa8416
commit 2fa0eb4
Show file tree

Hide file tree

Showing 6 changed files with 2,954 additions and 40 deletions.
diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
@@ -1,22 +1,23 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
-import FeedbackModal from './FeedbackModal';
+// import FeedbackModal from './FeedbackModal';
 
-const columnOneLinks = [
-    {
-        href: "https://github.com/goinvo/staffplan-next-app", label: "Get Involved"
-    },
-];
+// const columnOneLinks = [
+//     {
+//         href: "https://github.com/goinvo/staffplan-next-app", label: "Open Source"
+//     },
+// ];
 
 const columnTwoLinks = [
     // { href: "#", label: "Help" },
-    { href: "mailto:staffplan@goinvo.com ", label: "Contact" }
+    { href: "mailto:staffplan@goinvo.com?subject=StaffPlan Contact", label: "Contact" }, 
+    { href: "https://github.com/goinvo/staffplan-next-app", label: "Open Source" }
 ];
 
 const columnThreeLinks = [
     { href: "https://app.staffplan.com/sign_in", label: "Sign In" },
-    { href: "https://app.staffplan.com/registrations/new", label: "Try for Free" }
+    { href: "https://app.staffplan.com/registrations/new", label: "Try StaffPlan" }
 ];
 
 const Footer: React.FC = () => (
@@ -25,18 +26,14 @@ const Footer: React.FC = () => (
             <div className="flex flex-col justify-between min-h-[4rem] sm:mb-6 md:mb-0 mr-auto">
                 <Image src="/logo.svg" width={174} height={43} alt="staffplan logo" />
                 <div className="hidden sm:flex items-end mt-8">
-                    <Image src="/goinvoLogo.svg" width={98} height={52} alt="GoInvo logo" />
+                    <Link href="https://goinvo.com/">
+                        <Image src="/goinvoLogo.svg" width={98} height={52} alt="GoInvo logo" />
+                    </Link>
                     <p className="ml-2 self-end text-contrastGrey">&copy; 2024</p>
                 </div>
             </div>
             <div className="flex flex-col sm:flex-row sm:justify-center justify-normal sm:space-x-24 space-y-8 sm:space-y-2 text-white mr-auto">
                 <div className="flex flex-col space-y-8 sm:mt-2 mt-0">
-                    {columnOneLinks.map((link, index) => (
-                        <Link key={index} href={link.href}>
-                            {link.label}
-                        </Link>
-                    ))}
-                    <FeedbackModal />
                 </div>
                 <div className="flex flex-col space-y-8">
                     {columnTwoLinks.map((link, index) => (
@@ -54,7 +51,9 @@ const Footer: React.FC = () => (
                 </div>
             </div>
             <div className="flex sm:hidden items-end mt-4">
-                <Image src="/goinvoLogo.svg" width={98} height={52} alt="GoInvo logo" />
+                <Link href="https://goinvo.com/">
+                    <Image src="/goinvoLogo.svg" width={98} height={52} alt="GoInvo logo" />
+                </Link>
                 <p className="ml-2 self-end text-contrastGrey">&copy; 2024</p>
             </div>
         </div>

diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
-import FeedbackModal from './FeedbackModal';
 
 interface NavbarLinksTypes {
     href: string;
@@ -27,9 +26,6 @@ const Header: React.FC = () => {
                         {"Sign In"}
                     </Link>
                     <ul className="hidden sm:flex space-x-8">
-                        <li className='py-2.5 font-semibold'>
-                            <FeedbackModal />
-                        </li>
                         {navbarLinks.map((link, index) => (
                             <li key={index} className='py-2.5 font-semibold'>
                                 <Link href={link.href}>

diff --git a/src/app/components/StaffplanDemoContainer.tsx b/src/app/components/StaffplanDemoContainer.tsx
@@ -11,7 +11,7 @@ const StaffplanDemoContainer: React.FC<StaffplanDemoContainerProps> = ({ childre
             <div className="relative hidden sm:flex justify-center w-[270px] h-[50px] mt-32">
                 <Image src="/tryStaffplan.png"
                     fill
-                    className="object-contain" alt="Try StaffPlan!" />
+                    className="object-contain" alt="Design Your Work Future" />
             </div>
             {children}
             <div className="relative w-full h-full px-8 aspect-[21/19.4] max-w-[1238px] sm:aspect-[21/7] my-6 sm:mb-6 mt-10">
@@ -28,7 +28,7 @@ const StaffplanDemoContainer: React.FC<StaffplanDemoContainerProps> = ({ childre
                     className="sm:hidden block rounded-lg object-cover"
                 />
             </div>
-            <RoundedButton text="Sign me up!" variant="filled" size="large" href="https://app.staffplan.com/registrations/new" />
+            <RoundedButton text="Sign up!" variant="filled" size="large" href="https://app.staffplan.com/registrations/new" />
         </section >
     );
 };

diff --git a/src/app/constants.ts b/src/app/constants.ts
@@ -14,9 +14,9 @@ export const ADVANTAGES_INFO: InfoSectionTypes[] = [
     description: "See who’s covered, what projects are active or coming in.",
   },
   {
-    title: "First month free",
+    title: "$3/month per person",
     description:
-      "If you like it, keep it for just $3 dollars a person per month. For small teams who need to track time and plan their future.",
+      "For small teams who need to track time and plan their future.",
   },
 ];
 

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,18 +1,18 @@
 import InfoSection from "./components/InfoSection";
 import LeftContentSection from "./components/LeftContentSection";
 import RightContentSection from "./components/RightContentSection";
-import { ADVANTAGES_INFO, INVOLVED_INFO, STAFFPLAN_INFO } from "./constants";
+import { ADVANTAGES_INFO, STAFFPLAN_INFO } from "./constants";
 import StaffplanDemoContainer from "./components/StaffplanDemoContainer";
 import MyStaffplanPreviewContainer from "./components/MyStaffplanPreviewContainer";
 import PeoplePreviewContainer from "./components/PeoplePreviewContainer";
-import BubbleSpeechContainer from "./components/BubbleSpeechContainer";
+// import BubbleSpeechContainer from "./components/BubbleSpeechContainer";
 
 const contentSections = [
   {
     Component: RightContentSection,
     roundedContainerChildren: <MyStaffplanPreviewContainer />,
     infoData: STAFFPLAN_INFO,
-    showButton: true,
+    // showButton: true,
     buttonText: "Learn More",
     roundedContainerClassName: 'pr-auto sm:pr-16 pl-4',
     infoSectionStyles: 'sm:-translate-y-12'
@@ -23,19 +23,20 @@ const contentSections = [
     infoData: ADVANTAGES_INFO,
     showButton: false,
     alignInfo: 'right',
-    roundedContainerClassName: 'pl-auto sm:pl-16 pr-4'
+    roundedContainerClassName: 'pl-auto sm:pl-16 pr-4',
+    infoSectionStyles: 'sm:-translate-y-12'
   },
-  {
-    Component: RightContentSection,
-    roundedContainerChildren: <BubbleSpeechContainer />,
-    infoData: INVOLVED_INFO,
-    showButton: true,
-    buttonText: "Go to our GitHub",
-    href: "https://github.com/goinvo/staffplan-next-app",
-    roundedContainerClassName: 'my-8 px-5',
-    infoSectionStyles: 'mt-8'
+  // {
+  //   Component: RightContentSection,
+  //   roundedContainerChildren: <BubbleSpeechContainer />,
+  //   infoData: INVOLVED_INFO,
+  //   showButton: true,
+  //   buttonText: "Go to our GitHub",
+  //   href: "https://github.com/goinvo/staffplan-next-app",
+  //   roundedContainerClassName: 'my-8 px-5',
+  //   infoSectionStyles: 'mt-8'
 
-  },
+  // },
 ];
 
 
@@ -45,10 +46,10 @@ export default function Content() {
     <>
       <StaffplanDemoContainer />
       {contentSections.map((section, index) => {
-        const { Component, roundedContainerChildren, infoData, showButton, buttonText, href, alignInfo, infoSectionStyles } = section;
+        const { Component, roundedContainerChildren, infoData, showButton, buttonText, alignInfo, infoSectionStyles } = section;
         return (
           <Component key={index} roundedContainerChildren={roundedContainerChildren} roundedContainerClassName={section.roundedContainerClassName}>
-            <InfoSection infoData={infoData} showButton={showButton} buttonText={buttonText} href={href} align={alignInfo} className={infoSectionStyles} />
+            <InfoSection infoData={infoData} showButton={showButton} buttonText={buttonText} align={alignInfo} className={infoSectionStyles} />
           </Component>
         );
       })}