Skip to content

Commit fa67032

Browse files
svdimitrsvdimitr
committed
add pages
1 parent a7e5b62 commit fa67032

File tree

10 files changed

+163
-28
lines changed

10 files changed

+163
-28
lines changed

‎examples/ecommerce-jewellery-store/src/App.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
1-
import Header from '@/components/Header';
2-
import Footer from '@/components/Footer';
3-
import '@progress/kendo-theme-default/dist/all.css';
1+
import Header from "@/components/Header";
2+
import Footer from "@/components/Footer";
3+
import { AllProductsListView } from "./pages/AllProductsListView";
4+
import "@progress/kendo-theme-default/dist/all.css";
5+
import { SizedParent } from "./components/SizedParent";
46

57
function App() {
68

9+
710
return (
811
<>
9-
<Header/>
10-
<Footer/>
12+
<SizedParent>
13+
<Header />
14+
<AllProductsListView></AllProductsListView>
15+
<Footer />
16+
</SizedParent>
1117
</>
12-
)
18+
);
1319
}
1420

15-
export default App
21+
export default App;

‎examples/ecommerce-jewellery-store/src/assets/1111.jfif‎

50.6 KB
Binary file not shown.

‎examples/ecommerce-jewellery-store/src/assets/necklace_1.jfif‎

53.9 KB
Binary file not shown.

‎examples/ecommerce-jewellery-store/src/assets/ring_1.jfif‎

79.6 KB
Binary file not shown.

