Landing page is Gold 🔥

Ashref-dev · Jun 2, 2024 · 331c4cf · 331c4cf
1 parent 10a4f03
commit 331c4cf
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 50 deletions.
diff --git a/Components/Assistant.razor b/Components/Assistant.razor
@@ -1,6 +1,7 @@
 <button
-    class="bg-primary-500 hover:bg-primary-700 transition ease-in-out duration-300 text-white font-bold py-5 px-5 rounded-full shadow-lg fixed right-4 md:right-8 bottom-4 md:bottom-8 shadow-primary-400">
-    <svg fill="#FFFFFF" height="32px" width="32px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
+    class="flex flex-direction-row items-center justify-center gap-4 bg-primary-500 hover:bg-primary-700 transition ease-in-out duration-300 text-white font-bold py-4 px-6 rounded-xl shadow-lg fixed right-4 md:right-5 bottom-4 md:bottom-6 shadow-primary-400">
+    <p>Ask AI</p>
+    <svg fill="#FFFFFF" height="30px" width="30px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
         <g>
             <g>

diff --git a/Components/Pages/Landing/Home.razor b/Components/Pages/Landing/Home.razor
@@ -2,48 +2,55 @@
 
 <PageTitle>Maxula - Next level HR</PageTitle>
 
+<div class="animate-fade animate-delay-[2.2s]">
 <iframe class="d-none d-lg-block absolute"
-        src="https://my.spline.design/3dpathslines1copy-8ad44ec5c01c251a560b644b4e1e6c4c/"
-        frameborder="0"
-        width="100%"
-        height="100%"></iframe>
+    src="https://my.spline.design/3dpathslines1copy-8ad44ec5c01c251a560b644b4e1e6c4c/" frameborder="0" width="100%"
+    height="100%">
+</iframe>
+</div>
 
 <div class="h-screen">
     <div class="relative isolate px-6 pt-14 lg:px-8 pointer-events-none">
 
-        <div class="animate-fade animate-duration-[2s] absolute inset-x-0 -top-40  transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
+        <div class="animate-fade animate-duration-[2s] absolute inset-x-0 -top-40  transform-gpu overflow-hidden blur-3xl sm:-top-80"
+            aria-hidden="true">
             <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg]
              bg-gradient-to-tr from-primary-400 to-primary-500 opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
-                 style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)">
+                style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)">
             </div>
         </div>
         <div class="animate-fade animate-duration-[2s] absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
-             aria-hidden="true">
+            aria-hidden="true">
             <div class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr
              from-primary-400 to-primary-500 opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
-                 style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)">
+                style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)">
             </div>
         </div>
 
 
         <div class="mx-auto max-w-4xl py-20 sm:py-20 lg:py-20">
             <div class="animate-fade-down animate-delay-[1400ms] hidden sm:mb-8 sm:flex sm:justify-center">
-                <div class="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-700 ring-1 ring-gray-900/40 hover:ring-gray-900">
+                <div
+                    class="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-700 ring-1 ring-gray-900/40 hover:ring-gray-900">
                     Announcing our new AR/VR services.
                     <a href="#" class="pointer-events-auto font-semibold text-primary-600">
-                        <span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span>
+                        <span class="absolute inset-0" aria-hidden="true"></span>Read more <span
+                            aria-hidden="true">&rarr;</span>
                     </a>
                 </div>
             </div>
             <div class="text-center">
-                <div class="px-[7rem] py-6 rounded-3xl bg-white/30 backdrop-blur-sm shadow-sm ring-1 ring-black/5">
-                    <h1 class="animate-fade-up animate-duration-2000 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">Empowering Sustainable Solutions for Businesses</h1>
-                    <p class="animate-fade-up animate-delay-500 mt-6 text-lg leading-8 text-gray-700 text-lg">
+                <div class="animate-fade-up animate-duration-2000 px-[7rem] py-8 rounded-3xl bg-white/30 backdrop-blur-sm shadow-sm ring-1 ring-black/5">
+                    <h1
+                        class="animate-fade-up animate-duration-2000 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
+                        Empowering Sustainable Solutions for Businesses</h1>
+                    <p class="animate-fade-up animate-delay-500 mt-6 text-lg leading-8 text-gray-700">
                         Our mission is to revolutionize the way businesses operate by providing cutting-edge solutions.
                     </p>
                 </div>
                 <div class="animate-fade-up animate-delay-1000 mt-10 flex items-center justify-center gap-x-6">
