crawlora · yashdobariya-scaletech · Nov 26, 2024 · Nov 26, 2024 · Nov 27, 2024 · Nov 27, 2024
diff --git a/src/components/sections/landing/LandingHero.astro b/src/components/sections/landing/LandingHero.astro
@@ -5,13 +5,16 @@ import homeImage from '../../../pages/images/home/home-5.png';
 import userImage1 from '../../../pages/images/user/img-1.jpg';
 import userImage2 from '../../../pages/images/user/img-2.jpg';
 import userImage3 from '../../../pages/images/user/img-3.jpg';
+import userImage4 from '../../../pages/images/user/img-4.jpg';
 import homeBg from '../../../pages/images/home/home5-bg.png';
 import { Image } from 'astro:assets';
+import UserSlider from '@/components/ui/userSlider/UserSlider.astro';
 
 const users = [
   { imgSrc: userImage1, alt: 'User 1' },
   { imgSrc: userImage2, alt: 'User 2' },
   { imgSrc: userImage3, alt: 'User 3' },
+  { imgSrc: userImage4, alt: 'User 4' },
 ];
 ---
 
@@ -39,26 +42,8 @@ const users = [
           >
         </div>
         <div class="d-flex align-items-center mt-5">
-          <div class="flex-shrink-0">
-            <div class="more-profile d-flex">
-              {
-                users.map((user) => (
-                  <div class="avatar-sm top-child">
-                    <Image
-                      src={user.imgSrc}
-                      alt={user.alt}
-                      class="img-fluid avatar-sm"
-                    />
-                  </div>
-                ))
-              }
-              <div class="avatar-sm top-child">
-                <p class="f-14 mb-0">99+</p>
-              </div>
-            </div>
-          </div>
-          <div class="flex-grow-1 ms-3">
-            <h6 class="mb-0">{homeSectionData.userCountText}</h6>
+          <UserSlider users={users} />
+          <div class="flex-grow-1 ms-2">
             <p class="fw-semibold text-muted mb-0 text-[12px]">
               {homeSectionData.userCountDescription}
             </p>

diff --git a/src/components/sections/pricing/LandingPagePrice.astro b/src/components/sections/pricing/LandingPagePrice.astro
@@ -1,56 +1,54 @@
 ---
-import betaLaunchData from '../../../../src/data_files/betaLaunchContent.json';
+import betaLaunchData from "../../../../src/data_files/betaLaunchContent.json";
 
 const checkIcon =
-  'mdi mdi-check-circle-outline f-20 text-primary me-2 align-middle';
+  "mdi mdi-check-circle-outline f-20 text-primary me-2 align-middle";
 ---
 
-<section class="section pricing beta-launch bg-light">
-  <div class="container">
-    <div class="row justify-content-center">
-      <div class="col-lg-8">
-        <div class="title mb-5 text-center">
-          <h6 class="fw-bold text-primary mb-0">🚀 Beta Launch Exclusive</h6>
-          <h2 class="f-40 fs-1 fs-md-4">
-            Be the First to Try Our New Product!
-          </h2>
-          <p class="text-muted mt-3">
+<section class='section pricing beta-launch bg-light'>
+  <div class='container'>
+    <div class='row justify-content-center'>
+      <div class='col-lg-8'>
+        <div class='title mb-5 text-center'>
+          <h6 class='fw-bold text-primary mb-0'>🚀 Beta Launch Exclusive</h6>
+          <h2 class='f-40 fs-1 fs-md-4'>Be the First to Try Crawlora!</h2>
+          <p class='text-muted mt-3'>
             Limited spots available for early adopters. Join now to shape the
             future of our product!
           </p>
         </div>
       </div>
     </div>
-    <div class="row align-items-center justify-content-center">
+    <div class='row align-items-center justify-content-center'>
       {
         betaLaunchData.map((offer) => (
-          <div class="col-lg-6">
-            <div class="mt-lg-0 mt-4 overflow-hidden shadow-sm">
-              <div class="topbar-header bg-primary py-2 text-center">
-                <h6 class="fw-normal mb-0 text-white">Exclusive Beta Offer</h6>
+          <div class='col-lg-6'>
+            <div class='mt-lg-0 mt-4 overflow-hidden shadow-sm'>
+              <div class='topbar-header bg-primary py-2 text-center'>
+                <h6 class='fw-normal mb-0 text-white'>Exclusive Beta Offer</h6>
               </div>
-              <div class="beta-content-box p-4">
-                <div class="badge bg-primary fw-normal f-14 text-white">
+              <div class='beta-content-box p-4'>
+                <div class='badge bg-primary fw-normal f-14 text-white'>
                   {offer.title}
                 </div>
-                <p class="text-dark mt-3">{offer.description}</p>
-                <ul class="list-unstyled mt-4">
+                <p class='text-dark mt-3'>{offer.description}</p>
+                <ul class='list-unstyled mt-4'>
                   {offer.features.map((feature) => (
-                    <li class="mt-2">
+                    <li class='mt-2'>
                       <i class={checkIcon} />
                       {feature}
                     </li>
                   ))}
                 </ul>
-                <div class="tally-popover-email-hero mt-5 p-0">
-                  <button class="btn bg-gradiant">
-                    <i class="mdi mdi-rocket-launch me-2" />
+                <div class='tally-popover-email-hero mt-5 p-0'>
+                  <button class='btn bg-gradiant'>
+                    <i class='mdi mdi-rocket-launch me-2' />
                     {offer.cta.text}
                   </button>
                 </div>
               </div>
-              <div class="beta-footer p-3 text-center">
-                <p class="text-muted small mb-0">
+              <div class='beta-footer p-3 text-center'>
+                <p class='text-muted small mb-0'>
                   {offer.spotsRemaining} spots left! Don’t miss out!
                 </p>
               </div>

diff --git a/src/components/ui/userSlider/UserSlider.astro b/src/components/ui/userSlider/UserSlider.astro
@@ -0,0 +1,80 @@
+---
+import { Image } from 'astro:assets';
+
+const {
+  users = [],
+  containerWidth = '114px', // Default container width
+  imageSize = '48px', // Default size for images
+  animationDuration = '8s', // Default animation speed
+  overlapAmount = '12px', // Amount of overlap between images
+} = Astro.props;
+---
+
+<div class="user-slides-wrap" style={`width: ${containerWidth};`}>
+  <div
+    class="user-slides"
+    style={`width: calc(${users.length * 2 * (parseInt(imageSize) - parseInt(overlapAmount))}px);`}
+  >
+    {
+      users
+        .concat(users)
+        .map((user: { imgSrc: string; alt: string }, index: number) => (
+          <div class="slide-item">
+            <Image
+              src={user.imgSrc as any}
+              alt={user.alt}
+              class="profile-img"
+              style={`width: ${imageSize}; height: ${imageSize};`}
+            />
+          </div>
+        ))
+    }
+  </div>
+</div>
+
+<style>
+  .user-slides-wrap {
+    overflow: hidden;
+    border-radius: 50px;
+    position: relative;
+  }
+
+  .user-slides {
+    display: flex;
+    animation: scroll-left var(--duration, 8s) linear infinite;
+  }
+
+  .slide-item {
+    flex-shrink: 0;
+    width: calc(var(--image-size, 48px)); /* Match the image size */
+    margin-left: calc(-1 * var(--overlap-amount, 12px)); /* Apply overlap */
+  }
+
+  .profile-img {
+    border-radius: 50%;
+    border: 3px solid #fff;
+    object-fit: cover;
+  }
+
+  @keyframes scroll-left {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-50%);
+    }
+  }
+</style>
+
+<script is:inline>
+  // Set dynamic styles for duration, image size, and overlap via CSS variables
+  document.documentElement.style.setProperty(
+    '--duration',
+    `${animationDuration}`
+  );
+  document.documentElement.style.setProperty('--image-size', `${imageSize}`);
+  document.documentElement.style.setProperty(
+    '--overlap-amount',
+    `${overlapAmount}`
+  );
+</script>
diff --git a/src/data_files/LandingPageprice.json b/src/data_files/LandingPageprice.json
@@ -13,6 +13,6 @@
       { "text": "No transaction fees", "enabled": true },
       { "text": "Unlimited Storage", "enabled": true }
     ],
-    "cta": { "text": "Download Now", "link": "/download" }
+    "cta": { "text": "Apply Now", "link": "/apply" }
   }
 ]
