Merge pull request #5 from goinvo/stylesAndLinksAdjustments

added feedback modal, adjusted styles
goinvo · Nov 19, 2024 · 083d2fd · 083d2fd
2 parents 8ea58c9 + a7aca37
commit 083d2fd
Show file tree

Hide file tree

Showing 14 changed files with 159 additions and 89 deletions.
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/src/app/components/BubbleSpeechContainer.tsx b/src/app/components/BubbleSpeechContainer.tsx
@@ -4,15 +4,15 @@ import Image from "next/image";
 const BubbleSpeechContainer: React.FC = () => {
     return (
         <>
-            <div className="hidden sm:block relative z-20 mr-auto w-[100%] sm:w-[90%] sm:aspect-[11/7] sm:translate-y-4 md:translate-y-6 lg:translate-y-9 ml-4 overflow-visible">
+            <div className="hidden sm:block relative z-10 ml-auto w-[100%] max-w-[600px] sm:aspect-[11/7] sm:translate-y-4 md:translate-y-6 lg:translate-y-9 overflow-visible">
                 <Image
                     src="/getInvolved.png"
                     alt="Get involved bubble speech"
                     fill
                     className="sm:block hidden object-cover object-center"
                 />
             </div >
-            <div className="sm:hidden relative w-[65%] ml-1 aspect-[7.5/9.7] translate-y-4">
+            <div className="sm:hidden relative w-[90%] max-w-[220px] aspect-[7.5/9.7] translate-y-4 ml-5">
                 <Image
                     src="/getInvolvedMobile.png"
                     alt="Get involved bubble speech"

diff --git a/src/app/components/FeedbackModal.tsx b/src/app/components/FeedbackModal.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import { useState } from "react";
+
+const FeedbackModal = () => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const openModal = () => setIsModalOpen(true);
+    const closeModal = () => setIsModalOpen(false);
+
+    return (
+        <>
+            <button
+                onClick={openModal}
+                className="text-start"
+            >
+                Feedback
+            </button>
+            {isModalOpen && (
+                <div className="fixed inset-0 z-50 w-screen">
+                    <div className="flex min-h-full p-4 text-center justify-center sm:items-center sm:p-0">
+                        <div className="relative transform overflow-hidden w-1/2 rounded-xl bg-white text-left shadow-xl transition-all border-2 border-gray-300">
+                            <div className="bg-white px-10 pb-10 my-2">
+                                <div className="flex justify-end pb-2">
+                                    <button
+                                        className="rounded-full flex items-center"
+                                        onClick={closeModal}
+                                    >
+                                        <div className="text-tiffany w-8 h-8">✖</div>
+                                    </button>
+                                </div>
+                                <div>
+                                    <iframe
+                                        className="airtable-embed w-full h-133 bg-transparent border border-gray-300"
+                                        src="https://airtable.com/embed/appE6EvqnfyQTmfcG/paggYwwsljwfF9Jdm/form"
+                                        width="100%"
+                                        height="533"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};
+
+export default FeedbackModal;
diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
@@ -1,61 +1,63 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
+import FeedbackModal from './FeedbackModal';
 
 const columnOneLinks = [
     {
         href: "https://github.com/goinvo/staffplan-next-app", label: "Get Involved"
     },
-    { href: "#", label: "Feedback" },
-
 ];
 
 const columnTwoLinks = [
-    { href: "#", label: "Help" },
-    { href: "https://goinvo.com/", label: "Contact" }
+    // { href: "#", label: "Help" },
+    { href: "mailto:staffplan@goinvo.com ", label: "Contact" }
 ];
 
 const columnThreeLinks = [
     { href: "https://staffplan.com/sign_in", label: "Sign In" },
-    { href: "#", label: "Try for Free" }
+    { href: "https://staffplan.com/registrations/new", label: "Try for Free" }
 ];
 
 const Footer: React.FC = () => (
     <footer className="bg-contrastBlue flex flex-col sm:flex-row justify-center px-14 sm:px-7 py-10 min-h-[20rem]">
-        <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" />
-                <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-36 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>
-                ))}
+        <div className='flex flex-col sm:flex-row justify-between w-full max-w-[1238px] mx-auto'>
+            <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" />
+                    <p className="ml-2 self-end text-contrastGrey">&copy; 2024</p>
+                </div>
             </div>
-            <div className="flex flex-col space-y-8">
-                {columnTwoLinks.map((link, index) => (
-                    <Link key={index} href={link.href}>
-                        {link.label}
-                    </Link>
-                ))}
+            <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) => (
+                        <Link key={index} href={link.href}>
+                            {link.label}
+                        </Link>
+                    ))}
+                </div>
+                <div className="flex flex-col space-y-8">
+                    {columnThreeLinks.map((link, index) => (
+                        <Link key={index} href={link.href}>
+                            {link.label}
+                        </Link>
+                    ))}
+                </div>
             </div>
