Skip to content

solved conflicts #47

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
wants to merge 1 commit into
base: demo-fn-19-07
Choose a base branch
from
Open

solved conflicts #47

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
65 changes: 31 additions & 34 deletions src/Components/Homepage/BestDeals.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
import React, { useEffect, useState } from 'react';
import { useAllProductsQuery } from '../../Redux/productsPage/productSlice';

const BestDeals: React.FC = () => {
const [imageUrl, setImageUrl] = useState<string | null>(null);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
const { data: hotDeal, isLoading, isError } = useAllProductsQuery({})
console.log(hotDeal)


const productId = "084bfddb-c87a-42b0-aa27-2f71f39e7671";
const productId = "084bfddb-c87a-42b0-aa27-2f71f39e7671";


useEffect(() => {
Expand All @@ -23,7 +20,7 @@ const BestDeals: React.FC = () => {
}

const data = await response.json();
const imageUrl = data.image;
const imageUrl = data.image;
setImageUrl(imageUrl);
} catch (error: any) {
setError('Failed to load image');
Expand All @@ -36,35 +33,35 @@ const BestDeals: React.FC = () => {
}, [productId]);

return (
<section className="bg-primary text-white p-8 sm:p-16 md:pl-24 flex flex-col md:flex-row items-center sm:items-center justify-center gap-10 sm:gap-0 md:gap-10 font-outfit text-lg md:text-xl sm:text-sm min=-h-screen">
{isLoading ? ("locing...") : (
<>

<div className="md:w-1/2 mb-8 md:mb-0 md:mr-8">
<h2 className="text-2xl sm:text-xl md:text-3xl font-bold mb-4 md:mb-8">
Best Deals
</h2>
<p className="text-base text-[16px] mb-4 md:mb-6">
On the other hand, we denounce with righteous indignation and dislike men who are
so beguiled and demoralized by the charms of pleasure of the moment, so blinded by
desire, that they cannot foresee the pain and trouble that are bound to ensue; and

</p>
<p className="text-base sm:text-sm md:text-xl font-semibold mb-4 md:mb-6">
From &nbsp;&nbsp; 678,453 &nbsp;
<span className="bg-sky-400 text-black p-1 px-3 text-xs sm:text-sm rounded-xl">Rwf</span>
</p>
<button className="bg-secondary px-4 py-2 sm:px-6 sm:py-2 rounded-lg text-base sm:text-sm md:text-lg">
Shop Now
</button>
</div>
<div className="md:w-1/2 p-10">
<img src={hotDeal[0].image[0]} alt="Samsung TV" className="w-full h-full object-contain rounded-lg mx-auto sm:mx-0" />
</div>
</>
)}
</section>
<section className="bg-primary text-white p-8 sm:p-16 md:pl-24 flex flex-col md:flex-row items-center justify-between sm:items-center justify-center gap-10 sm:gap-0 md:gap-10 font-outfit text-lg md:text-xl sm:text-sm min=-h-screen">
<div className="md:w-1/2 mb-8 md:mb-0 md:mr-8">
<h2 className="text-2xl sm:text-xl md:text-3xl font-bold mb-4 md:mb-8">
Best Samsung TV Deals
</h2>
<p className="text-base sm:text-sm md:text-xl mb-4 md:mb-6">
Discover the latest Samsung TV deals at unbeatable prices. Whether
you are upgrading your home entertainment setup or looking for the perfect gift,
we've got you covered.
</p>
<p className="text-base sm:text-sm md:text-xl font-semibold mb-4 md:mb-6">
From &nbsp;&nbsp; 678,453 &nbsp;
<span className="bg-sky-400 text-black p-1 px-3 text-xs sm:text-sm rounded-xl">Rwf</span>
</p>
<button className="bg-secondary px-4 py-2 sm:px-6 sm:py-2 rounded-lg text-base sm:text-sm md:text-lg">
Shop Now
</button>
</div>
<div className="md:w-1/2">
{loading ? (
<div>Loading...</div>
) : error ? (
<div>Error: {error}</div>
) : (
<img src={imageUrl!} alt="Samsung TV" className="w-full h-full object-contain rounded-lg mx-auto sm:mx-0" />
)}
</div>
</section>
);
};

export default BestDeals;
export default BestDeals;
55 changes: 20 additions & 35 deletions src/Components/Homepage/ContactSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,53 +7,38 @@ import { useTranslation } from "react-i18next";
interface Props {
status: 'idle' | 'loading' | 'succeeded' | 'failed';
error: string | null;
sendMessage: (messageData: { name: string; email: string; content: string }) => void;
sendMessage: (messageData: { name: string; email: string; content: string }) => void;
}

const ContactSection: React.FC<Props> = ({ status, error, sendMessage }) => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [content, setContent] = useState('');
const [content, setContent] = useState('');

const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();

console.log('Form Data:', { name, email, content });

if (!name || !email || !content) {
if (!name || !email || !content) {
alert('All fields are required.');
return;
}

sendMessage({ name, email, content });
sendMessage({ name, email, content });
};

return (

<section className="px-20 py-20 flex flex-col md:flex-row justify-center font-outfit md:text-xl md:space-x-40 sm:h-auto md:h-screen " id="contact-us">
<div className="w-full md:w-1/2 md:mb-0 flex flex-col gap-[40px]">
<div className="flex flex-col gap-[4px]">
<h2 className="text-primary text-[24px] md:text-4xl font-bold">Get In Touch With Us</h2>
<h2 className="text-secondary text-[16px]">We Are Here To Help</h2>
</div>
<section className="px-8 md:px-64 py-16 bg-gray-100 flex flex-col md:flex-row justify-center font-outfit md:text-xl md:space-x-40 sm:h-auto md:h-screen mt-24 sm:mt-8" id="contact-us">
<div className="w-full md:w-1/2 mb-8 md:mb-0 flex flex-col">
<h2 className="text-primary text-3xl md:text-4xl font-bold mb-4 mt-32">Get In Touch With Us</h2>
<h2 className="text-secondary text-2xl md:text-3xl mb-16">We Are Here To Help</h2>
<div className="flex flex-col">
<div className="w-full flex flex-col gap-[20px] mb-4 md:mb-0">
<div className="flex items-center space-x-4">
<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="39" height="39" rx="10" fill="#E9E9E9" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5317 20.4724C23.5208 24.4604 24.4258 19.8467 26.9656 22.3848C29.4143 24.8328 30.8216 25.3232 27.7192 28.4247C27.3306 28.737 24.8616 32.4943 16.1846 23.8197C7.50652 15.144 11.2616 12.6724 11.574 12.2839C14.6839 9.17385 15.1659 10.5894 17.6145 13.0373C20.1544 15.5765 15.5427 16.4844 19.5317 20.4724Z" fill="#013362" />
</svg>

<p className="text-primary sm:text-sm md:text-[14px]">If you have an urgent business concern please contact us at 07********0</p>
</div>
<div className="flex items-center space-x-4">
<svg width="53" height="40" viewBox="0 0 53 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.564453" y="0.5" width="51.5038" height="39" rx="10" fill="#E9E9E9" />
<path d="M24.5276 28.2279C25.0275 28.1222 28.0737 28.1222 28.5736 28.2279C29.001 28.3266 29.4631 28.5573 29.4631 29.0608C29.4383 29.5402 29.157 29.9653 28.7684 30.2352C28.2646 30.628 27.6732 30.8767 27.055 30.9664C26.7131 31.0107 26.3772 31.0117 26.0472 30.9664C25.4281 30.8767 24.8367 30.628 24.3338 30.2342C23.9442 29.9653 23.663 29.5402 23.6381 29.0608C23.6381 28.5573 24.1003 28.3266 24.5276 28.2279ZM26.6097 11C28.6898 11 30.8147 11.987 32.0769 13.6247C32.8958 14.6792 33.2715 15.7327 33.2715 17.3703V17.7963C33.2715 19.0523 33.6035 19.7925 34.334 20.6456C34.8875 21.2741 35.0645 22.0808 35.0645 22.956C35.0645 23.8302 34.7772 24.6601 34.2018 25.3339C33.4484 26.1417 32.386 26.6573 31.3017 26.747C29.7304 26.8809 28.1581 26.9937 26.5649 26.9937C24.9708 26.9937 23.3995 26.9263 21.8282 26.747C20.7429 26.6573 19.6805 26.1417 18.9281 25.3339C18.3527 24.6601 18.0645 23.8302 18.0645 22.956C18.0645 22.0808 18.2424 21.2741 18.7949 20.6456C19.5483 19.7925 19.8584 19.0523 19.8584 17.7963V17.3703C19.8584 15.6883 20.2778 14.5885 21.1414 13.5119C22.4255 11.9417 24.4838 11 26.5202 11H26.6097Z" fill="#013362" />
</svg>


<p className="text-primary sm:text-sm md:text-[14px]">If you have an urgent business concern please contact us at 07********0</p>
<div className="w-full mb-4 md:mb-0">
<div className="flex items-center space-x-4 mb-16">
<i className="fas fa-phone text-primary"></i>
<p className="text-primary sm:text-sm md:text-2xl">If you have an urgent business concern please contact us at 07********0</p>
</div>
<div className="bg-primary flex justify-center space-x-6 mt-4 p-4 text-white text-2xl md:text-3xl w-full max-w-md rounded-xl">
<a href="#"><i className="fab fa-facebook mr-4"></i></a>
Expand All @@ -64,14 +49,14 @@ const ContactSection: React.FC<Props> = ({ status, error, sendMessage }) => {
</div>
</div>
</div>
<div className="w-full md:w-1/2 text-base md:text-lg flex flex-col gap-[20px]">
<h2 className="text-secondary text-4xl font-bold">Send Us Message</h2>
<div className="w-full md:w-1/2 text-base md:text-lg flex flex-col">
<h2 className="text-secondary text-2xl md:text-4xl font-bold mb-4 mt-32">Send Us Message</h2>
<form onSubmit={handleSubmit} className="flex flex-col">
<div className="mb-4">
<input
type="text"
placeholder="Your Name"
className="w-full text-[14px] p-2 bg-gray-100 rounded-[6px]"
className="w-full p-2 border rounded"
value={name}
onChange={(e) => setName(e.target.value)}
/>
Expand All @@ -80,17 +65,17 @@ const ContactSection: React.FC<Props> = ({ status, error, sendMessage }) => {
<input
type="email"
placeholder="Your Email"
className="w-full text-[14px] p-2 bg-gray-100 rounded-[6px]"
className="w-full p-2 border rounded"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="mb-4">
<textarea
placeholder="Your Message"
className="w-full text-[14px] p-2 bg-gray-100 rounded-[6px]"
value={content}
onChange={(e) => setContent(e.target.value)}
className="w-full p-2 border rounded"
value={content}
onChange={(e) => setContent(e.target.value)}
></textarea>
</div>
<button
Expand Down Expand Up @@ -127,4 +112,4 @@ const mapDispatchToProps = (dispatch: AppDispatch) => ({
sendMessage: (messageData: { name: string; email: string; content: string }) => dispatch(sendMessage(messageData)),
});

export default connect(mapStateToProps, mapDispatchToProps)(ContactSection);
export default connect(mapStateToProps, mapDispatchToProps)(ContactSection);
2 changes: 1 addition & 1 deletion src/Components/Homepage/HeroSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const HeroSection: React.FC = () => {
const { t } = useTranslation();

return (
<section className=" bg-gradient-to-r from-primary to-primaryGradient text-white text-xl px-8 py-[20vh] h-[100vh] md:px-8 lg:px-16 flex flex-col lg:flex-row items-center gap-8 lg:gap-64 font-outfit justify-start items-start">
<section className=" bg-primary text-white text-xl px-8 py-[20vh] h-[100vh] md:px-8 lg:px-16 flex flex-col lg:flex-row items-center gap-8 lg:gap-64 font-outfit justify-start items-start">
<div className="w-full flex flex-col gap-4 lg:gap-8">
<h1 className="text-3xl font-bold">
<span className="text-secondary">CRAFTERS</span> ONLINE SHOP
Expand Down
Loading
Loading