diff --git a/assets/css/splash.css b/assets/css/splash.css index a4d0ebe..71a4369 100644 --- a/assets/css/splash.css +++ b/assets/css/splash.css @@ -59,11 +59,13 @@ color:#42547d; background:#f6f9fc; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.1); + font-family:ginger-normal; } textarea { border:none; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.1); padding-left:0.3vw; + padding-top:0.3vw; width: 30vw; height: 12vw; font-size: 1vw; @@ -71,15 +73,16 @@ textarea { margin-top: 0; color:#42547d; background:#f6f9fc; + font-family:ginger-normal; } #submitForm { - background-color:#6b3deb; + background:rgba(255,255,255,0.3); color:white; border:none; border-radius:2vw; - padding:0.3vw; - width:20vw; + padding:0.3vw 3vw; font-family:ginger-normal; + font-weight: bold; font-size:1vw; margin-top:1vw; display:inline-block; @@ -98,14 +101,6 @@ textarea { background: url("../images/background2.jpg") no-repeat; background-size:100%; } -.diagonal-background { - position:absolute; - background-image: linear-gradient(to right, #4a45f4, #df43c6); - height:50vw; - width:130vw; - transform: rotate(-8deg); - left:-20vw; -} .loadingLogo { background: linear-gradient(to right, #4a45f4, #df43c6); -webkit-background-clip: text; @@ -119,8 +114,9 @@ textarea { margin-top:1vw; } #nav .logo { - font-size:2vw; - left:8vw; + width:3vw; + height:3vw; + left:6vw; } .navRightContainer { right:8vw; @@ -146,42 +142,48 @@ textarea { height:55vw; } #splash .mainContent { - top:12vw; + top:14vw; left:15vw; - width:45vw; + width:55vw; } #splash .mainContent h1{ - font-size:5vw; + font-size:4.5vw; letter-spacing:-0.2vw; - line-height:5vw; + line-height:4.5vw; + width:100%; } #splash .mainContent h2{ - font-size:2.5vw; + margin-top:1.2vw; + font-size:1.5vw; letter-spacing:-0.1vw; - line-height:2.5vw; + line-height:2vw; + font-family:ginger-normal; + width:50%; } #splash .mainContent .link1{ font-size:1vw; - margin-top:1vw; + margin-top:1.2vw; border-radius:2vw; - padding:0vw 2vw; - height:3vw; + padding:0vw 1.5vw; + height:2.3vw; margin-left:1vw; + font-weight: bold; } #splash .mainContent .link1 img{ - width:2vw; - height:2vw; - margin-right:1vw; + width:1.35vw; + height:1.5vw; + margin-right:0.5vw; display:inline; } #splash .mainContent .link2{ font-size:1vw; margin-top:1vw; border-radius:2vw; - padding:0vw 2vw; - height:3vw; - background:#ff70ab; - color:white; + padding:0vw 1.5vw; + height:2.3vw; + background:white; + color:#5942f2; + font-weight: bold; } #splash .scrollDown { top:85vh; @@ -196,37 +198,71 @@ textarea { } #aboutContent { width:100vw; - height:55vw; + height:80vw; overflow-x: hidden; } -#aboutContent .leftContent{ - margin-top:5vw; - margin-left:10vw; + +#aboutContent div { + overflow-y: hidden; } -#aboutContent .leftContent h1{ + +#aboutContent .firstSection { + margin-top: 3vw !important; + margin-bottom: 3vw !important; +} + +#aboutContent .secondSection { + margin-bottom: 3vw !important; +} + +#aboutContent .textContent{ + width:50%; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; +} + +#aboutContent .left { + padding-left: 10%; +} + +#aboutContent .right { + padding-right: 10%; +} + +#aboutContent .textContent h1{ font-size:3vw; padding-top:1vw; letter-spacing:-0.1vw; } -#aboutContent .leftContent h2{ - font-size:1.5vw; - padding-top:1vw; -} -#aboutContent .leftContent p{ +#aboutContent .textContent p{ font-size:1vw; padding-top:1vw; } -#aboutContent .leftContent a{ +#aboutContent .textContent i{ + font-size:1.6vw; + color:#9c44db; + margin-right: 1vw; +} +#aboutContent .textContent span{ + font-size:0.9vw; + display: flex; + flex-direction: row; + align-items: flex-center; +} +#aboutContent .textContent a{ border-radius:2vw; padding:0.3vw 2vw; font-size:1vw; margin-top:1vw; + font-weight: bold; } -#aboutContent .leftContent h3{ +#aboutContent .textContent h3{ font-size:2vw; padding-top:1vw; } -#aboutContent .leftContent h4{ +#aboutContent .textContent h4{ margin-top:4vw; font-size:1.1vw; } @@ -240,25 +276,38 @@ textarea { width:90%; } #features { - height:55vw; + height:auto; width:100vw; + background-color:#f6f9fc; + display: flex; + flex-direction: row; } #features .td1 { - width:50%; + width:100%; + display: flex; + align-items: center; + justify-content: center; } #features .td2 { - width:50%; - margin-top:10vw; + width:100%; + z-index: 100; + position: relative; +} +#features .featuresContainer { + flex-direction: column; } #features .cardsContainer { - margin-top:5vw; - margin-left:8vw; + display: flex; + flex-direction: row; + justify-content: center; } #features .cardsContainer .card{ - height:17vw; - width:12vw; + height:19vw; + width:17vw; border-radius:1vw; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); + z-index: 100; + position: relative; } #features .cardsContainer .card h1{ width:3vw; @@ -278,15 +327,18 @@ textarea { } #features .vision { width:40vw; + text-align: center; } #features .vision h1 { font-size:3vw; padding-top:1vw; letter-spacing:-0.1vw; + color: #0a2540; } #features .vision p { font-size:1vw; padding-top:1vw; + color: #0a2540; } #features .vision a{ margin-top:1vw; @@ -296,64 +348,105 @@ textarea { } #beta { margin-top:0; -} + height: 40vw; +} + +#beta .circleBackground { + background: radial-gradient(#df43c6, #8c3af0); + width:90vw; + height: 80vw; + border-radius: 100%; + position: absolute; + right:0; + z-index: 1; + transform:translate(45%, -22%); +} + + #beta .leftDiv { width:50%; } #beta .rightDiv { width:50%; margin-top:10vw; + z-index: 100; } #beta .leftDiv .largeContainer { - margin-top:5vw; margin-left:10vw; + margin-top:5vw; + width:60%; } #beta .leftDiv .largeContainer h1 { font-size:2.5vw; padding-top:1vw; letter-spacing:-0.1vw; + color:#0a2540; + font-family: ginger-bold; } -#beta .leftDiv .largeContainer .marginTop2 { - margin-top:2vw; -} + #beta .leftDiv .largeContainer p{ font-size:1vw; padding-top:1vw; -} -#beta .leftDiv .largeContainer a{ - border-radius:2vw; - padding:0.3vw 2vw; - font-size:1vw; - margin-top:1vw; -} -#beta .rightDiv h1{ - font-size:2.5vw; - padding-top:1vw; - letter-spacing:-0.1vw; - margin-bottom:2vw; -} -#beta .rightDiv .imageContainer{ - margin-top:3vw; -} -#beta .rightDiv .imageContainer img{ - width:4vw; -} -#beta .rightDiv .imageContainer .image2{ - margin-left:2vw; -} + color:#0a2540; + font-family: ginger-normal; + letter-spacing: -0.05vw; +} +#beta .leftDiv .largeContainer span{ + font-size: 0.9vw; + font-family: ginger-normal; + letter-spacing: -0.05vw; + color:#0a2540; +} + +#beta .leftDiv .largeContainer b { + font-size:1.1vw; + font-family: ginger-normal; + letter-spacing: -0.05vw; + color:#0a2540; +} + #footerContainer { + overflow-y: hidden; + z-index: 100; + position: relative; margin-top:5vw; -} -#footerContainer .footer { width:100vw; - height:5vw; + padding:6vw; + background-image: url("../images/footer.png"); + background-size: 100% auto; + text-align:center; + align-items: center; + justify-content: center; + display: flex; + flex-direction: column; +} +#footerContainer h1{ + font-size:2.5vw; + letter-spacing:-0.1vw; + line-height:2.5vw; + width:100%; + font-family: ginger-bold; + color:white; } -#footerContainer .footer a { - font-size:1.3vw; - left:8vw; +#footerContainer p{ + margin-top:1.2vw; + font-size:1.1vw; + letter-spacing:-0.05vw; + line-height:1.4vw; + font-family:ginger-normal; + width:50%; + margin-left:25%; + color:white; } -#footerContainer .footer span { - font-size:0.8vw +#footerContainer button { + font-size:1vw; + margin-top:1vw; + border-radius:2vw; + padding:0vw 1.5vw; + height:2.3vw; + background:rgba(255,255,255,0.15); + color:white; + font-weight: bold; } #formArea { width:35vw; @@ -371,7 +464,8 @@ textarea { margin-top:5vw; } #nav .logo { - font-size:6vw; + width:8vw; + height:8vw; left:8vw; } #nav .contact{ @@ -389,7 +483,7 @@ textarea { } .background { height:200vw; - background-size:100% 100%; + background-size:auto 100%; } #splash .mainContent { top:30vw; @@ -403,6 +497,13 @@ textarea { letter-spacing:-0.2vw; line-height:10vw; } + #splash .mainContent h2{ + margin-top:3vw; + font-size:4vw; + letter-spacing:-0.1vw; + line-height:5vw; + width:70%; +} #splash .mainContent .link1{ font-size:3vw; margin-top:2vw; @@ -410,19 +511,20 @@ textarea { padding:0vw 6vw; height:9vw; margin-left:0; - } + margin-top:5vw; +} #splash .mainContent .link2{ font-size:3vw; margin-top:2vw; border-radius:6vw; padding:0vw 6vw; height:9vw; - margin-left:0; - background:#ff70ab; - color:white; + margin-left:0; + color: #db43c8; + margin-top:5vw; } #splash .mainContent .link1 img{ - width:6vw !important; + width:5.5vw !important; height:6vw !important; margin-right:2vw !important; } @@ -441,35 +543,35 @@ textarea { height:240vw; flex-direction: column; } - #aboutContent .leftContent{ + #aboutContent .textContent{ margin-top:10vw; margin-left:10vw; margin-right:10vw; } - #aboutContent .leftContent h1{ + #aboutContent .textContent h1{ font-size:7vw; padding-top:3vw; letter-spacing:-0.1vw; } - #aboutContent .leftContent h2{ + #aboutContent .textContent h2{ font-size:4.5vw; padding-top:3vw; } - #aboutContent .leftContent p{ + #aboutContent .textContent p{ font-size:3vw; padding-top:3vw; } - #aboutContent .leftContent a{ + #aboutContent .textContent a{ border-radius:6vw; padding:0.9vw 6vw; font-size:3vw; margin-top:3vw; } - #aboutContent .leftContent h3{ + #aboutContent .textContent h3{ font-size:6vw; padding-top:3vw; } - #aboutContent .leftContent h4{ + #aboutContent .textContent h4{ margin-top:4vw; font-size:3.3vw; } @@ -493,14 +595,6 @@ textarea { #features .td2 { width:100%; margin-top:10vw; - } - #features .featuresContainer { - flex-direction: column; - } - .diagonal-background { - height:225vw; - width:150vw; - left:-20vw; } #features .cardsContainer { margin-top:15vw; @@ -643,7 +737,7 @@ textarea { border-radius:6vw; padding:0.9vw; width:60vw; - font-family:ginger-normal; + font-family:ginger-bold; font-size:3vw; margin-top:3vw; display:inline-block; diff --git a/assets/images/Computer Graphic Quento.png b/assets/images/Computer Graphic Quento.png new file mode 100644 index 0000000..5d01286 Binary files /dev/null and b/assets/images/Computer Graphic Quento.png differ diff --git a/assets/images/Phone Graphic Quento 2.png b/assets/images/Phone Graphic Quento 2.png new file mode 100644 index 0000000..60efd72 Binary files /dev/null and b/assets/images/Phone Graphic Quento 2.png differ diff --git a/assets/images/discord_logo.png b/assets/images/discord_logo.png new file mode 100644 index 0000000..2cdff49 Binary files /dev/null and b/assets/images/discord_logo.png differ diff --git a/assets/images/footer.png b/assets/images/footer.png new file mode 100644 index 0000000..aade0da Binary files /dev/null and b/assets/images/footer.png differ diff --git a/assets/images/quento_logo_white.png b/assets/images/quento_logo_white.png new file mode 100644 index 0000000..eb7ac8b Binary files /dev/null and b/assets/images/quento_logo_white.png differ diff --git a/pages/index.vue b/pages/index.vue index da4e79c..c479e5c 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -10,7 +10,7 @@
-

