+
+
+
+
+
+
+
+ + {title} +
+{subtitle}
+ {buttonText && ( + + )} +
+ {item.status !== null ? (
+
+
+
+
+ {item.status}
+
+
+ ) : (
+
+ )}
+
+ );
+ })}
+
+
+ {item.title}
+
+
+ {item.oldPrice && (
+ {`$${item.oldPrice}`}
+ )}
+ {`$${item.newPrice}`}
+
+
+
+
+
+
+ {title}
+
+
+ {subtitle}
+
+
+ {data.map((card, index) => {
+ return (
+
+
+ );
+}
diff --git a/examples/ecommerce-jewellery-store/src/components/CityInput.tsx b/examples/ecommerce-jewellery-store/src/components/CityInput.tsx
new file mode 100644
index 00000000..02379f7a
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/components/CityInput.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import {
+ DropDownList,
+ DropDownListChangeEvent,
+ } from '@progress/kendo-react-dropdowns';
+
+ const CityInput: React.FC = () => {
+ const cities = [
+ { text: 'London', id: 1 },
+ { text: 'Liverpool', id: 2 },
+ { text: 'Canterbury', id: 3 },
+ { text: 'Lancaster', id: 4 },
+ ];
+
+ const [state, setState] = React.useState({
+ value: { text: 'Liverpool', id: 2 },
+ });
+
+ const handleChange = (event: DropDownListChangeEvent) => {
+ setState({
+ value: event.target.value,
+ });
+ };
+
+ return (
+
+ 
+
+ {card.collectionText}
+
+
+ );
+ })}
+
+
+
+
+
+
+
+ );
+}
+
+export default ContactsRadioButtons;
diff --git a/examples/ecommerce-jewellery-store/src/components/CustomizedSection.tsx b/examples/ecommerce-jewellery-store/src/components/CustomizedSection.tsx
new file mode 100644
index 00000000..739651b4
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/components/CustomizedSection.tsx
@@ -0,0 +1,7 @@
+import { SectionProps } from "../data/types";
+
+export const CustomSection = (props: SectionProps) => {
+ return +
+
+
;
+};
+
+export default DateChooserInput;
\ No newline at end of file
diff --git a/examples/ecommerce-jewellery-store/src/components/EmailInput.tsx b/examples/ecommerce-jewellery-store/src/components/EmailInput.tsx
new file mode 100644
index 00000000..5ed545e2
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/components/EmailInput.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Input } from '@progress/kendo-react-inputs';
+
+const EmailInput: React.FC = () => {
+
+ return (
+
+
+
+ );
+};
+
+export default EmailInput;
diff --git a/examples/ecommerce-jewellery-store/src/components/ExpiryDate.tsx b/examples/ecommerce-jewellery-store/src/components/ExpiryDate.tsx
new file mode 100644
index 00000000..442dcc43
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/components/ExpiryDate.tsx
@@ -0,0 +1,9 @@
+import { DateInput } from "@progress/kendo-react-dateinputs";
+
+const ExpiryDate = () => {
+ return (
+
+
+
+
+ 
+
+ (
+
+
+ )}
+ />
+
+
+ We use cookies to improve your experience.
+All rights reserved.
+Subscribe to our Newsletter:
+ +Follow us:
+
+
+
+
+
+
+
+
+ Customer Care
+ Contact Us + Shopping Online + Track Your Order + Shipping & Delivery + Orders & Payment + Help +
+
+
+ Our Company
+ Prominent Locations + Careers + Corporate Responsibility + Sustainability + Society Care +
+
+ Legal & Privacy
+ Terms of Use + Conditions of Sale + Return Policy + Privacy Policy + Cookie Policy +
+ {props.children}
+
;
+};
diff --git a/examples/ecommerce-jewellery-store/src/components/OrderedImageCard.tsx b/examples/ecommerce-jewellery-store/src/components/OrderedImageCard.tsx
new file mode 100644
index 00000000..e1e7a54b
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/components/OrderedImageCard.tsx
@@ -0,0 +1,31 @@
+import { Button } from "@progress/kendo-react-buttons";
+import { OrderedImgTextProps } from "../data/types";
+
+export const OrderedImgText = (props: OrderedImgTextProps) => {
+ const { title, subtitle, contentText, img, order, link } = props;
+
+ return (
+ <>
+
+
+ {title}
+ {subtitle}
+ {contentText}
+
+ {link && (
+
+
+
+ )}
+
+
+ );
+};
diff --git a/examples/ecommerce-jewellery-store/src/components/PasswordInput.tsx b/examples/ecommerce-jewellery-store/src/components/PasswordInput.tsx
new file mode 100644
index 00000000..5b288652
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/components/PasswordInput.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { TextBox, TextBoxChangeEvent } from '@progress/kendo-react-inputs';
+import { Button } from '@progress/kendo-react-buttons';
+import { eyeIcon, eyeSlashIcon } from '@progress/kendo-svg-icons';
+
+const PasswordInput: React.FC = () => {
+ const [value, setValue] = React.useState
+ (
+
+ )}
+ />
+
+ );
+};
+
+export default PasswordInput;
diff --git a/examples/ecommerce-jewellery-store/src/components/PhoneInput.tsx b/examples/ecommerce-jewellery-store/src/components/PhoneInput.tsx
new file mode 100644
index 00000000..f969fa70
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/components/PhoneInput.tsx
@@ -0,0 +1,9 @@
+import { MaskedTextBox } from '@progress/kendo-react-inputs';
+
+const PhoneNumber: React.FC = () => {
+ return (
+
+
+
+ {props.title}
+
+
+ {props.subtitle}
+
+
+ {`$${props.price}`}
+
+ {props.description}
+
+
+
+
+ {visited && validationMessage && {validationMessage} }
+
+ );
+};
+
+export const ShoppingCartList: React.FC = () => {
+ const { cart, updateIndividualCartItem } = useCart();
+ const navigate = useNavigate();
+
+ const onBackClick = () => {
+ navigate("/products");
+ };
+
+ const onProceedClick = () => {
+ navigate("/paymentdetails");
+ };
+
+ const updateQuantity = (event: any) => {
+ const target = event.target.element;
+ const id = target.getAttribute("id");
+
+ updateIndividualCartItem(id);
+ };
+
+ return (
+ <>
+
+ Shopping Cart
+
+
+
+
+
+ {cart.map((item) => {
+ const isCartItem = "quantity" in item;
+
+ return (
+
+ 
+
+ );
+ })}
+
+ {isCartItem ? item.product.title : null}
+ {`$${
+ isCartItem ? item.product.newPrice.toLocaleString() : null
+ }`}
+
+ {isCartItem ? (
+
+
+
+
+
+
+
+
+ Why people choose us?
+
+
+
+
+
+
+
+ + Return Policy +
++ You can return your items within 30 days for a full refund or + exchange. +
+
+
+
+
+
+ + Included Gift Wrapping +
++ Apply your discount code at checkout to enjoy exclusive savings + on your order. +
+
+
+
+
+ + Discount Code Available +
++ Add gift wrapping for a special touch, along with a personalized + message for your loved ones. +
+
+ {props.children}
+
+ );
+};
diff --git a/examples/ecommerce-jewellery-store/src/components/Testemonials.tsx b/examples/ecommerce-jewellery-store/src/components/Testemonials.tsx
new file mode 100644
index 00000000..03245300
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/components/Testemonials.tsx
@@ -0,0 +1,66 @@
+import { Avatar } from '@progress/kendo-react-layout';
+import { Rating } from '@progress/kendo-react-inputs';
+import { TestemonialsDataDescriptor } from '../data/types';
+import testemonials1 from "../assets/testemonials1.jpg"
+import testemonials2 from "../assets/testemonials2.jpg"
+import testemonials3 from "../assets/testemonials3.jpg"
+
+
+const testemonialsData: TestemonialsDataDescriptor[] = [
+ {
+ image: testemonials1,
+ name: "Erica Moore",
+ rating: 5,
+ description: "Vilora exceeded all my expectations! The craftsmanship of my diamond necklace is absolutely stunning, and the attention to detail is unparalleled. From the moment I placed my order to the day it arrived, the entire experience was flawless."
+ },
+ {
+ image: testemonials2,
+ name: "Kelvin Hettinger",
+ rating: 4.5,
+ description: "I couldn't be happier with my custom engagement ring from Vilora. The team helped me design the perfect piece, and the final result was even more beautiful than I imagined. Their service, quality, and dedication to excellence make Vilora my go-to for all fine jewelry."
+ },
+ {
+ image: testemonials3,
+ name: "Karen Brooks",
+ rating: 5,
+ description: "Vilora’s collection is nothing short of breathtaking. I recently purchased a white sapphire ring, and it’s become my favorite piece. The elegance and brilliance of the jewelry reflect their impeccable taste and high standards. Highly recommend!"
+ }
+];
+
+export const Testemonials = () => {
+ return (
+
+
+ );
+}
diff --git a/examples/ecommerce-jewellery-store/src/data/items.ts b/examples/ecommerce-jewellery-store/src/data/items.ts
new file mode 100644
index 00000000..4d417ee8
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/data/items.ts
@@ -0,0 +1,17 @@
+const items = [
+ {
+ "text": "Home",
+ "url": "/"
+ },
+ {
+ "text": "Jewelry",
+ "items": [{ "text": "Bracelets" }, { "text": "Rings" }, { "text": "Earings" }, { "text": "Watches" },{ "text": "All" }],
+ },
+ {
+ "text": "Contacts",
+ "url": "/contacts"
+ }
+ ];
+
+ export default items;
+
\ No newline at end of file
diff --git a/examples/ecommerce-jewellery-store/src/data/language-items.ts b/examples/ecommerce-jewellery-store/src/data/language-items.ts
new file mode 100644
index 00000000..b1dd1ee0
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/data/language-items.ts
@@ -0,0 +1,11 @@
+const languageItems = [
+
+ {
+ "text": "English",
+ "items": [{ "text": "English" }, { "text": "French" }, { "text": "Spanish" }]
+ },
+
+ ];
+
+ export default languageItems;
+
\ No newline at end of file
diff --git a/examples/ecommerce-jewellery-store/src/data/listData.ts b/examples/ecommerce-jewellery-store/src/data/listData.ts
new file mode 100644
index 00000000..f1d974f6
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/data/listData.ts
@@ -0,0 +1,184 @@
+import diamongWeddingRing from "../assets/listViewImages/diamondWeddingRing.png";
+import pinkSilverBracelet from "../assets/listViewImages/pinkSilverBracelet.png";
+import silverBraceletCross from "../assets/listViewImages/silverBraceletCross.png";
+import yellowGoldEarrings from "../assets/listViewImages/yellowGoldEarrings.png";
+import silverHeartNecklace from "../assets/listViewImages/necklace.png";
+import homemadeSilverEarrings from "../assets/listViewImages/handmadeSilverEarrings.png";
+import diamondWeddingBands from "../assets/listViewImages/diamondWeddingBands.png";
+import casualSilverWatch from "../assets/listViewImages/casualSilverWatch.png";
+import silverBraceletOnyx from "../assets/listViewImages/silverBraceletOnyx.png";
+import weddingBandsPearl from "../assets/listViewImages/weddingBandsPearl.png";
+import silverWeddingBands from "../assets/listViewImages/silverWeddingBands.png";
+import handmadeYellowGoldRing from "../assets/listViewImages/handmadeYellowGoldRing.png";
+import diamondRingSapphire from "../assets/listViewImages/diamondRingSapphire.png";
+import silverHeartBracelet from "../assets/listViewImages/silverHeartBracelet.png";
+import roseGoldEarringsOpal from "../assets/listViewImages/roseGoldEarringsOpal.png";
+import silverBraceletTopaz from "../assets/listViewImages/silverBraceletTopaz.png";
+import handmadeDiamongRing from "../assets/listViewImages/handmadeDiamongRing.png";
+import diamondRingRuby from "../assets/listViewImages/diamondRingRuby.png";
+import stainlessSteelWatch from "../assets/listViewImages/stainlessSteelWatch.png";
+import goldEarringsGarnet from "../assets/listViewImages/goldEarringsGarnet.png";
+import { ListDataDescriptor } from "./types";
+
+export const listData: ListDataDescriptor[] = [{
+ img: diamongWeddingRing,
+ status: "sale",
+ title: "Diamond Wedding Ring",
+ category: "Rings",
+ material: "Silver",
+ oldPrice: 990,
+ newPrice: 890
+}, {
+ img: silverBraceletCross,
+ status: "recommended",
+ category: "Bracelets",
+ material: "Silver",
+ title: "Silver Bracelet with Cross",
+ oldPrice: null,
+ newPrice: 270
+},
+{
+ img: pinkSilverBracelet,
+ status: null,
+ category: "Bracelets",
+ material: "Silver",
+ title: "Pink Silver Bracelet",
+ oldPrice: null,
+ newPrice: 460
+}, {
+ img: yellowGoldEarrings,
+ status: "sale",
+ category: "Earrings",
+ material: "Silver",
+ title: "Yellow Gold Earrings",
+ oldPrice: 500,
+ newPrice: 380
+}, {
+ img: silverHeartNecklace,
+ status: null,
+ category: "Necklaces",
+ material: "Silver",
+ title: "Silver Heart Necklace",
+ oldPrice: null,
+ newPrice: 400
+}, {
+ img: homemadeSilverEarrings,
+ status: null,
+ category: "Earrings",
+ material: "Silver",
+ title: "Handmade Silver Earrings",
+ oldPrice: null,
+ newPrice: 650
+}, {
+ img: diamondWeddingBands,
+ status: "recommended",
+ title: "Diamond Wedding Bands",
+ material: "Gold",
+ category: "Rings",
+ oldPrice: null,
+ newPrice: 4290
+}, {
+ img: casualSilverWatch,
+ status: null,
+ title: "Casual Silver Watch",
+ category: "Watches",
+ material: "Silver",
+ oldPrice: null,
+ newPrice: 390
+}, {
+ img: silverBraceletOnyx,
+ status: "sale",
+ title: "Silver Bracelet with Onyx",
+ material: "Silver",
+ category: "Bracelets",
+ oldPrice: 950,
+ newPrice: 770
+}, {
+ img: weddingBandsPearl,
+ status: "must have",
+ title: "Wedding Bands with Pearls",
+ material: "Gold",
+ category: "Rings",
+ oldPrice: null,
+ newPrice: 900
+}, {
+ img: silverWeddingBands,
+ status: null,
+ title: "Silver Wedding Bands",
+ material: "Silver",
+ category: "Rings",
+ oldPrice: null,
+ newPrice: 250
+}, {
+ img: handmadeYellowGoldRing,
+ status: null,
+ category: "Rings",
+ material: "Silver",
+ title: "Handmade Yellow Gold Ring",
+ oldPrice: null,
+ newPrice: 560
+}, {
+ img: diamondRingSapphire,
+ status: "must have",
+ title: "Diamond Ring with Sapphire",
+ category: "Rings",
+ material: "Gold",
+ oldPrice: null,
+ newPrice: 3590
+}, {
+ img: silverHeartBracelet,
+ status: null,
+ title: "Silver Heart Bracelet",
+ category: "Bracelets",
+ material: "Silver",
+ oldPrice: null,
+ newPrice: 430
+}, {
+ img: roseGoldEarringsOpal,
+ status: "Sale",
+ title: "Rose Gold Earrings with Opal",
+ category: "Earrings",
+ material: "Gold",
+ oldPrice: 850,
+ newPrice: 690
+},{
+ img: silverBraceletTopaz,
+ status: null,
+ category: "Bracelets",
+ material: "Silver",
+ title: "Silver Bracelet with Topaz",
+ oldPrice: null,
+ newPrice: 580
+},{
+ img: handmadeDiamongRing,
+ status: null,
+ category: "Rings",
+ material: "Gold",
+ title: "Handmade Diamond Ring",
+ oldPrice: null,
+ newPrice: 1100
+},{
+ img: diamondRingRuby,
+ status: "must have",
+ category: "Rings",
+ material: "Gold",
+ title: "Diamong Ring with Ruby",
+ oldPrice: null,
+ newPrice: 5560
+},{
+ img: stainlessSteelWatch,
+ status: null,
+ material: "Silver",
+ category: "Watches",
+ title: "Silver Watch",
+ oldPrice: null,
+ newPrice: 270
+}, {
+ img: goldEarringsGarnet,
+ status: null,
+ category: "Earrings",
+ material: "Gold",
+ title: "Gold Earrings with Garnet",
+ oldPrice: null,
+ newPrice: 270
+},].map((item, index) => ({ ...item, id: index + 1, rating: Math.floor(Math.random() * 5) + 3 }));
\ No newline at end of file
diff --git a/examples/ecommerce-jewellery-store/src/data/shared-gd-sampleChartData.ts b/examples/ecommerce-jewellery-store/src/data/shared-gd-sampleChartData.ts
new file mode 100644
index 00000000..0f9b1596
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/data/shared-gd-sampleChartData.ts
@@ -0,0 +1,222 @@
+export const sampleData = [
+ {
+ ID: '1',
+ Product: 'Happy',
+ SKU: '06-0543',
+ Category: 'Rings',
+ Price: 12.39,
+ Sales: 300,
+ Status: 'Published',
+ Quantity: 10,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '2',
+ Product: 'Gorgeous',
+ SKU: '07-0659',
+ Category: 'Bracelets',
+ Price: 8.79,
+ Sales: 400,
+ Status: 'Draft',
+ Quantity: 4,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '3',
+ Product: 'Magical',
+ SKU: '06-0343',
+ Category: 'Earrings',
+ Price: 13.99,
+ Sales: 120,
+ Status: 'Published',
+ Quantity: 15,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '4',
+ Product: 'Adorable',
+ SKU: '07-0994',
+ Category: 'Necklaces',
+ Price: 9.49,
+ Sales: 260,
+ Status: 'Out of stock',
+ Quantity: 7,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '5',
+ Product: 'Strong',
+ SKU: '05-0321',
+ Category: 'Watches',
+ Price: 11.49,
+ Sales: 500,
+ Status: 'Published',
+ Quantity: 19,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '6',
+ Product: 'Elegant',
+ SKU: '02-1342',
+ Category: 'Rings',
+ Price: 15.99,
+ Sales: 150,
+ Status: 'Published',
+ Quantity: 12,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '7',
+ Product: 'Chic',
+ SKU: '03-2765',
+ Category: 'Bracelets',
+ Price: 7.99,
+ Sales: 320,
+ Status: 'Draft',
+ Quantity: 6,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '8',
+ Product: 'Classic',
+ SKU: '06-3412',
+ Category: 'Earrings',
+ Price: 10.49,
+ Sales: 180,
+ Status: 'Published',
+ Quantity: 8,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '9',
+ Product: 'Luxe',
+ SKU: '01-0999',
+ Category: 'Necklaces',
+ Price: 19.99,
+ Sales: 270,
+ Status: 'Published',
+ Quantity: 5,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '10',
+ Product: 'Bold',
+ SKU: '08-2034',
+ Category: 'Watches',
+ Price: 14.79,
+ Sales: 350,
+ Status: 'Out of stock',
+ Quantity: 0,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '11',
+ Product: 'Radiant',
+ SKU: '02-1123',
+ Category: 'Rings',
+ Price: 16.49,
+ Sales: 220,
+ Status: 'Published',
+ Quantity: 11,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '12',
+ Product: 'Sleek',
+ SKU: '07-0554',
+ Category: 'Bracelets',
+ Price: 8.39,
+ Sales: 100,
+ Status: 'Draft',
+ Quantity: 9,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '13',
+ Product: 'Sparkling',
+ SKU: '06-0998',
+ Category: 'Earrings',
+ Price: 12.89,
+ Sales: 290,
+ Status: 'Published',
+ Quantity: 14,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '14',
+ Product: 'Graceful',
+ SKU: '03-2456',
+ Category: 'Necklaces',
+ Price: 10.79,
+ Sales: 310,
+ Status: 'Published',
+ Quantity: 3,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '15',
+ Product: 'Timeless',
+ SKU: '08-3377',
+ Category: 'Watches',
+ Price: 13.59,
+ Sales: 430,
+ Status: 'Out of stock',
+ Quantity: 2,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '16',
+ Product: 'Vintage',
+ SKU: '01-0444',
+ Category: 'Rings',
+ Price: 11.29,
+ Sales: 160,
+ Status: 'Published',
+ Quantity: 18,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '17',
+ Product: 'Modern',
+ SKU: '02-9987',
+ Category: 'Bracelets',
+ Price: 6.99,
+ Sales: 210,
+ Status: 'Draft',
+ Quantity: 5,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '18',
+ Product: 'Shimmer',
+ SKU: '04-3321',
+ Category: 'Earrings',
+ Price: 13.79,
+ Sales: 240,
+ Status: 'Published',
+ Quantity: 7,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '19',
+ Product: 'Exquisite',
+ SKU: '09-7765',
+ Category: 'Necklaces',
+ Price: 17.49,
+ Sales: 500,
+ Status: 'Out of stock',
+ Quantity: 1,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+ {
+ ID: '20',
+ Product: 'Bold',
+ SKU: '04-1432',
+ Category: 'Watches',
+ Price: 9.99,
+ Sales: 390,
+ Status: 'Published',
+ Quantity: 13,
+ URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF',
+ },
+];
diff --git a/examples/ecommerce-jewellery-store/src/data/types.ts b/examples/ecommerce-jewellery-store/src/data/types.ts
new file mode 100644
index 00000000..6de34d0b
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/data/types.ts
@@ -0,0 +1,97 @@
+export type CardDescriptor = {
+ img: string;
+ collectionText: string;
+};
+
+export type DataModel = {
+ text: string | undefined;
+}
+
+export type ListDataDescriptor = {
+ id?: number;
+ img: string | undefined;
+ status: string | null;
+ title: string;
+ rating?: number;
+ category: string;
+ material: string;
+ oldPrice: number | null;
+ newPrice: number;
+};
+
+export type BackgroundImageProps = {
+ title: string;
+ subtitle: string;
+ buttonText?: string;
+ img: string;
+};
+
+export type CardListProps = {
+ data: any[];
+}
+
+export type SectionProps = {
+ children: React.ReactNode
+}
+
+export type LayoutProps = {
+ children: React.ReactNode
+}
+
+export type OrderedImgTextProps = {
+ title: string;
+ subtitle: string;
+ contentText: string;
+ img: string;
+ order: string;
+ link: string | null;
+};
+
+export type SizedParentProps = {
+ children: React.ReactNode;
+};
+
+export type CategoryListProps = {
+ data: any[];
+ title: string;
+ subtitle: string;
+ colSpan?: number;
+}
+
+export type ProductCardProps = {
+ breadCrumbItem: DataModel[];
+ title: string | undefined;
+ image: string | null | undefined;
+ subtitle: string | undefined;
+ rating: number | undefined;
+ reviews: string | undefined;
+ price: number | undefined;
+ description: string | undefined;
+ addToCart: () => void;
+}
+
+export type TestemonialsDataDescriptor = {
+ image: string;
+ name: string;
+ description: string;
+ rating: number;
+}
+
+export type CartItemDescriptor = {
+ id: number;
+ image: string;
+ title: string;
+ description: string;
+ price: number;
+ quantity: number;
+ total: number;
+}
+
+export type CartContextProps = {
+ children: React.ReactNode;
+}
+
+export type CartContextDescriptor = {
+ product: ListDataDescriptor;
+ quantity: number;
+}
\ No newline at end of file
diff --git a/examples/ecommerce-jewellery-store/src/helpers/AdminContext.tsx b/examples/ecommerce-jewellery-store/src/helpers/AdminContext.tsx
new file mode 100644
index 00000000..3a6800e0
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/helpers/AdminContext.tsx
@@ -0,0 +1,30 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+interface AdminContextType {
+ isAdmin: boolean;
+ toggleRole: () => void;
+}
+
+const AdminContext = createContext
+
+ Customers words
++ What do they say about us? +
+
+ {testemonialsData.map((item, index) => (
+
+
+
+ ))}
+
+
+
+
+ 
+
+
+ {item.name}
+
+
+ + {item.description} +
+
+
+
+
+
+
+ Get in touch
+If you have any questions, contact us
+
+ 
+
+
+
+
+
+
+
+
+
+ Payment Details
+Please, submit your payment details
+
+ 
+
+
+
+
+
+
+
+
+
+ Sub total
+US Dollars
+VAT
+US Dollars
+Shipping Method
+Standard Free Delivery
+Gift Wrapping
+Included Gift Wrapping
+Total
+US Dollars
+
+
+ Thank You For Your Order!
+You have submitted your order
+ +