Skip to content

Commit 523c79a

Browse files
LrxGaelleLrxGaelle
committed
adjust home page design
1 parent b2aaa37 commit 523c79a

1 file changed

Lines changed: 117 additions & 83 deletions

File tree

‎src/.vuepress/components/Home.vue‎

Lines changed: 117 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<section class="bimdata-documentation__home__header m-b-48">
55
<div class="home_title flex">
66
<h1 class="bimdata-h1">Documentation</h1>
7-
<h2>Go from idea to integration: guides, APIs, and examples.</h2>
7+
<h3>Go from idea to integration: guides, APIs, and examples.</h3>
88
</div>
99
<div class="home_links flex justify-center">
1010
<BIMDataCard borderRadius="8px">
@@ -110,82 +110,105 @@
110110
</div>
111111
</section>
112112
<section class="bimdata-documentation__home__content m-b-48">
113-
<h2 class="bimdata-h2">How Can We Help?</h2>
114-
<p class="color-granite">
115-
Here are a few items we think might help you get started faster with BIMData.io depending on
116-
your needs.
117-
</p>
118-
<div class="flex justify-center m-t-30">
119-
<BIMDataCard class="m-r-12" borderRadius="6px">
113+
<div class="home_title flex">
114+
<h2 class="bimdata-h2">How Can We Help?</h2>
115+
<p class="color-granite">
116+
Here are a few items we think might help you get started faster with BIMData.io depending
117+
on your needs.
118+
</p>
119+
</div>
120+
121+
<div class="cards flex justify-center">
122+
<BIMDataCard borderRadius="6px">
120123
<template #content>
121-
<div class="flex items-center justify-center m-b-24">
124+
<div class="flex m-r-24">
122125
<img :src="$withBase('/assets/img/bimdata_icon-ifc.svg')" alt="" />
123126
</div>
124-
<h4 class="color-primary">IFC</h4>
125-
<p>
126-
Build BIM tools by freeing yourself from technical complexity to focus on your
127-
business.
128-
</p>
129-
<a
130-
href="https://developers-staging.bimdata.io/api/introduction/overview.html#apis"
131-
target="_blank"
132-
>
133-
<BIMDataButton width="125px" color="secondary" fill radius>Learn more</BIMDataButton>
134-
</a>
127+
<div class="flex flex-col items-start">
128+
<h4 class="color-primary">IFC</h4>
129+
<p>
130+
Build BIM tools by freeing yourself from technical complexity to focus on your
131+
business.
132+
</p>
133+
<a
134+
href="https://developers-staging.bimdata.io/api/introduction/overview.html#apis"
135+
target="_blank"
136+
>
137+
<BIMDataButton class="btn-tertiary" width="125px" color="primary" outline
138+
>Learn more</BIMDataButton
139+
>
140+
</a>
141+
</div>
135142
</template>
136143
</BIMDataCard>
137-
<BIMDataCard class="m-r-12" borderRadius="6px">
144+
<BIMDataCard borderRadius="6px">
138145
<template #content>
139-
<div class="flex items-center justify-center m-b-24">
146+
<div class="flex m-r-24">
140147
<img :src="$withBase('/assets/img/bimdata_icon-bcf.svg')" alt="" />
141148
</div>
142-
<h4 class="color-primary">BCF</h4>
143-
<p>Access, create, share, export your BCFs with our BCF API.</p>
144-
<a
145-
href="https://developers-staging.bimdata.io/api/introduction/overview.html#apis"
146-
target="_blank"
147-
>
148-
<BIMDataButton width="125px" color="secondary" fill radius>Explore</BIMDataButton>
149-
</a>
149+
<div class="flex flex-col items-start">
150+
<h4 class="color-primary">BCF</h4>
151+
<p>Access, create, share, export your BCFs with our BCF API.</p>
152+
<a
153+
href="https://developers-staging.bimdata.io/api/introduction/overview.html#apis"
154+
target="_blank"
155+
>
156+
<BIMDataButton class="btn-tertiary" width="125px" color="primary" outline
157+
>Explore</BIMDataButton
158+
>
159+
</a>
160+
</div>
150161
</template>
151162
</BIMDataCard>
152-
<BIMDataCard class="m-r-12" borderRadius="6px">
163+
<BIMDataCard borderRadius="6px">
153164
<template #content>
154-
<div class="flex items-center justify-center m-b-24">
165+
<div class="flex m-r-24">
155166
<img :src="$withBase('/assets/img/bimdata_icon-open_source.svg')" alt="" />
156167
</div>
168+
<div class="flex flex-col items-start">
157169
<h4 class="color-primary">Open source</h4>
158170
<p>You can install our platform on your own server.</p>
159171
<a href="https://github.com/bimdata/platform-next" target="_blank">
160-
<BIMDataButton width="125px" color="secondary" fill radius>Discover</BIMDataButton>
172+
<BIMDataButton class="btn-tertiary" width="125px" color="primary" outline
173+
>Discover</BIMDataButton
174+
>
161175
</a>
176+
</div>
162177
</template>
163178
</BIMDataCard>
164-
<BIMDataCard class="m-r-12" borderRadius="6px">
179+
<BIMDataCard borderRadius="6px">
165180
<template #content>
166-
<div class="flex items-center justify-center m-b-24">
181+
<div class="flex m-r-24">
167182
<img :src="$withBase('/assets/img/bimdata_icon-plugin.svg')" alt="" />
168183
</div>
169-
<h4 class="color-primary">Plugin</h4>
170-
<p>Develop your own plugins to increase the efficiency of your tools.</p>
171-
<a
172-
href="https://developers-staging.bimdata.io/viewer/customize_the_ui.html#plugin"
173-
target="_blank"
174-
>
175-
<BIMDataButton width="125px" color="secondary" fill radius>Try</BIMDataButton>
176-
</a>
184+
<div class="flex flex-col items-start">
185+
<h4 class="color-primary">Plugin</h4>
186+
<p>Develop your own plugins to increase the efficiency of your tools.</p>
187+
<a
188+
href="https://developers-staging.bimdata.io/viewer/customize_the_ui.html#plugin"
189+
target="_blank"
190+
>
191+
<BIMDataButton class="btn-tertiary" width="125px" color="primary" outline
192+
>Try</BIMDataButton
193+
>
194+
</a>
195+
</div>
177196
</template>
178197
</BIMDataCard>
179198
<BIMDataCard borderRadius="6px">
180199
<template #content>
181-
<div class="flex items-center justify-center m-b-24">
200+
<div class="flex m-r-24">
182201
<img :src="$withBase('/assets/img/bimdata_icon-viewer_sdk.svg')" alt="" />
183202
</div>
184-
<h4 class="color-primary">Viewer SDK</h4>
185-
<p>You can develop, test, build, package and share your plugin easily.</p>
186-
<RouterLink to="/viewer/viewer_sdk.html">
187-
<BIMDataButton width="125px" color="secondary" fill radius>Explore</BIMDataButton>
188-
</RouterLink>
203+
<div class="flex flex-col items-start">
204+
<h4 class="color-primary">Viewer SDK</h4>
205+
<p>You can develop, test, build, package and share your plugin easily.</p>
206+
<RouterLink to="/viewer/viewer_sdk.html">
207+
<BIMDataButton class="btn-tertiary" width="125px" color="primary" outline
208+
>Explore</BIMDataButton
209+
>
210+
</RouterLink>
211+
</div>
189212
</template>
190213
</BIMDataCard>
191214
</div>
@@ -244,16 +267,14 @@
244267
</template>
245268

