Skip to content
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

added blog page #400

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added blog page #400

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
8 changes: 8 additions & 0 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ import Register from './Pages/Register';
import Shop from './Pages/Shop';
import Cart from './Pages/cart';
import About from './Pages/About';
import Blog from './Pages/blog';
import Blog1 from './Pages/blog1';
import Blog2 from './Pages/blog2';
import Blog3 from './Pages/blog3';
import Faq from './Pages/Faq';
import Contact from './Pages/contact';
import Profile from './Pages/profile';
Expand Down Expand Up @@ -66,6 +70,10 @@ function App() {
<Route path="/shop" element={<Shop />} />
<Route path="/cart" element={<Cart />} />
<Route path="/about" element={<About />} />
<Route path="/blog" element={<Blog />} />
<Route path="/blog1" element={<Blog1 />} />
<Route path="/blog2" element={<Blog2 />} />
<Route path="/blog3" element={<Blog3 />} />
<Route path="/testimonial" element={<Testimonial />} />
<Route path="/contact" element={<Contact />} />
<Route path="/profile" element={<Profile />} />
Expand Down
87 changes: 87 additions & 0 deletions src/Pages/blog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import React from 'react';
import { Link } from 'react-router-dom';

function CoffeeBlog() {
return (
<div className="min-h-screen bg-gray-100 text-gray-800">
<div className="blogContainer p-8">
<h1 className="text-4xl font-bold text-center mb-8 text-brown-600">
Coffee Chronicles
</h1>
<div className="blogCards grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{/* Card 1 */}
<div className="card bg-white shadow-lg rounded-lg overflow-hidden hover:scale-105 transform transition duration-300">
<h2 className="text-2xl font-semibold p-4 bg-brown-200 text-brown-800">
The Art of Brewing
</h2>
<div className="imageContainer">
<img
className="w-full h-48 px-5"
src="https://blog.mistobox.com/wp-content/uploads/2020/09/brewmethods.jpg"
alt="Art of Brewing"
/>

</div>
<p className="p-4 text-gray-700">
Brewing coffee is an art that blends passion, technique, and quality beans. Discover the secrets behind perfect brews and learn why every cup at MsCafe is a masterpiece.
</p>
<Link
to="/blog1"
className="m-4 px-40 py-2 bg-amber-600 text-white rounded hover:bg-amber-700"
>
Read More
</Link>
</div>

{/* Card 2 */}
<div className="card bg-white shadow-lg rounded-lg overflow-hidden hover:scale-105 transform transition duration-300">
<h2 className="text-2xl font-semibold p-4 bg-brown-200 text-brown-800">
Our Sustainability Journey
</h2>
<div className="imageContainer">
<img
className="w-full h-48 px-5 object-cover"
src="https://d1g9yur4m4naub.cloudfront.net/image-handler/picture/2020/4/shutterstock_560673883.jpg"
alt="Sustainability Journey"
/>
</div>
<p className="p-4 text-gray-700">
At MsCafe, sustainability isn’t just a buzzword—it’s a way of life. Learn about our commitment to ethical sourcing and the positive impact it has on farmers and the environment.
</p>
<Link
to="/blog2"
className="m-4 px-40 py-2 bg-amber-600 text-white rounded hover:bg-amber-700"
>
Read More
</Link>
</div>

{/* Card 3 */}
<div className="card bg-white shadow-lg rounded-lg overflow-hidden hover:scale-105 transform transition duration-300">
<h2 className="text-2xl font-semibold p-4 bg-brown-200 text-brown-800">
The Perfect Bean
</h2>
<div className="imageContainer">
<img
className="w-full h-48 px-5 object-cover"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcuIiY7YeF57cYcrlzNynVRZACaoSxR8ujJw&s"
alt="Perfect Bean"
/>
</div>
<p className="p-4 text-gray-700">
Great coffee starts with the perfect bean. Explore our journey in selecting the finest beans from sustainable farms worldwide and how it creates a difference in every sip.
</p>
<Link
to="/blog3"
className="m-4 px-40 py-2 bg-amber-600 text-white rounded hover:bg-amber-700"
>
Read More
</Link>
</div>
</div>
</div>
</div>
);
}

export default CoffeeBlog;
56 changes: 56 additions & 0 deletions src/Pages/blog1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import React from 'react';
import { Link } from 'react-router-dom';

function Blog1() {
return (
<div className="min-h-screen bg-white w-[80%] ml-[10%] text-gray-800">
<div className="container p-8 bg-white rounded-lg shadow-lg mx-auto mt-8">
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl font-bold text-center text-brown-700">
The Art of Brewing
</h1>
<p className="text-center text-gray-600 mt-2">
A journey through the techniques and passion of perfect coffee brewing.
</p>
</div>

{/* Featured Image */}
<div className="w-full max-w-4xl mx-auto mb-8">
<img
src="https://blog.mistobox.com/wp-content/uploads/2020/09/brewmethods.jpg"
alt="Art of Brewing"
className="w-1/2 ml-56 rounded-lg shadow-lg"
/>
</div>

{/* Blog Content */}
<div className="w-full max-w-3xl mx-auto bg-slate-50 p-6 rounded-lg shadow-md">
<p className="text-lg text-gray-700 mb-4">
Brewing coffee is an art that blends passion, technique, and the finest quality beans. At MsCafe, we believe every cup of coffee should be a masterpiece, a perfect balance of flavor and aroma.
</p>
<p className="text-lg text-gray-700 mb-4">
From choosing the right beans to mastering the brewing methods, there's a lot to explore. Whether you’re a fan of pour-over, French press, or espresso, each method has its unique charm and technique.
</p>
<p className="text-lg text-gray-700 mb-4">
Our baristas dedicate time and effort to ensure that each cup served brings out the full potential of the beans, offering you an unparalleled experience with every sip.
</p>
<p className="text-lg text-gray-700">
Come visit us at MsCafe and embark on a flavorful journey of coffee brewing excellence. Your perfect cup awaits!
</p>
</div>

{/* Back Button */}
<div className="mt-8 text-center">
<Link to="/blog">
<button className="px-6 py-2 bg-amber-600 text-white rounded hover:bg-amber-700 shadow-lg">
Back to Blog
</button>
</Link>
</div>
</div>
</div>
);
}

export default Blog1;
56 changes: 56 additions & 0 deletions src/Pages/blog2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import React from 'react';
import { Link } from 'react-router-dom';

function Blog1() {
return (
<div className="min-h-screen bg-white w-[80%] ml-[10%] text-gray-800">
<div className="container p-8 bg-white rounded-lg shadow-lg mx-auto mt-8">
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl font-bold text-center text-brown-700">
Our Sustainability Journey
</h1>
<p className="text-center text-gray-600 mt-2">
Learn about our commitment to ethical sourcing and the positive impact it has on farmers and the environment.
</p>
</div>

{/* Featured Image */}
<div className="w-full max-w-4xl mx-auto mb-8">
<img
src="https://d1g9yur4m4naub.cloudfront.net/image-handler/picture/2020/4/shutterstock_560673883.jpg"
alt="Our Sustainability Journey"
className="w-1/2 ml-56 rounded-lg shadow-lg"
/>
</div>

{/* Blog Content */}
<div className="w-full max-w-3xl mx-auto bg-slate-50 p-6 rounded-lg shadow-md">
<p className="text-lg text-gray-700 mb-4">
At MsCafe, sustainability is at the heart of everything we do. We believe in making choices that not only serve our customers but also nurture the planet and empower the communities we work with.
</p>
<p className="text-lg text-gray-700 mb-4">
Our coffee beans are ethically sourced from farmers who practice environmentally friendly and socially responsible farming. By supporting fair trade, we ensure that farmers receive fair compensation for their hard work.
</p>
<p className="text-lg text-gray-700 mb-4">
Additionally, we are constantly innovating to reduce waste and promote eco-friendly practices. From recyclable packaging to energy-efficient brewing methods, every small step contributes to a larger goal.
</p>
<p className="text-lg text-gray-700">
Join us on this journey to create a better world, one cup of coffee at a time. Together, we can brew a brighter future.
</p>
</div>

{/* Back Button */}
<div className="mt-8 text-center">
<Link to="/blog">
<button className="px-6 py-2 bg-amber-600 text-white rounded hover:bg-amber-700 shadow-lg">
Back to Blog
</button>
</Link>
</div>
</div>
</div>
);
}

export default Blog1;
57 changes: 57 additions & 0 deletions src/Pages/blog3.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import React from 'react';
import { Link } from 'react-router-dom';

function Blog1() {
return (
<div className="min-h-screen bg-white w-[80%] ml-[10%] text-gray-800">
<div className="container p-8 bg-white rounded-lg shadow-lg mx-auto mt-8">
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl font-bold text-center text-brown-700">
The Perfect Bean
</h1>
<p className="text-center text-gray-600 mt-2">
Discover the secrets behind the perfect coffee bean and the art of brewing the perfect cup.
</p>
</div>

{/* Featured Image */}
<div className="w-full max-w-4xl mx-auto mb-8">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcuIiY7YeF57cYcrlzNynVRZACaoSxR8ujJw&s"
alt="Art of Brewing"
className="w-1/2 h-[80%] ml-56 rounded-lg shadow-lg"
/>
</div>

{/* Blog Content */}
<div className="w-full max-w-3xl mx-auto bg-slate-50 p-6 rounded-lg shadow-md">
<p className="text-lg text-gray-700 mb-4">
At MsCafe, every cup of coffee starts with the perfect bean. We believe that quality begins at the source, which is why we work closely with farmers around the world to ensure only the finest beans make it into your cup.
</p>
<p className="text-lg text-gray-700 mb-4">
Our beans are grown in the most ideal climates, handpicked at peak ripeness, and carefully processed to retain their natural flavor and aroma. We prioritize sustainable farming methods to protect the environment and support local communities.
</p>
<p className="text-lg text-gray-700 mb-4">
Once the beans reach our roastery, they undergo a meticulous roasting process. Each batch is roasted to perfection, unlocking its unique profile and bringing out notes of chocolate, caramel, citrus, or floral undertones, depending on the bean's origin.
</p>
<p className="text-lg text-gray-700">
Finally, the brewing process brings it all together. Whether you prefer a classic espresso, a smooth pour-over, or a rich French press, the journey of the perfect bean culminates in a cup that delights the senses and invigorates the soul.
</p>
</div>


{/* Back Button */}
<div className="mt-8 text-center">
<Link to="/blog">
<button className="px-6 py-2 bg-amber-600 text-white rounded hover:bg-amber-700 shadow-lg">
Back to Blog
</button>
</Link>
</div>
</div>
</div>
);
}

export default Blog1;
1 change: 1 addition & 0 deletions src/componets/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,7 @@ function Footer() {
<Link to="/">Home</Link>
<Link to="/shop">Shop</Link>
<Link to="/about">About</Link>
<Link to="/blog">Blog</Link>
<Link to="/contact">Contact</Link>
<Link to="/testimonial">Testimonial</Link>
<Link to="/contributor">Contributors</Link>
Expand Down
Loading