You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

158 lines
4.4 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<style scoped>
@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
h3 {
margin-top: 40px;
font-family: 'Open Sans', sans-serif;
font-size: 30px;
font-weight: bold;
text-align: center;
}
p {
text-align: justify;
}
#introduction {
margin-top: 20px;
font-family: 'Inconsolata', monospace;
}
#short-review {
font-family: 'Inconsolata', monospace;
}
#review-title {
font-family: 'Open Sans', sans-serif;
}
#review-end {
font-family: 'Open Sans', sans-serif;
}
#icon-text {
font-family: 'Open Sans', sans-serif;
}
#why {
font-size: 20px;
font-weight: bold;
text-align: center;
}
</style>
<template>
<div>
<b-row align-h="center">
<b-col cols="4">
<h3>A critical resource for the meal-replacement curious</h3>
</b-col>
</b-row>
<!--end header -->
<b-row class="row justify-content-center" style="border-bottom: 1px solid #D3D3D3;">
<b-col cols="10" id="introduction">
<p>
Throughout this past year, Ive become fascinated with meal replacements. From their surprising form and aspiration to replace normal food, to the entire growing culture and community base around them, Ive delved deep into the rabbit hole. I have now
spent more than 6 months learning everything I could about them. I think I am ready to leave my review.
</p>
<p>
If you're in any way curious about this growing trend of replacing traditional food with tech food, you might find this useful. My personal opinion is based on an extensive research that has developed into a video essay, a written essay and a collection
of material in various media that illustrates my views.
</p>
</b-col>
</b-row>
<!--end introduction -->
<b-row align-h="center">
<b-col cols="3" id="why">
Why meal replacements?
</b-col>
</b-row>
<b-row align-h="center">
<b-col cols="2" style="text-align:center;">
<font-awesome-icon icon="stroopwafel" size="4x" />
<p id="icon-text" style="text-align:center;">
Replacing cooking
</p>
</b-col>
<b-col cols="3" style="text-align:center;">
<font-awesome-icon icon="stopwatch" size="4x" />
<p id="icon-text" style="text-align:center;">
Saving time
</p>
</b-col>
<b-col cols="2" style="text-align:center;">
<font-awesome-icon icon="code" size="4x" />
<p id="icon-text" style="text-align:center;">
Providing solutions
</p>
</b-col>
</b-row>
<!-- end first row of icons-->
<b-row align-h="center">
<b-col cols="2" style="text-align:center;">
<font-awesome-icon icon="search-dollar" size="4x" />
<p id="icon-text" style="text-align:center;">
Adding value
</p>
</b-col>
<b-col cols="2" style="text-align:center;">
<font-awesome-icon icon="seedling" size="4x" />
<p id="icon-text" style="text-align:center;">
Changing the future
</p>
</b-col>
</b-row>
<!-- end second row of icons-->
<b-row class="row justify-content-between mt-5" style="border-top: 1px solid #D3D3D3;">
<b-col id="review_end">
<p style="text-align: right;">
Alice says:
<font-awesome-icon icon="star" />
<font-awesome-icon icon="star-half-alt" />
</p>
<p style="font-size: 12px; text-align: right;">
Verified user
<font-awesome-icon icon="user-check" style="color: green" />
</p>
</b-col>
<b-col class="col-md-8">
<p id='review-title' style="font-weight: bold;">
I have so many thoughts!
</p>
<p id='short-review'>
“I tried meal replacements, got sucked into the culture, and Ive come out with many thoughts. First of all...”
</p>
</b-col>
<b-col class="col-md-2">
<b-button variant="light">
<router-link to='/review'>Read full review</router-link>
</b-button>
</b-col>
</b-row>
</div>
</template>
<script>
export default {
name: 'SplashPage',
}
</script>