School Is Dumb. You Don't Have to Be.

-

A learning platform created by students, for students.

+

School is hard.
Learning doesn't have to be.

+

Quento’s suite of tools helps you streamline your studying like never before.

- +
-
-
-
-
-

A Revolutionary platform

-

The solution you've been waiting for is here.

-

Have you ever found yourself face-to-face with a task so daunting that you just exclaim, - “Darn, if only there were only an app for that!”

As the high school students of today, we too-often find ourselves caught in an awkward transition period; one between the slow-to-change world of academia and our current age of rapidly-evolving technology. +

+
+
+

Schoolwork just got a lot easier

+

Be it transcribing handwriting, sharing course notes or requesting mentorship, Quento has got your learning needs covered. +

Optical character recognition digitizes your pen-and-paper notes in a flash so you can experience the best of both worlds. +
Out sick or think you missed something? Check out our extensive course note repository! +
Join Quento’s student community by sharing your course notes, posting video recaps, and providing good advice. +

Start your experience -
-
-

A fully integrated suite of digital tools

-

Quento is open-source, freely available, and built from the ground up by a passionate community. Acting in the same capacity as a digital pencil case, the platform serves to centralize a wide variety of web tools created by and for Canadian high school students.

-
-
+
+
+ +
-
- +
+
+ +
+
+

