Merge pull request #4 from goinvo/imagesAdjustments

Images adjustments

src/app/components/BubbleSpeechContainer.tsx

@@ -1,24 +1,26 @@
-import LeftSpeechBubble from "./LeftSpeechBubble"
-import RightSpeechBubble from "./RightSpeechBubble"
+import Image from "next/image";
+
 
 const BubbleSpeechContainer: React.FC = () => {
     return (
-        <div className="my-2">
-            <div className="flex flex-col ml-0 sm:ml-2 md:ml-4 mt-4 mb-0">
-                <div className="relative ml-16 xs:ml-20 sm:ml-10 md:ml-20 lg:ml-32">
-                    <LeftSpeechBubble text={'Our team has needs help with something in Staffplan...'} />
-                </div>
-                <div className="relative z-10 -mt-2">
-                    <RightSpeechBubble text={"We can help with that!"} />
-                </div>
-                <div className="relative ml-16 xs:ml-20 sm:ml-10 md:ml-20 lg:ml-32">
-                    <LeftSpeechBubble text={'Also, we have ideas!'} />
-                </div>
-                <div className="relative z-10 -mt-4">
-                    <RightSpeechBubble text={"Let’s chat! We can help with that too!"} />
-                </div>
+        <>
+            <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">
+                <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">
+                <Image
+                    src="/getInvolvedMobile.png"
+                    alt="Get involved bubble speech"
+                    fill
+                    className="sm:hidden block object-cover scale-150"
+                />
             </div>
-        </div>
+        </>
     );
 };
 

src/app/components/Chat.tsx

@@ -0,0 +1,10 @@
+import Image from "next/image"
+
+const Chat: React.FC = () => {
+    return (
+        <div className="fixed bottom-5 right-5 bg-tiffany rounded-full w-20 h-20 flex items-center justify-center">
+            <Image src="/chat.svg" width={45} height={45} alt="Chat image" />
+        </div>)
+}
+
+export default Chat

src/app/components/Footer.tsx

@@ -7,12 +7,12 @@ const columnOneLinks = [
         href: "https://github.com/goinvo/staffplan-next-app", label: "Get Involved"
     },
     { href: "#", label: "Feedback" },
-    { href: "https://goinvo.com/", label: "Contact" }
+
 ];
 
 const columnTwoLinks = [
     { href: "#", label: "Help" },
-    { href: "#", label: "Pricing" }
+    { href: "https://goinvo.com/", label: "Contact" }
 ];
 
 const columnThreeLinks = [
@@ -21,15 +21,15 @@ const columnThreeLinks = [
 ];
 
 const Footer: React.FC = () => (
-    <footer className="bg-contrastBlue flex flex-col sm:flex-row justify-center sm:justify-between px-14 sm:px-7 py-10 min-h-[4rem]">
-        <div className="flex flex-col justify-between min-h-[4rem] sm:mb-6 md:mb-0">
+    <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-4">
+            <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; {new Date().getFullYear()}</p>
+                <p className="ml-2 self-end text-contrastGrey">&copy; 2024</p>
             </div>
         </div>
-        <div className="flex flex-col sm:flex-row sm:justify-between justify-normal sm:space-x-24 space-y-8 sm:space-y-2 text-white">
+        <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}>
@@ -52,12 +52,9 @@ const Footer: React.FC = () => (
                 ))}
             </div>
         </div>
-        <div className="self-end bg-tiffany rounded-full w-20 h-20 flex items-center justify-center">
-            <Image src="/chat.svg" width={45} height={45} alt="Chat image" />
-        </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; {new Date().getFullYear()}</p>
+            <p className="ml-2 self-end text-contrastGrey">&copy; 2024</p>
         </div>
     </footer >
 );

src/app/components/Header.tsx

@@ -20,6 +20,9 @@ const Header: React.FC = () => (
                 <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}>

src/app/components/InfoSection.tsx

@@ -6,13 +6,14 @@ type InfoSectionProps = {
     showButton?: boolean;
     href?: string;
     buttonText?: string;
+    className?: string
 };
 
