Skip to content

Commit db50bd4

Browse files
yaira2yaira2
committed
Added back hero section
Update HeroSection.scss Update HeroSection.scss strings
1 parent a45068f commit db50bd4

File tree

6 files changed

+290
-2
lines changed

6 files changed

+290
-2
lines changed

‎src/i18n/locales/en.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,14 @@
1717
"docs": "Become a contributor",
1818
"contributions": "{amount, plural, =0 {No contributions} one {# contribution} other {# contributions}}"
1919
},
20+
"hero": {
21+
"chip": "Hero",
22+
"description": "A sleek, open-source file explorer built for Windows, designed to help you organize files and folders with ease.",
23+
"download": "Download",
24+
"view_on_github": "View on GitHub",
25+
"files_is_open_source": "Files is open source!",
26+
"install_on_windows": "Install on Windows"
27+
},
2028
"design": {
2129
"chip": "Design",
2230
"title": "Power meets beauty.",

‎src/layout/DesignSection/DesignSection.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
position: relative;
1414
inline-size: 80vw;
1515
block-size: 100%;
16-
margin-block-start: 120px;
16+
margin-block-start: 164px;
1717
text-align: center;
1818
}
1919

@@ -28,7 +28,7 @@
2828

2929
&screenshot {
3030
position: absolute;
31-
inset-block-start: -48px;
31+
inset-block-start: -36px;
3232
inset-inline-end: 0;
3333
inset-inline-start: 0;
3434
z-index: 1;

‎src/layout/HeroSection/HeroSection.scss‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
@use "src/styles/mixins" as *;
2+
3+
/*
4+
* Section 1 (Hero)
5+
*/
6+
7+
:global {
8+
// Outer section
9+
#hero-section {
10+
position: relative;
11+
overflow: hidden;
12+
block-size: 75vh;
13+
min-block-size: 584px;
14+
max-block-size: 1024px;
15+
border-block-end: 1px solid var(--fds-divider-stroke-default);
16+
17+
// Inner Section
18+
.page-section-inner {
19+
position: relative;
20+
display: grid;
21+
grid-template-columns: 1fr 1.5fr;
22+
align-items: center;
23+
gap: 4rem;
24+
}
25+
26+
:global {
27+
.split-button {
28+
display: flex;
29+
position: relative;
30+
31+
.button:first-of-type {
32+
border-radius: var(--fds-control-corner-radius) 0 0 var(--fds-control-corner-radius);
33+
border-inline-end: 1px solid var(--fds-divider-stroke-default);
34+
}
35+
36+
.menu-flyout-wrapper {
37+
display: contents;
38+
.button {
39+
border-radius: 0 var(--fds-control-corner-radius) var(--fds-control-corner-radius) 0;
40+
block-size: 100%;
41+
padding-inline: 8px;
42+
}
43+
}
44+
}
45+
}
46+
47+
// Custom button styling
48+
// Applied on download and source buttons respectively
49+
:global {
50+
.button {
51+
padding: 7px 12px;
52+
cursor: pointer;
53+
54+
svg {
55+
@include icon($size: 14px);
56+
}
57+
}
58+
59+
.style-standard .hero-button-inner {
60+
color: var(--fds-text-secondary);
61+
62+
h5 {
63+
color: var(--fds-text-primary);
64+
}
65+
}
66+
}
67+
68+
@keyframes rainbow-background-hue-rotate {
69+
0% {
70+
filter: none;
71+
}
72+
50% {
73+
filter: hue-rotate(180deg);
74+
}
75+
to {
76+
filter: none;
77+
}
78+
}
79+
80+
// Backdrop canvas
81+
.rainbow-background {
82+
position: absolute;
83+
z-index: -1;
84+
background: 800% 800% /* pos */
85+
linear-gradient(
86+
to bottom right,
87+
hsl(133, 67%, 59%),
88+
hsl(172, 100%, 42%),
89+
hsl(202, 97%, 45%),
90+
var(--fds-solid-background-base)
91+
);
92+
animation: rainbow-background-hue-rotate 15s infinite linear,
93+
scroll-gradient 15s infinite linear;
94+
inset-inline-end: 0;
95+
inset-block-end: 0;
96+
inline-size: 60vw;
97+
min-inline-size: 100vh;
98+
block-size: 100%;
99+
100+
mask: url("/ui/hero-mask.png") bottom / cover no-repeat;
101+
102+
@media (prefers-color-scheme: light) {
103+
opacity: 0.5;
104+
}
105+
106+
@media screen and (width < 1024px) {
107+
inline-size: 100%;
108+
transform: rotate(90deg) scale(1.5);
109+
}
110+
111+
@media screen and (width < 648px) {
112+
block-size: 60vh;
113+
mask-size: 100% 100%;
114+
}
115+
}
116+
}
117+
}
118+
119+
// Hero container elements
120+
.hero- {
121+
// Left container
122+
&left {
123+
@include flex($direction: column, $justify: center);
124+
flex: 1 1 auto;
125+
}
126+
127+
// Right container
128+
&right {
129+
@include flex($align: center);
130+
block-size: 100%;
131+
132+
img {
133+
position: absolute;
134+
inline-size: auto;
135+
max-inline-size: 100%;
136+
border: 1px solid var(--fds-surface-stroke-default);
137+
border-radius: calc(var(--fds-overlay-corner-radius) / 1.5);
138+
background-color: hsl(var(--mica-tint), calc(var(--mica-tint-opacity) / 1.5));
139+
box-shadow: var(--fds-dialog-shadow);
140+
overflow: hidden;
141+
user-select: none;
142+
inset-inline-end: 0;
143+
block-size: auto;
144+
max-block-size: 100%;
145+
-webkit-user-drag: none;
146+
aspect-ratio: 1280 / 960;
147+
backdrop-filter: blur(60px) saturate(150%);
148+
149+
@media screen and (width > 2048px) {
150+
border-radius: var(--fds-overlay-corner-radius);
151+
}
152+
}
153+
}
154+
155+
// Inner hero buttons
156+
&button-inner {
157+
@include flex($direction: column, $align: start);
158+
margin-inline-start: 8px;
159+
font-size: 1.1rem;
160+
line-height: normal;
161+
162+
h5 {
163+
margin: 0;
164+
font-size: 1.25rem;
165+
font-weight: 600;
166+
}
167+
}
168+
169+
// Hero image container
170+
&image-container {
171+
@include flex($align: center, $justify: center);
172+
position: relative;
173+
inline-size: 100%;
174+
block-size: 100%;
175+
max-block-size: 768px;
176+
}
177+
}
178+
179+
// Hero section small device support
180+
@media screen and (width < 1024px) {
181+
:global {
182+
// Remove height constraints on outer container
183+
#hero-section {
184+
block-size: auto;
185+
max-block-size: unset;
186+
187+
// Position inner containers vertically
188+
.page-section-inner {
189+
grid-template-columns: auto;
190+
}
191+
}
192+
}
193+
194+
.hero- {
195+
// Centrally align content in the left container
196+
&left {
197+
align-items: center;
198+
text-align: center;
199+
200+
.buttons-spacer {
201+
justify-content: center;
202+
}
203+
}
204+
205+
// Properly position hero image
206+
&right img {
207+
position: relative;
208+
inline-size: 100%;
209+
max-inline-size: 708px;
210+
block-size: auto;
211+
}
212+
}
213+
}