diff --git a/src/data_files/landingPageNav.json b/src/data_files/landingPageNav.json
@@ -4,16 +4,30 @@
     "brandComponent": "BrandLogo"
   },
   "links": [
-    { "label": "Home", "href": "/" },
-    { "label": "Apps", "href": "/apps" },
-    { "label": "Services", "href": "/services" },
-    { "label": "Pricing", "href": "/pricing" },
-    { "label": "Blogs", "href": "/blog" },
-    { "label": "Contact", "href": "/contact" }
+    {
+      "label": "Home",
+      "href": "/"
+    },
+    {
+      "label": "Apps",
+      "href": "/apps"
+    },
+    {
+      "label": "Services",
+      "href": "/services"
+    },
+    {
+      "label": "Blogs",
+      "href": "/blog"
+    },
+    {
+      "label": "Contact",
+      "href": "/contact"
+    }
   ],
   "button": {
-    "label": "Download",
-    "href": "/download",
+    "label": "Apply",
+    "href": "/apply",
     "class": "btn bg-gradiant"
   }
-}
+}
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -62,7 +62,9 @@ We set the language of the page to English and add classes for scrollbar and scr
     Setting up the main structure of the page.
     The Navbar is placed at the top, with a slot for the main content and FooterSection at the bottom.
     -->