-                    <a class="hover:animate-wiggle hover:animate-duration-300 hover:animate-twice hover:animate-ease-out rounded-md bg-primary-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">
+                    <a
+                        class="hover:animate-wiggle hover:animate-duration-300 hover:animate-twice hover:animate-ease-out rounded-md bg-primary-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">
                         Get started
                     </a>
                     <a class="text-sm font-semibold leading-6 text-gray-900">
@@ -56,20 +63,26 @@
 
 
     </div>
-    <Partners />
+
+    <h4 class="text-center text-lg font-normal mb-4 leading-6 text-gray-900 animate-fade-up animate-delay-[2s] pointer-events-none">
+        Certified by experts:
+    </h4>
+    <div class="">
 
+    <Partners />
+    </div>
 
 
 
-    @* Start scroll down arrow  *@
+    @* Start scroll down arrow *@
     <div class="animate-fade-up animate-delay-[2s] flex items-center justify-center mt-2">
         <div class="box">
             <span></span>
             <span></span>
             <span></span>
         </div>
     </div>
-    @* End scroll down arrow  *@
+    @* End scroll down arrow *@
 </div>
 
 <About />

diff --git a/Components/Pages/Landing/LogoCloud.razor b/Components/Pages/Landing/LogoCloud.razor
@@ -1,5 +1,4 @@
-<!-- This example requires Tailwind CSS v2.0+ -->
-<div class="bg-primary-200 bg-opacity-25">
+<div class="bg-primary-200 bg-opacity-25">
     <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
         <div class="lg:grid lg:grid-cols-2 lg:gap-8">
             <h2 class="max-w-md mx-auto text-3xl font-extrabold text-primary-900 text-center lg:max-w-xl lg:text-left">

