Merge pull request #9 from spendify-io/ui/hero-improvements

[WIP] feat/ui: Website Hero section UI improvements
spendify-io · Dec 21, 2022 · 39381d6 · 39381d6
2 parents 3e3b791 + 1ad753a
commit 39381d6
Show file tree

Hide file tree

Showing 15 changed files with 504 additions and 54 deletions.
diff --git a/modules/components/BaseGradientRadix.tsx b/modules/components/BaseGradientRadix.tsx
@@ -0,0 +1,74 @@
+// Chakra UI Imports
+import {
+  Box,
+  useTheme,
+  useColorModeValue,
+  AspectRatio,
+  keyframes,
+} from "@chakra-ui/react";
+
+const glow = keyframes`
+0% {
+    opacity: 0;
+    transform: scale(0.2);
+    animation-timing-function: cubic-bezier(.74,.25,.76,1);
+}
+10% {
+    opacity: 1;
+    transform: scale(1);
+    animation-timing-function: cubic-bezier(.12,.01,.08,.99);
+}
+100% {
+    transform: scale(1);
+    opacity: 0.8;
+}`;
+
+const BaseBackgroundGradientRadial = ({
+  animate,
+  hideOverlay,
+  ...props
+}: any) => {
+  const theme = useTheme();
+
+  const colors = [
+    theme.colors.blue["800"],
+    theme.colors.purple["500"],
+    theme.colors.cyan["500"],
+    theme.colors.teal["800"],
+  ];
+
+  let gradient = `radial-gradient(at 40% 45%, ${colors[0]} 10%, transparent 30%), radial-gradient(at 60% 60%, ${colors[1]} 0%, transparent 40%), radial-gradient(at 30% 60%, var(--chakra-colors-cyan-500) 0%, transparent 30%), radial-gradient(at 70% 70%, ${colors[3]} 0%, transparent 10%),  radial-gradient(at 60% 70%, ${colors[0]} 0%, transparent 30%)`;
+
+  return (
+    <Box
+      position="absolute"
+      left="0"
+      width="100%"
+      zIndex="-1"
+      opacity="0"
+      animation={animate && `${glow} 4s ease-out`}
+      sx={{ animationFillMode: "forwards" }}
+      {...props}
+    >
+      <AspectRatio
+        ratio={1}
+        width="100%"
+        margin="0 auto"
+        maxW="container.2xl"
+        left="0"
+      >
+        <Box
+          backgroundImage={gradient}
+          backgroundBlendMode="saturation"
+          opacity={useColorModeValue("1", "0.5")}
+          overflow="hidden"
+          pointerEvents="none"
+          objectFit="cover"
+          filter="blur(160px)"
+        />
+      </AspectRatio>
+    </Box>
+  );
+};
+
+export default BaseBackgroundGradientRadial;
diff --git a/modules/components/BaseMotionFallInPlace.tsx b/modules/components/BaseMotionFallInPlace.tsx
@@ -0,0 +1,61 @@
+// Basic Imports
+import React from "react";
+
+// Library Imports
+import { useInView, IntersectionOptions } from "react-intersection-observer";
+
+// Types Imports
+import MotionBox, { MotionBoxProps } from "@/common/types/auth/motion/float";
+
+const BaseMotionFallInPlace = ({
+  children,
+  delay = 0.2,
+  translateY = "20px",
+  initialInView,
+  threshold,
+  motion = false,
+  scaling = false,
+  onChange,
+  ...rest
+}: MotionBoxProps & {
+  delay?: number;
+  initialInView?: boolean;
+  threshold?: number;
+  translateY?: string;
+  motion?: boolean;
+  scaling?: boolean;
+  onChange?: IntersectionOptions["onChange"];
+}) => {
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+    initialInView,
+    threshold,
+    onChange,
+  });
+
+  return (
+    <MotionBox
+      ref={ref}
+      initial={{
+        scale: 1,
+        opacity: motion && scaling ? 1 : 0,
+        translateY,
+      }}
+      animate={inView && { scale: 1, opacity: 1, translateY: 0 }}
+      transition={{
+        type: "tween",
+        ease: "easeOut",
+        duration: 2,
+        delay: initialInView ? delay : 0,
+        repeat: motion ? Infinity : "",
+        repeatDelay: motion ? 0 : "",
+        repeatType: motion ? "reverse" : "",
+      }}
+      {...rest}
+    >
+      {children}
+    </MotionBox>
+  );
+};
+
+export default BaseMotionFallInPlace;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.7.1",
+    "react-intersection-observer": "^9.4.1",
     "react-toastify": "^9.1.1",
     "typescript": "4.9.3"
   },

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -6,7 +6,7 @@ import { NextPage } from "next";
 import Header from "@/website/Header";
 import Hero from "@/website/Hero";
 
