complete the home page

Author: svdimitr

examples/ecommerce-jewellery-store/src/assets/testemonials1.jpg

@@ -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 (
+        <div className="k-d-flex k-flex-col k-align-items-center k-py-12 k-px-10 k-mx-auto k-bg-surface">
+            <div className="k-d-flex k-flex-col k-align-items-center k-gap-4 k-mb-10">
+                <h2 className="k-h2">Customers words</h2>
+                <p className="k-font-size-xl k-color-subtle">
+                    What do they say about us?
+                </p>
+            </div>
+            <div className="k-d-grid k-grid-cols-3 k-gap-5 k-mb-6">
+                {testemonialsData.map((item) => (
+                    <div className="k-d-flex k-flex-col k-border-solid k-border k-bg-app-surface k-rounded-lg k-border-border">
+                        <div className="k-d-grid k-grid-cols-3 k-justify-items-center k-px-4 k-py-3 k-gap-y-3">
+                            <div className="k-col-start-1 k-col-end-4 k-d-grid k-grid-cols-3 k-justify-items-center k-w-full">
+                                <Avatar
+                                    themeColor="primary"
+                                    size="large"
+                                    className="k-col-start-2 k-col-end-3"
+                                    type='image'
+                                >
+                                    <img src={item.image} className='k-bg-cover' />
+                                </Avatar>
+                            </div>
+                            <p className="k-paragraph k-col-start-1 k-col-end-4">{item.name}</p>
+                            <Rating value={item.rating} precision='half' className="k-col-start-1 k-col-end-4" />
+                        </div>
+                        <div className="k-p-4">
+                            <p className="k-paragraph">
+                                {item.description}
+                            </p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}

examples/ecommerce-jewellery-store/src/assets/testemonials2.jpg

@@ -65,4 +65,11 @@ export type ProductCardProps = {
     reviews: string | undefined;
     price: number | undefined;
     description: string | undefined;
+}
+
+export type TestemonialsDataDescriptor = {
+    image: string;
+    name: string;
+    description: string;
+    rating: number;
 }

examples/ecommerce-jewellery-store/src/assets/testemonials3.jpg

@@ -18,6 +18,7 @@ import brownWatch from '../assets/brownWatch.jpg'
 import vitageWatch from '../assets/vitageWatch.jpg'
 import casualSilverWatch from "../assets/listViewImages/casualSilverWatch.png"
 import homeServicesImage from '../assets/homeServicesImage.png'
+import { Testemonials } from '../components/Testemonials';
 
 
 
@@ -99,9 +100,9 @@ const Home: React.FC = () => {
       <Layout>
         <CustomSection>
           <OrderedImgText
-            title='Timeless Classics'
+            title='Fine Jewelry'
             subtitle='Get our unique handmade collections'
-            contentText='Jewelry enhances style and adds elegance, with each piece telling a unique story.'
+            contentText="Jewelry elevates one's style and brings sophistication, with every piece narrating a distinct tale."
             img={homeModel3}
             order='last'
             link="Shop Now"
@@ -142,6 +143,9 @@ const Home: React.FC = () => {
           ></OrderedImgText>
         </CustomSection>
       </Layout>
+      <Layout>
+        <Testemonials></Testemonials>
+      </Layout>
     </>
   );
 };