‎src/layout/HeroSection/HeroSection.svelte‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<script lang="ts">
2+
import { defaultI18nValues, externalLink, HeaderChip, PageSection } from "$lib";
3+
import { Button } from "fluent-svelte";
4+
import { _ } from "svelte-i18n";
5+
import { links } from "$data/links";
6+
import ArrowDownload from "~icons/fluent/arrow-download-24-regular";
7+
import Code from "~icons/fluent/code-24-regular";
8+
</script>
9+
10+
<PageSection id="hero-section">
11+
<div class="hero-left">
12+
<h1>Files</h1>
13+
<p>{$_("home.hero.description", defaultI18nValues)}</p>
14+
<div class="buttons-spacer">
15+
<Button
16+
href="/download"
17+
id="hero-download-button"
18+
variant="accent"
19+
>
20+
<ArrowDownload />
21+
<div class="hero-button-inner">
22+
<h5>{$_("home.hero.download", defaultI18nValues)}</h5>
23+
<span>{$_("home.hero.install_on_windows", defaultI18nValues)}</span>
24+
</div>
25+
</Button>
26+
<Button
27+
href="https://github.com/{links.github.owner}/{links.github.repo}/"
28+
{...externalLink}
29+
>
30+
<Code />
31+
<div class="hero-button-inner">
32+
<h5>{$_("home.hero.view_on_github", defaultI18nValues)}</h5>
33+
<span>{$_("home.hero.files_is_open_source", defaultI18nValues)}</span>
34+
</div>
35+
</Button>
36+
</div>
37+
</div>
38+
<div class="hero-right">
39+
<div class="hero-image-container">
40+
<picture>
41+
<source
42+
media="(prefers-color-scheme: dark)"
43+
srcset="/screenshots/folder-list-dark.png"
44+
>
45+
<source
46+
media="(prefers-color-scheme: light)"
47+
srcset="/screenshots/folder-list-light.png"
48+
>
49+
<img
50+
alt="Files new tab screenshot"
51+
height="768"
52+
src="/screenshots/folder-list-light.png"
53+
width="1024"
54+
>
55+
</picture>
56+
</div>
57+
</div>
58+
<div class="rainbow-background" slot="outer"></div>
59+
</PageSection>
60+
61+
<style lang="scss">
62+
@use "HeroSection";
63+
</style>

‎src/layout/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
// sections
2+
export { default as HeroSection } from "./HeroSection/HeroSection.svelte";
23
export { default as DesignSection } from "./DesignSection/DesignSection.svelte";
34
export { default as FeaturesSection } from "./FeaturesSection/FeaturesSection.svelte";
45
export { default as ThemesSection } from "./ThemesSection/ThemesSection.svelte";

‎src/routes/+page.svelte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script lang="ts">
22
import {
3+
HeroSection,
34
CommunitySection,
45
DesignSection,
56
FeaturesSection,
@@ -14,6 +15,8 @@
1415

1516
<Metadata title={$_("metadata.home", defaultI18nValues)} />
1617

18+
<HeroSection />
19+
1720
<DesignSection />
1821

1922
<FeaturesSection />

0 commit comments

Comments
 (0)