💄 Optimized homepage

This commit is contained in:
LittleSheep 2024-08-10 13:47:34 +08:00
parent b923f59fb4
commit bd76dc2ba8
3 changed files with 24 additions and 54 deletions

8
assets/index.css Normal file
View File

@ -0,0 +1,8 @@
html, body {
padding: 0;
margin: 0;
}
html, body, #app, .v-application {
overflow: auto !important;
}

View File

@ -4,6 +4,8 @@ import vuetify, { transformAssetUrls } from "vite-plugin-vuetify"
export default defineNuxtConfig({ export default defineNuxtConfig({
devtools: { enabled: true }, devtools: { enabled: true },
css: ["@/assets/index.css"],
app: { app: {
head: { head: {
title: "Solsynth LLC", title: "Solsynth LLC",
@ -47,4 +49,4 @@ export default defineNuxtConfig({
}, },
compatibilityDate: "2024-08-10", compatibilityDate: "2024-08-10",
}) })

View File

@ -1,63 +1,23 @@
<template> <template>
<product-carousel class="carousel-section" :products="products as any[]" />
<v-container> <v-container>
<v-row class="content-section"> <v-row class="content-section">
<v-col cols="12" md="6"> <v-col cols="12" md="4" class="d-flex align-center">
<v-img src="/assets/logo.png" alt="Logo" max-width="300"></v-img>
</v-col>
<v-col cols="12" md="6" class="d-flex align-center">
<div> <div>
<h1 class="text-4xl font-bold">Welcome to Solsynth</h1> <h1 class="text-4xl font-bold">Solsynth</h1>
<p class="text-lg mt-4"> <p class="text-lg mt-3">
We specialize in creating software that delights users. Our passion is to develop intuitive, efficient, and An energetic software company that create wonderful software which everyone love.
beautiful software that everyone loves to use. </p>
<p class="text-grey mt-2">
See some of our products just there
<v-icon icon="mdi-arrow-right" size="16" class="mb-0.5" />
</p> </p>
<v-btn prepend-icon="mdi-magnify" color="primary" class="mt-4 mx-[-8px]">Discover More</v-btn>
</div> </div>
</v-col> </v-col>
</v-row> <v-col cols="12" md="8">
<v-card>
<v-row class="content-section"> <product-carousel class="carousel-section" :products="products as any[]" />
<v-col cols="12" class="text-center">
<h2 class="text-3xl font-bold">Our Expertise</h2>
<p class="text-lg mt-2">We excel in a wide range of software development services.</p>
</v-col>
<v-col cols="12" md="4" class="d-flex">
<v-card class="pa-4">
<v-icon large class="mb-4">mdi-laptop</v-icon>
<h3 class="headline">Custom Software Development</h3>
<p>
We design and develop custom software solutions tailored to your business needs, ensuring high performance
and scalability.
</p>
</v-card> </v-card>
</v-col> </v-col>
<v-col cols="12" md="4" class="d-flex">
<v-card class="pa-4">
<v-icon large class="mb-4">mdi-cellphone</v-icon>
<h3 class="headline">Mobile App Development</h3>
<p>Our team creates user-friendly and feature-rich mobile applications for both iOS and Android platforms.</p>
</v-card>
</v-col>
<v-col cols="12" md="4" class="d-flex">
<v-card class="pa-4">
<v-icon large class="mb-4">mdi-web</v-icon>
<h3 class="headline">Web Application Development</h3>
<p>
We build responsive and interactive web applications that provide a seamless user experience across all
devices.
</p>
</v-card>
</v-col>
</v-row>
<v-row class="content-section">
<v-col cols="12" class="text-center">
<h2 class="text-3xl font-bold">Get in Touch</h2>
<p class="text-lg mt-2">Ready to start your next project with us? We would love to hear from you.</p>
<v-btn class="mt-3" color="primary">Contact Us</v-btn>
</v-col>
</v-row> </v-row>
</v-container> </v-container>
</template> </template>
@ -72,7 +32,7 @@ const { data: products } = await useAsyncData("products", () => queryContent("/p
} }
.content-section { .content-section {
margin-top: 8rem; margin-top: 7.5rem;
margin-bottom: 8rem; margin-bottom: 7.5rem;
} }
</style> </style>