fix /sigh

This commit is contained in:
2023-11-02 12:36:21 -04:00
commit 85a02ee17f
55 changed files with 4266 additions and 0 deletions

3
.dockerignore Normal file
View File

@@ -0,0 +1,3 @@
node_modules/
.idea/
.env

2
.env.prod Normal file
View File

@@ -0,0 +1,2 @@
VITE_API_URL=https://api.bacfrederick.com
VITE_BUILD=1.0.0

25
.gitignore vendored Normal file
View File

@@ -0,0 +1,25 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.env

1
.nvmrc Normal file
View File

@@ -0,0 +1 @@
v19.6.0

8
Dockerfile Normal file
View File

@@ -0,0 +1,8 @@
FROM node:19.6.0 as build
ADD . .
RUN rm .env.local && cp .env.prod .env && npm i && npm run build
FROM caddy
COPY --from=build /dist /usr/share/caddy/

18
README.md Normal file
View File

@@ -0,0 +1,18 @@
# Vue 3 + TypeScript + Vite
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
## Recommended IDE Setup
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Type Support For `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

40
index.html Normal file
View File

@@ -0,0 +1,40 @@
<!doctype html>
<html lang="en">
<head>
<title>Beech Aero Club of Frederick</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#603cba">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<meta name="description" content="Affordable Flying for Beechcraft Enthusiasts"/>
<meta name="keywords"
content="frederick, flying club, beechcraft, debonair, bonanaza, cheep flying, aircraft purchase">
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
</head>
<body data-spy="scroll" data-target="#navbarsspy" data-offset="57">
<div id="preloader">
<div id="preloader-inner"></div>
</div>
<div class="page-wrapper" style="height: 100%; display: none;">
<div id="app"></div>
</div>
<a href="#" class="back-to-top hidden-xs-down" id="back-to-top">
<i style="margin-left: 20px;" class="fas fa-angle-up"></i>
</a>
<script type="module" src="/src/main.ts"></script>
<script src="/plugins/plugins.js"></script>
</body>
</html>

1264
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

27
package.json Normal file
View File

@@ -0,0 +1,27 @@
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"animate.css": "^3.7.0",
"axios": "^1.6.0",
"bootstrap": "^4.0.0",
"bootstrap-notify": "^3.1.3",
"jquery": "^3.3.1",
"vue": "^3.3.4"
},
"devDependencies": {
"@types/jquery": "^3.5.25",
"@vitejs/plugin-vue": "^4.2.3",
"sass": "^1.69.5",
"typescript": "^5.0.2",
"vite": "^4.4.5",
"vue-tsc": "^1.8.5"
}
}

BIN
public/apple-touch-icon.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/favicon-16x16.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
public/favicon-32x32.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
public/favicon.ico Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/images/favicon.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
public/images/logo.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

BIN
public/images/logo_app.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

BIN
public/images/logo_white.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

350
public/plugins/plugins.js Executable file

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 522 KiB

1
public/vite.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

28
src/App.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<Video/>
<Navbar/>
<About/>
<Airplane/>
<Membership/>
<Footer />
</template>
<script>
import {defineComponent} from "vue";
import Navbar from "./components/Navbar.vue";
import Video from "./components/Video.vue";
import About from "./components/About.vue";
import Airplane from "./components/Airplane.vue";
import Membership from "./components/Membership.vue";
import Footer from "./components/Footer.vue";
export default defineComponent({
components: {Footer, Membership, Airplane, About, Video, Navbar},
mounted() {
setTimeout(() => {
window.$('#preloader').hide()
window.$('.page-wrapper').show()
}, 1000)
}
})
</script>

1
src/assets/vue.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

After

Width:  |  Height:  |  Size: 496 B

81
src/components/About.vue Normal file
View File

@@ -0,0 +1,81 @@
<template>
<section id="about" class="pt90 pb50 m-5">
<div class="row">
<div class="col-md-6 mb40">
<div class="section-title title-left mb40 text-left">
<span class="section-subTitle">who we are</span>
<p class='lead'>A high performance, low cost, flying flub for the Beechcraft Bonanza and its
variants, located at Frederick Municipal Airport in Frederick, Maryland. The club is
formed
to provide its members with cost effective access and ownership to aircraft they want to
fly.
</p>
<p v-if="!membershipsAvailable">
Beech Aero Club of Frederick membership has no open positions at this time, but we are
accepting
potential member applications for the waitlist.
</p>
<p v-else>
Beech Aero Club of Frederick <b>has</b> membership positions at this time! Please
contact us for more information!
</p>
<p>
As a club member you will fly a complex high-performance Beechcraft Debonair. The
purpose of
the club is to provide aircraft for local and cross-country travel by its members, as
well
as create an environment where a group of like-minded individuals can socialize and
share
their passion for flying.
</p>
<p>
If you are interested in becoming a member of our club, or a member in a similar club in
another area, please send a message with your interest for more information.
</p>
</div>
</div>
<div class="col-md-6 mb40">
<ContactUs />
</div>
<div class='row'>
<div class='col-md-4 mb40'>
<img src='https://i.siteworxpro.com/MgGDS08hwJxBR783-LU33bpCIn_-AGQgdhjYKQP19b8/rs:fill:600:390/czM6Ly9pbWFnZXMuc2l0ZXdvcnhwcm8uY29tL0dYc1ZZLnBuZw' alt=''
class='img-fluid center-img shadow-card mb30'>
<h5 class='text-uppercase'>LED Lighting</h5>
<p>
All aircraft lighting has been upgraded with LED lighting, including the landing light,
beacon, navigation and strobe lights.
</p>
</div>
<div class='col-md-4 mb40'>
<img src='https://i.siteworxpro.com/9EUkRWShsUQ4lEc-jAbWY_AQGRPyjvRbh-1aao8J9Jk/rs:fill:600:390/czM6Ly9pbWFnZXMuc2l0ZXdvcnhwcm8uY29tLzBhQkJzLmpwZw' alt=''
class='img-fluid center-img shadow-card mb30'>
<h5 class='text-uppercase'>upgraded avionics</h5>
<p>
Upgraded avionics featuring an Aspen EFD1000 Pro. Transponder is also upgraded with
ADS-B out and is 2020 compliant!
</p>
</div>
<div class='col-md-4 mb40'>
<img src='https://i.siteworxpro.com/5oc6HNDtE_-b8Lj6VdgjSEfMlCx6hucPlyn3vMhOQpI/rs:fill:600:390/czM6Ly9pbWFnZXMuc2l0ZXdvcnhwcm8uY29tL2o5WnNqLnBuZw' alt=''
class='img-fluid center-img shadow-card mb30'>
<h5 class='text-uppercase'>New Interior and Exterior</h5>
<p>
Looks like a brand new aircraft! New leather interior was installed in 2015. Painted in
2008 and still has a like new condition.
</p>
</div>
</div>
</div>
</section><!--section end about-->
</template>
<script>
import ContactUs from "./Contact-Us.vue";
export default {
components: {ContactUs},
data: () => ({
membershipsAvailable: false
})
}
</script>

View File

@@ -0,0 +1,52 @@
<template>
<div class="cta bg-dark pt90 angle-top mt70 pb60" id="airplane">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<div class="wow fadeInLeft mb30" data-wow-delay=".1s">
<img src="https://i.siteworxpro.com/9PH661tMSb7cJvJBnzZkpEI9xxX6jwuc-jE-Rznt6Dw/rs:fill:600:390/czM6Ly9pbWFnZXMuc2l0ZXdvcnhwcm8uY29tL3UxQTdYLnBuZw" alt="" class="img-fluid">
</div>
<div class="wow fadeInLeft mb30" data-wow-delay=".2s">
<img src="https://i.siteworxpro.com/o62a1kvzhRhsRk9_MrWe_C-VVtDbZFUYHgz_GbW5e1s/rs:fill:600:390/czM6Ly9pbWFnZXMuc2l0ZXdvcnhwcm8uY29tL3BiT1lvLnBuZw" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-6 pb40">
<h2 class="text-white font300 mb20">1963 Beechcraft Debonair 35-B33</h2>
<p class="lead text-white-gray">
75% Power @ 8,000 feet 13 gph 157 Knots<br>
80 gallons fuel / 74 useable<br>
Useful Load 1081 pounds<br>
</p>
<h5 class="h5 text-white">Engine</h5>
<p>
<b>Fresh Overhauled</b> IO-470K @ 225 hp<br>
Airframe 4810 Total Time<br>
</p>
<h5 class="h5 text-white">Avionics</h5>
<p>
PMA6000B Audio Panel<br>
Garmin 430W Nav/Com1 GPS<br>
Narco 12D Nav/Com2<br>
<b>NEW</b> JPI EDM 830 Engine Monitor<br>
Bendix King KT74 Transponder - ADS-B Out<br>
ASPEN EFD1000 Pro<br>
BF Goodrich WX-900 Stormscope<br>
STEC 40 Autopilot Coupled to ASPEN (GPSS)<br>
ACK Model E-04 406MHz ELT<br>
</p>
<h5 class="h5 text-white">Other Equipment</h5>
<p>
BAS Shoulder Harness<br>
New Side Glass 2015<br>
Dual Rams Horn Yokes<br>
LED Navigation and Recognition Lighting<br>
Four Place Wired for Ship Powered Headsets
</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {}
</script>

View File

@@ -0,0 +1,132 @@
<template>
<div id="contact_form" v-if="!success">
<span class="section-subTitle">please contact us</span>
<label class="sr-only" for="name">name</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="far fa-user"></i></div>
</div>
<input type="text"
class="form-control"
id="name"
:class="validation && nameValid ? 'error': ''"
placeholder="name"
v-model="formData.name"
>
</div>
<label class="sr-only" for="email">email</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text"
class="form-control"
:class="validation && emailValid ? 'error': ''"
id="email"
placeholder="email"
v-model="formData.email"
>
</div>
<label class="sr-only" for="phone">phone</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-phone"></i></div>
</div>
<input maxlength="12" type="text"
class="form-control" id="phone" placeholder="phone" v-model="formData.phone">
</div>
<label class="sr-only" for="message">message</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="far fa-comment"></i></div>
</div>
<textarea type="text" class="form-control" id="message" placeholder="message"
v-model="formData.message"></textarea>
</div>
<div style="margin-bottom: 10px;">
If you would like to know more about the club please fill out the contact form below.
Let us know a little bit about yourself, and your interest. We will get back to you by
email or phone.
</div>
<div>
<button class="btn btn-lg btn-primary"
:class="loading ? 'disabled' : ''"
:disabled="loading"
@click="sendRequest()"
v-html="btnTxt"
>
</button>
</div>
</div>
<div id="contact_success" v-else class="text-center">
<h1>Request Sent!</h1>
<h4>
<i class="fas fa-check fa-5x text-success"></i>
</h4>
</div>
</template>
<script>
import axios from 'axios'
export default {
data: () => ({
loading: false,
success: false,
validation: false,
formData: {
name: '',
email: '',
phone: '',
message: ''
}
}),
computed: {
btnTxt() {
if (this.loading) {
return '<i class="fa-solid fa-gear fa-spin"></i>'
}
return '<i class="far fa-envelope"></i> Send'
},
nameValid() {
return this.formData.name === ''
},
emailValid() {
return !String(this.formData.email)
.toLowerCase()
.match(
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
)
},
isValid() {
return !this.nameValid && !this.emailValid
}
},
methods: {
sendRequest() {
this.validation = true
if (!this.isValid) {
return
}
this.loading = true
axios.post(import.meta.env.VITE_API_URL + '/email-request', this.formData)
.then(() => {
this.success = true
})
.finally(() => {
this.loading = false
})
}
}
}
</script>
<style>
.disabled {
cursor: not-allowed;
}
</style>

38
src/components/Footer.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<footer class='footer'>
<div class='container'>
<div class='row'>
<div class='col-md-6'>
<div class='clearfix socials'>
<a href="https://www.facebook.com/BACFrederick/" target="_blank"
class="social-icon si-border si-facebook">
<i class="fab fa-facebook-f" style="color: black"></i>
</a>
<a href="https://twitter.com/BeechAero" target="_blank"
class="social-icon si-border si-twitter">
<i class="fab fa-twitter"></i>
</a>
</div>
</div>
<div class='col-md-6 text-md-right text-center'>
<span>Content <i class="far fa-copyright"></i> {{ year }} Beech Aero Club of Frederick</span><br>
<span>Web Hosting and Design <i
class="far fa-copyright"></i> {{ year }} Siteworx Professionals, LLC</span><br>
<span>Build {{ build }}</span>
</div>
</div>
</div>
</footer>
</template>
<script>
export default {
computed: {
build() {
return import.meta.env.VITE_BUILD ?? 'Development'
},
year() {
return (new Date()).getUTCFullYear()
}
}
}
</script>

View File

@@ -0,0 +1,77 @@
<template>
<section id="membership" class="bg-faded pt90 pb50">
<div class="container">
<div class="row">
<div class="col-md-6 ml-auto mr-auto text-center mb30">
<div class="section-title">
<span class="section-subTitle">Ready to Join?</span>
<h3 class="mb0">Membership</h3>
</div>
</div>
</div>
<div class="row" style="margin-bottom: 20px;">
<div class="col text-center mb-3">
<h4 v-if="!membershipsAvailable">
While there are no open memberships at this time, please contact us to join our
wait-list.
</h4>
<h4 v-else>
Memberships are available! Contact us today to find out more!
</h4>
<a class="btn btn-dark" data-scroll href="#about">Contact us</a>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4>Monthly Dues based on number of members</h4>
<h5>${{ costPerMonth }} Per Month</h5>
<p>
With 5 Members monthly fixed costs are ${{ costPerMonth }} per month. This covers all fixed costs including
insurance, hangar and database fees.
</p>
</div>
<div class="col-md-6">
<h4>Hourly Rate to Fly</h4>
<h5>only ${{ perHour }} Per Hour Dry</h5>
<p>
The cost to fly is ${{ perHour }}/hr billed from the tach at a dry rate.
</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h4>Minimum Pilot Requirements</h4>
<p>
Private Pilot Certificate SEL<br>
with an Instrument Rating<br>
A Minimum Amount Retract Time Required<br>
</p>
</div>
<div class="col-md-4">
<h4>Beechcraft Flying Club Information</h4>
<p>
BAC of Frederick is a Flying Club of 5 members, each having equal access to a
high-performance aircraft for local and cross country flying. We invite potential members to
request more information and apply for one of our open positions.
</p>
</div>
<div class="col-md-4">
<h4>Beechcraft Flying Club Information</h4>
<p>
The club is formed as an equity club. In an equity club each member buys a share of the club
including the aircraft and all other assets, the buy-in can be financed through the club.
Contact us for more information on how this works. </p>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
data: () => ({
membershipsAvailable: false,
costPerMonth: 350,
perHour: 125
})
}
</script>

62
src/components/Navbar.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-nav" :class="stuck ? 'is-stuck' : ''">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarsspy" aria-controls="navbarsspy" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" data-scroll href="#home">
<img class="img-fluid" src="https://i.siteworxpro.com/VnRbpfvE4AodnHHrq0-DmmbDJwxUwrl9cJZIIdUv8uk/h:50/czM6Ly9pbWFnZXMuc2l0ZXdvcnhwcm8uY29tL0xVQm0wLnBuZw" alt=""></a>
<div class="collapse navbar-collapse" id="navbarsspy">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a data-scroll class="nav-link active" href="#home">home</a></li>
<li class="nav-item"><a data-scroll class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a data-scroll class="nav-link" href="#airplane">The Airplane</a></li>
<li class="nav-item"><a data-scroll class="nav-link" href="#membership">Membership</a></li>
</ul>
</div>
</div>
</nav>
</template>
<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
data: () => ({
stuck: false
}),
mounted() {
window.addEventListener('scroll', () => {
const height = $('#home').height()
const scroll = window.scrollY
if (!height) {
return
}
const dist = scroll - height
this.stuck = dist > 0
})
},
watch: {
stuck: (val) => {
if (val) {
$('body').css('margin-top', '69px')
} else {
$('body').css('margin-top', '0')
}
}
}
})
</script>
<style scoped>
.is-stuck {
transition: box-shadow 500ms;
position: fixed;
top: 0;
width: 100%;
box-shadow: 0 5px 15px #9a9a9a;
}
</style>

40
src/components/Video.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<section id="home" class="bg-parallax fullscreen parallax-overlay"
style="height: 100vh;"
>
<video
autoplay
muted
style="z-index: 0; position: relative; top: 0; height: 100%; width: 100%; object-fit: cover;"
>
<source src="/video/27128760_492610754487667_4824731412490851473_n.mp4" type="video/mp4" />
<source src="/video/27128760_492610754487667_4824731412490851473_n.webm" type="video/webm" />
</video>
<div class="content-table" style="z-index: 1; position: absolute; top: 0;">
<div class="content-middle pt80 ">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 ml-auto mr-auto text-center">
<h2 class="hero-big-text text-white">
<img src="/images/logo_white.png" class="img-fluid" alt="logo">
</h2>
<p class="lead text-white-gray">
Affordable Flying for Beechcraft Enthusiasts
</p>
<div class="circle-button">
<a href="#about" data-scroll class="btn btn-white-outline btn-lg btn-rounded">Learn
More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mouse-down"><a data-scroll href="#about"><i class="fa fa-angle-down fa-3x"></i></a></div>
</section>
</template>
<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({})
</script>

13
src/main.ts Normal file
View File

@@ -0,0 +1,13 @@
import { createApp } from 'vue'
import './styles/style.scss'
import App from './App.vue'
import $ from 'jquery';
//@ts-ignore
window.jQuery = $;
//@ts-ignore
window.$ = $;
let app = createApp(App)
app.mount('#app')

80
src/style.css Normal file
View File

@@ -0,0 +1,80 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
.card {
padding: 2em;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

572
src/styles/_base.scss Executable file
View File

@@ -0,0 +1,572 @@
/*
Basic of template
*/
html,body,.fullScreen{
height: 100%;
}
body{
font-size: 14px;
font-weight: 400;
color: #999;
line-height: 1.6;
letter-spacing: 0em;
font-family: $base-font;
overflow-x: hidden;
}
button, input, optgroup, select, textarea{
font-family: $base-font;
}
button{
&:focus{
outline: 0!important;
}
}
a,.simple-hover img,button,.btn{
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
a{
color:$primary-color;
text-decoration:none;
&:hover,&:focus{
text-decoration: none;
outline: 0!important;
color:#666;
}
}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
margin-bottom: .5rem;
font-family: $base-font;
font-weight: 400;
line-height: 1.3;
color: #111;
}
h4,.h4{
font-size: 1.25rem;
}
h5,.h5{
font-size: 1rem;
}
hr {
margin-top: 1rem;
border: 0;
border-top: 1px solid rgba(0,0,0,.1)
}
.small,small {
font-size: 80%;
font-weight: 400
}
ul, ol{
margin: 0 0 1.5em 0;
}
.tritary-font{
font-family:$styled-font;
font-weight:400;
font-style: italic;
}
.base-font{
font-family: $base-font;
font-weight: 400;
}
.font300{
font-weight: 300!important;
}
.font400{
font-weight: 400!important;
}
.font500{
font-weight: 500!important;
}
.font700{
font-weight: 700!important;
}
.font900{
font-weight: 700!important;
}
.label{
display: inline-block;
padding: 1px 7px;
border-radius: 2px;
font-size:10px;
}
.bg-faded{
background:#F9F9F9;
}
.badge-primary{
background: $primary-color!important;
}
.bg-primary{
background: $primary-color!important;
border-color:$primary-color;
}
.bg-success{
background: $success-color!important;
border-color:$success-color;
}
.bg-warning{
background: $warning-color;
border-color:$warning-color;
}
.bg-info{
background-color: $info-color;
border-color:$info-color;
}
.bg-danger{
background-color: $danger-color;
border-color:$danger-color;
}
.bg-dark{
border-color:$dark-color;
background-color:$dark-color!important;
}
.bg-white{
background: #fff;
}
.text-primary{
color: $primary-color!important;
}
.text-danger{
color: $danger-color!important;
}
.text-success{
color: $success-color!important;
}
.text-warning{
color: $warning-color!important;
}
.text-info{
color: $info-color!important;
}
.text-white{
color:rgba(#fff,1)!important;
}
.text-dark{
color:rgba(#222,1)!important;
}
.text-white-gray{
color:rgba(#fff,.8)!important;
}
.border-round{
border-radius: 6px;
-webkit-border-radius: 6px;
}
.pos-relative{
position:relative;
}
.lead{
font-weight: 300;
}
strong,b{
font-weight: 700;
}
.fWidth{
width: 100%!important;
}
.oHidden{
overflow: hidden!important;;
}
strong,b{
font-weight: 700;
}
.mr0{
margin-right:0px!important;
}
.pt0{
padding-top: 0!important;
}
.pt10{
padding-top: 10px!important;;
}
.pt20{
padding-top: 20px!important;;
}
.pt30{
padding-top: 30px!important;;
}
.pt40{
padding-top: 40px!important;;
}
.pt50{
padding-top: 50px!important;;
}
.pt60{
padding-top: 60px!important;;
}
.pt70{
padding-top: 70px!important;;
}
.pt80{
padding-top: 80px!important;;
}
.pt90{
padding-top: 90px!important;;
}
.pt100{
padding-top: 100px!important;;
}
.pb0{
padding-bottom: 0!important;
}
.pb10{
padding-bottom: 10px!important;
}
.pb15{
padding-bottom: 15px!important;
}
.pb20{
padding-bottom: 20px!important;
}
.pb30{
padding-bottom: 30px!important;
}
.pb40{
padding-bottom: 40px!important;
}
.pb50{
padding-bottom: 50px!important;
}
.pb60{
padding-bottom: 60px!important;
}
.pb70{
padding-bottom: 70px!important;
}
.pb80{
padding-bottom: 80px!important;
}
.pb90{
padding-bottom: 90px!important;
}
.pb100{
padding-bottom: 100px!important;
}
.mb0{
margin-bottom: 0!important;
}
.mb5{
margin-bottom: 5px!important;
}
.mb10{
margin-bottom: 10px!important;
}
.mb20{
margin-bottom: 20px!important;
}
.mb30{
margin-bottom: 30px!important;
}
.mb40{
margin-bottom: 40px!important;
}
.mb50{
margin-bottom: 50px!important;
}
.mb60{
margin-bottom: 60px!important;
}
.mb70{
margin-bottom: 70px!important;
}
.mb80{
margin-bottom: 80px!important;
}
.mb90{
margin-bottom: 90px!important;
}
.mb100{
margin-bottom: 100px!important;
}
.mt5{
margin-top:5px!important;
}
.mt10{
margin-top:10px!important;
}
.mt20{
margin-top:20px!important;
}
.mt30{
margin-top:30px!important;
}
.mt40{
margin-top:40px!important;
}
.mt50{
margin-top:50px!important;
}
.mt60{
margin-top:60px!important;
}
.mt70{
margin-top:70px!important;
}
.mt80{
margin-top:80px!important;
}
.mt90{
margin-top:90px!important;
}
.mt100{
margin-top:100px!important;
}
.bg-default{
background-color: $default-color!important;
}
.bg-gray{
background-color: #fbfbfb;
}
.pd-card{
padding: 40px 20px;
}
.back-to-top{
position: fixed;
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
-webkit-border-radius: 50%;
bottom: 10px;
left:10px;
background: #f5f5f5;
color: #333;
line-height: 50px;
opacity:0;
visibility: hidden;
z-index:9;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
transform: translate3d(0,15px, 0);
-webkit-transform: translate3d(0,15px, 0);
i{
display: block;
font-size: 25px;
line-height: 50px;
text-align: center;
}
&:hover{
box-shadow: 0px 3px 20px rgba(0,0,0,0.2);
color:#333;
}
&.show{
opacity:1;
visibility: visible;
transform: translate3d(0, 0px, 0);
-webkit-transform: translate3d(0, 0px, 0);
}
}
/**preloader**/
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
.no-margin{
margin: 0!important;
}
.no-padding{
padding-left:0!important;
padding-right:0!important;
}
.content-table{
display:table;
width:100%;
height:100%;
.content-middle{
display:table-cell;
vertical-align: middle;
width:100%;
}
.content-bottom{
display:table-cell;
vertical-align: bottom;
width:100%;
}
}
.section-title{
padding-bottom:0px;
position:relative;
h3{
font-size: 2.5rem;
letter-spacing: -3px;
position: relative;
padding-top: 20px;
text-transform:capitalize;
font-weight:800;
&:before{
content: "";
width:40px;
height:5px;
position: absolute;
top:0;
left:50%;
background-color: $primary-color;
margin-left:-20px;
}
}
&.title-left{
h3{
&:before{
left:0;
margin-left: 0;
}
}
}
}
.section-subTitle{
color:#666;
font-size:.89rem;
text-transform: uppercase;
display:block;
margin-bottom: 15px;
font-weight: 400;
}
.center-img{
display:block;
margin:0 auto;
}
.shadow-card{
box-shadow: 0px 0px 28px rgba(0,0,0,0.1);
border-radius:5px;
}
/***angle style**/
.angle-top,.angle-bottom{
overflow: visible;
position:relative;
}
.angle-top{
&:before{
background: none repeat scroll 0 0 #fff;
content: "";
margin-top: -149px;
min-height: 100px;
position: absolute;
-webkit-transform: skewY(-2deg);
-moz-transform: skewY(-2deg);
-ms-transform: skewY(-2deg);
-o-transform: skewY(-2deg);
transform: skewY(-2deg);
width: 100%;
z-index: 1;
}
&.bg-dark:before{
background-color: $dark-color;
}
&.bg-primary:before{
background-color: $primary-color;
}
&.bg-info:before{
background-color: $info-color;
}
&.bg-success:before{
background-color: $success-color;
}
&.bg-warning:before{
background-color: $warning-color;
}
&.bg-white:before{
background-color: #fff;
}
}
.bg-parallax{
background-attachment: fixed;
background-position: center center;
position:relative;
overflow: hidden;
}
.parallax-overlay{
&:after{
content: "";
width:100%;
height:100%;
position: absolute;
z-index: 0;
background-color: rgba(0,0,0,0.5);
left:0;
top:0;
}
.container{
position: relative;
z-index: 1;
}
&.overlay-primary{
&:after{
background-color:rgba($primary-color,0.75);
}
}
}
/*
Responsive Utilites Style (This css is removed from beta version)
*/
.hidden-xs-up {
display: none !important;
}
@media (max-width: 575px) {
.hidden-xs-down {
display: none !important;
}
}
@media (min-width: 576px) {
.hidden-sm-up {
display: none !important;
}
}
@media (max-width: 767px) {
.hidden-sm-down {
display: none !important;
}
}
@media (min-width: 768px) {
.hidden-md-up {
display: none !important;
}
}
@media (max-width: 991px) {
.hidden-md-down {
display: none !important;
}
}
@media (min-width: 992px) {
.hidden-lg-up {
display: none !important;
}
}
@media (max-width: 1199px) {
.hidden-lg-down {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-xl-up {
display: none !important;
}
}
.hidden-xl-down {
display: none !important;
}
.visible-print-block {
display: none !important;
}

536
src/styles/_buttons.scss Executable file
View File

@@ -0,0 +1,536 @@
/*
Buttons
*/
.form-control-lg, .input-group-lg>.form-control, .input-group-lg>.input-group-addon, .input-group-lg>.input-group-btn>.btn{
font-size:.8rem;
}
.btn,.button{
overflow: hidden;
position: relative;
z-index:1;
border-radius:2px;
cursor:pointer;
font-weight:600!important;
letter-spacing: 0px;
font-size:.8rem;
font-family:$base-font;
padding:10px 30px 10px!important;
text-transform:uppercase;
i{
display: inline-block;
margin-right:8px;
}
&.btn-rounded{
border-radius:100px;
}
&:before{
content:"";
position:absolute;
left:0;
top:0;
width:0%;
height:100%;
z-index: -1;
transition: all .3s;
}
&:hover,&:focus{
box-shadow:none;
outline:0!important;
&:before{
transition: all .3s;
z-index: -1;
}
}
&.btn-link{
border:0px;
padding:0px!important;
}
&.btn-sm{
padding:9px 15px 9px!important;
font-size:.6rem;
}
&.btn-lg{
padding:14px 40px 14px!important;
font-size:.95rem;
}
&.btn-link{
color:$primary-color;
text-transform:capitalize;
&:after{
font-family: 'FontAwesome';
content: "\f101";
margin-left:5px;
font-size:12px;
}
&:hover{
text-decoration:none;
color:#999;
}
}
}
.btn-white{
background-color:#fff;
color:#333;
}
.btn-white-outline{
border:2px solid #fff;
background-color:transparent;
color:#fff;
&:hover,&:focus{
&:before{
width:100%;
background-color:#fff;
}
color:#333;
border-color:#fff;
}
}
.btn-outline-primary{
border:2px solid $primary-color;
background-color:transparent;
color:$primary-color!important;
&:hover,&:focus,&:active{
&:before{
width:100%;
background-color:$primary-color;
}
color:#fff!important;;
border-color:$primary-color;
background-color:transparent;
}
}
.btn-outline-info{
border:2px solid $info-color;
background-color:transparent;
color:$info-color;
&:hover,&:focus,&:active{
&:before{
width:100%;
background-color:$info-color;
}
color:#fff;
border-color:$info-color;
background-color:transparent;
}
}
.btn-outline-info{
border:2px solid $info-color;
background-color:transparent;
color:$info-color;
&:hover,&:focus,&:active{
&:before{
width:100%;
background-color:$info-color;
}
color:#fff;
border-color:$info-color;
background-color:transparent;
}
}
.btn-outline-success{
border:2px solid $success-color;
background-color:transparent;
color:$success-color;
&:hover,&:focus,&:active{
&:before{
width:100%;
background-color:$success-color;
}
color:#fff;
border-color:$success-color;
background-color:transparent;
}
}
.btn-outline-danger{
border:2px solid $danger-color;
background-color:transparent;
color:$danger-color;
&:hover,&:focus,&:active{
&:before{
width:100%;
background-color:$danger-color;
}
color:#fff;
border-color:$danger-color;
background-color:transparent;
}
}
.btn-outline-warning{
border:2px solid $warning-color;
background-color:transparent;
color:$warning-color;
&:hover,&:focus,&:active{
&:before{
width:100%;
background-color:$warning-color;
}
color:#fff;
border-color:$warning-color;
background-color:transparent;
}
}
.btn-outline-secondary{
border:2px solid #ccc;
background-color:transparent;
color:#ccc;
&:hover,&:focus,&:active{
&:before{
width:100%;
background-color:#ccc;
}
color:#fff;
border-color:#ccc;
background-color:transparent;
}
}
/**fill buttons**/
.btn-primary,.btn-success,.btn-warning,.btn-danger,.btn-info,.btn-secondary,.btn-dark{
box-shadow: 0 0.05em 0.1em rgba(0,0,0,0.18);
border:0px;
&:hover{
border:0px;
box-shadow: 0 0.05em 1em rgba(0,0,0,0.18);
}
}
.btn-secondary{
background: #f5f5f5;
box-shadow:none;
&:hover,&:focus,&:active{
border:0px;
color:#333;
box-shadow:none;
}
}
.btn-primary{
background: $primary-color;
color:#fff!important;
&:hover,&:focus,&:active{
background: $primary-color;
color:#fff;
}
}
.btn-dark{
background: #222;
color:#fff;
&:hover,&:focus,&:active{
background: #222;
color:#fff;
}
}
.btn-circle{
width:80px;
height:80px;
border-radius: 50%;
line-height: 80px;
text-align:center;
i{
display:block;
line-height: 80px;
margin:0 auto;
font-size:35px;
}
.btn-primary,.btn-success,.btn-warning,.btn-danger,.btn-info{
i{
color:#fff;
}
}
}
.icon-sm-rounded{
width: 32px;
height: 32px;
line-height: 32px;
display: inline-block!important;
text-align: center;
border-radius: 50%;
background: $primary-color;
color: #fff;
}
/****************
SOCIAL BUTTONS
**********************/
/**social icons default size**/
.social-icon {
margin: 0 5px 5px 0;
width: 40px;
height: 40px;
font-size: 20px;
line-height: 40px !important;
color: #555;
text-shadow: none;
border-radius: 3px;
overflow: hidden;
display: block;
float: left;
text-align: center;
border: 1px solid #AAA;
}
.social-icon:hover {
border-color: transparent;
}
.social-icon i {
display: block;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
line-height: 40px;
position: relative;
}
.social-icon i:last-child {
color: #2f2424 !important;
}
.social-icon:hover i:first-child {
//margin-top: -40px;
color: #f3f3f3 !important;
}
/***social icons lg (big)***/
.social-icon-lg {
margin: 0 5px 5px 0;
width: 60px;
height: 60px;
font-size: 30px;
line-height: 60px !important;
color: #555;
text-shadow: none;
border-radius: 3px;
overflow: hidden;
display: block;
float: left;
text-align: center;
border: 1px solid #AAA;
}
.social-icon-lg:hover {
border-color: transparent;
}
.social-icon-lg i {
display: block;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
line-height: 60px;
position: relative;
}
.social-icon-lg i:last-child {
color: #FFF !important;
}
.social-icon-lg:hover i:first-child {
margin-top: -60px;
}
/***social icons small***/
.social-icon-sm {
margin: 0 5px 5px 0;
width: 30px;
height: 30px;
font-size: 18px;
line-height: 30px !important;
color: #555;
text-shadow: none;
border-radius: 3px;
overflow: hidden;
display: block;
float: left;
text-align: center;
border: 1px solid #AAA;
}
.social-icon-sm:hover {
border-color: transparent;
}
.social-icon-sm i {
display: block;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
line-height: 30px;
position: relative;
}
.social-icon-sm i:last-child {
color: #FFF !important;
}
.social-icon-sm:hover i:first-child {
margin-top: -30px;
}
si-border {
border: 1px solid #AAA !important;
}
.si-border-round {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
.si-dark-round {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
.si-gray-round {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
.si-gray {
background: #f3f3f3;
border: 0px;
}
.si-dark {
background-color: #333;
border: 0px !important;
color: #fff !important;
}
/**icons hover colored**/
.si-colored-facebook, .si-facebook:hover {
background-color: #3B5998 !important;
}
.si-colored-twitter, .si-twitter:hover {
background-color: #00ACEE !important;
}
.si-colored-google-plus, .si-g-plus:hover {
background-color: #DD4B39 !important;
}
.si-colored-skype, .si-skype:hover {
background-color: #00AFF0 !important;
}
.si-linkedin:hover, .si-colored-linkedin {
background-color: #0E76A8 !important;
}
.si-pin:hover, .si-colored-pinterest {
background-color: #C8232C !important;
}
.si-rss:hover, .si-colored-rss {
background-color: #EE802F !important;
}
.si-pinterest:hover, .si-colored-pinterest {
background-color: #C8232C !important;
}
.si-tumblr:hover, .si-colored-tumblr {
background-color: #34526F !important;
}
.si-vimeo:hover, .si-colored-vimeo {
background-color: #86C9EF !important;
}
.si-digg:hover, .si-colored-digg {
background-color: #191919 !important;
}
.si-instagram:hover, .si-colored-instagram {
background-color: #3F729B !important;
}
.si-flickr:hover, .si-colored-flickr {
background-color: #FF0084 !important;
}
.si-paypal:hover, .si-colored-paypal {
background-color: #00588B !important;
}
.si-yahoo:hover, .si-colored-yahoo {
background-color: #720E9E !important;
}
.si-android:hover, .si-colored-andriod {
background-color: #A4C639 !important;
}
.si-appstore:hover, .si-colored-apple {
background-color: #000 !important;
}
.si-dropbox:hover {
background-color: #3D9AE8 !important;
}
.si-dribbble:hover, .si-colored-dribbble {
background-color: #EA4C89 !important;
}
.si-soundcloud:hover, .si-colored-soundcoloud {
background-color: #F70 !important;
}
.si-xing:hover, .si-colored-xing {
background-color: #126567 !important;
}
.si-phone:hover, .si-colored-phone {
background-color: #444 !important;
}
.si-behance:hover, .si-colored-behance {
background-color: #053eff !important;
}
.si-github:hover, .si-colored-github {
background-color: #171515 !important;
}
.si-stumbleupon:hover, .si-colored-stumbleupon {
background-color: #F74425 !important;
}
.si-email:hover, .si-colored-email {
background-color: #6567A5 !important;
}
.si-wordpress:hover, .si-colored-wordpress {
background-color: #1E8CBE !important;
}
.circle-button{
display:inline-block;
vertical-align: middle;
span{
vertical-align: middle;
display: inline-block;
}
}
.circle-icon-button{
width: 3.92857rem;
height: 3.92857rem;
border-radius:50%;
font-size: 1.28571rem;
display:inline-block;
text-align:center;
vertical-align:middle;
>i{
position: relative;
top: 50%;
display: block;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 2;
padding-left: 3px;
padding-top: 3px;
}
}

27
src/styles/_cta-parallax.scss Executable file
View File

@@ -0,0 +1,27 @@
/*
Call to action & parallax
*/
.contact-info{
>li{
padding-left:60px;
position:relative;
padding-bottom:30px;
font-size:1.2rem;
>i{
position:absolute;
left:0;
top:-5px;
width:40px;
height:40px;
border-radius: 50%;
line-height: 40px;
text-align: center;
background-color: #eee;
}
a{
color:#555;
border-bottom: 1px dashed #eee;
}
}
}

View File

@@ -0,0 +1,31 @@
/*
Smart forms custom style
*/
.smart-wrap{
padding:0px;
}
.smart-container{
box-shadow: none;
-webkit-box-shadow: none;
margin-top:0px;
margin-bottom:0px;
}
.smart-forms .form-body{
padding:0px;
padding-bottom: 20px;
}
.smart-forms .form-footer{
background-image: none;
background-color: transparent;
padding-left: 0px;
padding-top: 0px;
}
.smart-forms .form-footer .button.btn-primary{
background-color: $primary-color;
}
.smart-forms .form-footer .button{
border-radius: 5px;
}
.smart-forms label, .smart-forms input, .smart-forms button, .smart-forms select, .smart-forms textarea{
font-family: $base-font;
}

7
src/styles/_dropdown.scss Executable file
View File

@@ -0,0 +1,7 @@
.dropdown-menu{
.dropdown-item{
font-size: .88rem;
text-transform: capitalize;
font-weight:300;
}
}

26
src/styles/_footer.scss Executable file
View File

@@ -0,0 +1,26 @@
/*
Footer style
*/
.footer{
padding-top: 80px;
padding-bottom: 60px;
}
.footer-nav{
>li{
padding:0px .5em;
a{
color:#666;
&:hover{
color:$primary-color;
}
}
}
}
@media(max-width:767px){
.footer .socials{
display: inline-block;
}
.footer{
text-align: center;
}
}

112
src/styles/_header-left.scss Executable file
View File

@@ -0,0 +1,112 @@
/*
Left header style
*/
.nav-link{
font-size:.9rem;
font-weight:400;
text-transform: capitalize;
font-family:$base-font;
letter-spacing:0;
border-right: 3px solid transparent;
display: block;
padding: 10px 10px;
text-align:center;
&.active{
border-right-color: $primary-color;
color:$primary-color;
}
}
.navbar.navbar-light.bg-white{
.navbar-nav .nav-link{
color: #333;
}
}
@media(min-width:992px){
.navbar-brand{
margin: 20px auto;
}
.navbar-toggleable-md .navbar-nav .nav-link{
padding-left: 0;
}
.navbar.navbar-dark.bg-dark {
.nav-link{
border-top: 1px solid rgba(#fff,.1);
&:active,&:hover,&:focus{
color: #fff;
}
}
}
.navbar.navbar-light.bg-white {
.nav-link{
border-top: 1px solid rgba(#000,.03);
}
}
.navbar-expand-lg .navbar-nav{
padding-top: 0;
padding-bottom: 0;
}
body.push-left{
padding-left: 250px;
.container{
width:100%;
padding: 0px 30px;
}
}
.navbar.navbar-left.fixed-top{
position: fixed;
height: 100%;
left:0;
width:250px;
top:0;
display:block;
padding:0px;
box-shadow:0px 0px 20px rgba(0,0,0,.1);
.navbar-nav{
display: block;
width:100%;
>.nav-item{
display: block;
width:100%;
}
}
}
.navbar-toggleable-md .navbar-collapse{
display: block!important;
}
.navbar-brand{
display: block;
width:100%;
text-align:center;
}
.socials-nav{
span{
display: inline-block;
}
padding-top: 1.5em;
padding-left: 1.5em;
}
}
@media(max-width:991px){
.navbar-expand-lg .navbar-toggler{
position:absolute;
right:15px;
top:9px;
border:0px;
}
h2.display-4{
font-size: 3rem;
line-height: 1.2;
}
h2.display-4{
font-size: 1.8rem;
line-height: 1.2;
}
.nav-link{
text-align: left;
border-right: 0px;
}
}

88
src/styles/_header.scss Executable file
View File

@@ -0,0 +1,88 @@
.navbar .navbar-nav .nav-link,.navbar .btn{
font-size:.9rem;
font-weight:400;
text-transform: capitalize;
font-family:$base-font;
letter-spacing:0;
}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .open>.nav-link {
color: $primary-color;
}
.sticky-wrapper.is-sticky .navbar.sticky-nav{
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.navbar-light.sticky-nav{
z-index: 9999!important;
}
@media (min-width: 992px){
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: .9rem;
padding-left: .9rem;
}
.navbar-expand-lg.navbar .container{
position: relative;
}
.navbar-light.navbar.bg-white.navbar-transparent{
background-color: transparent!important;
position:absolute;
left:0;
top:0;
width:100%;
z-index:9999;
padding:1rem 1rem;
.navbar-nav .nav-link{
color: #fff;
&.active,&:hover,&:focus{
color: $primary-color;
}
}
.navbar-brand img{
position: absolute;
left: 15px;
top: 10px;
&.logo-dark{
visibility: hidden;
opacity: 0;
}
}
&.fixed-top{
position: fixed;
animation: fadeInDown .5s;
-webkit-animation: fadeInDown .5s;
background-color: #fff!important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.08);
.navbar-brand img{
&.logo-dark{
opacity: 1;
visibility: visible;
}
&.logo-light{
opacity: 0;
visibility: hidden;
}
}
.navbar-nav .nav-link{
color: #111;
&.active,&:hover,&:focus{
color: $primary-color;
}
}
}
}
}
.navbar .navbar-nav .nav-link{
color: #111;
}
@media(max-width:991px){
.navbar.navbar-light.navbar-transparent{
background-color: #fff!important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.08);
.navbar-brand .logo-light{
display: none;
}
}
}

26
src/styles/_hero.scss Executable file
View File

@@ -0,0 +1,26 @@
/********Template hero styles***/
.fullscreen{
height:100%;
position:relative;
overflow:hidden;
}
.mouse-down{
position: absolute!important;
left:0;
width:100%;
bottom:0;
text-align: center;
z-index:1;
}
.hero-big-text{
font-family: $base-font;
font-weight: 600;
}
@media(min-width:768px){
.hero-big-text{
font-size: 4.5rem;
line-height: 1.1;
letter-spacing: -1px;
text-transform:capitalize;
}
}

65
src/styles/_link-hovers.scss Executable file
View File

@@ -0,0 +1,65 @@
/*
Link hover styles
*/
.hover-me1{
display: inline-block;
position: relative;
padding: 0 20px;
height: 45px;
line-height: 45px;
color:#fff;
text-transform:uppercase;
font-weight:600;
&:before,&:after{
position: absolute;
width: 45px;
height: 2px;
background: #fff;
content: '';
opacity: 0.2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
pointer-events: none;
}
&:before {
top: 0;
left: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
&:after {
right: 0;
bottom: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
transform-origin: 100% 0;
}
&:hover,&:focus{
outline: none;
color:#fff;
&:before{
left: 50%;
-webkit-transform: rotate(0deg) translateX(-50%);
-moz-transform: rotate(0deg) translateX(-50%);
transform: rotate(0deg) translateX(-50%);
}
&:after {
right: 50%;
-webkit-transform: rotate(0deg) translateX(50%);
-moz-transform: rotate(0deg) translateX(50%);
transform: rotate(0deg) translateX(50%);
}
}
&:hover:before,&:focus:before,&:hover:after,&:focus:after{
opacity: 1;
}
}

17
src/styles/_portfolio.scss Executable file
View File

@@ -0,0 +1,17 @@
/*
Portfolio
*/
.cbp-l-grid-agency-title{
font-family: $title-font;
font-weight:700;
color:#111;
letter-spacing: 0px;
text-transform: uppercase;
font-size: 14px;
}
.cbp-l-grid-agency-desc{
font-family: $base-font;
}
.cbp-l-filters-text .cbp-filter-item{
font-family: $title-font;
}

53
src/styles/_preloader.scss Executable file
View File

@@ -0,0 +1,53 @@
/*
Preloader style
*/
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 99999; }
#preloader-inner {
position: absolute;
left: 50%;
top: 50%;
font-size: 5px;
width: 5em;
height: 5em;
margin: -25px 0 0 -25px;
text-indent: -9999em;
border-top: 0.5em solid $primary-color;
border-right: 0.5em solid rgba(245, 245, 245, 0.5);
border-bottom: 0.5em solid rgba(245, 245, 245, 0.5);
border-left: 0.5em solid rgba(245, 245, 245, 0.5);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear; }
#preloader-inner,
#preloader-inner:after {
border-radius: 50%;
width: 10em;
height: 10em; }
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }

82
src/styles/_pricing.scss Executable file
View File

@@ -0,0 +1,82 @@
/*
Pricing tables
*/
.pricing-card{
border-radius: 6px;
-webkit-border-radius: 6px;
transition: all .3s;
-webkit-transition: all .3s;
-moz-transition: all .3s;
background-color: #fff;
border-top:5px solid #ddd;
.pricing-header{
line-height:2rem;
padding: 30px 20px;
.price{
font-size: 2rem;
font-weight:600;
color:#000;
sup{
color:#999;
font-size: .9rem;
font-weight:400;
top:10px;
vertical-align:top;
}
sub{
color:#999;
font-size: .9rem;
font-weight:400;
}
}
.price-title{
font-size: 1.5rem;
text-transform: capitalize;
font-family: $title-font;
}
}
&.active{
border-top: 5px solid $primary-color;
background-color: $primary-color;
color:#fff;
box-shadow: 0px 0px 25px rgba(0,0,0,0.1);
.pricing-features{
background-color: rgba(255,255,255,.1);
}
.price{
color:#fff;
sup,sub{
color: rgba(255,255,255,.7);
}
}
}
}
.pricing-features{
padding: 30px 20px;
background-color:#fbfbfb;
ul{
margin-bottom: 0px;
li{
position: relative;
padding-left: 30px;
margin-bottom:10px;
font-size:1rem;
text-transform:capitalize;
&:before{
position:absolute;
left:0;
top:0;
font-family: "FontAwesome";
content: "\f00c";
}
&:last-child{
margin-bottom:0px;
}
}
}
}
.pricing-footer{
padding: 20px;
}

101
src/styles/_team.scss Executable file
View File

@@ -0,0 +1,101 @@
/*
Team style
*/
.team-card{
position:relative;
overflow:hidden;
h4{
color:#fff;
}
.team-overlay{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position:absolute;
width:100%;
height:100%;
background-color:rgba(#000,.8);
left:0;
top:0;
opacity:0;
-webkit-transition:all 350ms;
-moz-transition:all 350ms;
-o-transition:all 350ms;
transition:all 350ms;
.team-detail{
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition:all 250ms;
-moz-transition:all 250ms;
-o-transition:all 250ms;
transition:all 250ms;
text-align:center;
width:100%;
h4{
color:#fff;
text-transform: uppercase;
margin-bottom:0px;
}
span{
color:rgba(#fff,.8);
display:block;
font-size:13px;
font-style:italic;
}
.seprator-overlay{
width:80px;
height:1px;
margin:10px auto;
background:rgba(#fff,.8);
}
ul{
li{
a{
color:#fff;
&:hover{
color:$primary-color;
}
}
}
}
}
}
&:hover{
.team-overlay{
opacity:1;
.team-detail{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition:all 250ms;
-moz-transition:all 250ms;
-o-transition:all 250ms;
transition:all 250ms;
}
}
}
}
.team-card-default{
ul li {
&+li{
margin-left:5px;
}
a{
color: #999;
font-size: 20px;
&:hover{
color: $primary-color;
}
}
}
}

16
src/styles/_testimonials.scss Executable file
View File

@@ -0,0 +1,16 @@
/*
Testimonials
*/
.cbp-l-slider-testimonials-wrap{
background-color: transparent;
border:0px;
}
.cbp-l-grid-slider-testimonials-body{
font-family: $base-font;
}
.cbp-l-grid-slider-testimonials-footer{
font-family: $title-font;
}
.cbp-l-slider-testimonials-wrap{
padding-top: 30px;
}

10
src/styles/_variables.scss Executable file
View File

@@ -0,0 +1,10 @@
$title-font:'Open Sans', sans-serif;
$styled-font:'Playfair Display', serif;
$base-font:'Open Sans', sans-serif;
$primary-color:#4683df;
$danger-color:#c9302c;
$success-color:#5cb85c;
$warning-color:#f0ad4e;
$default-color:#f7f7f7;
$dark-color:#333;
$info-color:#5bc0de;

View File

@@ -0,0 +1,41 @@
/*
Assan onepage style file
Version- 3.8
author - design_mylife
support - mylifedesign143@gmail.com
*/
@font-face {
font-family: 'FontAwesome';
src: url("../bower_components/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0");
src: url("../bower_components/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format('embedded-opentype'),url("../bower_components/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0") format('woff2'),url("../bower_components/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0") format('woff'),url("../bower_components/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0") format('truetype'),url("../bower_components/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format('svg');
font-weight: normal;
font-style: normal;
}
/**et line icons**/
@font-face {
font-family: 'et-line';
src: url("../et-line-font/fonts/et-line.eot");
src: url("../et-line-font/fonts/et-line.eot?#iefix") format("embedded-opentype"), url("../et-line-font/fonts/et-line.woff") format("woff"), url("../et-line-font/fonts/et-line.ttf") format("truetype"), url("../et-line-font/fonts/et-line.svg#et-line") format("svg");
font-weight: normal;
font-style: normal; }
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Dosis:300,400,500,600');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i');
@import "src/styles/variables";
@import "src/styles/base";
@import "src/styles/preloader";
@import "src/styles/buttons";
@import "src/styles/header-left";
@import "src/styles/dropdown";
@import "src/styles/hero";
@import "src/styles/link-hovers";
@import "src/styles/portfolio";
@import "src/styles/pricing";
@import "src/styles/team";
@import "src/styles/cta-parallax";
@import "src/styles/testimonials";
@import "src/styles/custom-smartForm";
@import "src/styles/footer";

69
src/styles/style.scss Executable file
View File

@@ -0,0 +1,69 @@
/*
Assan onepage style file
Version- 3.8
author - design_mylife
support - mylifedesign143@gmail.com
*/
@import "bootstrap/dist/css/bootstrap.css";
@import "animate.css";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Dosis:300,400,500,600');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i');
@import "src/styles/variables";
@import "src/styles/base";
@import "src/styles/preloader";
@import "src/styles/buttons";
@import "src/styles/header";
@import "src/styles/dropdown";
@import "src/styles/hero";
@import "src/styles/link-hovers";
@import "src/styles/portfolio";
@import "src/styles/pricing";
@import "src/styles/team";
@import "src/styles/cta-parallax";
@import "src/styles/testimonials";
@import "src/styles/custom-smartForm";
@import "src/styles/footer";
.alert {
z-index: 9999 !important;
}
/******************
Template responsive css
*******************/
@media(max-width:991px){
.navbar .container{
position: relative;
padding-left: 15px;
padding-right: 15px;
}
.navbar-expand-lg .navbar-toggler{
position:absolute;
right:15px;
border:0px;
top:3px;
}
h2.display-4{
font-size: 3rem;
line-height: 1.2;
}
}
@media(max-width:991px){
h2.display-4{
font-size: 1.8rem;
line-height: 1.2;
}
}
.form-control,select.form-control {
&.error{
border-color: $danger-color;
background-color:rgba($danger-color,.1);
box-shadow:0px 0px 5px 2px rgba($danger-color,.15);
}
}

1
src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

26
tsconfig.json Normal file
View File

@@ -0,0 +1,26 @@
{
"compilerOptions": {
"allowJs": true,
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}

10
tsconfig.node.json Normal file
View File

@@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

7
vite.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})