Merge pull request #335 from harmeetsingh11/style/add-animation-effec…

…ts/issue-332 Style: add animation effects to home page
shelcia · Jan 28, 2024 · 290fd18 · 290fd18 · vercel · Jan 28, 2024
2 parents 4adc24a + 0cec9cb
commit 290fd18
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "axios": "^1.4.0",
     "bootstrap": "^5.3.0",
     "formik": "^2.4.2",
+    "framer-motion": "^11.0.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.8.0",
     "react-dom": "^18.2.0",

diff --git a/src/components/layout/HomeLayout.jsx b/src/components/layout/HomeLayout.jsx
@@ -1,15 +1,15 @@
-import React from "react";
-import { Col, Container, Nav, Navbar, Row } from "react-bootstrap";
-import { FaBehance } from "react-icons/fa";
-import { FiGithub } from "react-icons/fi";
-import { Link, Outlet } from "react-router-dom";
+import React from 'react';
+import { Col, Container, Nav, Navbar, Row } from 'react-bootstrap';
+import { FaBehance } from 'react-icons/fa';
+import { FiGithub } from 'react-icons/fi';
+import { Link, Outlet } from 'react-router-dom';
+import { motion } from 'framer-motion';
 
-import "bootstrap/dist/css/bootstrap.min.css";
-import "../../styles/argon.css";
-import "../../styles/style.css";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '../../styles/argon.css';
+import '../../styles/style.css';
 
 const HomeLayout = () => {
-
   return (
     <React.Fragment>
       <Navbar
@@ -18,27 +18,53 @@ const HomeLayout = () => {
         className="navbar-transparent navbar-light py-2"
       >
         <Container>
-          <Link className="navbar-brand mr-lg-5" to="/">
-            D.
-          </Link>
+          <motion.div
+            initial={{ opacity: 0, y: -50 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{
+              duration: 1,
+              type: 'spring',
+              stiffness: 90,
+              delay: 0.1,
+            }}
+          >
+            <Link className="navbar-brand mr-lg-5" to="/">
+              D.
+            </Link>
+          </motion.div>
           <Navbar.Toggle aria-controls="responsive-navbar-nav" />
-          <Navbar.Collapse id="responsive-navbar-nav" style={{ marginTop: "60px" }}>
+          <Navbar.Collapse
+            id="responsive-navbar-nav"
+            style={{ marginTop: '60px' }}
+          >
             <Nav className="me-auto"></Nav>
             <Nav>
-              <Link className="btn btn-neutral" to="/login">
-                <span className="nav-link-inner--text">Login</span>
-              </Link>
-              <Link className="btn btn-neutral btn-icon" to="/signup">
-                <span className="nav-link-inner--text">Signup</span>
-              </Link>
+              <motion.div
+                initial={{ opacity: 0, y: -50 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{
+                  duration: 1,
+                  type: 'spring',
+                  stiffness: 90,
+                  delay: 0.1,
+                }}
+              >
+                <Link className="btn btn-neutral" to="/login">
+                  <span className="nav-link-inner--text">Login</span>
+                </Link>
+
+                <Link className="btn btn-neutral btn-icon" to="/signup">
+                  <span className="nav-link-inner--text">Signup</span>
+                </Link>
+              </motion.div>
             </Nav>
           </Navbar.Collapse>
         </Container>
       </Navbar>
       <Outlet />
 
-
-
       <footer className="footer">
         <Container>
           <Row className="row-grid align-items-center mb-5">
@@ -47,12 +73,12 @@ const HomeLayout = () => {
                 This is an open source project
               </h3>
               <h4 className="mb-0 font-weight-light">
-                Pages inspired from{"  "}
+                Pages inspired from{'  '}
                 <a href="https://www.creative-tim.com/product/argon-design-system">
                   argon system
                 </a>
-                {"  "}
-                by{"  "}
+                {'  '}
+                by{'  '}
                 <a href="https://www.creative-tim.com">Creative Tim</a>
               </h4>
             </Col>
@@ -95,7 +121,7 @@ const HomeLayout = () => {
           <Row>
             <Col md={6}>
               <div className="copyright">
-                &copy; 2024{" "}
+                &copy; 2024{' '}
                 <a
                   href="https://shelcia-dev.me/"
                   target="_blank"
@@ -117,7 +143,7 @@ const HomeLayout = () => {
             </Col>
           </Row>
         </Container>
-      </footer>      
+      </footer>
     </React.Fragment>
   );
 };

diff --git a/src/pages/auth/HomePage.jsx b/src/pages/auth/HomePage.jsx
@@ -1,8 +1,9 @@
-import React, { useContext, useEffect, useState } from "react";
-import { Carousel, Col, Container, Row } from "react-bootstrap";
-import { Link } from "react-router-dom";
-import { TemplateContext } from "../../context/TemplateContext";
-import { Pattern3Default } from "../../components/common/CustomPatterns";
+import React, { useContext, useEffect, useState } from 'react';
+import { Carousel, Col, Container, Row } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import { TemplateContext } from '../../context/TemplateContext';
+import { Pattern3Default } from '../../components/common/CustomPatterns';
+import { motion } from 'framer-motion';
 const HomePage = () => {
   return (
     <React.Fragment>
@@ -14,20 +15,53 @@ const HomePage = () => {
               <div className="col px-0">
                 <Row className="align-items-center justify-content-center">
                   <Col lg={6} className="text-center">
-                    <h1 className="text-white display-1">
+                    <motion.h1
+                      initial={{ opacity: 0, x: -150 }}
+                      whileInView={{ opacity: 1, x: 0 }}
+                      viewport={{ once: true }}
+                      transition={{
+                        duration: 1,
+                        type: 'spring',
+                        stiffness: 90,
+                        delay: 0.2,
+                      }}
+                      className="text-white display-1"
+                    >
                       Dynamic Portfolio Builder
-                    </h1>
-                    <h2 className="display-4 font-weight-normal text-white">
+                    </motion.h1>
+                    <motion.h2
+                      initial={{ opacity: 0, x: 150 }}
+                      whileInView={{ opacity: 1, x: 0 }}
+                      viewport={{ once: true }}
+                      transition={{
+                        duration: 1,
+                        type: 'spring',
+                        stiffness: 90,
+                        delay: 0.7,
+                      }}
+                      className="display-4 font-weight-normal text-white"
+                    >
                       Build your Single Page Portfolio website within 5 minutes
-                    </h2>
-                    <div className="btn-wrapper mt-4">
+                    </motion.h2>
+                    <motion.div
+                      initial={{ opacity: 0, y: 150 }}
+                      whileInView={{ opacity: 1, y: 0 }}
+                      viewport={{ once: true }}
+                      transition={{
+                        duration: 1,
+                        type: 'spring',
+                        stiffness: 90,
+                        delay: 1,
+                      }}
+                      className="btn-wrapper mt-4"
+                    >
                       <Link
                         to="/signup"
                         className="btn btn-success btn-icon mt-3 mb-sm-0"
                       >
                         <span className="btn-inner--text">Get Started</span>
                       </Link>
-                    </div>
+                    </motion.div>
                   </Col>
                 </Row>
               </div>