-            <div className="flex flex-col space-y-8">
-                {columnThreeLinks.map((link, index) => (
-                    <Link key={index} href={link.href}>
-                        {link.label}
-                    </Link>
-                ))}
+            <div className="flex sm:hidden items-end mt-4">
+                <Image src="/goinvoLogo.svg" width={98} height={52} alt="GoInvo logo" />
+                <p className="ml-2 self-end text-contrastGrey">&copy; 2024</p>
             </div>
         </div>
-        <div className="flex sm:hidden items-end mt-4">
-            <Image src="/goinvoLogo.svg" width={98} height={52} alt="GoInvo logo" />
-            <p className="ml-2 self-end text-contrastGrey">&copy; 2024</p>
-        </div>
     </footer >
 );
 

diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx
@@ -1,40 +1,46 @@
 import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
+import FeedbackModal from './FeedbackModal';
 
 interface NavbarLinksTypes {
     href: string;
     label: string;
 }
 
 const navbarLinks: NavbarLinksTypes[] = [
-    { href: "#Feedback", label: "Feedback" },
-    { href: "#Try", label: "Try" },
+    { href: "https://staffplan.com/registrations/new", label: "Try" },
     { href: "https://staffplan.com/sign_in", label: "Sign in" }
 ];
 
-const Header: React.FC = () => (
-    <header className="sticky sm:fixed top-0 w-full sm:inset-x-0 sm:w-[calc(100%-40px)] sm:mx-auto bg-white z-50 text-tiffany px-4 rounded-lg sm:mt-4">
-        <div className="flex justify-between items-center">
-            <div className="py-4">
-                <Image src="/logo.svg" width={174} height={43} alt="staffplan logo" />
-            </div>
-            <nav className='mr-4'>
-                <Link className="block sm:hidden text-26px" href={"https://staffplan.com/sign_in"}>
-                    {"Sign In"}
-                </Link>
-                <ul className="hidden sm:flex text-26px space-x-8">
-                    {navbarLinks.map((link, index) => (
-                        <li key={index} className='py-2.5 font-semibold'>
-                            <Link href={link.href}>
-                                {link.label}
-                            </Link>
+
+const Header: React.FC = () => {
+
+    return (
+        <header className="sticky sm:fixed top-0 w-full max-w-[1238px] sm:inset-x-0 sm:w-[calc(100%-40px)] sm:mx-auto bg-white z-50 text-tiffany px-4 rounded-lg sm:mt-4" >
+            <div className="flex justify-between items-center">
+                <div className="py-4">
+                    <Image src="/logo.svg" width={174} height={43} alt="staffplan logo" />
+                </div>
+                <nav className='mr-4'>
+                    <Link className="block sm:hidden" href={"https://staffplan.com/sign_in"}>
+                        {"Sign In"}
+                    </Link>
+                    <ul className="hidden sm:flex space-x-8">
+                        <li className='py-2.5 font-semibold'>
+                            <FeedbackModal />
                         </li>
-                    ))}
-                </ul>
-            </nav>
-        </div>
-    </header>
-);
+                        {navbarLinks.map((link, index) => (
+                            <li key={index} className='py-2.5 font-semibold'>
+                                <Link href={link.href}>
+                                    {link.label}
+                                </Link>
+                            </li>
+                        ))}
+                    </ul>
+                </nav>
+            </div>
+        </header >)
+};
 
 export default Header;
