add blue blob under community banner, improve animation in blocks

buildel · Mar 1, 2024 · a477ca4 · a477ca4
1 parent be9ae6e
commit a477ca4
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/app/components/sections/blocks/animations.ts b/app/components/sections/blocks/animations.ts
@@ -9,20 +9,35 @@ export const listing: Variants = {
     transition: {
       delay: 0.1,
       staggerChildren: 0.2,
-      ease: "easeOut",
+      ease: "anticipate",
+      bounce: 0,
     },
   },
   reveal: {
     opacity: 1,
     transition: {
       delay: 0.1,
       staggerChildren: 0.2,
-      ease: "easeOut",
+      ease: "easeInOut",
+      bounce: 0,
     },
   },
 };
 
 export const listItem: Variants = {
-  hidden: { opacity: 0, y: 100 },
-  show: { opacity: 1, y: 0 },
+  hidden: {
+    opacity: 0,
+    y: 120,
+    scale: 0.3,
+    filter: "blur(8px)",
+    originX: 0,
+    originY: 1,
+  },
+  show: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    filter: "blur(0px)",
+    transition: { duration: 0.3, type: "tween" },
+  },
 };
diff --git a/app/components/sections/community/JoinCommunity.tsx b/app/components/sections/community/JoinCommunity.tsx
@@ -4,7 +4,7 @@ import { DiscordLogo } from "~/icons/DiscordLogo";
 export const JoinCommunity = () => {
   return (
     <div className="w-full flex justify-center items-center py-16 relative px-4 lg:px-0">
-      <div className="layout !p-4 lg:!p-8 flex flex-col bg-black rounded-2xl z-[1] relative">
+      <div className="layout !p-4 lg:!p-8 flex flex-col bg-black rounded-2xl z-[2] relative">
         <h4 className="h4-mobile lg:h4-desktop w-full lg:w-2/3 mb-7">
           Join our growing community. Find inspiration, support and connect with
           other builders
@@ -21,6 +21,8 @@ export const JoinCommunity = () => {
         />
       </div>
 
+      <div className='w-3/4 bottom-[100px] absolute bg-[#7177FF] h-[60px] z-[1] rounded-full blur-[200px]' />
+
       <img
         src="/assets/background-transition.png"
         alt="transition"

diff --git a/app/components/sections/integration/CodeSnippetSection.tsx b/app/components/sections/integration/CodeSnippetSection.tsx
@@ -28,7 +28,7 @@ export const CodeSnippetSection = ({
   imageDirectory,
 }: CodeSnippetSectionProps) => {
   return (
-    <div className="flex flex-col-reverse lg:flex-row items-start justify-between layout pb-14">
+    <div className="flex flex-col-reverse lg:flex-row items-start justify-between layout pb-14 lg:h-[500px]">
       <div className="flex flex-col w-full lg:w-2/5 mt-14">
         {title}
         <p className="mt-4 mb-6 text-neutral-300 font-secondary">{subtitle}</p>