Put the ‘u’ in education

+

Stay on top of your schedule and never miss out by having your academic deadlines, club announcements, and other notifications texted right to your phone! +

Join your school’s club groups and access a daily newsletter containing the latest scoop on both school-wide and club-specific issues. +
Sign in to your educational platforms of choice and manage how you keep track of things. +
Get your Quento and academic notifications sent to you on your preferred platform (Discord, Instagram, or SMS). +
+

+ Start your experience +
-
-
+
+
+

How it all works

+

We’ve designed Quento to be convenient and easy to use. Simply follow the four simple steps below, and you’ll be well on your way to a more enjoyable student experience!

+ Learn how you can help +
+
+
- - - -
-
+

1

-

Easily convert written notes into a digital format

+

Sign up with your email address or get in with one click using your Google account.

 -
+

2

-

Forward notifications from supported platforms* as an SMS, Facebook, or Discord message

-

* Managebac, Google Classroom, etc.

+

Use Quento’s wide range of tools to make your life easier.

-
+
+

3

-

Create and join groups where you can create class calendars and plot out lessons

+

Opt-in to the subscription services that you want.

 -
+
+

4

-

Suggest feature ideas and provide feedback

+

Have an amazing idea or find a bug? Check out the suggestions board and help us improve the Quento experience!

