Skip to content

Commit a92d51d

Browse files
claireclark1claireclark1
committed
mission section in all screen sizes
1 parent edd4565 commit a92d51d

File tree

18 files changed

+181
-30
lines changed

18 files changed

+181
-30
lines changed

‎src/components/GetNotified/GetNotified.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
</form>
108108
{:else}
109109
<div class="px-8 py-12">
110-
<h2 class="title-75 text-center">Thank You!</h2>
110+
<h2 class="title-70 text-center">Thank You!</h2>
111111
</div>
112112
{/if}
113113

‎src/components/Sections/Mission.svelte

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎src/components/Sections/Mission/Mission.svelte

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script lang="ts">
2+
import SectionWrapper from '../SectionWrapper.svelte';
3+
import MissionItems from '$components/Sections/Mission/MissionItems.svelte';
4+
import MissionStatement from '$components/Sections/Mission/MissionStatement.svelte';
5+
import MissionHeader from '$components/Sections/Mission/MissionHeader.svelte';
6+
</script>
7+
8+
<SectionWrapper id="mission" classes="py-f64">
9+
<section class="freq-container mb-f64">
10+
<MissionHeader />
11+
<MissionItems />
12+
</section>
13+
14+
<MissionStatement />
15+
</SectionWrapper>

‎src/components/Sections/Mission/MissionHeader.svelte

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script lang="ts">
2+
import SlideIn from '$components/SlideIn.svelte';
3+
</script>
4+
5+
<div class="pl-f32 lg:pl-f48">
6+
<SlideIn>
7+
<h2 class="title-70 pb-f24 text-navy">Frequency’s Mission</h2>
8+
</SlideIn>
9+
<SlideIn>
10+
<h5
11+
class="pb-f64 text-h6 font-bold sm:max-w-[400px] sm:leading-default lg:max-w-[620px] lg:text-h5 lg:leading-[32px]"
12+
>
13+
Frequency's Mission is to provide the infrastructure to empower people by:
14+
</h5>
15+
</SlideIn>
16+
</div>

‎src/components/Sections/Mission/MissionItem.svelte

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts">
2+
</script>
3+
4+
<div class="flex max-w-[450px]">
5+
<!-- left column-->
6+
<div class="relative flex w-f48 flex-col">
7+
<!-- icon-->
8+
<div class="absolute right-f4 top-0 h-f24 w-f24">
9+
<slot name="icon" />
10+
</div>
11+
<!-- horizontal border-->
12+
<span class="absolute left-0 top-f24 w-f160 border-b-2 border-gray3"></span>
13+
</div>
14+
<!-- right column-->
15+
<div class="relative flex max-w-[calc(100%-48px)] flex-col pl-f24 pt-f48 text-sm">
16+
<!-- vertical border-->
17+
<span class="absolute left-0 top-f12 h-f120 border-l-2 border-gray3"></span>
18+
<!-- body-->
19+
<slot name="body" />
20+
</div>
21+
</div>

‎src/components/Sections/Mission/MissionItems.svelte

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<script>
2+
import MissionItem from '$components/Sections/Mission/MissionItem.svelte';
3+
import App from '$lib/assets/MissionIcons/App.svg';
4+
import Box from '$lib/assets/MissionIcons/Box.svg';
5+
import Fingerprint from '$lib/assets/MissionIcons/Fingerprint.svg';
6+
import Network from '$lib/assets/MissionIcons/Network.svg';
7+
import Universe from '$lib/assets/MissionIcons/Universe.svg';
8+
import Users from '$lib/assets/MissionIcons/Users.svg';
9+
10+
const missionItems = [
11+
{
12+
iconAlt: 'Fingerprint',
13+
icon: Fingerprint,
14+
body: `Offering everyone a self-sovereign <span class="font-bold text-teal">digital social iconAltentity</span> that they may use
15+
to sign in and share data across the applications they choose.`,
16+
},
17+
{
18+
iconAlt: 'App',
19+
icon: App,
20+
body: `Allowing people to <span class="font-bold text-teal">freely move among applications</span> and proviconAlters rather than
21+
being forced to accept application changes that worsen their experience.`,
22+
},
23+
{
24+
iconAlt: 'Network',
25+
icon: Network,
26+
body: `Offering application proviconAlters practical <span class="font-bold text-teal">economics</span> that make blockchain usage
27+
feasible and desirable.`,
28+
},
29+
{
30+
iconAlt: 'Users',
31+
icon: Users,
32+
body: `Securely storing each <span class="font-bold text-teal">person's relationships</span> (social graph) so they are not
33+
controlled by any application or company, and can only be accessed with user permission.`,
34+
},
35+
{
36+
iconAlt: 'Box',
37+
icon: Box,
38+
body: `Creating an <span class="font-bold text-teal">interoperable</span> social media public commons where everyone can participate
39+
in the conversation.`,
40+
},
41+
{
42+
iconAlt: 'Universe',
43+
icon: Universe,
44+
body: `Creating a shared and <span class="font-bold text-teal">decentralized</span> economy where everyone can participate
45+
in the shared value they have created on the internet.`,
46+
},
47+
];
48+
</script>
49+
50+
<div class="grid gap-f64 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
51+
{#each missionItems as item}
52+
<MissionItem>
53+
<span slot="icon"><img src={item.icon} alt={item.iconAlt} /></span>
54+
<p slot="body">{@html item.body}</p>
55+
</MissionItem>
56+
{/each}
57+
</div>

‎src/components/Sections/Mission/MissionStatement.svelte

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div class="bg-navy py-f24 text-white">
2+
<div class="freq-container flex items-center justify-center gap-f24">
3+
<h2 class="title-70 sm:text-h1 md:text-[70px]">Your:</h2>
4+
<div class="flex flex-col">
5+
<span class="font-thin opacity-40 sm:text-[30px] md:text-[50px]">Followers</span>
6+
<span class="font-thin sm:text-[50px] md:text-[70px]">Network</span>
7+
<span class="font-thin opacity-40 sm:text-[30px] md:text-[50px]">Content</span>
8+
</div>
9+
</div>
10+
</div>

‎src/components/Sections/Users.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<section class="freq-container">
1010
<div class="">
1111
<SlideIn>
12-
<h2 class="title-75">User Advantages</h2>
12+
<h2 class="title-70">User Advantages</h2>
1313
</SlideIn>
1414
</div>
1515
<div>

‎src/lib/assets/MissionIcons/App.svg

Lines changed: 8 additions & 0 deletions
Loading

‎src/lib/assets/MissionIcons/Box.svg

Lines changed: 5 additions & 0 deletions
Loading

‎src/lib/assets/MissionIcons/Fingerprint.svg

Lines changed: 7 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)