Creazione Nutriben-natoropatia.it
This commit is contained in:
Surya Paolo
144
src/root/nutriben/home/home.scss
Executable file
144
src/root/nutriben/home/home.scss
Executable file
@@ -0,0 +1,144 @@
|
||||
// Variabili locali (puoi spostarle in un _variables.scss globale se usate altrove)
|
||||
$primary-color: #10b981; // verde emerald
|
||||
$secondary-color: #3b82f6; // blue
|
||||
$text-color: #111827;
|
||||
$gray-dark: #4b5563;
|
||||
$bg-light: #f9fafb;
|
||||
|
||||
@mixin center-flex {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@mixin glass-effect {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
@mixin shadow-hover {
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Hero Section
|
||||
section.relative.overflow-hidden {
|
||||
padding-bottom: 4rem;
|
||||
|
||||
h1 {
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.03em;
|
||||
background: linear-gradient(to right, $primary-color, $secondary-color);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 2.5rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 3.25rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.q-btn {
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 0.75rem;
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.q-btn.color-positive {
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: darken($primary-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.q-btn.outline {
|
||||
background: transparent;
|
||||
border: 2px solid $primary-color;
|
||||
color: $primary-color;
|
||||
|
||||
&:hover {
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Courses Section
|
||||
section.py-16.bg-white {
|
||||
.bg-white.rounded-lg.shadow-md {
|
||||
@include shadow-hover;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.p-6 {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.95rem;
|
||||
color: $gray-dark;
|
||||
}
|
||||
|
||||
.bg-emerald-50.px-6.py-4 {
|
||||
border-top: 1px solid #d1fae5;
|
||||
}
|
||||
|
||||
button {
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CTA Section
|
||||
section.py-16.bg-emerald-600 {
|
||||
h2 {
|
||||
font-weight: 800;
|
||||
font-size: 2.25rem;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.q-btn {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 0.75rem;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.q-btn.text-color-positive {
|
||||
background: white;
|
||||
color: $primary-color;
|
||||
|
||||
&:hover {
|
||||
background: lighten(white, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
55
src/root/nutriben/home/home.ts
Normal file
55
src/root/nutriben/home/home.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
import { ref } from 'vue'
|
||||
|
||||
import {
|
||||
defineComponent, onMounted, ref,
|
||||
} from 'vue'
|
||||
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
interface Course {
|
||||
title: string
|
||||
description: string
|
||||
duration: string
|
||||
price: string
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Home',
|
||||
components: {},
|
||||
setup() {
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const courses = ref<Course[]>([
|
||||
{
|
||||
title: "Corso Base di Naturopatia",
|
||||
description: "Scopri le basi della salute naturale e dell'equilibrio corporeo.",
|
||||
duration: "6 mesi",
|
||||
price: "€800"
|
||||
},
|
||||
{
|
||||
title: "Alimentazione Naturale",
|
||||
description: "Impara a utilizzare il cibo come medicina attraverso una dieta bilanciata.",
|
||||
duration: "3 mesi",
|
||||
price: "€500"
|
||||
},
|
||||
{
|
||||
title: "Aromaterapia Avanzata",
|
||||
description: "Approfondisci l'uso degli oli essenziali per il benessere fisico e mentale.",
|
||||
duration: "4 mesi",
|
||||
price: "€600"
|
||||
},
|
||||
{
|
||||
title: "Riflessologia Plantare",
|
||||
description: "Tecnica di massaggio che stimola i punti riflessi dei piedi per ristabilire l’equilibrio energetico.",
|
||||
duration: "5 mesi",
|
||||
price: "€700"
|
||||
}
|
||||
])
|
||||
|
||||
return {
|
||||
courses
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
81
src/root/nutriben/home/home.vue
Normal file
81
src/root/nutriben/home/home.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<q-page class="bg-white q-ma-md q-pa-md">
|
||||
<!-- Hero Section -->
|
||||
<section class="relative overflow-hidden bg-gradient-to-r from-emerald-50 to-blue-50">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-emerald-100 to-blue-50"></div>
|
||||
<div class="container mx-auto px-4 py-16 md:py-24 relative z-10">
|
||||
<div class="flex flex-col md:flex-row items-center justify-center">
|
||||
<div class="md:w-1/2 mb-10 md:mb-0">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-gray-900 leading-tight mb-4">
|
||||
Nutriben - Sentiero Natura
|
||||
</h1>
|
||||
<p class="text-h6 text-center text-gray-700 max-w-lg mb-6">
|
||||
Corsi di Naturopatia
|
||||
</p>
|
||||
<div class="mt-4 flex flex-wrap gap-4 justify-center">
|
||||
<q-btn color="positive" label="Iscriviti ora" class="px-6 py-3 rounded-md transform hover:scale-105 transition-all duration-300" />
|
||||
<q-btn outline color="positive" label="Scopri i corsi" class="px-6 py-3 rounded-md" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2 flex justify-center q-mt-lg">
|
||||
<img src="images/nutriben-logo.png" width="300" height="300" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Courses Section -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center max-w-3xl mx-auto mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900">I Nostri Corsi</h2>
|
||||
<p class="mt-4 text-lg text-gray-600">
|
||||
Offriamo corsi completi e certificati per diventare professionisti nel campo della naturopatia.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div v-for="(course, index) in courses" :key="index" class="bg-white rounded-lg shadow-md overflow-hidden transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold text-gray-900">{{ course.title }}</h3>
|
||||
<p class="mt-2 text-gray-600">{{ course.description }}</p>
|
||||
<div class="mt-4 pt-4 border-t border-gray-200 flex justify-between text-sm">
|
||||
<span class="text-gray-500">Durata: {{ course.duration }}</span>
|
||||
<span class="font-semibold text-emerald-600">{{ course.price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-emerald-50 px-6 py-4">
|
||||
<button class="text-emerald-600 font-medium hover:text-emerald-800 transition-colors duration-300">
|
||||
Scopri di più →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-16 text-center">
|
||||
<q-btn color="positive" label="Visualizza tutti i corsi" class="px-6 py-3 rounded-md" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-16 bg-emerald-600 text-white">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold">Pronto per iniziare il tuo viaggio nella naturopatia?</h2>
|
||||
<p class="mt-4 text-xl opacity-90 max-w-2xl mx-auto">
|
||||
Unisciti ai nostri corsi oggi e trasforma la tua passione per il benessere in una carriera significativa.
|
||||
</p>
|
||||
<div class="mt-8">
|
||||
<q-btn color="white" text-color="positive" label="Iscriviti ora" class="px-8 py-4 rounded-md hover:bg-gray-100 transition-colors duration-300" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./home.ts">
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './home.scss';
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user