Merge pull request #361 from CodeHarborHub/dev-3

update layout with framer-motion

Author: ajay-dhangar

src/components/HomePage/Header.tsx

@@ -13,10 +13,24 @@ import { motion } from "framer-motion";
 const HeaderContent = () => {
   return (
     <div className="chh__header-content">
-      <h1 className="gradient__text"
-      >Level Up Skills with CodeHarborHub</h1>
+      <motion.h1
+        initial={{ opacity: 0, x: -10 }}
+        whileInView={{ opacity: 1, x: 0 }}
+        viewport={{ once: true }}
+        transition={{
+          duration: 1,
+          type: "spring",
+          stiffness: 100,
+          delay: 0.1,
+        }}
+        className="gradient__text"
+      >
+        Level Up Skills with CodeHarborHub
+      </motion.h1>
+      {/* <h1 className="gradient__text"
+      >Level Up Skills with CodeHarborHub</h1> */}
       <motion.p
-        initial={{ opacity: 0, x: -150 }}
+        initial={{ opacity: 0, x: -10 }}
         whileInView={{ opacity: 1, x: 0 }}
         viewport={{ once: true }}
         transition={{
@@ -34,14 +48,14 @@ const HeaderContent = () => {
 
       <div className="chh__header-content__input">
         <motion.button
-          initial={{ opacity: 0, x: -150 }}
+          initial={{ opacity: 0, x: -10 }}
           whileInView={{ opacity: 1, x: 0 }}
           viewport={{ once: true }}
           transition={{
             duration: 1,
             type: "spring",
             stiffness: 100,
-            delay: 0.5,
+            delay: 0.3,
           }}
           type="button"
         >
@@ -50,14 +64,14 @@ const HeaderContent = () => {
           </Link>
         </motion.button>
         <motion.button
-          initial={{ opacity: 0, x: 150 }}
+          initial={{ opacity: 0, x: 10 }}
           whileInView={{ opacity: 1, x: 0 }}
           viewport={{ once: true }}
           transition={{
             duration: 1,
             type: "spring",
             stiffness: 100,
-            delay: 0.5,
+            delay: 0.2,
           }}
           type="button"
         >
@@ -97,14 +111,14 @@ const HeaderImage = () => {
 
   return (
     <motion.div
-        initial={{ scale: 0, x: 150 }}
+        initial={{ scale: 0, x: 10 }}
         whileInView={{ scale: 0.8, x: 0 }}
         viewport={{ once: true }}
         transition={{
           duration: 1,
           type: "spring",
           stiffness: 100,
-          delay: 0.5,
+          delay: 0.3,
         }}
         className="chh__header-image"
       >

src/pages/index.tsx

@@ -23,14 +23,14 @@ function TweetsSection(): React.JSX.Element {
     <div className={clsx(styles.section, styles.sectionAlt)}>
       <div className="tweets-container">
         <motion.div
-          initial={{ opacity: 0, x: -150 }}
+          initial={{ opacity: 0, x: -10 }}
           whileInView={{ opacity: 1, x: 0 }}
           viewport={{ once: true }}
           transition={{
             duration: 1,
             type: "spring",
             stiffness: 100,
-            delay: 0.5,
+            delay: 0.3,
           }}
           className={styles.home__divider}
         >
@@ -44,14 +44,14 @@ function TweetsSection(): React.JSX.Element {
         <div className={clsx("row", styles.tweetsSection)}>
           {tweetColumns.map((tweetItems, i) => (
             <motion.div
-            initial={{ opacity: 0, y: -150 }}
+            initial={{ opacity: 0, y: -10 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{
               duration: 1,
               type: "spring",
               stiffness: 100,
-              delay: 0.5,
+              delay: 0.3,
             }}
             className="col col--4"
             key={i}
@@ -82,58 +82,58 @@ export default function Home(): React.JSX.Element {
         <hr className={styles.home__hr} />
 
         <motion.div
-          initial={{ opacity: 0, x: -150 }}
+          initial={{ opacity: 0, x: -10 }}
           whileInView={{ opacity: 1, x: 0 }}
           viewport={{ once: true }}
           transition={{
             duration: 1,
             type: "spring",
             stiffness: 100,
-            delay: 0.5,
+            delay: 0.3,
           }}
           className={styles.home__divider}
         >
           <Heading as="h2">Courses Available</Heading>
         </motion.div>
 
         <motion.div
-          initial={{ opacity: 0, y: -150 }}
+          initial={{ opacity: 0, y: -10 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{
             duration: 1,
             type: "spring",
             stiffness: 100,
-            delay: 0.5,
+            delay: 0.3,
           }}
         >
         <Courses courses={coursesData} />
         </motion.div>
 
         <motion.div
-          initial={{ opacity: 0, x: -150 }}
+          initial={{ opacity: 0, x: -10 }}
           whileInView={{ opacity: 1, x: 0 }}
           viewport={{ once: true }}
           transition={{
             duration: 1,
             type: "spring",
             stiffness: 100,
-            delay: 0.5,
+            delay: 0.3,
           }}
           className={styles.home__divider}
         >
           <Heading as="h2">Features of {siteConfig.title}</Heading>
         </motion.div>
 
         <motion.div
-          initial={{ opacity: 0, y: -150 }}
+          initial={{ opacity: 0, y: -10 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{
             duration: 1,
             type: "spring",
             stiffness: 100,
-            delay: 0.5,
+            delay: 0.3,
           }}
         >
         <Features features={featuresData} />