header changes

goinvo · Nov 14, 2024 · 8ea58c9 · 8ea58c9
1 parent 7d3ab07
commit 8ea58c9
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 30 deletions.
diff --git a/public/tryStaffplan.png b/public/tryStaffplan.png
diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx
@@ -14,9 +14,9 @@ const navbarLinks: NavbarLinksTypes[] = [
 ];
 
 const Header: React.FC = () => (
-    <header className="bg-white sticky top-0 z-50 text-tiffany px-4">
-        <div className="flex justify-between items-center py-1">
-            <div className="py-1">
+    <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'>
@@ -25,7 +25,7 @@ const Header: React.FC = () => (
                 </Link>
                 <ul className="hidden sm:flex text-26px space-x-8">
                     {navbarLinks.map((link, index) => (
-                        <li key={index}>
+                        <li key={index} className='py-2.5 font-semibold'>
                             <Link href={link.href}>
                                 {link.label}
                             </Link>

diff --git a/src/app/components/RoundedContainer.tsx b/src/app/components/RoundedContainer.tsx
@@ -17,11 +17,3 @@ const RoundedContainer: React.FC<RoundedContainerProps> = ({ align = 'left', cla
 };
 
 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> */}
diff --git a/src/app/components/StaffplanDemoContainer.tsx b/src/app/components/StaffplanDemoContainer.tsx
@@ -7,27 +7,29 @@ interface StaffplanDemoContainerProps {
 
 const StaffplanDemoContainer: React.FC<StaffplanDemoContainerProps> = ({ children }) => {
     return (
-        <section className="min-h-[50vh] sm:min-h-screen flex flex-col items-center justify-between bg-demo-gradient pb-6">
-            <h1 className="hidden sm:block text-huge font-bold mb-4">Try Staffplan!</h1>
+        <section className="flex flex-col items-center justify-between bg-demo-gradient pb-6 px-4">
+            <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!" />
+            </div>
             {children}
-            <div className="relative w-full h-full px-4 aspect-[21/18] sm:aspect-[20/6.5] my-6 sm:my-0">
-                <div className="relative w-full h-full rounded-lg">
-                    <Image
-                        src="/tryStaffplanPreview.png"
-                        alt="Staffplan Demo"
-                        fill
-                        className="sm:block hidden rounded-lg object-cover"
-                    />
-                    <Image
-                        src="/tryStaffplanMobilePreview.png"
-                        alt="Staffplan Demo"
-                        fill
-                        className="sm:hidden block rounded-lg object-cover"
-                    />
-                </div>
+            <div className="relative w-full h-full px-8 aspect-[21/19.4] 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"
+                />
+                <Image
+                    src="/tryStaffplanMobilePreview.png"
+                    alt="Staffplan Demo"
+                    fill
+                    className="sm:hidden block rounded-lg object-cover px-1"
+                />
             </div>
             <RoundedButton text="Sign me up!" variant="filled" size="large" href="https://staffplan.com/registrations/new" />
-        </section>
+        </section >
     );
 };