Skip to content
This repository was archived by the owner on Feb 18, 2025. It is now read-only.

Commit 6f8eca8

Browse files
SKHDev195SKHDev195
committed
card removal
1 parent 9d8ae29 commit 6f8eca8

File tree

2 files changed

+29
-96
lines changed

2 files changed

+29
-96
lines changed

‎nil-docs/src/components/HomepageFeatures/index.js

Lines changed: 28 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import clsx from 'clsx';
21
import styles from './styles.module.css';
32
import Crypto3 from '../../../static/img/productImages/Crypto3.png';
43
import zkLLVM from '../../../static/img/productImages/zkLLVM.png';
54
import ProofMarket from '../../../static/img/productImages/PM.png';
65
import zkSharding from '../../../static/img/productImages/zkSharding.png';
7-
import { Card, StyledBody } from '@nilfoundation/ui-kit/dist/ui-kit.js'
86

97

108
const ProductsList =
@@ -53,120 +51,64 @@ const ProductsList =
5351

5452
]
5553

54+
55+
56+
const NilProductDescription = ({ text, image, onDocsClick }) => {
57+
return (
58+
<div onClick={onDocsClick}>
59+
<img src={image} />
60+
<div className={styles.productDescription}>
61+
<p>{text}</p>
62+
</div>
63+
</div>
64+
);
65+
};
66+
67+
function NilProduct({ image, description, onDocsClick }) {
68+
return (
69+
<div>
70+
<NilProductDescription text={description} image={image} onDocsClick={onDocsClick} />
71+
</div>
72+
);
73+
}
74+
75+
76+
5677
export default function HomepageNilProducts() {
5778
const GoToDocs = (Url) => () => {
5879
window.open(Url, '_self');
5980
};
60-
6181
return (
6282
<div className='container' id='productContainer'>
6383
<div className={'row' + ' ' + styles.rowFlex}>
6484
<div className='col col-6'>
65-
<div id='zkllvm-docs' className={styles.cardContainer}>
66-
<Card className={styles.productCard} title='zkLLVM' headerImage={zkLLVM} border={true} onClick={GoToDocs("/zkllvm/overview/what-is-zkllvm")}>
67-
<StyledBody>
68-
{ProductsList[0].description}
69-
</StyledBody>
70-
</Card>
85+
<div id='zkllvm-docs'>
86+
<NilProduct image={ProductsList[0].image} description={ProductsList[0].description} onDocsClick={GoToDocs("/zkllvm/overview/what-is-zkllvm")}></NilProduct>
7187
</div>
7288
</div>
7389
<div className='col col-6'>
7490
<div id='proof-market-docs'>
75-
<Card title='Proof Market' headerImage={ProofMarket} border={true} onClick={GoToDocs("/proof-market/intro")}>
76-
<StyledBody>
77-
{ProductsList[1].description}
78-
</StyledBody>
79-
</Card>
91+
<NilProduct image={ProductsList[1].image} description={ProductsList[1].description} onDocsClick={GoToDocs("/proof-market/intro")} ></NilProduct>
8092
</div>
8193
</div>
8294
</div>
8395
<div className={'row' + ' ' + styles.rowFlex}>
8496
<div className='col col-6'>
8597
<div id='zk-sharding-docs'>
86-
<Card title='zkSharding' headerImage={zkSharding} border={true} onClick={GoToDocs("https://nil.foundation/blog/post/nil_zkSharding")}>
87-
<StyledBody>
88-
{ProductsList[2].description}
89-
</StyledBody>
90-
</Card>
98+
<NilProduct image={ProductsList[2].image} description={ProductsList[2].description} onDocsClick={GoToDocs("https://nil.foundation/blog/post/nil_zkSharding")}></NilProduct>
9199
</div>
92100
</div>
93101
<div className='col col-6'>
94102
<div id='crypto3-docs'>
95-
<Card title='Crypto3' headerImage={Crypto3} border={true} onClick={GoToDocs("/crypto3/intro")}>
96-
<StyledBody>
97-
{ProductsList[3].description}
98-
</StyledBody>
99-
</Card>
103+
<NilProduct image={ProductsList[3].image} description={ProductsList[3].description} onDocsClick={GoToDocs("/crypto3/intro")}></NilProduct>
100104
</div>
101105
</div>
102106
</div>
103107
</div >
104108
);
105-
106-
107-
108-
109-
110-
111109
}
112110

113111

114-
// const NilProductDescription = ({ text, image, onDocsClick }) => {
115-
// return (
116-
// <div onClick={onDocsClick}>
117-
// <img src={image} />
118-
// <div className={styles.productDescription}>
119-
// <p>{text}</p>
120-
// </div>
121-
// </div>
122-
// );
123-
// };
124-
125-
// function NilProduct({ image, description, onDocsClick }) {
126-
// return (
127-
// <div>
128-
// <NilProductDescription text={description} image={image} onDocsClick={onDocsClick} />
129-
// </div>
130-
// );
131-
// }
132-
133-
134-
135-
// export default function HomepageNilProducts() {
136-
// const GoToDocs = (Url) => () => {
137-
// window.open(Url, '_self');
138-
// };
139-
// return (
140-
// <div className='container' id='productContainer'>
141-
// <div className={'row' + ' ' + styles.rowFlex}>
142-
// <div className='col col-6'>
143-
// <div id='zkllvm-docs'>
144-
// <NilProduct image={ProductsList[0].image} description={ProductsList[0].description} onDocsClick={GoToDocs("/zkllvm/overview/what-is-zkllvm")}></NilProduct>
145-
// </div>
146-
// </div>
147-
// <div className='col col-6'>
148-
// <div id='proof-market-docs'>
149-
// <NilProduct image={ProductsList[1].image} description={ProductsList[1].description} onDocsClick={GoToDocs("/proof-market/intro")} ></NilProduct>
150-
// </div>
151-
// </div>
152-
// </div>
153-
// <div className={'row' + ' ' + styles.rowFlex}>
154-
// <div className='col col-6'>
155-
// <div id='zk-sharding-docs'>
156-
// <NilProduct image={ProductsList[2].image} description={ProductsList[2].description} onDocsClick={GoToDocs("https://nil.foundation/blog/post/nil_zkSharding")}></NilProduct>
157-
// </div>
158-
// </div>
159-
// <div className='col col-6'>
160-
// <div id='crypto3-docs'>
161-
// <NilProduct image={ProductsList[3].image} description={ProductsList[3].description} onDocsClick={GoToDocs("/crypto3/intro")}></NilProduct>
162-
// </div>
163-
// </div>
164-
// </div>
165-
// </div >
166-
// );
167-
// }
168-
169-
170112

171113

172114

‎nil-docs/src/components/HomepageFeatures/styles.module.css

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,11 @@
11
.productDescription {
22
width: 100%;
33
display: flex;
4+
flex: row;
45
padding-right: 24px;
56
padding-left: 24px;
67
}
78

8-
.cardContainer {
9-
display: flex;
10-
width: 100%;
11-
max-width: 100%;
12-
}
13-
14-
.b2 {
15-
max-width: 100% !important;
16-
}
17-
189
.rowFlex {
1910
display: flex;
2011
flex-wrap: wrap;

0 commit comments

Comments
 (0)