Skip to content

Commit

Permalink
feat: add CTA and shadow animation on tile hover
Browse files Browse the repository at this point in the history
  • Loading branch information
@JustARatherRidiculouslyLongUsername
JustARatherRidiculouslyLongUsername committed Jan 7, 2025
1 parent 6701e1e commit dd8b2e5
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 11 deletions.
50 changes: 40 additions & 10 deletions src/app/integrations/landing-v2/landing-v2.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,10 @@ <h3 class="landing-v2--section-heading">
<div *ngIf="isAppShown('NETSUITE')">
<div class="landing-v2--accounting-app"
(click)="openAccountingIntegrationApp(AccountingIntegrationApp.NETSUITE)">
<img src="assets/logos/netsuite-logo.png" />
<div class="tw-flex tw-justify-between">
<img src="assets/logos/netsuite-logo.png" />
<button class="btn-connect">Connect</button>
</div>
<div>
<span class="landing-v2--accounting-app-name">
NetSuite
Expand All @@ -54,7 +57,10 @@ <h3 class="landing-v2--section-heading">
</div>
<div *ngIf="isAppShown('INTACCT')" class="landing-v2--accounting-app"
(click)="openAccountingIntegrationApp(AccountingIntegrationApp.SAGE_INTACCT)">
<img src="assets/logos/intacct-logo.png" />
<div class="tw-flex tw-justify-between">
<img src="assets/logos/intacct-logo.png" />
<button class="btn-connect">Connect</button>
</div>
<div>
<span class="landing-v2--accounting-app-name">
Sage Intacct
Expand All @@ -66,7 +72,10 @@ <h3 class="landing-v2--section-heading">
</div>
<div *ngIf="isAppShown('QBO')" class="landing-v2--accounting-app"
(click)="openAccountingIntegrationApp(AccountingIntegrationApp.QBO)">
<img src="assets/logos/quickbooks-logo.png" />
<div class="tw-flex tw-justify-between">
<img src="assets/logos/quickbooks-logo.png" class="!tw-h-[30.7px]" />
<button class="btn-connect">Connect</button>
</div>
<div>
<span class="landing-v2--accounting-app-name">
QuickBooks Online
Expand All @@ -78,7 +87,10 @@ <h3 class="landing-v2--section-heading">
</div>
<div *ngIf="isAppShown('XERO')" class="landing-v2--accounting-app"
(click)="openAccountingIntegrationApp(AccountingIntegrationApp.XERO)">
<img src="assets/logos/xero-logo.png" />
<div class="tw-flex tw-justify-between">
<img src="assets/logos/xero-logo.png" />
<button class="btn-connect">Connect</button>
</div>
<div>
<span class="landing-v2--accounting-app-name">
Xero
Expand All @@ -90,7 +102,10 @@ <h3 class="landing-v2--section-heading">
</div>
<div *ngIf="isAppShown('QBD')" class="landing-v2--accounting-app"
(click)="openInAppIntegration(InAppIntegration.QBD)">
<img src="assets/logos/quickbooks-logo.png" />
<div class="tw-flex tw-justify-between">
<img src="assets/logos/quickbooks-logo.png" class="!tw-h-[30.7px]" />
<button class="btn-connect">Connect</button>
</div>
<div>
<span class="landing-v2--accounting-app-name">
QuickBooks Desktop (IIF)
Expand All @@ -103,7 +118,10 @@ <h3 class="landing-v2--section-heading">
<!-- Direct -->
<div *ngIf="isAppShown('QBD_DIRECT')" class="landing-v2--accounting-app"
(click)="openInAppIntegration(InAppIntegration.QBD_DIRECT)">
<img src="assets/logos/quickbooks-logo.png" />
<div class="tw-flex tw-justify-between">
<img src="assets/logos/quickbooks-logo.png" class="!tw-h-[30.7px]" />
<button class="btn-connect">Connect</button>
</div>
<span class="landing-v2--accounting-app-name tw-items-center tw-gap-4">
<div>
QuickBooks Desktop (Web Connector)
Expand All @@ -114,7 +132,10 @@ <h3 class="landing-v2--section-heading">
</div>
<div *ngIf="isAppShown('SAGE300')" class="landing-v2--accounting-app"
(click)="openInAppIntegration(InAppIntegration.SAGE300)">
<img src="assets/logos/sage300-logo.svg" />
<div class="tw-flex tw-justify-between">
<img src="assets/logos/sage300-logo.png" class="tw-py-[4px]" />
<button class="btn-connect">Connect</button>
</div>
<span class="landing-v2--accounting-app-name tw-items-center tw-gap-4">
<div>
Sage 300 CRE
Expand All @@ -126,7 +147,10 @@ <h3 class="landing-v2--section-heading">
</div>
<div *ngIf="isAppShown('BUSINESS_CENTRAL')" class="landing-v2--accounting-app"
(click)="openInAppIntegration(InAppIntegration.BUSINESS_CENTRAL)">
<img src="assets/logos/BusinessCentral-logo.svg" />
<div class="tw-flex tw-justify-between">
<img src="assets/logos/BusinessCentral-logo.svg" />
<button class="btn-connect">Connect</button>
</div>
<span class="landing-v2--accounting-app-name tw-items-center tw-gap-4">
<div>
Dynamics 365 Business Central
Expand All @@ -139,7 +163,10 @@ <h3 class="landing-v2--section-heading">

<div *ngIf="isAppShown('BAMBOO_HR')">
<div class="landing-v2--accounting-app" (click)="openInAppIntegration(InAppIntegration.BAMBOO_HR)">
<img src="assets/logos/bamboo-hr-logo.svg" />
<div class="tw-flex tw-justify-between">
<img src="assets/logos/bamboo-hr-logo.png" />
<button class="btn-connect">Connect</button>
</div>
<div>
<span class="landing-v2--accounting-app-name">
BambooHR
Expand All @@ -153,7 +180,10 @@ <h3 class="landing-v2--section-heading">

<div *ngIf="isAppShown('TRAVELPERK')">
<div class="landing-v2--accounting-app" (click)="openInAppIntegration(InAppIntegration.TRAVELPERK)">
<img src="assets/logos/travelperk-logo.svg" />
<div class="tw-flex tw-justify-between">
<img src="assets/logos/travelperk-logo.png" class="tw-py-[5px]" />
<button class="btn-connect">Connect</button>
</div>
<div>
<span class="landing-v2--accounting-app-name">
TravelPerk
Expand Down
14 changes: 13 additions & 1 deletion src/app/integrations/landing-v2/landing-v2.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,16 @@
}

&--accounting-app {
@apply tw-h-full tw-flex tw-flex-col tw-p-4 tw-gap-4 tw-items-start tw-justify-evenly tw-cursor-pointer tw-rounded-8-px tw-border tw-border-separator tw-bg-white;
@apply tw-h-full tw-flex tw-flex-col tw-p-4 tw-gap-4 tw-justify-evenly tw-cursor-pointer tw-rounded-8-px tw-border tw-border-separator tw-bg-white;
@apply tw-transition-shadow;

img {
@apply tw-h-[40px];
}

.btn-connect {
@apply tw-text-14-px tw-hidden;
}
}

&--accounting-app-name {
Expand Down Expand Up @@ -57,4 +62,11 @@
&--other-integration-app {
@apply tw-flex tw-items-center tw-justify-center;
}
}

.landing-v2--accounting-app:hover {
box-shadow: 0px 4px 4px 0px rgba(44, 48, 78, 0.10);
.btn-connect {
@apply tw-block;
}
}

0 comments on commit dd8b2e5

Please sign in to comment.