-
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.
- Loading branch information
1 parent
12e58e7
commit 641d411
Showing
11 changed files
with
142 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.
53 changes: 53 additions & 0 deletions
53
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,53 @@ | ||
| <template> | ||
| <section | ||
| class="bg-deep-charcoal text-white pt-6 lg:py-36 3xl:outer-container" | ||
| > | ||
| <div class="container lg:flex text-center lg:text-left gap-4"> | ||
| <div class="flex flex-col gap-4 lg:gap-6 lg:flex-1"> | ||
| <h1 class="mobile-header-1 lg:desk-header-1"> | ||
| Frontend <br class="sm:hidden" />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="white-btn gradient-border-btn primary-btn ml-0 mt-6 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="mt-8 lg:mt-0 flex flex-col w-[17.25013rem] h-[17.25rem] mx-auto lg:w-[31.25rem] lg:h-[31.75rem] 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" | ||
| /> | ||
| <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,65 @@ | ||
| <template> | ||
| <Header /> | ||
| <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 { 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> |