Merge pull request #118 from mansi066/main

Add premium beans
Mujtabaa07 · Jan 2, 2025 · 41e7edf · 41e7edf
2 parents e89fd33 + be0cc30
commit 41e7edf
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 191 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.js b/src/App.js
@@ -15,6 +15,7 @@ import Contact from './Pages/contact';
 import Profile from './Pages/profile';
 import Checkout from './Pages/checkOut';
 import Testimonial from './Pages/Testimonial';
+import PremiumBeans from './Pages/PremiumBeans';
 
 
 
@@ -48,6 +49,8 @@ function App() {
               <Route path="/contact" element={<Contact />} />
               <Route path="/profile" element={<Profile />} />
               <Route path="/checkout" element={<Checkout />} />
+              <Route path="/premiumbeans" element={<PremiumBeans />} />
+
             </Routes>
           </ContentContainer>
 

diff --git a/src/Pages/Home.js b/src/Pages/Home.js
@@ -283,7 +283,8 @@ function Home() {
       <FeaturesSection ref={featuresRef} className="hover:cursor-pointer">
         <FeatureCard >
           <FeatureIcon src="https://img.freepik.com/free-photo/side-view-fresh-coffee-beans-falling-out-black-basket-red-background_141793-27586.jpg?t=st=1727759694~exp=1727763294~hmac=661c2c2b8c561df98b21f74effb9bb02a0875b0584c062f076bceafa5d6f7eda&w=1380" alt="Quality Beans" />
-          <FeatureTitle>Premium Beans</FeatureTitle>
+
+           <Link to="/premiumbeans"><FeatureTitle>Premium Beans</FeatureTitle></Link>
           <FeatureDescription>We source the finest coffee beans from around the world.</FeatureDescription>
         </FeatureCard>
         <FeatureCard>

diff --git a/src/Pages/PremiumBeans.js b/src/Pages/PremiumBeans.js
@@ -0,0 +1,98 @@
+import React from 'react';
+
+import styled from 'styled-components';
+import { motion } from 'framer-motion';
+const PremiumContainer = styled.div`
+  padding: 6rem 2rem 4rem 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  background-color: #fffbeb;
+`;
+
+const FeatureTitle =  styled(motion.h1)`
+ font-size: 4rem;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    color: ##78350f;
+    font-family: 'Playfair Display', serif;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-content: space-around;
+    font-weight:bold;
+    
+`;
+const ImageContent = styled(motion.div)`
+ display: flex
+;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0rem;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-content: flex-start;
+}
+`;
+
+const Image = styled(motion.img)`
+ width: 500px;
+    height: 500px
+    object-fit: cover;
+    border-radius: 10px;
+    margin-bottom: 1.5rem;
+    margin-left: 20rem;
+   
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+`;
+
+const FeatureDescription = styled(motion.p)`
+  font-size: 1.5rem;
+    color: #6B4423;
+    line-height: 1.6;
+    font-family: 'Poppins', sans-serif;
+    display: flex;
+    margin: 0px;
+    margin-left: 60px;
+    margin-right: 50px;
+`;
+
+
+
+function PremiumBeans() {
+  return (
+    <>
+    <PremiumContainer>
+     <FeatureTitle
+        initial={{ opacity: 0, y: -50 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+      >
+        Premium beans
+      </FeatureTitle>
+      <ImageContent
+          initial={{ opacity: 0, x: 50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.5, delay: 0.4 }}
+        >
+    <Image src="https://img.freepik.com/free-photo/side-view-fresh-coffee-beans-falling-out-black-basket-red-background_141793-27586.jpg?t=st=1727759694~exp=1727763294~hmac=661c2c2b8c561df98b21f74effb9bb02a0875b0584c062f076bceafa5d6f7eda&w=1380" alt="Quality Beans" />
+    </ImageContent >
+    <FeatureDescription
+          initial={{ opacity: 0, x: -50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+        >
+
+        Premium coffee beans are often considered the finest quality beans available, predominantly made from 100% Arabica beans. These beans are prized for their exceptional flavor, rich aroma, and smoother, less bitter taste compared to Robusta beans. Sourced from the highest-grade coffee plants, premium beans undergo meticulous cultivation and harvesting processes. Specialty roasting techniques, typically in small batches, ensure that the beans' unique flavors are expertly developed. Many premium coffee brands are committed to ethical sourcing, collaborating closely with farmers to promote sustainable and fair trade practices. The variety of flavors and roasts available, including single-origin beans, dark roasts, light roasts, and flavored beans, caters to diverse palates. Popular premium coffee brands such as Atlas Coffee Club, Starbucks Espresso, Kicking Horse, and Stumptown Coffee Roasters offer distinctive blends and roasts to satisfy different tastes.
+
+
+
+    </FeatureDescription>
+    <button type="button" class="btn btn-warning mx-20">Read More</button>
+    </PremiumContainer>
+
+    </>
+     ) 
+}
+
+export default PremiumBeans
+
diff --git a/src/componets/Navbar.js b/src/componets/Navbar.js
@@ -277,6 +277,9 @@ function Navbar() {
             <MobileNavLink whileHover={{ scale: 1.02 }}>
               <Link to="/testimonial" onClick={toggleMenu}>Testimonial</Link>
             </MobileNavLink>
+            <MobileNavLink whileHover={{ scale: 1.02 }}>
+              <Link to="/premiumbeans" onClick={toggleMenu}>Premium Beans</Link>
+            </MobileNavLink>
             <MobileNavLink whileHover={{ scale: 1.02 }}>
               <Link to="/contact" onClick={toggleMenu}>Contact</Link>
             </MobileNavLink>