246269
<script>
247-
import { BIMDataButton, BIMDataCard, BIMDataIcon, BIMDataIconArrow } from "@bimdata/design-system";
248-
//import BIMDataCard from "@bimdata/design-system/dist/js/BIMDataComponents/BIMDataCard.js";
270+
import { BIMDataButton, BIMDataCard } from "@bimdata/design-system";
249271
250272
import Navbar from "@vuepress/theme-default/components/Navbar.vue";
251273
252274
export default {
253275
components: {
254276
BIMDataCard,
255277
BIMDataButton,
256-
BIMDataIconArrow,
257278
Navbar,
258279
},
259280
};
@@ -263,28 +284,31 @@ export default {
263284
@import "../../../node_modules/@bimdata/design-system/dist/css/design-system.css";
264285
@import "../../../node_modules/@bimdata/design-system/dist/scss/_BIMDataVariables.scss";
265286
.bimdata-documentation__home {
287+
.home_title {
288+
justify-content: center;
289+
flex-direction: column;
290+
width: 83vw;
291+
align-items: flex-start;
292+
margin: auto;
293+
h1 {
294+
font-size: 43px;
295+
margin-bottom: 0;
296+
}
297+
h2 {
298+
font-size: 25px;
299+
}
300+
h3 {
301+
font-size: 18px;
302+
color: #205dbd;
303+
border: none;
304+
}
305+
}
266306
/* custom HEADER HOME */
267307
&__header {
268308
margin-top: calc(60px + 34px);
269309
h1 {
270310
text-align: center;
271311
}
272-
.home_title {
273-
justify-content: center;
274-
flex-direction: column;
275-
width: 83vw;
276-
align-items: flex-start;
277-
margin: auto;
278-
h1 {
279-
font-size: 43px;
280-
margin-bottom: 0;
281-
}
282-
h2 {
283-
font-size: 18px;
284-
color: #205dbd;
285-
border: none;
286-
}
287-
}
288312
.home_links {
289313
gap: 12px;
290314
width: 83vw;
@@ -315,11 +339,8 @@ export default {
315339
line-height: 24px;
316340
}
317341
.bimdata-btn {
318-
// font-size: 30px;
319342
border-radius: 50px;
320343
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
321-
.btn-arrow {
322-
}
323344
.btn-text {
324345
display: none;
325346
}
@@ -354,31 +375,44 @@ export default {
354375
}
355376
/* custom CONTENT HOME */
356377
&__content {
378+
.cards {
379+
display: grid;
380+
grid-template-columns: 1fr 1fr 1fr;
381+
gap: 38px;
382+
width: 83vw;
383+
margin: 30px auto;
384+
justify-content: flex-start;
385+
}
357386
.bimdata-card {
358-
padding: 16px;
359-
width: 204px;
360-
border: 1px solid $color-tertiary-lightest;
387+
width: 375px;
388+
border: none;
361389
box-shadow: none;
362390
transition: all ease 0.2s;
391+
:deep(.bimdata-card__content) {
392+
display: flex;
393+
}
363394
.flex {
364-
height: 47px;
365395
img {
366396
height: 40px;
367397
}
368398
}
369399
h4 {
370-
margin-bottom: 12px;
400+
margin: 0 0 12px;
371401
}
372402
p {
373403
margin-bottom: 12px;
374-
min-height: 85px;
404+
text-align: left;
375405
}
376-
.bimdata-btn {
377-
margin: auto;
378-
}
379-
&:hover {
380-
box-shadow: 0px 2px 10px rgba($color-black, 0.1);
381-
transition: all ease 0.2s;
406+
.btn-tertiary {
407+
border-radius: 50px;
408+
border-color: #205dbd;
409+
color: #205dbd;
410+
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
411+
&:hover {
412+
background-color: #205dbd;
413+
color: $color-white;
414+
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
415+
}
382416
}
383417
}
384418
}

0 commit comments

Comments
 (0)