-
{date}
-
{category}
-
{title}
+
+
+
+
+ {date}
+ {category}
+
{title}
diff --git a/src/constants/index.js b/src/constants/index.js
index 1405517..c9d3716 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -1,4 +1,4 @@
-import { facebook, instagram, linkedin, twitter } from "../assets";
+import { Discord, instagram, WhatsApp } from "../assets";
export const navLinks = [
{
@@ -6,24 +6,28 @@ export const navLinks = [
title: "Home",
},
{
- id: "/#news",
+ id: "/news",
title: "News",
},
{
- id: "/#overview",
- title: "Overview",
+ id: "/aboutus",
+ title: "About",
},
{
- id: "/#about",
- title: "About",
+ id: "/reviews",
+ title: "Review",
},
{
- id: "/agents",
- title: "Agents",
+ id: "/shop",
+ title: "Shop",
},
{
- id: "/maps",
- title: "Maps",
+ id: "/contact",
+ title: "Contact Us",
+ },
+ {
+ id: "/blogs",
+ title: "Blog",
},
];
@@ -33,21 +37,28 @@ export const news = [
title: "AGENT COSPLAY GUIDE: HARBOR",
date: "10/27/22",
category: "COMMUNITY",
- imglink: "https://images.contentstack.io/v3/assets/bltb6530b271fddd0b1/bltefa41c5a9c334a87/6356e33edc15735d5cd03980/Val_Banner_Harbor_Cosplay_1920x1080_New_Tattoo.jpg?auto=webp&disable=upscale&width=1073"
+ imglink: "https://cmsassets.rgpub.io/sanity/images/dsfx7636/news/d80da40569edce255f709e70b28954f41d39feba-1920x1080.jpg?auto=format&fit=fill&q=80&w=480"
},
{
id: "news-2",
title: "VALORANT’S PREMIER ALPHA TEST",
date: "10/26/22",
category: "ANNOUNCEMENTS",
- imglink: "https://images.contentstack.io/v3/assets/bltb6530b271fddd0b1/blt916477036f3b64c7/63574eaf9a123e5dbdbc61d5/PremierAlpha_Announce_Banner16x9_optimized.jpg?auto=webp&disable=upscale&width=1073"
+ imglink: "https://cmsassets.rgpub.io/sanity/images/dsfx7636/news/d80da40569edce255f709e70b28954f41d39feba-1920x1080.jpg?auto=format&fit=fill&q=80&w=480"
},
{
id: "news-3",
title: "WHAT’S NEW IN VALORANT EPISODE 5 ACT III",
date: "10/18/22",
category: "GAME UPDATES",
- imglink: "https://images.contentstack.io/v3/assets/bltb6530b271fddd0b1/bltea3dd93cc82f3b59/63484defe9d2c541844df655/VALORANT_2022_EP5-3_Article_Banner_1920x1080_MB01.jpg?auto=webp&disable=upscale&width=1073"
+ imglink: "https://cmsassets.rgpub.io/sanity/images/dsfx7636/news/d80da40569edce255f709e70b28954f41d39feba-1920x1080.jpg?auto=format&fit=fill&q=80&w=480"
+ },
+ {
+ id: "news-4",
+ title: "AGENT COSPLAY GUIDE: HARBOR",
+ date: "10/27/22",
+ category: "COMMUNITY",
+ imglink: "https://cmsassets.rgpub.io/sanity/images/dsfx7636/news/d80da40569edce255f709e70b28954f41d39feba-1920x1080.jpg?auto=format&fit=fill&q=80&w=480"
},
]
@@ -55,21 +66,96 @@ export const socialMedia = [
{
id: "social-media-1",
icon: instagram,
- link: "https://www.instagram.com/",
+ link: "http://instagram.com/teamfury.store",
},
{
id: "social-media-2",
- icon: facebook,
- link: "https://www.facebook.com/",
+ icon: WhatsApp,
+ link: "http://chat.whatsapp.com/H7LvFLMR88IAs2T1Quy6wZ",
},
{
id: "social-media-3",
- icon: twitter,
- link: "https://www.twitter.com/",
+ icon: Discord,
+ link: "http://discord.com/invite/Bbsd68NmqT",
+ },
+
+];
+
+export const reviews = [
+ {
+ id: "1",
+ name: "john doe",
+ image: "",
+ review: "Bought MYS VP,apart from the little delay the service was very fine and clean people are very helpful and trustworthy no second thoughts needed will come back for more offers soon",
+ },
+ {
+ id: "2",
+ name: "Aryan Jadhav",
+ image: "",
+ review: "Very trustworthy person was amazing dealing with them…looking forward for more amazing deals.. you can trust them guys!! They are genuine ❤ bought kuronami vandal account for 2200",
+ },
+ {
+ id: "3",
+ name: "Shreyash Gawande",
+ image: "",
+ review: "100 % trusted and legit Most trusted and friendly, I ordered 1165 vp I got 1170 instead 😂 but really fast and legit service🙏🙏",
+ },
+ {
+ id: "4",
+ name: "Aditya Rathod",
+ image: "",
+ review: "“I’ve bought multiple VALORANT accounts from TEAM FURY, and I couldn’t be happier. The prices are unbeatable, and the service is top-notch! The owners are so sweet and helpful, making the whole experience smooth and easy.” ",
},
{
- id: "social-media-4",
- icon: linkedin,
- link: "https://www.linkedin.com/",
+ id: "5",
+ name: "Akshit ",
+ image: "",
+ review: "“TEAM FURY is hands down the best place for VALORANT accounts! Affordable prices and exceptional service. The owners were so sweet and answered all my questions without hesitation. Highly recommend them!” ",
},
-];
\ No newline at end of file
+ {
+ id: "6",
+ name: "Sarvesh mane",
+ image: "",
+ review: "“I was nervous about buying an account online, but TEAM FURY made the process simple and stress-free. The customer service is excellent, and the prices can’t be beat. The owners are so nice and really care about their customers!” ",
+ },
+ {
+ id: "6",
+ name: "Sandesh bramhane",
+ image: "https://i.redd.it/i-swiped-up-on-this-guys-instagram-story-with-the-message-v0-34kcutxi8geb1.jpg?width=1170&format=pjpg&auto=webp&s=a295640a193f5e1ba9234e6ab566e78e0648f3af",
+ // review: "“I was nervous about buying an account online, but TEAM FURY made the process simple and stress-free. The customer service is excellent, and the prices can’t be beat. The owners are so nice and really care about their customers!” ",
+ },
+
+
+]
+export const homePageReview = [
+ {
+ id: "1",
+ name: "Devin Joe",
+ words: "I recently purchased an account from TEAM FURY, and I couldn't be more thrilled! The transaction was smooth, and the support team was incredibly helpful. They answered all my questions promptly and made me feel at ease throughout the process. Highly recommend!",
+ },
+ {
+ id: "2",
+ name: "Emily Chen",
+ words: "Buying my VALORANT account from TEAM FURY was a fantastic experience! The account was exactly as described, and I received it within hours. The professionalism and dedication of the team are truly commendable. I will definitely return for more!",
+ },
+ {
+ id: "3",
+ name: "Alex Johnson",
+ words: "TEAM FURY exceeded my expectations! I was hesitant at first about purchasing an account online, but their customer service was top-notch. I got a great deal, and the account quality is unmatched. I can't wait to dive into my new VALORANT adventures!",
+ },
+ {
+ id: "4",
+ name: "Samantha Lee",
+ words: "What an amazing service! The staff at TEAM FURY are not only knowledgeable but also incredibly friendly. They helped me pick the perfect account, and their fast delivery was a pleasant surprise. A definite 10/10 for quality and service!",
+ },
+ {
+ id: "5",
+ name: "Michael Smith",
+ words: "I’m so glad I found TEAM FURY! The entire process from start to finish was seamless. They provide a great selection of accounts, and the support team was there for me every step of the way. I highly recommend them for anyone looking to enhance their gaming experience!",
+ },
+ {
+ id: "6",
+ name: "Ava Martinez",
+ words: "TEAM FURY is simply the best! I purchased a VALORANT account and was impressed by the quick service and the reliability of the account. The entire experience was enjoyable, and I will definitely be recommending them to my friends!",
+ },
+];
diff --git a/src/index.css b/src/index.css
index aaf199b..5520d40 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,6 +4,40 @@
@tailwind components;
@tailwind utilities;
+/* Scrollbar container */
+::-webkit-scrollbar {
+ width: 12px; /* Width of the scrollbar */
+ background-color: #1c1f25; /* Dark background like Valorant's theme */
+}
+
+/* Track (the background of the scrollbar) */
+::-webkit-scrollbar-track {
+ background-color: #1c1f25; /* Dark track background */
+}
+
+/* Thumb (the draggable part of the scrollbar) */
+::-webkit-scrollbar-thumb {
+ background-color: #ff4655; /* Valorant's signature red color */
+ border-radius: 8px; /* Rounded edges for a sleek look */
+ border: 2px solid #0f1923; /* Dark outer border for contrast */
+}
+
+/* Thumb hover effect */
+::-webkit-scrollbar-thumb:hover {
+ background-color: #ff5e73; /* Slightly brighter red on hover for interactivity */
+}
+
+/* Thumb active (when clicked) */
+::-webkit-scrollbar-thumb:active {
+ background-color: #ff3141; /* Darker red when clicked */
+}
+
+/* Optional: Customize the scrollbar corner */
+::-webkit-scrollbar-corner {
+ background-color: #0f1923; /* Dark corner background for a seamless look */
+}
+
+
:root {
--black-gradient: linear-gradient(144.39deg,
#ffffff -278.56%,
@@ -225,7 +259,7 @@ nav {
.btn__inner {
position: relative;
display: block;
- padding: 20px 30px;
+ padding: 10px 0px;
background-color: var(--button-background-color);
overflow: hidden;
box-shadow: inset 0px 0px 0px 1px var(--button-inner-border-color);
@@ -322,7 +356,7 @@ nav {
}
#hero::after {
- background-color: #e6e8e1;
+ background-color: rgba(9, 151, 124, 0.1);
}
@media (min-width: 768px) {
@@ -351,4 +385,7 @@ select {
select>option{
font-size: 1.5rem;
+}
+.range-slider {
+ accent-color: red;
}
\ No newline at end of file
diff --git a/src/pages/about/About.jsx b/src/pages/about/About.jsx
new file mode 100644
index 0000000..9bb8686
--- /dev/null
+++ b/src/pages/about/About.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import styles, { layout } from "../../style";
+
+const About = () => {
+ return (
+
+
+
+
+
+
+
+
+ WE ARE FURY
+
+
+
+ DEFY THE LIMITS
+
+
+ Blend your style and experience on a global, competitive stage. You have 13 rounds to attack and defend your side using sharp gunplay and tactical abilities. And, with one life per-round, you'll need to think faster than your opponent if you want to survive. Take on foes across Competitive and Unranked modes as well as Deathmatch and Spike Rush.
+
+
+ {/* Add content for buttons or more information here */}
+
+
+
+
+ {/* If needed, add the image back in this block */}
+ {/*
*/}
+
+
+
+
+ );
+};
+
+export default About;
diff --git a/src/pages/about/TermsAndServices.jsx b/src/pages/about/TermsAndServices.jsx
new file mode 100644
index 0000000..d9d9e4e
--- /dev/null
+++ b/src/pages/about/TermsAndServices.jsx
@@ -0,0 +1,88 @@
+import React from 'react';
+
+const TermsAndServices = () => {
+ return (
+
+
+ {/* Hero Section */}
+
+
+ Terms and Services
+
+
+
+ {/* Content Section */}
+
+
+ {/* Section 1 */}
+
+
+ 1. Introduction
+
+
+ Welcome to the Valorant ID Marketplace. By accessing or using our services, you agree to comply with and be bound by the following terms and conditions. Please read these terms carefully before using our services.
+
+
+
+ {/* Section 2 */}
+
+
+ 2. Acceptance of Terms
+
+
+ By using our website, you affirm that you are at least 18 years of age or have the consent of a parent or guardian. If you do not agree to these terms, please do not use our services.
+
+
+
+ {/* Section 3 */}
+
+
+ 3. Services Offered
+
+
+ - Account listing for sale.
+ - Account purchase options.
+ - Account verification services.
+
+
+
+ {/* Section 4 */}
+
+
+ 4. User Responsibilities
+
+
+ As a user of our services, you agree to:
+
+
+ - Provide accurate information when creating an account.
+ - Respect the rights of other users and not engage in fraudulent activities.
+ - Not share your account credentials with anyone.
+
+
+
+ {/* Section 5 - 10 */}
+ {/* Repeat similar pattern for the remaining sections */}
+
+ {/* Final Section */}
+
+
+ 10. Contact Information
+
+
+ If you have any questions or concerns regarding these terms, please contact us at:
+
+
+ Email: support@valorantidmarketplace.com
+
+
+ Phone: +1 (123) 456-7890
+
+
+
+
+
+ );
+};
+
+export default TermsAndServices;
diff --git a/src/pages/about/cokkie.jsx b/src/pages/about/cokkie.jsx
new file mode 100644
index 0000000..7001cd0
--- /dev/null
+++ b/src/pages/about/cokkie.jsx
@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import { useNavigate } from "react-router-dom";
+
+const CookiePreference = () => {
+
+ const navigate = useNavigate();
+
+ const [preferences, setPreferences] = useState({
+ essential: true,
+ analytics: false,
+ marketing: false,
+ });
+
+ const handleChange = (e) => {
+ const { name, checked } = e.target;
+ setPreferences((prev) => ({ ...prev, [name]: checked }));
+ };
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ // Logic to handle the preferences, e.g., save to cookies or state
+ console.log('Cookie Preferences:', preferences);
+ };
+
+ return (
+
+
Cookie Preferences
+
+ We use cookies to enhance your experience on our site. Please select your preferences below:
+
+
+
+ );
+};
+
+export default CookiePreference;
diff --git a/src/pages/about/privacy.jsx b/src/pages/about/privacy.jsx
new file mode 100644
index 0000000..f3a04da
--- /dev/null
+++ b/src/pages/about/privacy.jsx
@@ -0,0 +1,98 @@
+import React from 'react';
+
+const PrivacyNotes = () => {
+ return (
+
+
+ {/* Hero Section */}
+
+
+ Privacy Notes
+
+
+
+ {/* Content Section */}
+
+
+ {/* Section 1 */}
+
+
+ 1. Data Collection
+
+
+ We collect personal information such as your name, email address, and payment details to facilitate transactions on the Valorant ID Marketplace. By using our services, you consent to the collection and use of this information as outlined in this privacy policy.
+
+
+
+ {/* Section 2 */}
+
+
+ 2. How We Use Your Information
+
+
+ Your personal information is used solely for the purpose of providing our services, processing transactions, and improving your user experience. We may also use your contact information to send important updates regarding your account or services.
+
+
+
+ {/* Section 3 */}
+
+
+ 3. Data Protection
+
+
+ We implement industry-standard security measures to protect your data from unauthorized access, alteration, or disclosure. While we strive to keep your data secure, no method of transmission over the internet is 100% secure.
+
+
+
+ {/* Section 4 */}
+
+
+ 4. Sharing Your Information
+
+
+ We do not sell, trade, or rent your personal information to third parties. We may share your data with trusted partners solely for the purpose of operating our services, such as payment processing.
+
+
+
+ {/* Section 5 */}
+
+
+ 5. Cookies and Tracking
+
+
+ Our website uses cookies to enhance your experience, track analytics, and improve functionality. You can choose to disable cookies in your browser settings, but this may affect your ability to use some features of our site.
+
+
+
+ {/* Section 6 */}
+
+
+ 6. Changes to this Policy
+
+
+ We reserve the right to modify this privacy policy at any time. Any changes will be posted on this page, and we encourage you to review the policy periodically.
+
+
+
+ {/* Section 7 */}
+
+
+ 7. Contact Us
+
+
+ If you have any questions or concerns about our privacy practices, please reach out to us at:
+
+
+ Email: support@valorantidmarketplace.com
+
+
+ Phone: +1 (123) 456-7890
+
+
+
+
+
+ );
+};
+
+export default PrivacyNotes;
diff --git a/src/pages/cart/cart-item.jsx b/src/pages/cart/cart-item.jsx
new file mode 100644
index 0000000..c81dfd2
--- /dev/null
+++ b/src/pages/cart/cart-item.jsx
@@ -0,0 +1,35 @@
+import React, { useContext } from "react";
+import { ShopContext } from "../../components/context/shop-context";
+
+export const CartItem = (props) => {
+ const { id, productName, price, productImage } = props.data;
+ const { cartItems, addToCart, removeFromCart, updateCartItemCount } =
+ useContext(ShopContext);
+
+ return (
+
+
+
+
+ {productName}
+
+
+ Price: ₹{price}
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/cart/cart.css b/src/pages/cart/cart.css
new file mode 100644
index 0000000..bb3bc14
--- /dev/null
+++ b/src/pages/cart/cart.css
@@ -0,0 +1,49 @@
+.cart {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.cartItem {
+ width: 700px;
+ height: 250px;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
+ border-radius: 25px;
+ margin: 30px;
+}
+
+.cartItem img {
+ margin: 20px;
+ width: 400px;
+ border-radius: 15px;
+}
+
+.cartItem .description {
+ width: 100%;
+ font-size: 30px;
+}
+
+.countHandler input {
+ width: 40px;
+ text-align: center;
+ font-weight: bolder;
+}
+
+.checkout button {
+ width: 150px;
+ height: 50px;
+ background-color: rgb(19, 19, 19);
+ color: white;
+ border: none;
+ border-radius: 8px;
+ margin: 10px;
+ cursor: pointer;
+}
+
+.blankCart {
+ height: 400px;
+}
\ No newline at end of file
diff --git a/src/pages/cart/cart.jsx b/src/pages/cart/cart.jsx
new file mode 100644
index 0000000..b280747
--- /dev/null
+++ b/src/pages/cart/cart.jsx
@@ -0,0 +1,68 @@
+import React, { useContext } from "react";
+import { ShopContext } from "../../components/context/shop-context";
+import { PRODUCTS } from "../../components/products";
+import { CartItem } from "./cart-item";
+import { useNavigate } from "react-router-dom";
+
+import "./cart.css";
+export const Cart = () => {
+ const { cartItems, getTotalCartAmount, checkout } = useContext(ShopContext);
+ const totalAmount = getTotalCartAmount();
+
+
+ const whatsapp = () => {
+ const url = `https://wa.me/${918511037477}`;
+ window.open(url, "_blank");
+
+ };
+
+ const navigate = useNavigate();
+
+ return (
+
+ {/*
+
Your Cart Items
+ */}
+
+ {PRODUCTS.map((product) => {
+ if (cartItems[product.id] !== 0) {
+ return ;
+ }
+ })}
+
+
+ {totalAmount > 0 ? (
+
+
+
Subtotal: ₹{totalAmount}
+
+
+
+
+
+
+
+
+
+ ) : (
+
+
+
+ )}
+
+ );
+};
diff --git a/src/pages/contact/Contact.jsx b/src/pages/contact/Contact.jsx
new file mode 100644
index 0000000..e808504
--- /dev/null
+++ b/src/pages/contact/Contact.jsx
@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import { socialMedia } from "../../constants";
+import logo from "../../assets/logo.png";
+
+const Contact = () => {
+ const initialFormData = {
+ name: "",
+ email: "",
+ phone: "",
+ address: "",
+ subject: "",
+ message: "",
+ };
+
+ const [formData, setFormData] = useState(initialFormData);
+
+ const handleChange = (e) => {
+ setFormData({ ...formData, [e.target.name]: e.target.value });
+ };
+
+ return (
+
+
+
+
+
+
Contact Us
+
You can also contact us through Social media:
+
+ {socialMedia.map((social) => (
+
+
+ 
+
+
+ ))}
+
+
+
+
+ );
+};
+
+export default Contact;
diff --git a/src/pages/home/Hero.jsx b/src/pages/home/Hero.jsx
new file mode 100644
index 0000000..b298823
--- /dev/null
+++ b/src/pages/home/Hero.jsx
@@ -0,0 +1,67 @@
+import React, { useEffect } from "react";
+import styles from "../../style"; // Assuming you have styles defined here.
+import { valoranttext } from "../../assets/index"; // Assuming this is your asset.
+import { useNavigate } from "react-router-dom";
+
+const Hero = () => {
+ // Move useNavigate inside the Hero component
+ const navigate = useNavigate();
+
+ // Define visitShop function within the component
+ const visitShop = () => {
+ navigate('/shop');
+ };
+
+ // You can use useEffect if you want to run some side effects on component mount
+ useEffect(() => {
+ // You can add any logic that needs to run on mount here
+ // Currently, it's empty because we don't have any specific logic.
+ }, []); // Empty array means this runs once on mount
+
+ return (
+
+
+
+ {/* Optional content could be uncommented if needed */}
+ {/*
+ A 5v5 character-based tactical shooter
+
*/}
+
+ {/* Uncomment this if wanted */}
+ {/*
*/}
+
+
+ {/*
*/}
+
+ );
+};
+
+export default Hero;
diff --git a/src/pages/home/Home.jsx b/src/pages/home/Home.jsx
new file mode 100644
index 0000000..23f61ba
--- /dev/null
+++ b/src/pages/home/Home.jsx
@@ -0,0 +1,24 @@
+import styles from "../../style";
+import Hero from "../home/Hero";
+import News from "../home/News";
+// import LastEpisode from "../home/LastEpisode";
+//import Overview from "../home/Overview";
+import About from "./about";
+import Agent from "./agent";
+
+const Home = () => (
+ <>
+
+ {/*
*/}
+ {/*
+
*/}
+
+);
+
+export default Home;
diff --git a/src/pages/home/News.jsx b/src/pages/home/News.jsx
new file mode 100644
index 0000000..911edc1
--- /dev/null
+++ b/src/pages/home/News.jsx
@@ -0,0 +1,35 @@
+import styles, { layout } from "../../style";
+import { news } from "../../constants";
+import { homePageReview } from "../../constants";
+import icon from "./icon.svg";
+import "./home.css";
+
+const News = () => (
+
+
+
+
+ THE LATEST
+
+
+ {homePageReview.map((review) => (
+
+
+
{review.name}
+
+
+ ))}
+
+
+
+);
+
+export default News;
diff --git a/src/pages/home/about.jsx b/src/pages/home/about.jsx
new file mode 100644
index 0000000..05d9854
--- /dev/null
+++ b/src/pages/home/about.jsx
@@ -0,0 +1,51 @@
+import { Link } from "react-router-dom";
+import styles, { layout } from "../../style";
+
+const About = () => (
+
+
+
+
+
+
+
+
+ WE ARE VALORANT
+
+
+
+ DEFY THE LIMITS
+
+
+ Blend your style and experience on a global, competitive
+ stage. You have 13 rounds to attack and defend your side using
+ sharp gunplay and tactical abilities. And, with one life
+ per-round, you'll need to think faster than your opponent if
+ you want to survive. Take on foes across Competitive and
+ Unranked modes as well as Deathmatch and Spike Rush.
+
+
+
+
+
+
+
+ {/*
+
+
*/}
+
+
+
+
+);
+
+export default About;
diff --git a/src/components/pages/home/MapsSection.jsx b/src/pages/home/agent.jsx
similarity index 71%
rename from src/components/pages/home/MapsSection.jsx
rename to src/pages/home/agent.jsx
index 48fbd2c..d03ff22 100644
--- a/src/components/pages/home/MapsSection.jsx
+++ b/src/pages/home/agent.jsx
@@ -1,8 +1,8 @@
import { Link } from "react-router-dom";
-import styles, { layout } from "../../../style";
+import styles, { layout } from "../../style";
-const Maps = () => (
-
+const Agent = () => (
+
(
- YOUR MAPS
+ YOUR AGENTS
- FIGHT AROUND THE WORLD.
+ CREATIVITY IS YOUR GREATEST WEAPON.
- Each map is a playground to showcase your creative thinking.
- Purpose-built for team strategies, spectacular plays, and clutch
- moments. Make the play others will imitate for years to come.
+ More than guns and bullets, you’ll choose an Agent armed with
+ adaptive, swift, and lethal abilities that create opportunities
+ to let your gunplay shine. No two Agents play alike, just as no
+ two highlight reels will look the same.
-
+ {/*
-
+ */}
-
+ /> */}
@@ -53,4 +54,4 @@ const Maps = () => (
);
-export default Maps;
+export default Agent;
diff --git a/src/pages/home/home.css b/src/pages/home/home.css
new file mode 100644
index 0000000..6e6493e
--- /dev/null
+++ b/src/pages/home/home.css
@@ -0,0 +1,8 @@
+.scrollbar-hidden::-webkit-scrollbar {
+ display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
+ }
+
+ .scrollbar-hidden {
+ -ms-overflow-style: none; /* Hide scrollbar for Internet Explorer and Edge */
+ scrollbar-width: none; /* Hide scrollbar for Firefox */
+ }
\ No newline at end of file
diff --git a/src/pages/home/icon.svg b/src/pages/home/icon.svg
new file mode 100644
index 0000000..76976e4
--- /dev/null
+++ b/src/pages/home/icon.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/src/pages/news/News.jsx b/src/pages/news/News.jsx
new file mode 100644
index 0000000..3f1d85c
--- /dev/null
+++ b/src/pages/news/News.jsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import styles, { layout } from "../../style";
+import { news } from "../../constants/index"
+import NewsCard from "../../components/utils/NewsCard";
+
+const News = () => {
+ return (
+
+
+
+
+ THE LATEST NEWS
+
+
+
+ {news.map((newsItem) => (
+
+ ))}
+
+
+
+
+ )
+}
+
+export default News
\ No newline at end of file
diff --git a/src/pages/reviews/Reviews.jsx b/src/pages/reviews/Reviews.jsx
new file mode 100644
index 0000000..8c8cdfc
--- /dev/null
+++ b/src/pages/reviews/Reviews.jsx
@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { reviews } from '../../constants/index';
+import { XMarkIcon } from '@heroicons/react/24/solid'; // Updated import for Heroicons v2
+
+const Reviews = () => {
+ const [selectedImage, setSelectedImage] = useState(null);
+
+ const handleImageClick = (image) => {
+ setSelectedImage(image);
+ };
+
+ const closeModal = () => {
+ setSelectedImage(null);
+ };
+
+ const handleOutsideClick = (event) => {
+ if (event.target.classList.contains('modal-overlay')) {
+ closeModal();
+ }
+ };
+
+ return (
+
+
+ Player Reviews
+
+
+ {reviews.map((review) => (
+
+
+
+ {review.name.charAt(0).toUpperCase()}
+
+
+ {review.name}
+
+
+
"{review.review}"
+ {review.image && (
+
+
handleImageClick(review.image)}
+ />
+
+ )}
+
+ ))}
+
+
+ {selectedImage && (
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default Reviews;
diff --git a/src/pages/shop/product.jsx b/src/pages/shop/product.jsx
new file mode 100644
index 0000000..2ff0046
--- /dev/null
+++ b/src/pages/shop/product.jsx
@@ -0,0 +1,59 @@
+import React, { useContext, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { ShopContext } from "../../components/context/shop-context";
+
+export const Product = (props) => {
+ const { id, productName, price, productImage } = props.data;
+ const { addToCart, removeFromCart, cartItems } = useContext(ShopContext);
+ const [showCartButton, setShowCartButton] = useState(false);
+ const cartItemCount = cartItems[id];
+ const originalPrice = price + 500;
+ const navigate = useNavigate();
+
+ const handleAddToCart = () => {
+ setShowCartButton(true);
+ setTimeout(() => setShowCartButton(false), 10000);
+ };
+
+ const handleButtonClick = () => {
+ if (cartItemCount > 0) {
+ removeFromCart(id);
+ } else {
+ addToCart(id);
+ handleAddToCart();
+ }
+ };
+
+ return (
+
+
+
+
{productName}
+
+ ₹{originalPrice}
+ ₹{price}
+
+
+
+
+
+ {showCartButton && (
+
navigate('/cart')}
+ >
+
/icon/
+ CheckOut Cart
+
+ )}
+
+ );
+};
diff --git a/src/pages/shop/shop.css b/src/pages/shop/shop.css
new file mode 100644
index 0000000..c7d1db6
--- /dev/null
+++ b/src/pages/shop/shop.css
@@ -0,0 +1,119 @@
+.shopTitle {
+ text-align: center;
+ font-size: 40px;
+}
+
+.products {
+ width: 100%;
+ height: auto;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ place-items: center;
+}
+
+.product {
+ border-radius: 0px;
+ width: 400px;
+ height: 450px;
+ margin: 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.product img {
+ width: 100%;
+ max-width: 500px; /* Restrict the image size for responsiveness */
+ height: auto;
+ border-radius: 0px;
+}
+
+.product .description {
+ text-align: center;
+ margin: 0px 0px -36px 0px;
+}
+
+.product:hover {
+ transition: 0.3s ease-in;
+ cursor: pointer;
+}
+
+.addToCartBttn {
+ background-color: transparent;
+ border: 2px solid rgb(19, 19, 19);
+ min-width: 100px;
+ padding: 5px 10px;
+ border-radius: 15px;
+}
+
+.addToCartBttn:hover {
+ background-color: rgb(19, 19, 19);
+ color: white;
+ cursor: pointer;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 1200px) {
+ .products {
+ grid-template-columns: 1fr 1fr; /* Two products per row */
+ }
+}
+
+@media (max-width: 768px) {
+ .products {
+ grid-template-columns: 1fr; /* One product per row */
+ }
+
+ .shopTitle {
+ font-size: 30px;
+ }
+
+ .product {
+ width: 80%;
+ margin: 20px;
+ }
+
+ .product img {
+ max-width: 100%; /* Full width of the product card */
+ }
+}
+
+@media (max-width: 480px) {
+ .shopTitle {
+ font-size: 24px;
+ }
+
+ .addToCartBttn {
+ min-width: 80px;
+ padding: 3px 8px;
+ }
+}
+
+
+.original-price {
+ text-decoration: line-through; /* Strikethrough effect */
+ color: red; /* Color for the original price */
+ margin-right: 10px; /* Space between the original and discounted prices */
+}
+
+.discounted-price {
+ color: green; /* Color for the discounted price */
+ font-weight: bold; /* Make the discounted price bold */
+}
+.animated-cart-button {
+ opacity: 0;
+ transition: opacity 0.5s ease, transform 0.5s ease;
+ animation: fadeIn 0.5s forwards;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
diff --git a/src/pages/shop/shop.jsx b/src/pages/shop/shop.jsx
new file mode 100644
index 0000000..0cd0c12
--- /dev/null
+++ b/src/pages/shop/shop.jsx
@@ -0,0 +1,143 @@
+import React, { useState, useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+import RangeSlider from 'react-range-slider-input';
+import 'react-range-slider-input/dist/style.css'; // Ensure the styles for the range slider are imported
+import { PRODUCTS } from "../../components/products";
+import { Product } from "./product";
+import "./shop.css"; // Your custom CSS file
+
+export const Shop = () => {
+ const [visibleProducts, setVisibleProducts] = useState(6);
+ const [isFetching, setIsFetching] = useState(false);
+ const [priceRange, setPriceRange] = useState([0, 15000]); // Initialize the price range
+ const { ref, inView } = useInView({
+ threshold: 1.0,
+ });
+ const [filteredProducts, setFilteredProducts] = useState(PRODUCTS);
+
+ // State for sorting
+ const [sortOption, setSortOption] = useState("default"); // "default", "priceAsc", "priceDesc"
+
+ const hasMoreProducts = visibleProducts < filteredProducts.length;
+
+ // Filter products based on the price range and sort them
+ useEffect(() => {
+ const filteredAndSortedProducts = PRODUCTS.filter(
+ (product) =>
+ product.price >= priceRange[0] && product.price <= priceRange[1]
+ );
+
+ // Sort products based on the selected sort option
+ if (sortOption === "priceAsc") {
+ filteredAndSortedProducts.sort((a, b) => a.price - b.price); // Sorting by price ascending
+ } else if (sortOption === "priceDesc") {
+ filteredAndSortedProducts.sort((a, b) => b.price - a.price); // Sorting by price descending
+ }
+
+ setFilteredProducts(filteredAndSortedProducts);
+ setVisibleProducts(6); // Reset visible products when price range or sort option changes
+ }, [priceRange, sortOption]);
+
+ // Load more products on scroll when inView
+ useEffect(() => {
+ if (inView && !isFetching && hasMoreProducts) {
+ setIsFetching(true);
+ const loadMoreProducts = () => {
+ setTimeout(() => {
+ setVisibleProducts((prevVisible) =>
+ Math.min(prevVisible + 6, filteredProducts.length)
+ );
+ setIsFetching(false);
+ }, 300);
+ };
+ loadMoreProducts();
+ }
+ }, [inView, isFetching, hasMoreProducts, filteredProducts.length]);
+
+ // Handle price range changes
+ const handlePriceRangeChange = (value) => {
+ setPriceRange(value);
+ };
+
+ // Handle sorting option change
+ const handleSortChange = (sortby) => {
+ setSortOption(sortby);
+ };
+
+ return (
+
+
+
+ PRODUCT SHOP
+
+
+
+ {/* Range Slider for selecting price range */}
+
+
+
+
+
+
+
+
+
+ {/* Sort By Buttons */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {filteredProducts.slice(0, visibleProducts).map((product) => (
+
+ ))}
+
+
+ {isFetching && hasMoreProducts && (
+
+ Loading...
+
+ )}
+
+ {hasMoreProducts && (
+
+ )}
+
+ );
+};
diff --git a/src/style.js b/src/style.js
index 9edd4ac..2584b22 100644
--- a/src/style.js
+++ b/src/style.js
@@ -1,5 +1,5 @@
const styles = {
- boxWidth: "xl:max-w-[1280px] w-full",
+ boxWidth: "w-full",
heading2: "font-poppins font-semibold xs:text-[48px] text-[40px] text-white xs:leading-[76.8px] leading-[66.8px] w-full",
paragraph: "font-poppins font-normal text-dimWhite text-[18px] leading-[30.8px]",
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..9bbe442
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,10 @@
+{
+ "cleanUrls": true,
+ "rewrites": [
+ {
+ "source": "/(.*)",
+ "destination": "/"
+ }
+ ]
+ }
+
\ No newline at end of file
diff --git a/{ b/{
new file mode 100644
index 0000000..e69de29