@@ -102,28 +116,37 @@
-
-
-

Our Vision

-

Faced with daily dilemmas such as “how should I take notes?” and “how do I stay on top of the ever-increasing workload?”, we established Quento Solutions as a platform to end these “darn!” moments once and for all. But how are we going to achieve this, you might ask?

Quento is currently in early stages of development. However, we need all the help that we can get. Scroll down below to check out how you can contribute and gain exclusive benefits as one of our earliest members and beta testers!

- Learn how you can help -
-
+
-
-
-

I want to contribute as a Quento beta tester.

-

Great news! You can sign up for an account and subscribe to our newsletter today through using the forms below. Once you’ve signed in, you’ll have access to the first module that we have completed: a forum where interested users can post the features they want added next and upvote/downvote fellow recommendations! As our development team grows and Quento comes along in its production stages, we’ll pick the highest ranking recommendations to create next.

- Sign up for the beta -
-
-

I want to contribute to the development of Quento.

-

So you want to contribute to Quento development even further? Stellar, because our team needs more fellow youth like you! Please join the following Discord link and introduce yourself as well as the skills you bring to the table. Check our Github/Trello board and all open task postings to see if there is something that you can complete or a new feature you’d like to work on, and propose it in the Discord server!

- Join the development team +
+

Join us

+

+ Quento is currently in its beta stage and we need YOUR help to make the platform the best it can be. We are actively searching for beta testers and student developers to make Quento’s vision a reality. +

+

+
+ Become a beta tester
+ As a beta tester, you’ll be tasked with using the platform’s features while they are in development and reporting any issues that you face. You’ll also have the opportunity to directly suggest ideas to our development teams through our Discord server. To contribute, signup for a Quento account, join our Discord server, and report any bugs that you find in the #issues channel. + +
+
+ Contribute as a developer
+ We’re always in need of new members on our development team. Whether you’re ready to squash some pesky bugs or help make a new exciting idea a reality, we welcome you with open arms. +

+ When you’re ready, submit your application using the form to your right; it should include your full name, email address, and Discord handle as well as what you’d like to work on as well and any relevant programming skills. + +
+

@@ -132,7 +155,6 @@
-

Get in touch


@@ -144,17 +166,19 @@
-
+
-
- Quento  2020    hello@quento.ca +
+

For students, by students

+

Every day, youth around the world face the many challenges that come with being a student— from teaching yourself something the teacher glossed over to losing track of what’s due, we totally get what it’s like.

No worries, Quento’s got your back. As students ourselves, we’ve designed our toolkit to allow you to improve your academic performance while staying on top of your school’s latest happenings. Every single feature of our platform has been built with YOU in mind. What are you waiting for? Join the revolution today!

+