Skip to content

Commit 7289a06

Browse files
btkostnerbtkostner
authored
Merge pull request #722 from system76/homepage-hero
Update homepage hero styles
2 parents b186575 + 8061ec0 commit 7289a06

File tree

3 files changed

+213
-136
lines changed

3 files changed

+213
-136
lines changed

‎pages/index.vue

+201-136
Original file line numberDiff line numberDiff line change
@@ -1,166 +1,231 @@
11
<template>
22
<main>
3-
<header class="w-full bg-cover bg-center">
3+
<header class="w-full bg-cover bg-center lg:pb-16">
44
<nuxt-img
55
alt="Buy a computer - Don't talk to one. Lifetime support from 100% real humans"
6-
class="px-4 py-8 lg:py-10 mx-auto"
6+
class="px-4 py-8 lg:py-10 mx-auto w-full max-w-3xl"
77
height="440"
88
src="/images/website/robot-type.png"
99
width="1207"
1010
/>
1111
<h1 class="hidden">
1212
Buy a computer - Don't talk to one. Lifetime support from 100% real humans
1313
</h1>
14-
</header>
15-
16-
<section class="max-w-2xl mx-auto my-12 px-4 text-center sm:px-6 md:mb-24 lg:px-8">
17-
<h2 class="text-4xl font-bold">
18-
Support Articles
19-
</h2>
20-
21-
<div class="my-4">
22-
<nuxt-link
23-
class="inline-block my-2 mx-2 bg-gray-100 text-black rounded px-4 py-2 uppercase font-serif tracking-wider hover:bg-gray-200 focus:bg-gray-200"
24-
to="#learn"
25-
>
26-
Learn
27-
</nuxt-link>
28-
29-
<nuxt-link
30-
class="inline-block my-2 mx-2 bg-gray-100 text-black rounded px-4 py-2 uppercase font-serif tracking-wider hover:bg-gray-200 focus:bg-gray-200"
31-
to="#tune"
32-
>
33-
Tune
34-
</nuxt-link>
3514

36-
<nuxt-link
37-
class="inline-block my-2 mx-2 bg-gray-100 text-black rounded px-4 py-2 uppercase font-serif tracking-wider hover:bg-gray-200 focus:bg-gray-200"
38-
to="#troubleshoot"
39-
>
40-
Troubleshoot
41-
</nuxt-link>
42-
</div>
15+
<div class="px-4 pb-12 mx-auto max-w-4xl">
16+
<div class="relative">
17+
<!--
18+
This whole dropdown search can be upgraded to Headless UI once
19+
Nuxt moves to Vue 3.0
20+
-->
21+
<form
22+
class="relative flex items-center pr-4 border bg-white border-gray-300 rounded-md shadow-sm hover:bg-gray-100 focus-within:outline-none focus-within:ring-2 focus-within:ring-orange-500 focus-within:shadow-sm"
23+
novalidate
24+
role="search"
25+
@submit.prevent="$fetch"
26+
>
27+
<input
28+
id="search-box"
29+
v-model="search"
30+
type="search"
31+
aria-autocomplete="list"
32+
autocomplete="off"
33+
autocorrect="off"
34+
autocapitalize="none"
35+
spellcheck="false"
36+
class="flex-auto -mr-8 appearance-none bg-transparent pl-4 pr-12 py-4 rounded-md text-md font-medium text-gray-700 focus:outline-none"
37+
placeholder="Search Support Articles..."
38+
aria-label="Search support articles"
39+
:aria-expanded="search !== ''"
40+
aria-haspopup="true"
41+
aria-controls="search-results"
42+
@keyup.passive="debouncedFetch"
43+
@blur.passive="debouncedFetch"
44+
>
4345

44-
<h2 class="text-3xl mt-7 font-bold">
45-
Support Tickets
46-
</h2>
46+
<font-awesome-icon icon="search" />
47+
</form>
4748

48-
<p class="text-lg mt-4">
49-
Can't find what you're looking for in the articles below? Our team is
50-
here to help. After logging into your account, submit a support ticket
51-
and our Customer Happiness Team will be on the case!
52-
</p>
49+
<div
50+
v-show="search !== ''"
51+
id="search-results"
52+
aria-labelledby="search-box"
53+
aria-orientation="vertical"
54+
class="origin-top absolute z-10 right-0 mt-2 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
55+
role="listbox"
56+
tabindex="-1"
57+
>
58+
<div class="py-1" role="none">
59+
<span
60+
v-if="$fetchState.error != null"
61+
class="text-gray-400 block px-4 py-2 text-sm"
62+
role="option"
63+
tabindex="-1"
64+
>
65+
An error occured while fetching search results
66+
</span>
67+
<span
68+
v-else-if="results.length === 0 && $fetchState.pending"
69+
class="text-gray-400 block px-4 py-2 text-sm"
70+
role="option"
71+
tabindex="-1"
72+
>
73+
Loading...
74+
</span>
75+
<span
76+
v-else-if="results.length === 0"
77+
class="text-gray-400 block px-4 py-2 text-sm"
78+
role="option"
79+
tabindex="-1"
80+
>
81+
No Results
82+
</span>
5383

