Skip to content

Commit 0844a45

Browse files
ShvrthShvrth
authored
Add files via upload
1 parent 6a0feb4 commit 0844a45

File tree

14 files changed

+1147
-0
lines changed

14 files changed

+1147
-0
lines changed

‎public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/AboutUs.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.about-us-container {
2+
width: 1000px;
3+
/* margin: 0 auto; */
4+
/* padding: 20px; */
5+
/* background-color: red; */
6+
text-align: justify;
7+
}
8+
9+
.about-us-heading {
10+
font-size: 32px;
11+
font-weight: bold;
12+
color: #333;
13+
margin-bottom: 20px;
14+
}
15+
16+
.about-us-description {
17+
font-size: 18px;
18+
color: #666;
19+
margin-bottom: 30px;
20+
text-align: center;
21+
}
22+
23+
.about-us-content {
24+
font-size: 18px;
25+
margin-bottom: 20px;
26+
}
27+
.plant_logo_right{
28+
text-align: right;
29+
}
30+
31+
.plant_logo_left{
32+
text-align: left;
33+
}

‎src/AboutUs.jsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import './AboutUs.css';
3+
4+
function AboutUs() {
5+
return (
6+
<div className="about-us-container">
7+
{/* <h1 className="about-us-heading">About Us</h1> */}
8+
<p className="about-us-description">Welcome to Paradise Nursery, where green meets serenity!</p>
9+
<p className="about-us-content">
10+
At Paradise Nursery, we are passionate about bringing nature closer to you. Our mission is to provide a wide range of
11+
high-quality plants that not only enhance the beauty of your surroundings but also contribute to a healthier and
12+
more sustainable lifestyle. From air-purifying plants to aromatic fragrant ones, we have something for every
13+
plant enthusiast.
14+
</p>
15+
{/* <p className="plant_logo_left"><img src="https://p1.hiclipart.com/preview/922/979/640/green-leaf-logo-emoji-seedling-emoticon-sticker-plant-plant-stem-flower-png-clipart-thumbnail.jpg" height='50px' width='50px' alt="" /></p> */}
16+
<p className="about-us-content">
17+
Our team of experts is dedicated to ensuring that each plant meets our strict standards of quality and care.
18+
Whether you're a seasoned gardener or just starting your green journey, we're here to support you every step of
19+
the way. Feel free to explore our collection, ask questions, and let us help you find the perfect plant for your
20+
home or office.
21+
</p>
22+
{/* <p className="plant_logo_right"><img src="https://p1.hiclipart.com/preview/922/979/640/green-leaf-logo-emoji-seedling-emoticon-sticker-plant-plant-stem-flower-png-clipart-thumbnail.jpg" height='50px' width='50px' alt="" /></p> */}
23+
24+
<p className="about-us-content">
25+
Join us in our mission to create a greener, healthier world. Visit Paradise Nursery today and experience the
26+
beauty of nature right at your doorstep.
27+
</p>
28+
</div>
29+
);
30+
}
31+
32+
export default AboutUs;

