Dev animation

frequency-chain · Nov 16, 2024 · 33229e3 · 33229e3
1 parent f9b04d8
commit 33229e3
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 60 deletions.
diff --git a/src/components/Animations/Developer.svelte b/src/components/Animations/Developer.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { base } from '$app/paths';
+  import LottieWrapper from '$lib/vendor/LottieWrapper.svelte';
+</script>
+
+<LottieWrapper
+  class={$$restProps.class}
+  src="{base}/animation/developer-dot.lottie"
+  autoplay
+  playOnVisible
+  layout={{ fit: 'fit-width', align: [0.5, 0.5] }}
+  renderConfig={{ autoResize: true }}
+/>
diff --git a/src/components/Sections/DeveloperSteps.svelte b/src/components/Sections/DeveloperSteps.svelte
@@ -8,51 +8,55 @@
   import { DeveloperStepsText } from '$lib/consts';
 
   const sectionParagraphClasses = 'text-sm mt-f8';
-  const sectionClasses = 'ml-[30px]';
-  const stepTitleClasses = 'text-h3 font-bold text-primary';
+  const sectionClasses = 'mt-[48px] ml-[30px] mr-[30px]';
+  const stepTitleClasses = 'text-h3 font-bold text-primary leading-0';
 </script>
 
 <div class="hidden lg:block">
-  <section class="flex shrink flex-wrap justify-end">
-    <!-- STEP ONE -->
-    <div class="flex basis-[500px] pl-0 align-super" id="step-1">
-      <CircleOne />
-      <div class={sectionClasses}>
-        <h3 class={stepTitleClasses}>{DeveloperStepsText.one.title}</h3>
-        <SectionParagraph class={sectionParagraphClasses}>
-          {@html DeveloperStepsText.one.text_html}
-        </SectionParagraph>
+  <section class="mx-auto flex max-w-screen-lg flex-col">
+    <div class="flex w-full pl-[14%]">
+      <!-- STEP ONE -->
+      <div class="flex" id="step-1">
+        <CircleOne />
+        <div class={sectionClasses}>
+          <h3 class={stepTitleClasses}>{DeveloperStepsText.one.title}</h3>
+          <SectionParagraph class={sectionParagraphClasses}>
+            {@html DeveloperStepsText.one.text_html}
+          </SectionParagraph>
+        </div>
       </div>
-    </div>
-    <!-- STEP TWO -->
-    <div class="flex h-1/2 basis-[500px] pt-f32 align-sub" id="step-2">
-      <CircleTwo />
-      <div class={sectionClasses}>
-        <h3 class={stepTitleClasses}>{DeveloperStepsText.two.title}</h3>
-        <SectionParagraph class={sectionParagraphClasses}>
-          {DeveloperStepsText.two.text_html}
-        </SectionParagraph>
+      <!-- STEP TWO -->
+      <div class="flex pt-[36px]" id="step-2">
+        <CircleTwo />
+        <div class={sectionClasses}>
+          <h3 class={stepTitleClasses}>{DeveloperStepsText.two.title}</h3>
+          <SectionParagraph class={sectionParagraphClasses}>
+            {DeveloperStepsText.two.text_html}
+          </SectionParagraph>
+        </div>
       </div>
     </div>
 
-    <!-- STEP THREE -->
-    <div class="pl flex basis-1/2 pl-f128 align-super" id="step-3">
-      <CircleThree />
-      <div class={sectionClasses}>
-        <h3 class={stepTitleClasses}>{DeveloperStepsText.three.title}</h3>
-        <SectionParagraph class={sectionParagraphClasses}>
-          {DeveloperStepsText.three.text_html}
-        </SectionParagraph>
+    <div class="-mt-[30px] flex w-full pr-[14%]">
+      <!-- STEP THREE -->
+      <div class="flex" id="step-3">
+        <CircleThree />
+        <div class={sectionClasses}>
+          <h3 class={stepTitleClasses}>{DeveloperStepsText.three.title}</h3>
+          <SectionParagraph class={sectionParagraphClasses}>
+            {DeveloperStepsText.three.text_html}
+          </SectionParagraph>
+        </div>
       </div>
-    </div>
-    <!-- STEP FOUR -->
-    <div class="pl-f74 flex basis-1/2 pl-0 pt-f48 align-sub" id="step-4">
-      <CircleFour />
-      <div class={sectionClasses}>
-        <h3 class={stepTitleClasses}>{DeveloperStepsText.four.title}</h3>
-        <SectionParagraph class={sectionParagraphClasses}>
-          {DeveloperStepsText.four.text_html}
-        </SectionParagraph>
+      <!-- STEP FOUR -->
+      <div class="flex pt-[36px]" id="step-4">
+        <CircleFour />
+        <div class={sectionClasses}>
+          <h3 class={stepTitleClasses}>{DeveloperStepsText.four.title}</h3>
+          <SectionParagraph class={sectionParagraphClasses}>
+            {DeveloperStepsText.four.text_html}
+          </SectionParagraph>
+        </div>
       </div>
     </div>
   </section>

diff --git a/src/components/Sections/DeveloperStepsMobile.svelte b/src/components/Sections/DeveloperStepsMobile.svelte
@@ -10,8 +10,8 @@
   const sectionParagraphClasses = 'text-normal mt-f12 leading-[20px]';
   const stepTitleClasses = 'text-h3 font-bold text-primary';
   const circleWidth = '60';
-  const sectionClasses = 'flex flex-col px-[36px]';
-  const stepClasses = 'py-[12px] flex flex-col';
+  const sectionClasses = 'flex flex-col';
+  const stepClasses = 'py-[4px] flex flex-col';
 </script>
 
 <!-- Developer Steps -->

