Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply premium BusinessDetailsView redesign: adapted to app colors, added Playfair Display, and removed map route button

Browse Source
This commit is contained in:
Johan Samudio
2026-03-01 11:04:18 -05:00
parent 1140a8adf6
commit fc481cea6f
1 changed files with 14 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/views/BusinessDetailsView.vue
View File

@ -45,17 +45,6 @@ function getImageUrl(path: string | null | undefined) {
const goBack = () => router.back() const goBack = () => router.back()
function handleDirections() {
analyticsService.logEvent({
event_name: 'promo_click',
item_id: 'directions_' + business.value?.name,
properties: {
business_id: business.value?.id,
action: 'get_directions'
}
})
window.open(`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(business.value?.address || '')}`, '_blank')
}
</script> </script>
<template> <template>
@ -155,15 +144,6 @@ function handleDirections() {
<p>{{ business.social_media }}</p> <p>{{ business.social_media }}</p>
</div> </div>
</div> </div>
<div class="info-card">
<span class="material-icons">directions</span>
<div class="info-text">
<h4>Cómo llegar</h4>
<button class="track-directions-btn" @click="handleDirections">
Ver mapa y ruta
</button>
</div>
</div>
</div> </div>
<!-- Offers Section --> <!-- Offers Section -->
@ -208,6 +188,8 @@ function handleDirections() {
font-family: 'Playfair Display', serif; font-family: 'Playfair Display', serif;
} }
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&display=swap');
/* Hero Section */ /* Hero Section */
.hero-section { .hero-section {
position: relative; position: relative;
@ -300,12 +282,13 @@ function handleDirections() {
/* Content */ /* Content */
.details-container { .details-container {
max-width: 1000px; max-width: 1000px;
margin: -40px auto 0; margin: -60px auto 0;
position: relative; position: relative;
background: var(--bg-primary); background: var(--bg-primary);
border-radius: 30px 30px 0 0; border-top: 1px solid var(--border-color);
border-radius: 40px 40px 0 0;
padding: 60px 40px; padding: 60px 40px;
box-shadow: 0 -20px 40px rgba(0,0,0,0.1); box-shadow: 0 -20px 60px rgba(0,0,0,0.5);
} }
.premium-story { .premium-story {
@ -349,9 +332,10 @@ function handleDirections() {
} }
.divider { .divider {
width: 100%; width: 40px;
height: 1px; height: 3px;
background: var(--border-color); background: var(--active-color);
border-radius: 2px;
} }
.highlight-item p { .highlight-item p {
@ -378,7 +362,10 @@ function handleDirections() {
.info-card .material-icons { .info-card .material-icons {
color: var(--active-color); color: var(--active-color);
font-size: 2rem; font-size: 1.8rem;
background: var(--active-bg);
padding: 10px;
border-radius: 12px;
} }
.info-text h4 { .info-text h4 {