-const Home: NextPage = () => {
+const Home: NextPage = (props: any) => {
   return (
     <div>
       <Head>
@@ -17,12 +17,32 @@ const Home: NextPage = () => {
 
       <main>
         <Header />
-        <Hero />
+        <Hero {...props} />
       </main>
 
       <footer></footer>
     </div>
   );
 };
 
+export async function getStaticProps() {
+  return {
+    props: {
+      announcement: {
+        description: "Support us by becoming a stargazer! 🚀",
+        stargazerTitle: "Repository Star",
+        stargazerLink:
+          "https://img.shields.io/github/stars/ayushsoni1010/spendify.svg?style=social&label=Star",
+        href: "https://github.com/ayushsoni1010/spendify",
+      },
+      heroSection: {
+        heading: "Get your spending money under control and manage",
+        description:
+          "Spendify is the most intuitive, affordable, and smart way to automate your freelancer business and focus on what really matters.",
+        buttonText: "Get started",
+      },
+    },
+  };
+}
+
 export default Home;
diff --git a/public/assets/circle-pattern.svg b/public/assets/circle-pattern.svg
diff --git a/public/assets/hero-brick.png b/public/assets/hero-brick.png
diff --git a/public/assets/hero-business.svg b/public/assets/hero-business.svg
diff --git a/public/assets/hero-meter.png b/public/assets/hero-meter.png
diff --git a/public/assets/hero-payment.png b/public/assets/hero-payment.png
diff --git a/public/assets/hero-plate.png b/public/assets/hero-plate.png
diff --git a/public/assets/hero-star.png b/public/assets/hero-star.png
diff --git a/website/Hero/MainHeroImage.tsx b/website/Hero/MainHeroImage.tsx
@@ -0,0 +1,129 @@
+// Basic Imports
+import React from "react";
+
+// Chakra UI Imports
+import { Box, Image, HStack, Flex } from "@chakra-ui/react";
+
+// Components Imports
+import BaseMotionFallInPlace from "@/modules/components/BaseMotionFallInPlace";
+
+const MainHeroImage: React.FunctionComponent = () => {
+  return (
+    <React.Fragment>
+      <Flex
+        position="relative"
+        justify={{
+          base: "end",
+          lg: "end",
+          md: "center",
+          sm: "center",
+          xs: "center",
+        }}
+        my={{ base: 0, lg: 0, md: 20, sm: 20, xs: 20 }}
+      >
+        <Box position="absolute">
+          <BaseMotionFallInPlace initialInView motion>
+            <Image
+              src="/assets/hero-payment.png"
+              alt="Hero"
+              position="relative"
+              right={{ base: 72, lg: 72, md: 28, sm: 28, xs: 24 }}
+              w={{ base: 32, lg: 32, md: 24, sm: 20, xs: 20 }}
+            />
+          </BaseMotionFallInPlace>
+        </Box>
+        <Box position="absolute">
+          <Image
+            src="/assets/hero-payment.png"
+            alt="Hero"
+            position="relative"
+            right={{ base: 72, lg: 72, md: 28, sm: 28, xs: 24 }}
+            w={{ base: 32, lg: 32, md: 24, sm: 20, xs: 20 }}
+          />
+        </Box>
+
+        {/* <Image
+          src="/assets/hero-business.svg"
+          alt="Hero"
+          position="absolute"
+          left={{ base: 36 }}
+          w={{ base: 64, lg: 64, md: 64, sm: 20, xs: 20 }}
+        /> */}
+
+        <Box position="absolute">
+          <Image
+            src="/assets/hero-plate.png"
+            alt="Hero"
+            position="relative"
+            top={{ base: 14, lg: 14, md: 10, sm: 10, xs: 10 }}
+            left={{ base: 0, lg: 0, md: 4, sm: 0, xs: 0 }}
+            zIndex="-1"
+            w={{ base: 80, lg: 80, md: 72, sm: 52, xs: 52 }}
+          />
+        </Box>
+        <Box position="absolute">
+          <BaseMotionFallInPlace motion scaling>
+            <Image
+              src="/assets/hero-brick.png"
+              alt="Hero"
+              position="relative"
+              top={{ base: 0, lg: 0, md: 0, sm: 0, xs: 2 }}
+              left={{ base: 0, lg: 0, md: 20, sm: 10, xs: 14 }}
+              zIndex="1"
+              w={{ base: 44, lg: 44, md: 36, sm: 28, xs: 28 }}
+            />
+          </BaseMotionFallInPlace>
+        </Box>
+
+        <Box position="absolute">
+          <BaseMotionFallInPlace initialInView motion>
+            <Image
+              src="/assets/hero-meter.png"
+              alt="Hero"
+              position="relative"
+              top={{ base: 60, lg: 60, md: 52, sm: 36, xs: 36 }}
+              left={{ base: 0, lg: 0, md: 24, sm: 24, xs: 24 }}
+              w={{ base: 36, lg: 32, md: 24, sm: 20, xs: 20 }}
+            />
+          </BaseMotionFallInPlace>
+        </Box>
+
+        <Box position="absolute">
+          <Image
+            src="/assets/hero-meter.png"
+            alt="Hero"
+            position="relative"
+            top={{ base: 60, lg: 60, md: 52, sm: 36, xs: 36 }}
+            left={{ base: 0, lg: 0, md: 24, sm: 24, xs: 24 }}
+            w={{ base: 36, lg: 32, md: 24, sm: 20, xs: 20 }}
+          />
+        </Box>
+
+        <Box position="absolute">
+          <BaseMotionFallInPlace initialInView motion>
+            <Image
+              src="/assets/hero-star.png"
+              alt="Hero"
+              position="relative"
+              top={{ base: 56, lg: 56, md: 52, sm: 40, xs: 40 }}
+              right={{ base: 80, lg: 80, md: 40, sm: 32, xs: 28 }}
+              w={{ base: 32, lg: 32, md: 24, sm: 20, xs: 20 }}
+            />
+          </BaseMotionFallInPlace>
+        </Box>
+        <Box position="absolute">
+          <Image
+            src="/assets/hero-star.png"
+            alt="Hero"
+            position="relative"
+            top={{ base: 56, lg: 56, md: 52, sm: 40, xs: 40 }}
+            right={{ base: 80, lg: 80, md: 40, sm: 32, xs: 28 }}
+            w={{ base: 32, lg: 32, md: 24, sm: 20, xs: 20 }}
+          />
+        </Box>
+      </Flex>
+    </React.Fragment>
+  );
+};
+
+export default MainHeroImage;