Skip to content

Complete UI restructure #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
apoorvcodes merged 8 commits into from
Jan 24, 2022
Merged

Complete UI restructure #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6aa1679
chore: update base styles for main page
savioxavier Jan 22, 2022
3079bd9
chore: update base styles for navbar component
savioxavier Jan 23, 2022
e2c4f15
chore: update base styles for whatsnew component
savioxavier Jan 23, 2022
496720d
fix: grammar and other minor errors in pages
savioxavier Jan 23, 2022
295c840
chore: update main text with svg
savioxavier Jan 23, 2022
5e13b89
chore: add animations to buttons
savioxavier Jan 23, 2022
b4a09a7
style: format files using prettier
savioxavier Jan 24, 2022
7c67a5e
feat: add minima favicon
savioxavier Jan 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Vite App</title>
<title>Minima</title>
</head>
<body>
<div id="app"></div>
Expand Down
Binary file modified public/favicon.ico
View file
Open in desktop
Binary file not shown.
59 changes: 43 additions & 16 deletions src/components/Hero.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,52 @@
<script lang="ts">
import { defineComponent } from "@vue/runtime-core";
export default defineComponent({
name : "Hero",
setup(){

}
})
name: "Hero",
setup() {},
});
</script>


<template>
<div class="flex justify-center pt-8 flex-col items-center">
<div class="text-4xl md:text-8xl text-white font-bold">The Golang framework</div>
<div class="text-4xl md:text-8xl text-white font-bold">to scale</div>
<div class="text-md md:text-2xl text-gray-300 text-center pt-8">Minima offers you the most minimal developer experience with everything that is needed to scale</div>
<div class="hidden md:block md:text-2xl text-gray-300 text-center ">start using minima with your exsisting net/http projects!</div>
<div class="flex justify-center pt-8 flex-col items-center">
<div class="sm:text-center lg:text-left">
<h1
class="text-4xl tracking-tight text-white sm:text-5xl md:text-6xl text-center"
>
<span class="inline-flex">The</span>
<i
class="text-7xl font-thin relative top-3 px-2 mr-2 fa-brands fa-golang inline-flex"
></i>
<span class="inline-flex">framework</span>
<span class="text-blue-600 block">to scale</span>
</h1>
</div>
<div
class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0 text-center"
>
Minima 🦄 is a reliable and lightweight framework for Go to carve the web
💻. Developed with core
<code class="inline-block text-base font-semibold"> net/http </code>
and other native packages, and with
<span class="italic">zero</span>
external dependencies.
</div>
<div
class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"
>
Start using minima with your existing projects!
</div>
<div class="flex space-x-10 pt-8">
<button class="p-3 rounded-full text-xl font-semibold text-white bg-hero ">Documentation</button>
<button class="p-3 rounded-full text-xl font-semibold text-white bg-gray-600">Explore utility</button>

<button
class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10 transition ease-in-out transform hover:-translate-y-1 hover:scale-105 duration-200"
>
Documentation
</button>
<button
class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-blue-100 hover:bg-blue-200 md:py-4 md:text-lg md:px-10 transition ease-in-out transform hover:-translate-y-1 hover:scale-105 duration-200"
>
Explore utility</button
>s
</div>
<div class="text-sm text-gray-500 pt-8">DEVELOPED BY MINIMA CORE TEAM™</div>
</div>
</template>
</div>
</template>
100 changes: 62 additions & 38 deletions src/components/Navbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,67 @@
<script lang="ts">
import { defineComponent} from "@vue/runtime-core";
import {Ref, ref} from "vue"
import { defineComponent } from "@vue/runtime-core";
import { Ref, ref } from "vue";
export default defineComponent({
name: "Navbar",
setup(){
const Visible:Ref<boolean> = ref<boolean>(false)
const Toggle = () => {
Visible.value = !Visible.value
}
window.addEventListener("resize", ()=> {
if(window.innerWidth > 768) {
Visible.value = false
}
})
return {
Visible: Visible,
Toggle: Toggle
}
}
})
name: "Navbar",
setup() {
const Visible: Ref<boolean> = ref<boolean>(false);
const Toggle = () => {
Visible.value = !Visible.value;
};
window.addEventListener("resize", () => {
if (window.innerWidth > 768) {
Visible.value = false;
}
});
return {
Visible: Visible,
Toggle: Toggle,
};
},
});
</script>

<template>
<div>
<div class="flex justify-between p-6 bg-mainbg">
<div class="Hero text-3xl font-bold text-white">Minima</div>
<ul class="hidden md:flex flex-row space-x-10">
<li class="links text-2xl font-semibold text-gray-200">Documentation</li>
<li class="links text-2xl font-semibold text-gray-200">Guide</li>
<button class="bg-hero pt-1 pl-3 pr-3 pb-1 text-white font-semibold text-xl text-center rounded-full">Get started</button>
</ul>
<div class="button flex md:hidden text-3xl">
<i @click="Toggle" class="fas fa-ellipsis-v rotate-90 text-white"></i>
</div>
</div>
<ul v-if="Visible" class="pl-6 space-y-4 justify-start w-32 text-left">
<li class="links text-1xl font-bold text-gray-200">Documentation</li>
<li class="links text-1xl font-bold text-gray-200">Guide</li>
<button class="bg-hero pt-1 pl-2 pr-2 pb-1 text-white text-md text-center rounded-full">Get started</button>
</ul>
</div>
</template>
<header class="p-4">
<div class="container flex justify-between h-16 mx-auto">
<div class="flex items-center py-3">
<a href="#" class="text-blue-500 hover:text-blue-600">
<span class="text-2xl font-bold tracking-tight">Minima</span>
</a>
</div>
<div class="items-center flex-shrink-0 hidden lg:flex">
<button
class="self-center py-3 rounded text-white hover:text-gray-200 hover:underline"
>
Documentation
</button>
<button
class="self-center px-8 py-3 rounded text-white hover:text-gray-200 hover:underline"
>
Guide
</button>
<button
class="self-center px-8 py-3 font-semibold rounded bg-blue-600 hover:bg-blue-700 text-white"
>
Get started
</button>
</div>
<button class="p-4 lg:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
class="w-6 h-6 text-blue-100"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
</svg>
</button>
</div>
</header>
</template>
30 changes: 17 additions & 13 deletions src/components/WhatsNew.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,23 @@
<script lang="ts">
import { defineComponent } from "@vue/runtime-core";
export default defineComponent({
name : "WhatsNew",
setup(){

}
})
name: "WhatsNew",
setup() {},
});
</script>


<template>
<div class="flex justify-center pt-12">
<div class="flex bg-gray-700 w-96 pt-2 pb-2 space-x-2 items-center justify-center rounded-full">
<div class="bg-hero pl-2 pr-2 text-white rounded-full">New</div>
<div class=" text-white rounded-md">Added new route system, check it here ></div>
</div>
</div>
</template>
<div class="flex justify-center pt-3">
<div
class="flex bg-gray-700 w-96 pt-2 pb-2 space-x-2 items-center justify-center rounded-full"
>
<div class="bg-hero font-medium pl-2 pr-2 text-white rounded-full">
New
</div>
<div class="text-white rounded-md">
Added new route system, check it here
<i class="fas fa-chevron-right text-blue-500"></i>
</div>
</div>
</div>
</template>