54-
<div class="my-7 text-center">
55-
<a
56-
class="inline-block bg-gray-100 text-black rounded px-4 py-2 uppercase font-serif tracking-wider hover:bg-gray-200 focus:bg-gray-200"
57-
href="https://system76.com/my-account/support-tickets/new"
58-
target="blank"
59-
>
60-
Submit a Ticket
61-
</a>
84+
<nuxt-link
85+
v-for="article in results"
86+
v-else
87+
:key="article.slug"
88+
:to="`/articles/${article.slug}`"
89+
class="text-gray-700 block px-4 py-2 group hover:bg-gray-50 focus:bg-gray-50 focus:outline-none"
90+
role="option"
91+
>
92+
<div class="text-md leading-6 font-semibold group-hover:text-gray-900 group-hover:underline group-focus:text-gray-900 group-focus:underline">
93+
{{ article.title }}
94+
</div>
95+
<div class="text-sm mt-1 text-sm text-gray-400">
96+
{{ article.description }}
97+
</div>
98+
</nuxt-link>
99+
</div>
100+
</div>
101+
</div>
62102
</div>
103+
</header>
63104

64-
<p class="text-lg mx-auto">
65-
Having trouble submitting a support ticket? Contact our office at
66-
<a
67-
class="font-bold whitespace-nowrap"
68-
href="tel:+17202269269"
69-
>
70-
(720) 226-9269
71-
</a> between 8am-5pm MST and we'll help you out!
72-
</p>
73-
</section>
74-
75-
<section
76-
id="search"
77-
class="max-w-4xl mx-auto my-8 px-4"
78-
>
79-
<div class="relative">
80-
<!--
81-
This whole dropdown search can be upgraded to Headless UI once
82-
Nuxt moves to Vue 3.0
83-
-->
84-
<form
85-
class="relative flex items-center pr-4 border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-white focus-within:ring-orange-500 focus-within:shadow-sm"
86-
novalidate
87-
role="search"
88-
@submit.prevent="$fetch"
89-
>
90-
<input
91-
id="search-box"
92-
v-model="search"
93-
type="search"
94-
aria-autocomplete="list"
95-
autocomplete="off"
96-
autocorrect="off"
97-
autocapitalize="none"
98-
spellcheck="false"
99-
class="flex-auto -mr-9 appearance-none bg-transparent pl-4 pr-12 py-4 rounded-md text-md font-medium text-gray-700 focus:outline-none"
100-
placeholder="Search..."
101-
aria-label="Search articles"
102-
:aria-expanded="search !== ''"
103-
aria-haspopup="true"
104-
aria-controls="search-results"
105-
@keyup.passive="debouncedFetch"
106-
@blur.passive="debouncedFetch"
107-
>
105+
<section class="max-w-full mx-auto my-12 px-4 grid gap-y-6 gap-x-6 grid-cols-1 md:max-w-3xl lg:-mt-16 lg:max-w-6xl lg:grid-cols-2 lg:mb-16">
106+
<div class="px-4 py-4 flex flex-col bg-white border border-gray-300 rounded-lg shadow">
107+
<div class="mx-2 my-4 md:min-h-[4rem]">
108+
<h2 class="text-3xl font-semibold text-gray-900">
109+
Support Articles
110+
</h2>
108111

109-
<font-awesome-icon icon="search" />
110-
</form>
112+
<p class="my-4 text-gray-700">
113+
Search helpful documentation for answers to a variety of questions or issues.
114+
</p>
115+
</div>
111116

