Skip to content

Commit 16e6bf2

Browse files
author
siddique000
committed
animation added
1 parent 5752d9e commit 16e6bf2

File tree

15 files changed

+131
-62
lines changed

15 files changed

+131
-62
lines changed

‎package-lock.json‎

Lines changed: 34 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@
66
"@testing-library/jest-dom": "^5.14.1",
77
"@testing-library/react": "^11.2.7",
88
"@testing-library/user-event": "^12.8.3",
9+
"aos": "^2.3.4",
910
"react": "^17.0.2",
1011
"react-dom": "^17.0.2",
1112
"react-scripts": "4.0.3",
13+
"react-scroll": "^1.8.4",
1214
"styled-components": "^5.3.1",
1315
"web-vitals": "^1.1.2"
1416
},

‎src/App.js‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
1-
2-
import './App.css';
3-
import CardSection from './components/CardSection';
4-
import ChartSection from './components/ChartSection';
5-
import Footer from './components/Footer';
6-
import Header from './components/Header'
7-
import MessagingSection from './components/MessagingSection';
8-
import FAQSection from './Sections/FAQSection';
9-
import PaymentSection from './Sections/PaymentSection';
10-
import { OuterLayout, InnerLayout } from './styles/Layout'
1+
import React,{useEffect} from "react";
2+
import "./App.css";
3+
import CardSection from "./Sections/CardSection";
4+
import ChartSection from "./Sections/ChartSection";
5+
import Footer from "./components/Footer";
6+
import Header from "./Sections/Header";
7+
import MessagingSection from "./Sections/MessagingSection";
8+
import FAQSection from "./Sections/FAQSection";
9+
import PaymentSection from "./Sections/PaymentSection";
10+
import { OuterLayout } from "./styles/Layout";
11+
import aos from 'aos'
12+
import 'aos/dist/aos.css'
1113

