Skip to content

Commit 99eb159

Browse files
krishthecoder02krishthecoder02
committed
All change done
my final commit for this Tailwind css project
1 parent 6e08d4a commit 99eb159

15 files changed

+395
-59
lines changed

‎src/Components/Button.jsx

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,30 @@
1-
import React from "react";
2-
3-
const Button = ({ label, iconURL }) => {
1+
const Button = ({
2+
label,
3+
iconURL,
4+
backgroundColor,
5+
textColor,
6+
borderColor,
7+
fullWidth,
8+
}) => {
49
return (
5-
<div>
6-
<button className="flex justify-center items-center gap-2 px-7 py-4 border font-montserrat text-lg leading-none bg-coral-red rounded-full text-white border-coral-red">
7-
{label}
8-
<img src={iconURL} alt="arrow" className="ml-2 rounded-full w-5 h-5" />
9-
</button>
10-
</div>
10+
<button
11+
className={`flex justify-center items-center gap-2 px-7 py-4 border font-montserrat text-lg leading-none
12+
${
13+
backgroundColor
14+
? `${backgroundColor} ${textColor} ${borderColor}`
15+
: "bg-coral-red text-white border-coral-red"
16+
} rounded-full ${fullWidth && "w-full"}`}
17+
>
18+
{label}
19+
20+
{iconURL && (
21+
<img
22+
src={iconURL}
23+
alt="arrow right icon"
24+
className="ml-2 rounded-full bg-white w-5 h-5"
25+
/>
26+
)}
27+
</button>
1128
);
1229
};
1330

‎src/Components/Nav.jsx

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
1+
import { hamburger } from "../assets/icons";
12
import { headerLogo } from "../assets/images";
23
import { navLinks } from "../constants";
3-
import { hamburger } from "../assets/icons";
44

55
const Nav = () => {
66
return (
7-
<header className="padding-x absolute py-8 z-10 w-full">
7+
<header className="padding-x py-8 absolute z-10 w-full">
88
<nav className="flex justify-between items-center max-container">
99
<a href="/">
10-
<img src={headerLogo} alt="Logo" width={130} height={29} />
10+
<img
11+
src={headerLogo}
12+
alt="logo"
13+
width={129}
14+
height={29}
15+
className="m-0 w-[129px] h-[29px]"
16+
/>
1117
</a>
1218
<ul className="flex-1 flex justify-center items-center gap-16 max-lg:hidden">
1319
{navLinks.map((item) => (
@@ -21,8 +27,13 @@ const Nav = () => {
2127
</li>
2228
))}
2329
</ul>
30+
<div className="flex gap-2 text-lg leading-normal font-medium font-montserrat max-lg:hidden wide:mr-24">
31+
<a href="/">Sign in</a>
32+
<span>/</span>
33+
<a href="/">Explore now</a>
34+
</div>
2435
<div className="hidden max-lg:block">
25-
<img src={hamburger} alt="hamburger" width={25} height={25} />
36+
<img src={hamburger} alt="hamburger icon" width={25} height={25} />
2637
</div>
2738
</nav>
2839
</header>

‎src/Components/ShoeCard.jsx

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,29 @@
1-
const ShoeCard = ({ imgUrl, changeBigSho, bigShoeIMG }) => {
1+
const ShoeCard = ({ imgURL, changeBigShoeImage, bigShoeImg }) => {
2+
const handleClick = () => {
3+
if (bigShoeImg !== imgURL.bigShoe) {
4+
changeBigShoeImage(imgURL.bigShoe);
5+
}
6+
};
7+
28
return (
39
<div
410
className={`border-2 rounded-xl ${
5-
bigShoeIMG === imgUrl ? "border-coral-red" : "border-transparent"
6-
} cursor-pointer max-sm:flex-1
7-
`}
8-
></div>
11+
bigShoeImg === imgURL.bigShoe
12+
? "border-coral-red"
13+
: "border-transparent"
14+
} cursor-pointer max-sm:flex-1`}
15+
onClick={handleClick}
16+
>
17+
<div className="flex justify-center items-center bg-card bg-center bg-cover sm:w-40 sm:h-40 rounded-xl max-sm:p-4">
18+
<img
19+
src={imgURL.thumbnail}
20+
alt="shoe colletion"
21+
width={127}
22+
height={103.34}
23+
className="object-contain"
24+
/>
25+
</div>
26+
</div>
927
);
1028
};
1129

‎src/components/PopularProductCard.jsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { star } from "../assets/icons";
2+
3+
const PopularProductCard = ({ imgURL, name, price }) => {
4+
return (
5+
<div className="flex flex-1 flex-col w-full max-sm:w-full">
6+
<img src={imgURL} alt={name} className="w-[282px] h-[282px]" />
7+
<div className="mt-8 flex justify-start gap-2.5">
8+
<img src={star} alt="rating icon" width={24} height={24} />
9+
<p className="font-montserrat text-xl leading-normal text-slate-gray">
10+
(4.5)
11+
</p>
12+
</div>
13+
<h3 className="mt-2 text-2xl leading-normal font-semibold font-palanquin">
14+
{name}
15+
</h3>
16+
<p className="mt-2 font-semibold font-montserrat text-coral-red text-2xl leading-normal">
17+
{price}
18+
</p>
19+
</div>
20+
);
21+
};
22+
23+
export default PopularProductCard;

‎src/components/ReviewCard.jsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { star } from "../assets/icons";
2+
3+
const ReviewCard = ({ imgURL, customerName, rating, feedback }) => {
4+
return (
5+
<div className="flex justify-center items-center flex-col">
6+
<img
7+
src={imgURL}
8+
alt="customer"
9+
className="rounded-full object-cover w-[120px] h-[120px]"
10+
/>
11+
<p className="mt-6 max-w-sm text-center info-text">{feedback}</p>
12+
<div className="mt-3 flex justify-center items-center gap-2.5">
13+
<img
14+
src={star}
15+
width={24}
16+
height={24}
17+
alt="rating star"
18+
className="object-contain m-0"
19+
/>
20+
<p className="text-xl font-montserrat text-slate-gray">({rating})</p>
21+
</div>
22+
<h3 className="mt-1 font-palanquin text-3xl text-center font-bold">
23+
{customerName}
24+
</h3>
25+
</div>
26+
);
27+
};
28+
29+
export default ReviewCard;

‎src/components/ServiceCard.jsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const ServiceCard = ({ imgURL, label, subtext }) => {
2+
return (
3+
<div className="flex-1 sm:w-[350px] sm:min-w-[350px] w-full rounded-[20px] shadow-3xl px-10 py-16">
4+
<div className="w-11 h-11 flex justify-center items-center bg-coral-red rounded-full">
5+
<img src={imgURL} alt={label} width={24} height={24} />
6+
</div>
7+
<h3 className="mt-5 font-palanquin text-3xl leading-normal font-bold">
8+
{label}
9+
</h3>
10+
<p className="mt-3 break-words font-montserrat text-lg leading-normal text-slate-gray">
11+
{subtext}
12+
</p>
13+
</div>
14+
);
15+
};
16+
17+
export default ServiceCard;

‎src/components/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Button from "./Button";
2+
import Nav from "./Nav";
3+
import ShoeCard from "./ShoeCard";
4+
import PopularProductCard from "./PopularProductCard";
5+
import ServiceCard from "./ServiceCard";
6+
import ReviewCard from "./ReviewCard";
7+
8+
export { Button, Nav, ShoeCard, PopularProductCard, ServiceCard, ReviewCard };

‎src/sections/CustomerReview.jsx

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,32 @@
1-
const CustomerReview = () => {
2-
return <div>CustomerReview</div>;
1+
import { ReviewCard } from "../components";
2+
import { reviews } from "../constants";
3+
4+
const CustomerReviews = () => {
5+
return (
6+
<section className="max-container">
7+
<h3 className="font-palanquin text-center text-4xl font-bold">
8+
What Our
9+
<span className="text-coral-red"> Customers </span>
10+
Say?
11+
</h3>
12+
<p className="m-auto mt-4 max-w-lg text-center info-text">
13+
Hear genuine stories from our satisfied customers about their
14+
exceptional experiences with us.
15+
</p>
16+
17+
<div className="mt-24 flex flex-1 justify-evenly items-center max-lg:flex-col gap-14">
18+
{reviews.map((review, index) => (
19+
<ReviewCard
20+
key={index}
21+
imgURL={review.imgURL}
22+
customerName={review.customerName}
23+
rating={review.rating}
24+
feedback={review.feedback}
25+
/>
26+
))}
27+
</div>
28+
</section>
29+
);
330
};
431

5-
export default CustomerReview;
32+
export default CustomerReviews;

‎src/sections/Footer.jsx

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,73 @@
1-
import React from "react";
1+
import { copyrightSign } from "../assets/icons";
2+
import { footerLogo } from "../assets/images";
3+
import { footerLinks, socialMedia } from "../constants";
24

35
const Footer = () => {
4-
return <div>Footer</div>;
6+
return (
7+
<footer className="max-container">
8+
<div className="flex justify-between items-start gap-20 flex-wrap max-lg:flex-col">
9+
<div className="flex flex-col items-start">
10+
<a href="/">
11+
<img
12+
src={footerLogo}
13+
alt="logo"
14+
width={150}
15+
height={46}
16+
className="m-0"
17+
/>
18+
</a>
19+
<p className="mt-6 text-base leading-7 font-montserrat text-white-400 sm:max-w-sm">
20+
Get shoes ready for the new term at your nearest Nike store. Find
21+
Your perfect Size In Store. Get Rewards
22+
</p>
23+
<div className="flex items-center gap-5 mt-8">
24+
{socialMedia.map((icon) => (
25+
<div
26+
className="flex justify-center items-center w-12 h-12 bg-white rounded-full"
27+
key={icon.alt}
28+
>
29+
<img src={icon.src} alt={icon.alt} width={24} height={24} />
30+
</div>
31+
))}
32+
</div>
33+
</div>
34+
35+
<div className="flex flex-1 justify-between lg:gap-10 gap-20 flex-wrap">
36+
{footerLinks.map((section) => (
37+
<div key={section.title}>
38+
<h4 className="font-montserrat text-2xl leading-normal font-medium mb-6 text-white">
39+
{section.title}
40+
</h4>
41+
<ul>
42+
{section.links.map((link) => (
43+
<li
44+
className="mt-3 font-montserrat text-base leading-normal text-white-400 hover:text-slate-gray"
45+
key={link.name}
46+
>
47+
<a href={link.link}>{link.name}</a>
48+
</li>
49+
))}
50+
</ul>
51+
</div>
52+
))}
53+
</div>
54+
</div>
55+
56+
<div className="flex justify-between text-white-400 mt-24 max-sm:flex-col max-sm:items-center">
57+
<div className="flex flex-1 justify-start items-center gap-2 font-montserrat cursor-pointer">
58+
<img
59+
src={copyrightSign}
60+
alt="copyright sign"
61+
width={20}
62+
height={20}
63+
className="rounded-full m-0"
64+
/>
65+
<p>Copyright. All rights reserved.</p>
66+
</div>
67+
<p className="font-montserrat cursor-pointer">Terms & Conditions</p>
68+
</div>
69+
</footer>
70+
);
571
};
672

773
export default Footer;

‎src/sections/Hero.jsx

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,67 @@
1-
import { arrowRight } from "../assets/icons";
2-
import { bigShoe1 } from "../assets/images";
3-
import Button from "../Components/Button";
1+
import { useState } from "react";
2+
43
import { shoes, statistics } from "../constants";
5-
import ShoeCard from "../Components/ShoeCard";
4+
import { Button, ShoeCard } from "../components";
5+
import { bigShoe1 } from "../assets/images";
6+
import { arrowRight } from "../assets/icons";
67

78
const Hero = () => {
9+
const [bigShoeImg, setBigShoeImg] = useState(bigShoe1);
10+
811
return (
9-
<section className="w-full flex xl:flex-row flex-col justify-center min-h-screen gap-10 max-container">
10-
<div className="relative xl:w-2/5 flex flex-col justify-center items-start w-full max-xl:padding-x pt-28">
12+
<section
13+
id="home"
14+
className="w-full flex xl:flex-row flex-col justify-center min-h-screen gap-10 max-container"
15+
>
16+
<div className="relative xl:w-2/5 flex flex-col justify-center items-start w-full max-xl:padding-x pt-28">
1117
<p className="text-xl font-montserrat text-coral-red">
12-
Oue Summer Collection
18+
Our Summer collections
1319
</p>
20+
1421
<h1 className="mt-10 font-palanquin text-8xl max-sm:text-[72px] max-sm:leading-[82px] font-bold">
15-
<span className="xl:bg-white xl:whitespace-nowrap relative z-10 pr-10 ">
22+
<span className="xl:bg-white xl:whitespace-nowrap relative z-10 pr-10">
1623
The New Arrival
1724
</span>
1825
<br />
19-
<span className="text-coral-red inline-block mt-3">Nike </span> Shoes
26+
<span className="text-coral-red inline-block mt-3">Nike</span> Shoes
2027
</h1>
2128
<p className="font-montserrat text-slate-gray text-lg leading-8 mt-6 mb-14 sm:max-w-sm">
22-
Discover stylies Nike arrivals quality comfort and innovation for your
23-
active life.
29+
Discover stylish Nike arrivals, quality comfort, and innovation for
30+
your active life.
2431
</p>
25-
<Button label="Shop Now" iconURL={arrowRight} />
32+
33+
<Button label="Shop now" iconURL={arrowRight} />
34+
2635
<div className="flex justify-start items-start flex-wrap w-full mt-20 gap-16">
2736
{statistics.map((stat, index) => (
2837
<div key={index}>
29-
<p className="text-4xl font-palanquin font-bold">{stat.value}</p>
38+
<p className="text-4xl font-palanquin font-bold">{stat.value}</p>
3039
<p className="leading-7 font-montserrat text-slate-gray">
3140
{stat.label}
3241
</p>
3342
</div>
3443
))}
3544
</div>
3645
</div>
46+
3747
<div className="relative flex-1 flex justify-center items-center xl:min-h-screen max-xl:py-40 bg-primary bg-hero bg-cover bg-center">
3848
<img
39-
src={bigShoe1}
40-
alt="shoes img"
49+
src={bigShoeImg}
50+
alt="shoe colletion"
4151
width={610}
42-
height={500}
52+
height={502}
4353
className="object-contain relative z-10"
4454
/>
45-
<div>
46-
{shoes.map((shoe) => (
47-
<div key={shoe}>
48-
<ShoeCard imgURL={shoe} changeBigShoe={() => {}} bigShoeIMG="" />
55+
56+
<div className="flex sm:gap-6 gap-4 absolute -bottom-[5%] sm:left-[10%] max-sm:px-6">
57+
{shoes.map((image, index) => (
58+
<div key={index}>
59+
<ShoeCard
60+
index={index}
61+
imgURL={image}
62+
changeBigShoeImage={(shoe) => setBigShoeImg(shoe)}
63+
bigShoeImg={bigShoeImg}
64+
/>
4965
</div>
5066
))}
5167
</div>

0 commit comments

Comments
 (0)