‎src/App.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
/* LandingPage.css */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
overflow: hidden;
7+
}
8+
9+
.landing-page {
10+
position: relative;
11+
width: 100vw;
12+
height: 100vh;
13+
background-color: #f8f8f8;
14+
}
15+
16+
.background-image {
17+
position: absolute;
18+
top: 0;
19+
left: 0;
20+
width: 100%;
21+
height: 100%;
22+
background-image: url('https://cdn.pixabay.com/photo/2017/07/13/08/59/greenhouse-2499758_1280.jpg');
23+
background-size: 100% 100%;
24+
background-position: center;
25+
filter: brightness(0.8);
26+
}
27+
.content {
28+
display: flex;
29+
align-items: center;
30+
justify-content: center;
31+
height: 100vh;
32+
width: 100vw;
33+
top: 100px;
34+
backdrop-filter: blur(4px);
35+
background-color: rgba(0,0,0,0.5);
36+
gap: 20px;
37+
}
38+
39+
.landing_content {
40+
margin-top: 430px;
41+
margin-left: 100px;
42+
transform: translate(-50%, -50%);
43+
z-index: 1;
44+
text-align: center;
45+
/* background-color: red; */
46+
width: 400px;
47+
height: 400px;
48+
display: flex;
49+
align-items: center;
50+
flex-direction: column;
51+
justify-content: center;
52+
gap: 10px;
53+
}
54+
55+
.content p,
56+
.content h1 {
57+
color: white;
58+
}
59+
60+
.content h1 {
61+
font-size: 48px;
62+
margin-bottom: 10px;
63+
}
64+
65+
.content p {
66+
font-size: 25px;
67+
}
68+
69+
.divider {
70+
width: 50px;
71+
height: 2px;
72+
background-color: #4caf50;
73+
margin: 10px 0;
74+
}
75+
76+
.get-started-button {
77+
padding: 15px 25px;
78+
font-size: 23px;
79+
border: none;
80+
border-radius: 5px;
81+
background-color: #4caf50;
82+
color: white;
83+
cursor: pointer;
84+
transition: background-color 0.3s ease;
85+
margin-top: 40px;
86+
}
87+
88+
.get-started-button:hover {
89+
background-color: #45a049;
90+
}
91+
92+
/* ProductList.css */
93+
94+
.product-list-container {
95+
position: absolute;
96+
overflow-x: hidden;
97+
top: 100vh;
98+
/* Initially off-screen */
99+
left: 0;
100+
width: 100%;
101+
height: 100vh;
102+
background-color: rgba(255, 255, 255, 0.9);
103+
/* Adjust background opacity as needed */
104+
transition: top 0.5s ease;
105+
/* Smooth transition for top property */
106+
overflow-y: auto;
107+
/* Enable vertical scrolling */
108+
z-index: 2;
109+
/* Ensure it's above landing page content */
110+
backdrop-filter: blur(5px);
111+
}
112+
113+
.product-list-container.visible {
114+
top: 0;
115+
}
116+
/* LandingPage.css */
117+
@media screen and (max-width: 768px) {
118+
.content {
119+
flex-direction: column;
120+
align-items: center;
121+
width: 100vw;
122+
height: 100vh;
123+
}
124+
125+
.landing_content {
126+
margin-top: 100px; /* Adjust as needed */
127+
margin-left: 0;
128+
width: 80%; /* Adjust as needed */
129+
text-align: center;
130+
}
131+
132+
.aboutus_container {
133+
margin-top: 20px; /* Adjust as needed */
134+
width: 80%; /* Adjust as needed */
135+
}
136+
}
137+
138+
@media screen and (max-width: 480px) {
139+
.landing_content {
140+
margin-top: 50px; /* Adjust as needed */
141+
width: 90%; /* Adjust as needed */
142+
}
143+
144+
.aboutus_container {
145+
width: 90%; /* Adjust as needed */
146+
}
147+
}

‎src/App.jsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
2+
import React, { useState } from 'react';
3+
import ProductList from './ProductList';
4+
import './App.css';
5+
import AboutUs from './AboutUs';
6+
7+
function App() {
8+
9+
const [showProductList, setShowProductList] = useState(false);
10+
11+
const handleGetStartedClick = () => {
12+
setShowProductList(true);
13+
};
14+
15+
return (
16+
<div className="app-container">
17+
<div className={`landing-page ${showProductList ? 'fade-out' : ''}`}>
18+
<div className="background-image"></div>
19+
<div className="content">
20+
<div className="landing_content">
21+
<h1>Welcome To Paradise Nursery</h1>
22+
<div className="divider"></div>
23+
<p>Where Green Meets Serenity</p>
24+
25+
<button className="get-started-button" onClick={handleGetStartedClick}>
26+
Get Started
27+
</button>
28+
</div>
29+
<div className="aboutus_container">
30+
<AboutUs/>
31+
</div>
32+
</div>
33+
34+
</div>
35+
<div className={`product-list-container ${showProductList ? 'visible' : ''}`}>
36+
<ProductList />
37+
</div>
38+
</div>
39+
);
40+
}
41+
42+
export default App;
43+
44+
45+

0 commit comments

Comments
 (0)