1214
function App() {
15+
16+
17+
useEffect(()=>{
18+
aos.init({duration: 2000})
19+
},[])
20+
1321
return (
14-
<div className='App'>
22+
<div className="App">
1523
<Header />
1624
<OuterLayout>
1725
<main>

src/components/CardSection.jsx renamed to src/Sections/CardSection.jsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import React from 'react'
2-
import styled from 'styled-components'
2+
import styled, { keyframes } from 'styled-components'
33
import { InnerLayout } from '../styles/Layout'
44
import card from '../assets/img/creditcard.svg'
5+
import { fadeInLeft } from 'react-animations'
56

67
const CardSection = () => {
78
return (
8-
<CardSectionStyled>
9-
<InnerLayout>
9+
<CardSectionStyled id='card'>
10+
<InnerLayout >
1011
<div className="card-container">
11-
<div className="card-left">
12-
<h2 className="secondary-heading">
12+
<div className="card-left">
13+
<h2 data-aos='fade-right' data-aos-duration='3000' className="secondary-heading" >
1314
One card for all your payments
1415
</h2>
1516
<p>
@@ -25,6 +26,9 @@ const CardSection = () => {
2526
</CardSectionStyled>
2627
)
2728
}
29+
// const FadeInLeft = styled.h1`
30+
// animation: 2s ${keyframes`${fadeInLeft}`};
31+
// `
2832

2933
const CardSectionStyled = styled.section`
3034
.card-container{

src/components/ChartSection.jsx renamed to src/Sections/ChartSection.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React from 'react'
22
import styled from 'styled-components'
33
import { InnerLayout } from '../styles/Layout'
4-
import ChartStats from './ChartStats'
4+
import ChartStats from '../components/ChartStats'
55
import chart from '../assets/img/chart.svg'
6-
import AnimatedButton from './AnimatedButton'
6+
import AnimatedButton from '../components/AnimatedButton'
7+
78

89
const ChartSection = () => {
910
return (
10-
<ChartStyled >
11+
<ChartStyled id='pricing'>
1112
<InnerLayout>
1213
<div className="chart-con">
1314
<div className="chart-left">
@@ -20,7 +21,7 @@ const ChartSection = () => {
2021
</div>
2122
</div>
2223
<div className="chart-right">
23-
<h2 className="secondary-heading">
24+
<h2 data-aos='fade-right' className="secondary-heading">
2425
Manage your finances like a pro in no time
2526
</h2>
2627
<p>

‎src/Sections/FAQSection.jsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,29 @@ import Questions from '../components/Questions'
77

88
const FAQSection = () => {
99
return (
10-
<FaqStyled>
10+
<FaqStyled id='faq'>
1111
<InnerLayout>
12-
<h3 className="small-heading">Frequently <span>asked questions</span></h3>
13-
<p className='c-para'>
14-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit reiciendis architecto recusandae officia veritatis impedit amet praesentium at consequuntur vero,
15-
</p>
12+
<div data-aos='fade-right'>
13+
<h3 className="small-heading">Frequently <span>asked questions</span></h3>
14+
<p className='c-para'>
15+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit reiciendis architecto recusandae officia veritatis impedit amet praesentium at consequuntur vero,
16+
</p>
17+
</div>
1618
<div className="lines">
1719
<img src={lines} alt="" />
1820
</div>
19-
<div className="questions-con">
21+
<div className="questions-con" >
2022
{
21-
questions.map( q=>(
22-
<Questions key={q.id} {...q} />
23+
questions.map(q => (
24+
<Questions key={q.id} {...q} />
2325
))
2426
}
2527
</div>
2628
</InnerLayout>
2729
</FaqStyled>
2830
)
2931
}
30-
const FaqStyled= styled.section`
32+
const FaqStyled = styled.section`
3133
.c-para{
3234
width: 60%;
3335
margin: 0 auto;

src/components/Header.js renamed to src/Sections/Header.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from "react";
22
import styled from "styled-components";
33
import bg from "../assets/img/bg.svg";
4-
import HeaderContent from "./HeaderContent";
5-
import Navigation from "./Navigation";
4+
import HeaderContent from "../components/HeaderContent";
5+
import Navigation from "../components/Navigation";
66

77
const Header = () => {
88
return (
9-
<HeaderStyled>
9+
<HeaderStyled id='header'>
1010
<div className="header-content">
1111
<Navigation />
1212
<HeaderContent />

src/components/MessagingSection.jsx renamed to src/Sections/MessagingSection.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const MessagingSection = () => {
1515
<InnerLayout>
1616
<div className='message-con'>
1717
<div className="left-items">
18-
<h2 className="secondary-heading">
18+
<h2 data-aos='fade-right' className="secondary-heading">
1919
We support you in 5 diffrent language
2020
</h2>
2121
<p className='left-para'>

‎src/Sections/PaymentSection.jsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,12 @@ const PaymentSection = () => {
1414
return (
1515
<PaymentStyled>
1616
<InnerLayout>
17-
<h3 className="small-heading">
18-
An exectional service, <span>at the right price</span>
19-
</h3>
20-
<p className="c-para">Start with our free plan and switch to premium as you grow. </p>
17+
<div data-aos='fade-down-right'>
18+
<h3 className="small-heading">
19+
An exectional service, <span>at the right price</span>
20+
</h3>
21+
<p className="c-para">Start with our free plan and switch to premium as you grow. </p>
22+
</div>
2123
<div className='card-con'>
2224
<Card
2325
account={'Free'}

‎src/components/HeaderContent.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import phone from '../assets/img/phone.svg'
55
import ring1 from '../assets/img/ring_orange.svg';
66
import message1 from '../assets/img/message_pink.svg';
77
import message2 from '../assets/img/message_blue.svg';
8-
8+
99
const HeaderContent = () => {
1010
return (
1111
<HeaderContentStyled>
1212
<div className="left-content">
1313
<div className="left-text-container">
14-
<h1>Smart banking for frelencers</h1>
14+
<h1 data-aos='zoom-in-right'>Smart banking for frelencers</h1>
1515
<p className="white">
1616
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam delectus architecto sed, corrupti sint nobis cumque numquam provident molestias nemo sequi. Accusantium neque laboriosam nemo fugit fuga. At, rem sed.
1717
</p>
@@ -28,6 +28,12 @@ const HeaderContent = () => {
2828
)
2929
}
3030

31+
32+
// const Bounce=styled.h1`
33+
// animation: 3s ${keyframes`${bounce}`} infinite;
34+
// `
35+
36+
3137
const HeaderContentStyled = styled.div`
3238
display: grid;
3339
grid-template-columns: repeat(2, 1fr);

0 commit comments

Comments
 (0)