-const InfoSection: React.FC<InfoSectionProps> = ({ infoData, showButton = false, href, buttonText = "Click Me" }) => {
+const InfoSection: React.FC<InfoSectionProps> = ({ infoData, showButton = false, href, buttonText = "Click Me", className }) => {
     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">
+                <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>
                 </div>

src/app/components/MyStaffplanPreviewContainer.tsx

@@ -2,17 +2,12 @@ import Image from "next/image";
 
 const MyStaffplanPreviewContainer: React.FC = () => {
     return (
-        <div className="absolute lg:-top-6 left-1 sm:left-2 w-[100%] sm:w-[90%] h-[90%] w-[100%] sm:h-[95%] aspect-[5/2] rounded-lg ">
+        <div className="relative mr-auto w-[100%] sm:w-[90%] aspect-[8.5/5.5] sm:-translate-y-4 rounded-lg">
             <Image
-                src="/peoplePreview.jpg"
+                src="/myStaffplanPreview.png"
                 alt="Description of image"
                 fill
-                sizes="(max-width: 640px) 100vw, 
-           (max-width: 768px) 80vw, 
-           (max-width: 1024px) 70vw, 
-           (max-width: 1280px) 60vw, 
-           50vw"
-                className="rounded-lg object-contain sm:object-contain lg:object-fill"
+                className="rounded-lg object-cover object-top"
             />
         </div>
     );

src/app/components/PeoplePreviewContainer.tsx

@@ -2,17 +2,12 @@ import Image from "next/image";
 
 const PeoplePreviewContainer: React.FC = () => {
     return (
-        <div className="absolute lg:top-8 right-1 sm:right-4 w-[100%] sm:w-[90%] h-[90%] w-[100%] sm:h-[95%] aspect-[5/2] rounded-lg ">
+        <div className="relative ml-auto w-[100%] sm:w-[90%] aspect-[8.5/5.5] sm:translate-y-14 py-4">
             <Image
-                src="/peoplePreview.jpg"
+                src="/peoplePreview.png"
                 alt="Description of image"
                 fill
-                sizes="(max-width: 640px) 100vw, 
-                   (max-width: 768px) 80vw, 
-                   (max-width: 1024px) 70vw, 
-                   (max-width: 1280px) 60vw, 
-                   50vw"
-                className="rounded-lg object-contain sm:object-contain lg:object-fill"
+                className="rounded-lg object-cover object-center"
             />
         </div>
     );

src/app/components/RightContentSection.tsx

@@ -4,12 +4,13 @@ import RoundedContainer from "./RoundedContainer"
 interface RightContentSectionProps {
   children?: React.ReactNode;
   roundedContainerChildren?: React.ReactNode;
+  roundedContainerClassName?: string;
 }
 
-const RightContentSection: React.FC<RightContentSectionProps> = ({ children, roundedContainerChildren }) => {
+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">
-      <RoundedContainer align="left" className="bg-tiffany">
+      <RoundedContainer align="left" className={`bg-tiffany ${roundedContainerClassName}`}>
         {roundedContainerChildren}
       </RoundedContainer>
       {children}

src/app/components/RoundedContainer.tsx

@@ -1,3 +1,4 @@
+
 type RoundedContainerProps = {
     align?: 'left' | 'right';
     children?: React.ReactNode;
@@ -6,14 +7,21 @@ 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' : 'ml-auto';
+    const alignmentClass = align === 'left' ? 'ml-0 pl-4' : 'ml-auto pr-4';
 
     return (
-        <div className={`relative w-[90%] sm:w-1/2 h-[40vh] sm:h-[45vh] ${className} ${roundedClass} ${alignmentClass} flex sm:block items-center justify-center`}>
+        <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`}>
             {children}
         </div >
-
     );
 };
 
 export default RoundedContainer;
+
+
+{/* <div
+                className="w-full h-full bg-center bg-no-repeat bg-contain translate-y-12"
+                style={{ backgroundImage: "url('/peoplePreview.png')" }}
+            >
+                {/* Ваш контент здесь, если нужно */}
+// </div> */}