‎examples/ecommerce-jewellery-store/src/components/BackgroundImage.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,27 @@ export const BackgroundImage = (props: BackgroundImageProps) => {
1212

1313
return (
1414
<section
15-
className="k-h-full k-w-full k-bg-cover"
15+
className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12 k-bg-cover"
1616
style={{
1717
backgroundImage: `url(${img})`,
18-
backgroundColor: "",
18+
height: "757.8px",
1919
}}
2020
>
21-
<div className="k-w-full k-h-full k-d-flex k-flex-col k-justify-content-center k-align-items-center" style={{
22-
backgroundColor: "rgba(0, 0, 0, 0.3)"
21+
<div className="k-col-span-12" style={{
22+
backgroundColor: "rgba(0, 0, 0, 0.14)",
23+
height: "100%"
2324
}}>
2425
<div className="k-text-center k-text-white">
2526
<h1
2627
className="k-h1 k-font-bold"
2728
style={{
28-
marginTop: "190px",
29+
marginTop: "400px",
2930
}}
3031
>
3132
{title}
3233
</h1>
33-
<p className="k-font-size-lg k-mb-4 k-font-bold">{subtitle}</p>
34+
<p className="k-font-size-lg k-mb-4 k-font-bold k-text-uppercase">{subtitle}</p>
35+
<span className="k-gap-9"></span>
3436
<Button themeColor="primary" className="k-mb-4">
3537
{buttonText}
3638
</Button>

‎examples/ecommerce-jewellery-store/src/components/Header.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@ import {
2424
const Header: React.FC = () => {
2525
return (
2626
<>
27-
<AppBar themeColor="inherit">
27+
<AppBar className='k-pt-3 k-pb-3 k-col-span-12' themeColor="inherit" style={{
28+
height: "52.2px",
29+
zIndex: 10000
30+
}}>
2831
<AppBarSection className="k-d-flex k-align-items-center" style={{ paddingLeft: '50px' }}>
2932
<a href="#" className="k-d-sm-flex" style={{ marginRight: '50px' }}>
3033
<img src={viloraLogo} alt="Logo" />

‎examples/ecommerce-jewellery-store/src/components/Layout.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export type LayoutProps = {
2+
children: React.ReactNode
3+
}
4+
5+
6+
export const Layout = (props: LayoutProps) => {
7+
return <div className="kr-layout k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center" style={{
8+
padding: "0px 60px 60px 60px"
9+
}}>
10+
{props.children}
11+
</div>;
12+
};

‎examples/ecommerce-jewellery-store/src/components/OrderedImageCard.tsx‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,27 @@ type OrderedImgTextProps = {
66
order: string;
77
};
88

9+
//k-d-flex k-flex-wrap k-flex-row k-w-full k-h-full k-justify-content-center k-align-items-center k-gap-5px
10+
911
export const OrderedImgText = (props: OrderedImgTextProps) => {
1012
const { title, subtitle, contentText, img, order } = props;
1113

1214
return (
13-
<section className="k-d-flex k-flex-wrap k-flex-row k-w-full k-h-full k-justify-content-center k-align-items-center k-gap-5px">
14-
<span
15-
className={`k-w-full k-h-full k-order-${order} k-rounded-lg`}
15+
<>
16+
<div
1617
style={{
1718
backgroundImage: `url(${img})`,
1819
backgroundSize: "cover",
19-
flex: "0 0 70%",
20-
}}
21-
></span>
22-
<div
23-
className="k-text-center"
24-
style={{
25-
flex: "0 0 30%",
20+
height: "508px",
21+
width: "768px",
2622
}}
27-
>
23+
className={`k-col-span-8 k-order-${order} k-rounded-lg`}
24+
/>
25+
<span className="k-text-center k-col-span-4">
2826
<div className="k-h2 k-font-bold k-text-black">{title}</div>
2927
<div className="k-font-size-xl k-p-5">{subtitle}</div>
3028
<span className="k-font-size-md">{contentText}</span>
31-
</div>
32-
</section>
29+
</span>
30+
</>
3331
);
3432
};

‎examples/ecommerce-jewellery-store/src/components/SizedParent.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export type SizedParentProps = {
2+
children: React.ReactNode;
3+
};
4+
5+
export const SizedParent = (props: SizedParentProps) => {
6+
return (
7+
<div
8+
style={{
9+
maxWidth: "1280px",
10+
}}
11+
>
12+
{props.children}
13+
</div>
14+
);
15+
};

‎examples/ecommerce-jewellery-store/src/pages/AllProductsListView.tsx‎

Lines changed: 100 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,100 @@
1-
import * as react from 'react';
1+
import { OrderedImgText } from "../components/OrderedImageCard";
2+
import bracelets from "../assets/bracelets.png?url";
3+
import necklace from "../assets/necklace_1.jfif?url";
4+
import ring from "../assets/ring_1.jfif?url";
5+
import jewel from "../assets/1111.jfif?url";
6+
import { Layout } from "../components/Layout";
7+
import { Button } from "@progress/kendo-react-buttons";
8+
9+
export const AllProductsListView = () => {
10+
const title = "Fine Selection";
11+
const subtitle = "Enjoy the real craftsmanship";
12+
const contentText =
13+
"Jewelry is a meaningful form of self-expression that enhances personal style and adds beauty to any occasion.";
14+
const order = "first";
15+
16+
type CardDescriptor = {
17+
img: string;
18+
collectionText: string;
19+
};
20+
21+
const cards: CardDescriptor[] = [
22+
{
23+
img: necklace,
24+
collectionText: "SERENE",
25+
},
26+
{
27+
img: ring,
28+
collectionText: "AURELIA",
29+
},
30+
{
31+
img: jewel,
32+
collectionText: "RAVINA",
33+
},
34+
];
35+
36+
return (
37+
<>
38+
<Layout>
39+
<section
40+
className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12"
41+
style={{
42+
paddingTop: "60px",
43+
}}
44+
>
45+
<OrderedImgText
46+
title={title}
47+
subtitle={subtitle}
48+
contentText={contentText}
49+
img={bracelets}
50+
order={order}
51+
/>
52+
</section>
53+
</Layout>
54+
<Layout>
55+
<section className="k-d-grid k-grid-cols-12 k-col-span-12 k-justify-content-center">
56+
<div className="k-h2 k-font-bold k-text-black k-col-span-12 k-text-center">
57+
Our Collections
58+
</div>
59+
<div className="k-font-size-xl k-p-5 k-col-span-12 k-text-center" style={{
60+
paddingBottom: "1rem"
61+
}}>
62+
Enjoy an excellent selection of fine jewelry
63+
</div>
64+
<div className="k-d-grid k-grid-cols-12 k-col-span-12">
65+
{cards.map((card) => {
66+
return (
67+
<div className="k-col-span-4 k-text-center">
68+
<img
69+
width={"360px"}
70+
height={"319px"}
71+
style={{
72+
minWidth: "360px",
73+
paddingBottom: "1rem"
74+
}}
75+
src={card.img}
76+
/>
77+
<span
78+
className="k-pt-md"
79+
80+
>
81+
Collection "{card.collectionText}"
82+
</span>
83+
<div
84+
style={{
85+
paddingTop: "1rem",
86+
}}
87+
>
88+
<Button themeColor={"primary"} size={"large"}>
89+
Buy Now
90+
</Button>
91+
</div>
92+
</div>
93+
);
94+
})}
95+
</div>
96+
</section>
97+
</Layout>
98+
</>
99+
);
100+
};

0 commit comments

Comments
 (0)