diff --git a/src/app/components/InfoSection.tsx b/src/app/components/InfoSection.tsx
@@ -6,21 +6,27 @@ type InfoSectionProps = {
     showButton?: boolean;
     href?: string;
     buttonText?: string;
-    className?: string
+    align?: string
+    className?: string;
 };
 
-const InfoSection: React.FC<InfoSectionProps> = ({ infoData, showButton = false, href, buttonText = "Click Me", className }) => {
+const InfoSection: React.FC<InfoSectionProps> = ({ infoData, showButton = false, href, buttonText = "Click Me", align, className }) => {
+    const rightAlign = align === 'right' ? 'ml-auto' : ''
     return (
-        <section className="mt-8 sm:mt-0 space-y-8 pl-6 sm:pl-10 pr-14 sm:w-1/2 mb-8 sm:mb-0 order-1 sm:order-none">
-            {infoData.map((info, index) => (
-                <div key={index} className="space-y-2 mb-4 mt-6">
-                    <h1 className="text-26px font-bold">{info.title}</h1>
-                    <h2 className="text-26px font-medium">{info.description}</h2>
+        <section className={`h-auto mt-8 sm:mt-0 space-y-8 pl-6 sm:pl-10 pr-14 sm:w-1/2 sm:mx-auto mb-auto mb-8 sm:mb-0 order-1 sm:order-none ${className}`}>
+            <div className={`max-w-[555px] ${rightAlign}`}>
+                {infoData.map((info, index) => (
+                    <div key={index} className="space-y-2 mb-4 mt-6">
+                        <h1 className="font-bold">{info.title}</h1>
+                        <h2 className="font-medium">{info.description}</h2>
+                    </div>
+                ))}
+                <div className="mt-10">
+                    {showButton && (
+                        <RoundedButton text={buttonText} href={href} variant="outline" />
+                    )}
                 </div>
-            ))}
-            {showButton && (
-                <RoundedButton text={buttonText} href={href} variant="outline" />
-            )}
+            </div>
         </section>
     );
 };

diff --git a/src/app/components/LeftContentSection.tsx b/src/app/components/LeftContentSection.tsx
@@ -4,13 +4,14 @@ import RoundedContainer from "./RoundedContainer"
 interface RightContentSectionProps {
     children?: React.ReactNode;
     roundedContainerChildren?: React.ReactNode;
+    roundedContainerClassName?: string;
 }
 
-const LeftContentSection: React.FC<RightContentSectionProps> = ({ children, roundedContainerChildren }) => {
+const LeftContentSection: React.FC<RightContentSectionProps> = ({ children, roundedContainerChildren, roundedContainerClassName }) => {
     return (
-        <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center w-full">
+        <div className="flex flex-col sm:flex-row sm:justify-between md:items-center lg:items-start w-full">
             {children}
-            <RoundedContainer align="right" className="bg-purple">
+            <RoundedContainer align="right" className={`bg-purple ${roundedContainerClassName}`}>
                 {roundedContainerChildren}
             </RoundedContainer>
         </div>

diff --git a/src/app/components/MyStaffplanPreviewContainer.tsx b/src/app/components/MyStaffplanPreviewContainer.tsx
@@ -2,12 +2,12 @@ import Image from "next/image";
 
 const MyStaffplanPreviewContainer: React.FC = () => {
     return (
-        <div className="relative mr-auto w-[100%] sm:w-[90%] aspect-[8.5/5.5] sm:-translate-y-4 rounded-lg">
+        <div className="relative w-[100%] max-w-[555px] aspect-[8.5/5.5] ml-auto sm:-translate-y-12 rounded-lg">
             <Image
                 src="/myStaffplanPreview.png"
                 alt="Description of image"
                 fill
-                className="rounded-lg object-cover object-top"
+                className="rounded-lg object-cover object-top pl-0 sm:pl-1 xl:pl-0"
             />
         </div>
     );

diff --git a/src/app/components/PeoplePreviewContainer.tsx b/src/app/components/PeoplePreviewContainer.tsx
@@ -2,12 +2,12 @@ import Image from "next/image";
 
 const PeoplePreviewContainer: React.FC = () => {
     return (
-        <div className="relative ml-auto w-[100%] sm:w-[90%] aspect-[8.5/5.5] sm:translate-y-14 py-4">
+        <div className="relative mr-auto w-[100%] max-w-[555px] aspect-[8.5/5.5] sm:translate-y-12">
             <Image
                 src="/peoplePreview.png"
                 alt="Description of image"
                 fill
-                className="rounded-lg object-cover object-center"
+                className="rounded-lg object-cover object-top pr-0 sm:pr-1 xl:pr-0"
             />
         </div>
     );

diff --git a/src/app/components/RightContentSection.tsx b/src/app/components/RightContentSection.tsx
@@ -9,7 +9,7 @@ interface RightContentSectionProps {
 
 const RightContentSection: React.FC<RightContentSectionProps> = ({ children, roundedContainerChildren, roundedContainerClassName }) => {
   return (
-    <div className="flex flex-col sm:flex-row justify-between sm:items-center w-full my-8 sm:my-20">
+    <div className="flex flex-col sm:flex-row justify-between sm:items-start w-full my-8 sm:my-20">
       <RoundedContainer align="left" className={`bg-tiffany ${roundedContainerClassName}`}>
         {roundedContainerChildren}
       </RoundedContainer>

diff --git a/src/app/components/RoundedContainer.tsx b/src/app/components/RoundedContainer.tsx
@@ -7,10 +7,10 @@ type RoundedContainerProps = {
 
 const RoundedContainer: React.FC<RoundedContainerProps> = ({ align = 'left', className, children }) => {
     const roundedClass = align === 'left' ? 'rounded-r-full' : 'rounded-l-full';
-    const alignmentClass = align === 'left' ? 'ml-0 pl-4' : 'ml-auto pr-4';
+    const alignmentClass = align === 'left' ? 'ml-0' : 'ml-auto';
 
     return (
-        <div className={`relative w-full py-4 sm:py-0  sm:w-1/2 aspect-[16/10] ${className} ${roundedClass} ${alignmentClass} flex sm:block items-center justify-center`}>
+        <div className={`relative w-full py-4 sm:py-0 sm:w-1/2 max-h-[421px] aspect-[16/10] ${className} ${roundedClass} ${alignmentClass} flex items-center justify-center`}>
             {children}
         </div >
     );

diff --git a/src/app/components/StaffplanDemoContainer.tsx b/src/app/components/StaffplanDemoContainer.tsx
@@ -14,18 +14,18 @@ const StaffplanDemoContainer: React.FC<StaffplanDemoContainerProps> = ({ childre
                     className="object-contain" alt="Try Staffplan!" />
             </div>
             {children}
-            <div className="relative w-full h-full px-8 aspect-[21/19.4] sm:aspect-[21/7] my-6 sm:mb-6 mt-10">
+            <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">
                 <Image
                     src="/tryStaffplanPreview.png"
                     alt="Staffplan Demo"
                     fill
-                    className="sm:block hidden rounded-lg object-cover px-1"
+                    className="sm:block hidden rounded-lg object-cover px-1 xl:px-0"
                 />
                 <Image
                     src="/tryStaffplanMobilePreview.png"
                     alt="Staffplan Demo"
                     fill
-                    className="sm:hidden block rounded-lg object-cover px-1"
+                    className="sm:hidden block rounded-lg object-cover"
                 />
             </div>
             <RoundedButton text="Sign me up!" variant="filled" size="large" href="https://staffplan.com/registrations/new" />

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -18,6 +18,7 @@ body {
   color: var(--foreground);
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
+  font-size: 22px;
 }
 
 .bg-demo-gradient {