-    <div class="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8">
+    <div
+      class={`${title.includes('Apply') ? 'p-0' : 'px-4 sm:px-6 lg:px-8'} mx-auto max-w-screen-2xl `}
+    >
       <Navbar />
       <main>
         <slot />

diff --git a/src/pages/apply/index.astro b/src/pages/apply/index.astro
@@ -0,0 +1,92 @@
+---
+import { SITE } from '@/data_files/constants';
+import { Image } from 'astro:assets';
+import MainLayout from '@/layouts/MainLayout.astro';
+
+import userImage1 from '../../pages/images/user/img-1.jpg';
+import userImage2 from '../../pages/images/user/img-2.jpg';
+import userImage3 from '../../pages/images/user/img-3.jpg';
+import userImage4 from '../../pages/images/user/img-4.jpg';
+import UserSlider from '@/components/ui/userSlider/UserSlider.astro';
+
+const pageTitle: string = `Apply | ${SITE.title}`;
+
+const users = [
+  { imgSrc: userImage1, alt: 'User 1' },
+  { imgSrc: userImage2, alt: 'User 2' },
+  { imgSrc: userImage3, alt: 'User 3' },
+  { imgSrc: userImage4, alt: 'User 4' },
+];
+---
+
+<MainLayout
+  title={pageTitle}
+  structuredData={{
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    '@id': 'https://crawlora.com/apply',
+    url: 'https://crawlora.com/apply',
+    name: 'Apply | Crawlora',
+    description:
+      "Stay up-to-date with the latest trends and developments in the data and crawling industry with insights from Crawlora's team of industry experts.",
+    isPartOf: {
+      '@type': 'WebSite',
+      url: 'https://crawlora.com',
+      name: 'Crawlora',
+      description:
+        'Crawlora offers top-tier data tools and expert services to meet all your project needs.',
+    },
+    inLanguage: 'en-US',
+  }}
+>
+  <section
+    class="apply-section from-yellow-300 relative bg-gradient-to-b via-white to-white px-4 pb-16 pt-16 dark:via-gray-900 dark:to-gray-800 sm:px-6 lg:px-8 2xl:max-w-full"
+  >
+    <div
+      class="absolute inset-0 -z-10 bg-gradient-to-t to-transparent opacity-50"
+    >
+    </div>
+    <div class="container mx-auto max-w-4xl text-center">
+      <!-- Headline -->
+      <div class="mb-8">
+        <h2
+          class="text-5xl font-bold leading-tight text-gray-900 dark:text-gray-100"
+        >
+          Ready to unlock the power of web data scraping? <br />
+          <span
+            class="from-blue-500 to-green-500 bg-gradient-to-r bg-clip-text text-4xl dark:text-yellow-400"
+          >
+            Apply for free now!
+          </span>
+        </h2>
+        <div
+          class="popover-hero dark:from-orange-700 relative mx-auto mt-8 w-full max-w-xl rounded-lg bg-gradient-to-tr from-[#FF512F] to-[#F09819] p-6 shadow-xl dark:to-orange-600"
+        >
+          <iframe
+            src="https://tally.so/embed/3qEW67?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1"
+            width="100%"
+            height="300"
+            class="rounded-md border border-gray-200 dark:border-gray-700"
+            style="border: none;"
+            aria-label="Apply Form"></iframe>
+        </div>
+        <p class="mt-4 text-lg text-gray-600 dark:text-gray-300">
+          If you are accepted, we’ll onboard you within <strong
+            >24-48 hours</strong
+          >.
+        </p>
+      </div>
+
+      <div class="mt-5 flex items-center justify-center">
+        <UserSlider users={users} />
+        <div class="ml-3">
+          <p
+            class="mb-0 text-start text-xs font-semibold text-gray-500 dark:text-gray-400"
+          >
+            Turning Data into Actionable Insights, Seamlessly.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+</MainLayout>
diff --git a/src/pages/apps/[...slug].astro b/src/pages/apps/[...slug].astro
@@ -86,12 +86,12 @@ const pageTitle: string = `${product.title} | ${SITE.title}`;
             <!-- Action Buttons -->
             <div class="actions mt-4 flex space-x-3 sm:mt-0">
               <a
-                href="/download"
+                href="/apply"
                 class="btn install-btn flex h-12 items-center justify-center"
                 >Install</a
               >
               <a
-                href="/download"
+                href="/apply"
                 class="btn tryout-btn flex h-12 min-w-[88px] items-center justify-center"
                 >Try Out</a
               >

diff --git a/src/pages/apps/index.astro b/src/pages/apps/index.astro
@@ -83,10 +83,10 @@ try {
                         </h3>
                       </div>
                       <div class="mt-4 flex items-center justify-end space-x-3">
-                        <a href="/download" class="btn install-btn">
+                        <a href="/apply" class="btn install-btn">
                           Install
                         </a>
-                        <a href="/download" class="btn tryout-btn min-w-[90px]">
+                        <a href="/apply" class="btn tryout-btn min-w-[90px]">
                           Try Out
                         </a>
                         <a