diff --git a/Components/Pages/Landing/OneLineMarquee.razor b/Components/Pages/Landing/OneLineMarquee.razor
@@ -0,0 +1,44 @@
+<div>
+	<div class="marquee">
+		<div class="marquee-content scroll">
+			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Microsoft_logo_%282012%29.svg/1024px-Microsoft_logo_%282012%29.svg.png"
+				alt="" srcset="" />
+			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2560px-Google_2015_logo.svg.png"
+				alt="" srcset="" />
+			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Meta_Platforms_Inc._logo.svg/2560px-Meta_Platforms_Inc._logo.svg.png"
+				alt="" srcset="" class="py-2" />
+			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/OpenAI_Logo.svg/2560px-OpenAI_Logo.svg.png"
+				alt="" srcset="" />
+
+			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Microsoft_logo_%282012%29.svg/1024px-Microsoft_logo_%282012%29.svg.png"
+				alt="" srcset="" />
+			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2560px-Google_2015_logo.svg.png"
+				alt="" srcset="" />
+			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Meta_Platforms_Inc._logo.svg/2560px-Meta_Platforms_Inc._logo.svg.png"
+				alt="" srcset="" class="py-2" />
+			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/OpenAI_Logo.svg/2560px-OpenAI_Logo.svg.png"
+				alt="" srcset="" />
+		</div>
+
+
+		<div class="marquee-content scroll">
+			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Microsoft_logo_%282012%29.svg/1024px-Microsoft_logo_%282012%29.svg.png"
+				alt="" srcset="" />
+			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2560px-Google_2015_logo.svg.png"
+				alt="" srcset="" />
+			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Meta_Platforms_Inc._logo.svg/2560px-Meta_Platforms_Inc._logo.svg.png"
+				alt="" srcset="" class="py-2" />
+			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/OpenAI_Logo.svg/2560px-OpenAI_Logo.svg.png"
+				alt="" srcset="" />
+
+			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Microsoft_logo_%282012%29.svg/1024px-Microsoft_logo_%282012%29.svg.png"
+				alt="" srcset="" />
+			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2560px-Google_2015_logo.svg.png"
+				alt="" srcset="" />
+			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Meta_Platforms_Inc._logo.svg/2560px-Meta_Platforms_Inc._logo.svg.png"
+				alt="" srcset="" class="py-2" />
+			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/OpenAI_Logo.svg/2560px-OpenAI_Logo.svg.png"
+				alt="" srcset="" />
+		</div>
+	</div>
+</div>
diff --git a/Components/Pages/Landing/OneLineMarquee.razor.css b/Components/Pages/Landing/OneLineMarquee.razor.css
@@ -0,0 +1,36 @@
+.marquee {
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  user-select: none;
+  gap: 3.5rem;
+}
+.marquee-content {
+  display: flex;
+  flex-shrink: 0;
+  justify-content: space-around;
+  min-width: 100%;
+  gap: 3.5rem;
+  height: 2.2em;
+}
+@media only screen and (min-width: 1440px) {
+  .marquee-content {
+    height: 2.2em !important;
+  }
+}
+
+@keyframes scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-100% - 1rem));
+  }
+}
+.scroll {
+  animation: scroll 40s linear infinite;
+}
+.rev {
+  animation-direction: reverse;
+}
+
diff --git a/Components/Pages/Landing/Partners.razor b/Components/Pages/Landing/Partners.razor
@@ -1,26 +1,3 @@
-<div class="flex overflow-hidden space-x-16 group max-w-2xl h-[6em] py-4 mx-auto rounded-3xl bg-white/30 backdrop-blur-sm shadow-sm ring-1 ring-black/5">
-    <div class="flex space-x-16 animate-loop-scroll group-hover:paused">
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/8ee9f161-df19-4fa7-a2a6-edf9acf0e0d6?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 1" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/80480f8a-69ad-4c30-88ba-f4e7ee08fc51?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 2" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/140d376c-13f2-4823-b397-b3de733bf560?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 3" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/0ae217f1-b695-4661-bd3d-6440eebc2c5c?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 4" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/67017079-51e1-4245-9bf1-b5957eb66c74?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 5" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/515313ac-7ec9-4c6e-95db-80dac2f8b960?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 6" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/c513fc32-3ab9-4cca-911e-0b2642ac7206?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 7" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/5731a5a7-689f-49ae-abf1-6e6dc00c2043?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 8" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/cb51d286-530f-42be-9e91-9c850522f127?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 9" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/44ba8437-f6fd-4a51-bfd3-262d7528f7a4?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 10" />
-    </div>
-    <div class="flex space-x-16 animate-loop-scroll group-hover:paused" aria-hidden="true">
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/8ee9f161-df19-4fa7-a2a6-edf9acf0e0d6?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 1" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/80480f8a-69ad-4c30-88ba-f4e7ee08fc51?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 2" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/140d376c-13f2-4823-b397-b3de733bf560?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 3" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/0ae217f1-b695-4661-bd3d-6440eebc2c5c?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 4" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/67017079-51e1-4245-9bf1-b5957eb66c74?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 5" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/515313ac-7ec9-4c6e-95db-80dac2f8b960?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 6" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/c513fc32-3ab9-4cca-911e-0b2642ac7206?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 7" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/5731a5a7-689f-49ae-abf1-6e6dc00c2043?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 8" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/cb51d286-530f-42be-9e91-9c850522f127?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 9" />
-        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/44ba8437-f6fd-4a51-bfd3-262d7528f7a4?apiKey=7e8b177c7c374d8abaf3aebf27f1c17d&" class="max-w-none" alt="Image 10" />
-    </div>
+<div class="animate-fade-up animate-delay-[2s] pointer-events-none flex overflow-hidden max-w-2xl py-5 mx-auto rounded-3xl bg-white/30 backdrop-blur-sm shadow-sm ring-1 ring-black/5">
+   <OneLineMarquee />
 </div>
diff --git a/Components/Shared/ControlCenter.razor b/Components/Shared/ControlCenter.razor
@@ -17,8 +17,8 @@
         </svg>
     </button>
     <ThemeToggle />
-    <div>
-        <button type="button"
+
+        <button type="button" style="border-radius: 13px !important"
                 class="max-w-xs bg-white rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50"
                 id="user-menu-button" aria-expanded="false" aria-haspopup="true" @onclick="toggleDropdownMenu">
             <img class="h-8 w-8 rounded-full" src="@currentUser.Picture" alt="User profile picture">
@@ -37,10 +37,11 @@
                       clip-rule="evenodd" />
             </svg>
         </button>
-    </div>
+
 
     <div class="drop-shadow-lg">
-        <div class=" origin-top-right @dropdownMenuClass absolute right-0 mt-2 sm:mt-10 lg:mt-38 mr-6 w-48 rounded-lg py-2 bg-white focus:outline-none"
+        <div style="border-radius: 13px !important"
+            class=" origin-top-right @dropdownMenuClass absolute right-0 mt-2 sm:mt-10 lg:mt-38 mr-6 w-48 py-2 bg-white focus:outline-none"
              role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
             <!-- Active: "bg-gray-100", Not Active: "" -->
             <a href="/admin" class="block px-4 py-2 text-sm text-gray-700 transition-all rounded-lg mx-2 hover:text-primary-900 ring-1 ring-transparent hover:bg-primary-100" role="menuitem" tabindex="-1"