-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat : Landing Section for frontend page
- Loading branch information
1 parent
9d78311
commit ba59a36
Showing
11 changed files
with
143 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file added
BIN
+61.3 KB
nuxt-frontend/assets/images/frontend-development/landing/landing1200w.webp
Binary file not shown.
Binary file added
BIN
+274 KB
nuxt-frontend/assets/images/frontend-development/landing/landing2400w.webp
Binary file not shown.
Binary file added
BIN
+15.6 KB
nuxt-frontend/assets/images/frontend-development/landing/landing400w.webp
Binary file not shown.
Binary file added
BIN
+35.4 KB
nuxt-frontend/assets/images/frontend-development/landing/landing800w.webp
Binary file not shown.
52 changes: 52 additions & 0 deletions
52
nuxt-frontend/components/frontend-development/LandingSection.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <template> | ||
| <section | ||
| class="bg-deep-charcoal text-white pt-6 pb-14 lg:py-36 text-center lg:text-left 3xl:outer-container" | ||
| > | ||
| <div class="container flex flex-col gap-8 lg:flex-row"> | ||
| <div class="flex flex-col gap-4 lg:gap-6 lg:flex-1 lg:my-auto"> | ||
| <h1 class="mobile-header-1 lg:desk-header-1"> | ||
| Frontend development company | ||
| </h1> | ||
| <p class="sub-h1-regular lg:mobile-header-2-regular text-white-core-80"> | ||
| At Canopas, we merge art with technology, ensuring your website or app | ||
| that feels and looks impeccable. Our team will help you design | ||
| visually stunning, high-performing, and user-centric interfaces. | ||
| </p> | ||
| <nuxt-link | ||
| class="gradient-btn primary-btn ml-0 hidden lg:flex" | ||
| to="/contact" | ||
| @click.native="$mixpanel.track('tap_frontend_landing_cta')" | ||
| > | ||
| <span class="sub-h3-semibold lg:sub-h1-semibold" | ||
| >Talk to Frontend Experts</span | ||
| ></nuxt-link | ||
| > | ||
| </div> | ||
| <div class="flex flex-col w-72 xs:w-80 mx-auto lg:w-96 gap-8 lg:flex-1"> | ||
| <img | ||
| :src="landing400" | ||
| :srcset="`${landing400} 400w, ${landing800} 800w, ${landing1200} 1200w, ${landing2400} 2400w`" | ||
| class="mx-auto w-full h-full object-contain" | ||
| alt="frontend-landing" | ||
| loading="eager" | ||
| /> | ||
| <nuxt-link | ||
| class="white-btn gradient-border-btn primary-btn border-none lg:hidden" | ||
| to="/contact" | ||
| @click.native="$mixpanel.track('tap_frontend_landing_cta')" | ||
| > | ||
| <span class="sub-h3-semibold" | ||
| >Talk to Frontend Experts</span | ||
| ></nuxt-link | ||
| > | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </template> | ||
| <script setup> | ||
| import landing400 from "@/assets/images/frontend-development/landing/landing400w.webp"; | ||
| import landing800 from "@/assets/images/frontend-development/landing/landing800w.webp"; | ||
| import landing1200 from "@/assets/images/frontend-development/landing/landing1200w.webp"; | ||
| import landing2400 from "@/assets/images/frontend-development/landing/landing2400w.webp"; | ||
| const { $mixpanel } = useNuxtApp(); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| <template> | ||
| <Header class="bg-deep-charcoal" /> | ||
| <LandingSection /> | ||
| <NewFooter class="bg-gradient-to-b from-pink-0 to-pink-16" /> | ||
| </template> | ||
| <script> | ||
| import Header from "@/components/partials/NewHeader.vue"; | ||
| import NewFooter from "@/components/partials/NewFooter.vue"; | ||
| import config from "@/config.js"; | ||
| import { defineAsyncComponent } from "vue"; | ||
| import { elementInViewPort } from "@/utils.js"; | ||
| import LandingSection from "@/components/frontend-development/LandingSection.vue"; | ||
| export default { | ||
| beforeRouteEnter(to, from, next) { | ||
| if (!config.SHOW_FRONTEND_DEVELOPMENT_PAGE) { | ||
| next({ | ||
| name: "Error404Page", | ||
| params: { pathMatch: "/frontend-development" }, | ||
| }); | ||
| } else { | ||
| next(); | ||
| } | ||
| }, | ||
| components: { | ||
| Header, | ||
| LandingSection, | ||
| NewFooter, | ||
| }, | ||
| setup() { | ||
| const { $mixpanel } = useNuxtApp(); | ||
| const footer = ref(null); | ||
| const seoData = config.FRONTEND_DEVELOPMENT_SEO_META_DATA; | ||
| useSeoMeta({ | ||
| robots: "noindex,nofollow", | ||
| title: seoData.title, | ||
| description: seoData.description, | ||
| ogTitle: seoData.title, | ||
| ogType: seoData.type, | ||
| ogUrl: seoData.url, | ||
| ogImage: seoData.image, | ||
| }); | ||
| let event = ""; | ||
| let events = { | ||
| footer: "view_frontend_development_footer", | ||
| }; | ||
| let elements; | ||
| onMounted(() => { | ||
| elements = ref({ | ||
| footer: footer, | ||
| }); | ||
| window.addEventListener("scroll", sendEvent); | ||
| $mixpanel.track("view_frontend_development_page"); | ||
| }); | ||
| onUnmounted(() => { | ||
| window.removeEventListener("scroll", sendEvent); | ||
| }); | ||
| function sendEvent() { | ||
| const newEvent = events[elementInViewPort(elements.value)]; | ||
| if (newEvent && event !== newEvent) { | ||
| event = newEvent; | ||
| $mixpanel.track(event); | ||
| } | ||
| } | ||
| }, | ||
| }; | ||
| </script> |