Skip to content

refactor:refactored infocontainer #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tejas-gk wants to merge 1 commit into
base: master
Choose a base branch
from
Open

refactor:refactored infocontainer #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21,067 changes: 9,742 additions & 11,325 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

26 changes: 0 additions & 26 deletions src/components/CredExperience/credExperience.css
View file
Open in desktop

This file was deleted.

35 changes: 0 additions & 35 deletions src/components/CredExperience/index.js
View file
Open in desktop

This file was deleted.

18 changes: 0 additions & 18 deletions src/components/CredSecurity/credSecurity.css
View file
Open in desktop

This file was deleted.

34 changes: 0 additions & 34 deletions src/components/CredSecurity/index.js
View file
Open in desktop

This file was deleted.

35 changes: 0 additions & 35 deletions src/components/FeelSpecial/index.js
View file
Open in desktop

This file was deleted.

45 changes: 45 additions & 0 deletions src/components/InfoContrainer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React from 'react'
import './info-container.css'
import Button from "../common/Button";
const InfoContainer = ({
title,
subtitle,
description,
backgroundImage,
backgroundColor,
btnText,
}) =>
{
return (
<div
className={`info-container photo-section ${backgroundImage} ${backgroundColor}`}
style={{
backgroundImage: `url(${backgroundImage})`,
backgroundColor: `${backgroundColor}`,
}}
>
<div className="max-width">
<div className="photo-section-child">
<div className="photo-section-top dynamic-margin">
<div className="photo-section-heading">
{title}
</div>
<div className="photo-section-subheading">
{subtitle}
</div>
</div>
<div className="photo-section-bottom dynamic-margin">
<div className="photo-section-description">
{description}
</div>
<div className="photo-section-button">
<Button buttonText={btnText}/>
</div>
</div>
</div>
</div>
</div>
)
}

export default InfoContainer
9 changes: 2 additions & 7 deletions src/components/FeelSpecial/feelSpecial.css → ...ponents/InfoContrainer/info-container.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
.feel-special {
background-color: var(--bg-red);
background-image: url(https://web-images.credcdn.in/_next/assets/images/home-page/deserve-more-bg.jpg);
}

@media all and (max-width: 1279px) {
.feel-special {
.info-container {
background-position: center bottom;
}
}

@media all and (max-width: 767px) {
.feel-special {
.info-container {
background-image: url(https://web-images.credcdn.in/_next/assets/images/home-page/deserve-more-bg-mobile.jpg);
min-height: 1150px;
background-position: right center;
Expand Down
34 changes: 28 additions & 6 deletions src/pages/homePage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,8 @@ import AppRating from "../components/AppRating";
import BrandsLove from "../components/BrandsLove";
import Footer from "../components/common/footer";
import Header from "../components/common/Header";
import CredExperience from "../components/CredExperience";
import CredSecurity from "../components/CredSecurity";
import CredStory from "../components/CredStory";
import FeelSpecial from "../components/FeelSpecial";
import InfoContainer from "../components/InfoContrainer";
import HeroSection from "../components/HeroSection";
import MobileScroll from "../components/MobileScroll";
import ProductShowcase from "../components/ProductShowcase";
Expand All @@ -18,14 +16,38 @@ const HomePage = () => {
<Header />
<HeroSection />
<ProductShowcase />
<FeelSpecial />
<InfoContainer
title="feel special more often."
subtitle="exclusive rewards for paying your bills"
description="every time you pay your credit card bills on CRED, you receive
CRED coins. you can use these to win exclusive rewards or get
special access to curated products and experiences. on CRED, good
begets good."
backgroundImage='https://web-images.credcdn.in/_next/assets/images/home-page/deserve-more-bg.jpg'
backgroundColor='--bg-red'
btnText="Explore rewards"
/>
<BrandsLove />
<CredExperience />
<InfoContainer
title="we take your money matters seriously."
subtitle="so that you don’t have to."
description="never miss a due date with reminders to help you pay your bills on time, instant settlements mean you never wait for your payments to go through and statement analysis lets you know where your money goes, always."
backgroundImage='https://web-images.credcdn.in/_next/assets/images/home-page/money-matters-bg.jpg'
backgroundColor='--bg-blue'
btnText="Experience the upgrade"
/>
<MobileScroll />
<div className="non-mobile">
<WindowPeak />
</div>
<CredSecurity />
<InfoContainer
title="security first. and second."
subtitle="what’s yours remains only yours."
description="CRED ensures that all your personal data and transactions are encrypted, and secured so what’s yours remains only yours. there’s no room for mistakes because we didn’t leave any."
backgroundImage='https://web-images.credcdn.in/_next/assets/images/home-page/security-bg.jpg'
backgroundColor='--bg-purple'
btnText="Become a member"
/>
<CredStory />
<AppRating />
<Footer />
Expand Down