Goatworks/Capital
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 Optimized homepage

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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;
}

2
nuxt.config.ts
View File

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

66
pages/index.vue
View File

@ -1,63 +1,23 @@
<template>
<product-carousel class="carousel-section" :products="products as any[]" />
<v-container>
<v-row class="content-section">
<v-col cols="12" md="6">
<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">
<v-col cols="12" md="4" class="d-flex align-center">
<div>
<h1 class="text-4xl font-bold">Welcome to Solsynth</h1>
<p class="text-lg mt-4">
We specialize in creating software that delights users. Our passion is to develop intuitive, efficient, and
beautiful software that everyone loves to use.
<h1 class="text-4xl font-bold">Solsynth</h1>
<p class="text-lg mt-3">
An energetic software company that create wonderful software which everyone love.
</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>
<v-btn prepend-icon="mdi-magnify" color="primary" class="mt-4 mx-[-8px]">Discover More</v-btn>
</div>
</v-col>
</v-row>
<v-row class="content-section">
<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-col cols="12" md="8">
<v-card>
<product-carousel class="carousel-section" :products="products as any[]" />
</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-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-container>
</template>
@ -72,7 +32,7 @@ const { data: products } = await useAsyncData("products", () => queryContent("/p
}
.content-section {
margin-top: 8rem;
margin-bottom: 8rem;
margin-top: 7.5rem;
margin-bottom: 7.5rem;
}
</style>