Skip to content

Commit 023c00c

Browse files
barnesjosephbarnesjoseph
committedMar 11, 2025·
Updates homepage styling
1 parent 1aa1847 commit 023c00c

File tree

8 files changed

+160
-77
lines changed

8 files changed

+160
-77
lines changed
 

‎app/public/img/ai-studio-icon.png

10.7 KB
Loading

‎app/public/img/gemini-icon.png

14.6 KB
Loading

‎app/public/img/jax-logo.png

57.6 KB
Loading

‎app/src/assets/css/tailwind.css

+26-5
Original file line numberDiff line numberDiff line change
@@ -213,16 +213,37 @@
213213
width: 24px;
214214
}
215215

216-
.value-prop-cards {
216+
.dev-tools-cards {
217217
background: #f1f3f4;
218218
}
219219

220+
.dev-tools-cards .card,
221+
.value-prop-cards .card {
222+
justify-content: flex-start;
223+
}
224+
225+
.dev-tools-cards .card button,
226+
.value-prop-cards .card button {
227+
margin-block: auto 16px;
228+
}
229+
230+
.section-inner {
231+
max-width: 1488px;
232+
margin: 0 auto;
233+
}
234+
235+
.dev-tools-image img {
236+
height: 96px;
237+
width: auto;
238+
margin-block: 16px 24px;
239+
}
240+
220241
.value-prop-image {
221242
margin-bottom: 33px;
222243
}
223244

224245
.value-prop-image img {
225-
width: 200px;
246+
width: 80px;
226247
}
227248

228249
.value-prop-cards button {
@@ -265,7 +286,7 @@
265286
}
266287

267288
@screen lg {
268-
.homepage-header h1,
289+
.homepage-header h1,
269290
.full-bleed-header-image h1 {
270291
font-size: 44px;
271292
line-height: 52px;
@@ -300,7 +321,7 @@
300321
}
301322

302323
.repo-item {
303-
border-radius: 4px;
324+
border-radius: 4px;
304325
padding: 4px 6px;
305326
}
306327

@@ -326,7 +347,7 @@
326347
.impact-number {
327348
font-size: 64px;
328349
}
329-
350+
330351
.impact-text {
331352
font-size: 20px;
332353
}

‎app/src/components/NavBar.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@
140140
type="primary"
141141
v-if="!showSideMenu"
142142
>
143-
Submit your content
143+
Submit your AI project
144144
</MaterialButton>
145145
</transition>
146146
</div>

‎app/src/components/SubmitDialog.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default class SubmitDialog extends Vue {
5454

5555
mounted() {
5656
EVENT_BUS.$on(NAME_SHOW_SUBMIT_DIALOG, () => {
57-
this.show = true;
57+
this.goToForm()
5858
});
5959
}
6060

@@ -66,7 +66,7 @@ export default class SubmitDialog extends Vue {
6666
this.show = false;
6767
conversionEvent("submit");
6868
window.open(
69-
"https://devlibrary.advocu.com/home/applications/form",
69+
"https://forms.gle/S61NStowwwTjVrHT7",
7070
"_blank"
7171
);
7272
}

‎app/src/views/About.vue

+4-9
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,10 @@
4747
<li>Blog posts</li>
4848
</ul>
4949

50-
<p class="mt-4">
51-
We are currently not accepting new submissions from the community, please check back later!
52-
</p>
5350
<p class="mt-8 flex flex-wrap gap-4">
54-
<a href="mailto:library-google-dev@google.com">
55-
<MaterialButton @click.native="showSubmitDialog" type="primary"
56-
>Submit your content</MaterialButton
57-
>
58-
</a>
51+
<MaterialButton @click.native="showSubmitDialog" type="primary"
52+
>Submit your AI project</MaterialButton
53+
>
5954
</p>
6055
</div>
6156
</div>
@@ -324,7 +319,7 @@
324319
</div>
325320
<div v-show="FaqData[12]" class="pb-2 border-b">
326321
<p class="mt-4">
327-
To remove or update your content, please open a Pull request or raise an issue on the
322+
To remove or update your content, please open a Pull request or raise an issue on the
328323
<a target="_blank" href="https://github.com/google/devlibrary/issues/new">
329324
Dev Library's GitHub repo</a>.
330325
</p>

‎app/src/views/Home.vue

+127-60
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616

1717
<template>
1818
<div>
19+
<div class="section-inner">
1920
<div
2021
class="homepage-header header-image grid grid-cols-12 py-8 lg:pt-14 lg:pb-12 xl:pt-14 xl:pb-16 px-std border-b border-gray-100"
2122
style="
@@ -25,90 +26,151 @@
2526
>
2627
<div class="col-span-12 lg:col-span-6 px-1">
2728
<h1 class="text-4xl">
28-
The platform for Google curated open-source dev projects
29+
Now accepting AI project submissions
2930
</h1>
3031

3132
<div>
3233
<!-- Right-padding added on mobile to improve text flow -->
3334
<p class="text-xl mt-9 mb-4 pr-4 lg:pr-0">
34-
Explore open-source dev projects featuring Google developer solutions contributed by developers from around the world and find
35-
the inspiration you need for your next project.
36-
</p>
37-
<p class="text-m mt-4 mb-4 pr-4 lg:pr-0">
38-
We are currently not accepting new submissions from the community, please check back later!
39-
</p>
35+
Dev Library highlights Google-curated open source dev projects. Submissions are open for projects using Google AI tools and technologies until April 30, 2025.
36+
</p>
4037
<div class="mt-4 lg:mt-6">
41-
<MaterialButton type="primary">
42-
<a href="#all-products" class="section">
43-
<span>Browse by product</span>
44-
</a>
45-
</MaterialButton>
38+
<MaterialButton
39+
@click.native="showSubmitDialog"
40+
type="primary"
41+
>
42+
Submit your AI project
43+
</MaterialButton>
4644
</div>
4745
</div>
4846
</div>
4947
</div>
48+
</div>
5049

51-
<!-- Value Prop Cards -->
50+
<!-- Featured developer tools -->
5251
<div
53-
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 py-16 px-std md:px-20 lg:px-32 xl:px-44 value-prop-cards"
52+
class="dev-tools-cards"
5453
>
55-
<div
56-
class="card bg-white px-3 lg:px-6 py-2 lg:py-6 flex flex-col text-center items-center place-content-center"
57-
>
58-
<div class="value-prop-image">
59-
<img src="../../public/img/featured-content.svg" class="w-1/3" />
54+
<h2 class="text-3xl text-center pt-20">Featured developer tools</h2>
55+
<div class="section-inner grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 pt-10 pb-20 px-std">
56+
<div
57+
class="card bg-white px-3 lg:px-6 py-2 lg:py-6 flex flex-col text-center items-center place-content-center"
58+
>
59+
<div class="dev-tools-image">
60+
<img src="../../public/img/gemini-icon.png" class="w-1/3" />
61+
</div>
62+
<h2 class="text-2xl mb-6">
63+
Gemini API
64+
</h2>
65+
<p class="text-lg px-8 pb-8">
66+
Build and deploy production ready generative AI experiences, enhanced by Gemini models. Get started for free!
67+
</p>
68+
<MaterialButton type="primary" class="mb-12">
69+
<div class="frc">
70+
<a href="#all-products">Get started</a>
71+
</div>
72+
</MaterialButton>
6073
</div>
61-
<h2 class="text-3xl mb-6">
62-
Learn from community content
63-
</h2>
64-
<p class="text-lg px-8 pb-8">
65-
Learn from projects and blogs created by fellow developers.
66-
</p>
67-
<MaterialButton type="text" class="mb-12">
68-
<div class="frc">
69-
<a href="#all-products" class="text-lg">See all products</a>
74+
<div
75+
class="card bg-white px-3 lg:px-6 py-2 lg:py-6 flex flex-col text-center items-center place-content-center"
76+
>
77+
<div class="dev-tools-image">
78+
<img src="../../public/img/ai-studio-icon.png" class="w-1/3" />
7079
</div>
71-
</MaterialButton>
72-
</div>
73-
<div
74-
class="card bg-white px-3 lg:px-6 py-2 lg:py-6 flex flex-col text-center items-center place-content-center"
75-
>
76-
<div class="value-prop-image">
77-
<img src="../../public/img/speakers.svg" class="w-1/3" />
80+
<h2 class="text-2xl mb-6">Google AI Studio</h2>
81+
<p class="text-lg px-8 pb-8">
82+
Build generative AI applications quickly with Gemini in Google AI studio.
83+
</p>
84+
<MaterialButton type="primary" class="mb-12">
85+
<div class="frc">
86+
<a href="/authors">Get started</a>
87+
</div>
88+
</MaterialButton>
7889
</div>
79-
<h2 class="text-3xl mb-6">Connect with experts and authors</h2>
80-
<p class="text-lg px-8 pb-8">
81-
Find dev experts, content creators and authors in the
82-
community.
83-
</p>
84-
<MaterialButton type="text" class="mb-12">
85-
<div class="frc">
86-
<a href="/authors" class="text-lg"> Browse authors </a>
90+
<div
91+
class="card bg-white px-3 lg:px-6 py-2 lg:py-6 flex flex-col text-center items-center place-content-center"
92+
>
93+
<div class="dev-tools-image">
94+
<img src="../../public/img/jax-logo.png" class="w-1/3" />
8795
</div>
88-
</MaterialButton>
96+
<h2 class="text-2xl mb-6">
97+
JAX
98+
</h2>
99+
<p class="text-lg px-8 pb-8">
100+
JAX is a library for array-oriented numerical computation to enable high-performance machine learning research.
101+
</p>
102+
<MaterialButton type="primary" class="mb-12">
103+
<div class="frc">
104+
<a href="/featured-content">Get started</a>
105+
</div>
106+
</MaterialButton>
107+
</div>
89108
</div>
90-
<div
91-
class="card bg-white px-3 lg:px-6 py-2 lg:py-6 flex flex-col text-center items-center place-content-center"
92-
>
93-
<div class="value-prop-image">
94-
<img src="../../public/img/inspiration.svg" class="w-1/3" />
109+
</div>
110+
111+
<!-- Value Prop Cards -->
112+
<div>
113+
<h2 class="text-3xl text-center pt-20">Why contribute to Dev Library</h2>
114+
<div class="section-inner grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 py-10 px-std">
115+
<div
116+
class="card bg-white px-3 lg:px-6 py-2 lg:py-6 flex flex-col text-center items-center place-content-center"
117+
>
118+
<div class="value-prop-image">
119+
<img src="../../public/img/featured-content.svg" class="w-1/3" />
120+
</div>
121+
<h2 class="text-2xl mb-6">
122+
Learn from community content
123+
</h2>
124+
<p class="text-lg px-8 pb-8">
125+
Learn from projects and blogs created by fellow developers.
126+
</p>
127+
<MaterialButton type="secondary" class="mb-12">
128+
<div class="frc">
129+
<a href="#all-products">See all products</a>
130+
</div>
131+
</MaterialButton>
132+
</div>
133+
<div
134+
class="card bg-white px-3 lg:px-6 py-2 lg:py-6 flex flex-col text-center items-center place-content-center"
135+
>
136+
<div class="value-prop-image">
137+
<img src="../../public/img/speakers.svg" class="w-1/3" />
138+
</div>
139+
<h2 class="text-2xl mb-6">Connect with experts and authors</h2>
140+
<p class="text-lg px-8 pb-8">
141+
Find dev experts, content creators and authors in the
142+
community.
143+
</p>
144+
<MaterialButton type="secondary" class="mb-12">
145+
<div class="frc">
146+
<a href="/authors"> Browse authors </a>
147+
</div>
148+
</MaterialButton>
95149
</div>
96-
<h2 class="text-3xl mb-6">
97-
Discover latest projects from in-focus dev topics
98-
</h2>
99-
<p class="text-lg px-8 pb-8">
100-
Check out inspiring projects build with Google developer solutions.
101-
</p>
102-
<MaterialButton type="text" class="mb-12">
103-
<div class="frc">
104-
<a href="/featured-content" class="text-lg">Learn more</a>
150+
<div
151+
class="card bg-white px-3 lg:px-6 py-2 lg:py-6 flex flex-col text-center items-center place-content-center"
152+
>
153+
<div class="value-prop-image">
154+
<img src="../../public/img/inspiration.svg" class="w-1/3" />
105155
</div>
106-
</MaterialButton>
156+
<h2 class="text-2xl mb-6">
157+
Discover latest projects from in-focus dev topics
158+
</h2>
159+
<p class="text-lg px-8 pb-8">
160+
Check out inspiring projects build with Google developer solutions.
161+
</p>
162+
<MaterialButton type="secondary" class="mb-12">
163+
<div class="frc">
164+
<a href="/featured-content">Learn more</a>
165+
</div>
166+
</MaterialButton>
167+
</div>
107168
</div>
108169
</div>
109170

110171
<!-- Products -->
111172
<div id="all-products"></div>
173+
<div class="section-inner">
112174
<h1 class="ml-12 mt-10">All products</h1>
113175
<div class="grid grid-cols-2 lg:grid-cols-3 gap-4 py-6 px-std">
114176
<div
@@ -136,9 +198,11 @@
136198
</div>
137199
</div>
138200
</div>
201+
</div>
139202

140203
<!-- Videos -->
141204
<div class="w-full p-6 lg:p-10 video-playlist h-max-20">
205+
<div class="section-inner px-std">
142206
<div class="text-center pb-10">
143207
<h1 class="text-2xl lg:text-3xl pb-5">Meet our Authors</h1>
144208
<a
@@ -190,9 +254,11 @@
190254
</li>
191255
</ul>
192256
</div>
257+
</div>
193258
</div>
194259
<!-- Impact banner -->
195260
<div class="w-full p-6 lg:p-10 bg-gblue-600">
261+
<div class="section-inner">
196262
<h1 class="text-white text-center text-2xl lg:text-3xl">Our impact</h1>
197263
<div
198264
class="grid grid-cols-4 justify-center text-center text-white w-75 mt-6 mb-2"
@@ -214,11 +280,12 @@
214280
<span class="impact-text">Projects</span>
215281
</div>
216282
</div>
283+
</div>
217284
</div>
218285

219286
<!-- Recently Added projects -->
220287
<div
221-
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 px-std py-8"
288+
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 px-std py-8 section-inner"
222289
>
223290
<div class="col-span-1 lg:col-span-2 lg:px-2">
224291
<h2 class="text-3xl">Latest dev projects</h2>

0 commit comments

Comments
 (0)
Please sign in to comment.