From 81df599a6c4d2489b59d2140f40aa8948ff7ceb5 Mon Sep 17 00:00:00 2001
From: ajay-dhangar <ajaydhangar49@gmail.com>
Date: Sun, 2 Jun 2024 18:35:33 +0530
Subject: [PATCH] update layout with framer-motion

---
 src/components/HomePage/Header.tsx | 32 +++++++++++++++++++++---------
 src/pages/index.tsx                | 24 +++++++++++-----------
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/components/HomePage/Header.tsx b/src/components/HomePage/Header.tsx
index 9cfbcea24..96c02311b 100644
--- a/src/components/HomePage/Header.tsx
+++ b/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"
       >
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index fa9a0c62c..1a078ef07 100644
--- a/src/pages/index.tsx
+++ b/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,14 +82,14 @@ 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}
         >
@@ -97,28 +97,28 @@ export default function Home(): React.JSX.Element {
         </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}
         >
@@ -126,14 +126,14 @@ export default function Home(): React.JSX.Element {
         </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} />