diff --git a/src/components/Sections/DeveloperStepsTablet.svelte b/src/components/Sections/DeveloperStepsTablet.svelte
@@ -7,14 +7,14 @@
 
   import { DeveloperStepsText } from '$lib/consts';
 
-  const sectionParagraphClasses = 'text-[12px] mt-[16px]';
+  const sectionParagraphClasses = 'text-[12px] mt-[16px] min-h-[100px]';
   const stepTextClasses = '';
   const stepTitleClasses = 'text-[40px] font-bold text-primary';
   const stepClasses = 'flex flex-col';
   const circleWidth = '60';
 </script>
 
-<div class="hidden px-[64px] md:block lg:hidden">
+<div class="hidden md:block lg:hidden">
   <section class="flex shrink">
     `
     <div>
@@ -29,7 +29,7 @@
         </div>
       </div>
       <!-- STEP THREE -->
-      <div class={stepClasses} id="step-3 mt-[36px]">
+      <div class={stepClasses} id="step-3">
         <CircleThree width={circleWidth} />
         <div class={stepTextClasses}>
           <h3 class={stepTitleClasses}>{DeveloperStepsText.three.title}</h3>
@@ -40,9 +40,9 @@
       </div>
     </div>
 
-    <div class="ml-f12">
+    <div class="ml-f12 pt-[90px]">
       <!-- STEP TWO -->
-      <div class="{stepClasses} pt-[98px]" id="step-2">
+      <div class={stepClasses} id="step-2">
         <CircleTwo width={circleWidth} />
         <div class={stepTextClasses}>
           <h3 class={stepTitleClasses}>{DeveloperStepsText.two.title}</h3>
@@ -52,7 +52,7 @@
         </div>
       </div>
       <!-- STEP FOUR -->
-      <div class="{stepClasses} mt-[94px]" id="step-4">
+      <div class={stepClasses} id="step-4">
         <CircleFour width={circleWidth} />
         <div class={stepTextClasses}>
           <h3 class={stepTitleClasses}>{DeveloperStepsText.four.title}</h3>

diff --git a/src/components/Sections/Developers.svelte b/src/components/Sections/Developers.svelte
@@ -3,37 +3,33 @@
   import { base } from '$app/paths';
   import SlideIn from '../SlideIn.svelte';
   import SectionWrapper from './SectionWrapper.svelte';
-  import FrequencyDevelopers from '$lib/assets/frequency-developers.png';
-  import FrequencyDevelopersMobile from '$lib/assets/frequency-developers-mobile.png';
-  import FrequencyDevelopersTablet from '$lib/assets/frequency-developers-tablet.png';
   import DeveloperStepsMobile from '$components/Sections/DeveloperStepsMobile.svelte';
   import DeveloperStepsTablet from '$components/Sections/DeveloperStepsTablet.svelte';
   import DeveloperSteps from '$components/Sections/DeveloperSteps.svelte';
   import { DeveloperStepsText } from '$lib/consts';
+  import DeveloperAnimation from '../Animations/Developer.svelte';
 </script>
 
 <!-- Graphic and Header -->
-<SectionWrapper id="developers" class="freq-container overflow-hidden pt-[30px] md:pt-[38px] lg:pt-[34px]">
-  <section class="flex shrink flex-col lg:flex-row">
-    <div class="developer-squiggles">
-      <img src={FrequencyDevelopersMobile} alt="abstract developer timeline" class="block md:hidden" />
-      <img src={FrequencyDevelopersTablet} alt="abstract developer timeline" class="hidden md:block lg:hidden" />
-      <img src={FrequencyDevelopers} alt="abstract developer timeline" class="ml-f16 hidden max-w-[700px] lg:block" />
-    </div>
-    <div class="px-[36px] md:px-[64px] lg:px-[128px]">
+<SectionWrapper id="developers" class="pt-[30px] md:pt-[38px] lg:pt-[34px]">
+  <section class="mx-auto flex max-w-screen-xl flex-col lg:flex-row">
+    <DeveloperAnimation class="max-h-[240px] md:max-h-[380px] lg:max-h-none" />
+    <div class="freq-container lg:mt-[36px]">
       <SlideIn class="lg:basis-1/3]">
-        <h2 class="mx-0 w-full text-[52px] font-bold text-teal md:mt-[24px]">{DeveloperStepsText.header.title}</h2>
+        <h2 class="mx-0 w-full text-[52px] font-bold text-teal md:mt-[24px] md:max-w-[400px]">
+          {DeveloperStepsText.header.title}
+        </h2>
         <p class="mt-f24 text-[22px] font-bold">{DeveloperStepsText.header.text_html}</p>
       </SlideIn>
     </div>
   </section>
-  <div class="mt-[22px]">
+  <div class="freq-container mt-[22px]">
     <DeveloperStepsMobile />
     <DeveloperStepsTablet />
     <DeveloperSteps />
   </div>
-  <section class="my-f56 flex justify-center px-[36px]">
-    <Button href="{base}/docs" size="lg" class="h6 p-f16 lg:hidden">
+  <section class="freq-container-padding my-f56 flex justify-center">
+    <Button href="{base}/docs" size="lg" class="h6 max-w-[90vw] p-f16 lg:hidden">
       {DeveloperStepsText.button.title}
     </Button>
     <Button href="{base}/docs" size="lg" class="mt-[56px] hidden lg:block">

diff --git a/src/lib/assets/frequency-developers-mobile.png b/src/lib/assets/frequency-developers-mobile.png
diff --git a/src/lib/assets/frequency-developers-tablet.png b/src/lib/assets/frequency-developers-tablet.png
diff --git a/src/lib/assets/frequency-developers.png b/src/lib/assets/frequency-developers.png
diff --git a/static/animation/developer-dot.lottie b/static/animation/developer-dot.lottie