112-
<div
113-
v-show="search !== ''"
114-
id="search-results"
115-
aria-labelledby="search-box"
116-
aria-orientation="vertical"
117-
class="origin-top absolute right-0 mt-2 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
118-
role="listbox"
119-
tabindex="-1"
120-
>
121-
<div class="py-1" role="none">
122-
<span
123-
v-if="$fetchState.error != null"
124-
class="text-gray-400 block px-4 py-2 text-sm"
125-
role="option"
126-
tabindex="-1"
127-
>
128-
An error occured while fetching search results
129-
</span>
130-
<span
131-
v-else-if="results.length === 0 && $fetchState.pending"
132-
class="text-gray-400 block px-4 py-2 text-sm"
133-
role="option"
134-
tabindex="-1"
117+
<ul class="space-y-4 -m-2">
118+
<li>
119+
<nuxt-link
120+
to="#troubleshoot"
121+
class="flex items-center p-2 transition duration-150 ease-in-out rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
135122
>
136-
Loading...
137-
</span>
138-
<span
139-
v-else-if="results.length === 0"
140-
class="text-gray-400 block px-4 py-2 text-sm"
141-
role="option"
142-
tabindex="-1"
123+
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 rounded bg-orange-500 text-white sm:h-12 sm:w-12">
124+
<font-awesome-icon icon="search" />
125+
</div>
126+
<div class="ml-4">
127+
<p class="text font-bold text-gray-700">
128+
Troubleshoot
129+
</p>
130+
<p class="text text-gray-900">
131+
Detailed solutions for prominent issues.
132+
</p>
133+
</div>
134+
</nuxt-link>
135+
</li>
136+
137+
<li>
138+
<nuxt-link
139+
to="#tune"
140+
class="flex items-center p-2 transition duration-150 ease-in-out rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
143141
>
144-
No Results
145-
</span>
142+
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 rounded bg-orange-500 text-white sm:h-12 sm:w-12">
143+
<font-awesome-icon icon="wrench" />
144+
</div>
145+
<div class="ml-4">
146+
<p class="text font-bold text-gray-700">
147+
Tune
148+
</p>
149+
<p class="text text-gray-900">
150+
Information on how to upgrade, maintain, and customize your system.
151+
</p>
152+
</div>
153+
</nuxt-link>
154+
</li>
146155

156+
<li>
147157
<nuxt-link
148-
v-for="article in results"
149-
v-else
150-
:key="article.slug"
151-
:to="`/articles/${article.slug}`"
152-
class="text-gray-700 block px-4 py-2 group hover:bg-gray-50 focus:bg-gray-50 focus:outline-none"
153-
role="option"
158+
to="#learn"
159+
class="flex items-center p-2 transition duration-150 ease-in-out rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
154160
>
155-
<div class="text-md leading-6 font-semibold group-hover:text-gray-900 group-hover:underline group-focus:text-gray-900 group-focus:underline">
156-
{{ article.title }}
161+
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 rounded bg-orange-500 text-white sm:h-12 sm:w-12">
162+
<font-awesome-icon icon="graduation-cap" />
157163
</div>
158-
<div class="text-sm mt-1 text-sm text-gray-400">
159-
{{ article.description }}
164+
<div class="ml-4">
165+
<p class="text font-bold text-gray-700">
166+
Learn
167+
</p>
168+
<p class="text text-gray-900">
169+
A general guide for new users. Welcome!
170+
</p>
160171
</div>
161172
</nuxt-link>
162-
</div>
173+
</li>
174+
</ul>
175+
</div>
176+
177+
<div class="px-4 py-4 flex flex-col bg-white border border-gray-300 rounded-lg shadow">
178+
<div class="mx-2 my-4 md:min-h-[4rem]">
179+
<h2 class="text-3xl font-semibold text-gray-900">
180+
Contact Us
181+
</h2>
182+
183+
<p class="my-4 text-gray-700">
184+
Can’t find what you’re looking for in our support articles? Our team is here to help.
185+
</p>
163186
</div>
187+
188+
<ul class="space-y-4 -m-2">
189+
<li>
190+
<a
191+
href="https://system76.com/my-account/support-tickets/new"
192+
class="flex items-center p-2 transition duration-150 ease-in-out rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
193+
target="_blank"
194+
rel=""
195+
>
196+
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 rounded bg-orange-500 text-white sm:h-12 sm:w-12">
197+
<font-awesome-icon icon="ticket-alt" />
198+
</div>
199+
<div class="ml-4">
200+
<p class="text font-bold text-gray-700">
201+
Open a Support Ticket
202+
</p>
203+
<p class="text text-gray-900">
204+
Get expert help from real support humans. Recommended for most users.
205+
</p>
206+
</div>
207+
</a>
208+
</li>
209+
210+
<li>
211+
<a
212+
href="tel:+17202269269"
213+
class="flex items-center p-2 transition duration-150 ease-in-out rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500"
214+
>
215+
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 rounded bg-orange-500 text-white sm:h-12 sm:w-12">
216+
<font-awesome-icon icon="phone" />
217+
</div>
218+
<div class="ml-4">
219+
<p class="text font-bold text-gray-700">
220+
Call (720) 226-9269
221+
</p>
222+
<p class="text text-gray-900">
223+
We’re open 8am – 5pm MST. Response time may be limited on weekends and holidays.
224+
</p>
225+
</div>
226+
</a>
227+
</li>
228+
</ul>
164229
</div>
165230
</section>
166231

@@ -337,6 +402,6 @@ export default {
337402

338403
<style scoped>
339404
header {
340-
background-image: radial-gradient(rgba(87, 79, 74, 0.5), #574f4a), url("/images/website/robot.jpg");
405+
background-image: radial-gradient(rgba(87, 79, 74, 0.75), #574f4a), url("/images/website/robot.jpg");
341406
}
342407
</style>

0 commit comments

Comments
 (0)