From a7aca378c894a5180cb6786d790fbae64e914b4f Mon Sep 17 00:00:00 2001
From: Oleksandr Zhukov <sashazh316@gmail.com>
Date: Tue, 19 Nov 2024 15:24:00 +0200
Subject: [PATCH] added feedback modal, adjusted styles

---
 public/logo.svg                               |  2 +-
 src/app/components/BubbleSpeechContainer.tsx  |  4 +-
 src/app/components/FeedbackModal.tsx          | 48 +++++++++++++
 src/app/components/Footer.tsx                 | 72 ++++++++++---------
 src/app/components/Header.tsx                 | 54 +++++++-------
 src/app/components/InfoSection.tsx            | 28 +++++---
 src/app/components/LeftContentSection.tsx     |  7 +-
 .../MyStaffplanPreviewContainer.tsx           |  4 +-
 src/app/components/PeoplePreviewContainer.tsx |  4 +-
 src/app/components/RightContentSection.tsx    |  2 +-
 src/app/components/RoundedContainer.tsx       |  4 +-
 src/app/components/StaffplanDemoContainer.tsx |  6 +-
 src/app/globals.css                           |  1 +
 src/app/page.tsx                              | 12 +++-
 14 files changed, 159 insertions(+), 89 deletions(-)
 create mode 100644 src/app/components/FeedbackModal.tsx

diff --git a/public/logo.svg b/public/logo.svg
index 730850a..446f5c4 100644
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -1,4 +1,4 @@
-<svg width="424" height="84" viewBox="0 0 424 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 424 84" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_3476_2757)">
 <path d="M0.5 67.9L10.2115 61.0287C10.7756 60.6296 11.4856 60.4964 12.1559 60.664V60.664C12.7608 60.8152 13.2794 61.2023 13.6179 61.726C17.7032 68.0479 22.4776 70.9 29 70.9C35.8 70.9 40.6 66.6 40.6 61.4C40.6 56.2 37.6 52.9001 24.2 47.2001C9 40.8001 3.5 34.1 3.5 23.3C3.5 12.5 13.8 2.30005 29.4 2.30005C45 2.30005 49.6 7.10004 54.9 15.4L45.1107 22.5788C44.6579 22.9109 44.0864 23.0373 43.5358 22.9272L43.2066 22.8614C42.6899 22.758 42.2377 22.4519 41.9286 22.0251C38.8957 17.8371 35.0053 15.4 29.4 15.4C23.5 15.4 19.4 18.7 19.4 23.3C19.4 27.9 21.6 30 35.4 36C51.6 43.2 56.5 50 56.5 60.4C56.5 70.8 45.1 84.1001 29.1 84.1001C13.1 84.1001 7.1 79.1 0.5 68V67.9Z" fill="#03ADA2"/>
 <path d="M94.9212 70.4339C95.218 70.5988 95.4057 70.9083 95.4146 71.2478L95.7002 82.1C93.0002 83.2 88.9002 84 85.0002 84C73.7002 84 67.6002 78.3 67.6002 67.3V44H58.7002V32.7H67.7002V19.7L78.631 13.2757C78.9382 13.0952 79.2881 13 79.6444 13H82.2002V32.7H95.7002V44H82.2002V63.6C82.2002 69.6 84.1002 71.5 89.1002 71.5C93.6818 71.5 92.7218 71.1642 94.0677 70.4155C94.3326 70.2682 94.6563 70.2867 94.9212 70.4339V70.4339Z" fill="#03ADA2"/>
diff --git a/src/app/components/BubbleSpeechContainer.tsx b/src/app/components/BubbleSpeechContainer.tsx
index f1bf046..1cbf037 100644
--- a/src/app/components/BubbleSpeechContainer.tsx
+++ b/src/app/components/BubbleSpeechContainer.tsx
@@ -4,7 +4,7 @@ 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"
@@ -12,7 +12,7 @@ const BubbleSpeechContainer: React.FC = () => {
                     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
new file mode 100644
index 0000000..9a9f421
--- /dev/null
+++ 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
index 676e5e5..b797f4e 100644
--- 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
index 3aadfa5..5309d37 100644
--- a/src/app/components/Header.tsx
+++ b/src/app/components/Header.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
+import FeedbackModal from './FeedbackModal';
 
 interface NavbarLinksTypes {
     href: string;
@@ -8,33 +9,38 @@ interface NavbarLinksTypes {
 }
 
 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;
\ No newline at end of file
diff --git a/src/app/components/InfoSection.tsx b/src/app/components/InfoSection.tsx
index 324eeb8..36609e4 100644
--- 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
index 4fe7a39..bb1cb6b 100644
--- 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
index b037e30..1b1e4d1 100644
--- 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
index 4f1a47c..2e8325f 100644
--- 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
index ecca773..b035eaa 100644
--- 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
index 3e1c5ec..9faced1 100644
--- 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
index 863613e..6ca763b 100644
--- 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
index 30092bd..cef71b2 100644
--- 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 {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9ffacb4..9eaadf4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -14,12 +14,16 @@ const contentSections = [
     infoData: STAFFPLAN_INFO,
     showButton: true,
     buttonText: "Learn More",
+    roundedContainerClassName: 'pr-auto sm:pr-16 pl-4',
+    infoSectionStyles: 'sm:-translate-y-12'
   },
   {
     Component: LeftContentSection,
     roundedContainerChildren: <PeoplePreviewContainer />,
     infoData: ADVANTAGES_INFO,
     showButton: false,
+    alignInfo: 'right',
+    roundedContainerClassName: 'pl-auto sm:pl-16 pr-4'
   },
   {
     Component: RightContentSection,
@@ -28,7 +32,9 @@ const contentSections = [
     showButton: true,
     buttonText: "Go to our GitHub",
     href: "https://github.com/goinvo/staffplan-next-app",
-    roundedContainerClassName: 'my-8',
+    roundedContainerClassName: 'my-8 px-5',
+    infoSectionStyles: 'mt-8'
+
   },
 ];
 
@@ -39,10 +45,10 @@ export default function Content() {
     <>
       <StaffplanDemoContainer />
       {contentSections.map((section, index) => {
-        const { Component, roundedContainerChildren, infoData, showButton, buttonText, href } = section;
+        const { Component, roundedContainerChildren, infoData, showButton, buttonText, href, alignInfo, infoSectionStyles } = section;
         return (
           <Component key={index} roundedContainerChildren={roundedContainerChildren} roundedContainerClassName={section.roundedContainerClassName}>
-            <InfoSection infoData={infoData} showButton={showButton} buttonText={buttonText} href={href} />
+            <InfoSection infoData={infoData} showButton={showButton} buttonText={buttonText} href={href} align={alignInfo} className={infoSectionStyles} />
           </Component>
         );
       })}