Initial production backup
This commit is contained in:
Tesscorp
+24
@@ -0,0 +1,24 @@
|
|||||||
|
# build output
|
||||||
|
dist/
|
||||||
|
|
||||||
|
# generated types
|
||||||
|
.astro/
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# logs
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# environment variables
|
||||||
|
.env
|
||||||
|
.env.production
|
||||||
|
|
||||||
|
# macOS-specific files
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# jetbrains setting folder
|
||||||
|
.idea/
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
23
|
||||||
Vendored
+4
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["astro-build.astro-vscode"],
|
||||||
|
"unwantedRecommendations": []
|
||||||
|
}
|
||||||
Vendored
+11
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"command": "./node_modules/.bin/astro dev",
|
||||||
|
"name": "Development server",
|
||||||
|
"request": "launch",
|
||||||
|
"type": "node-terminal"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,168 @@
|
|||||||
|
---
|
||||||
|
name: Heroica Health Systems
|
||||||
|
colors:
|
||||||
|
surface: '#f7f9fb'
|
||||||
|
surface-dim: '#d8dadc'
|
||||||
|
surface-bright: '#f7f9fb'
|
||||||
|
surface-container-lowest: '#ffffff'
|
||||||
|
surface-container-low: '#f2f4f6'
|
||||||
|
surface-container: '#eceef0'
|
||||||
|
surface-container-high: '#e6e8ea'
|
||||||
|
surface-container-highest: '#e0e3e5'
|
||||||
|
on-surface: '#191c1e'
|
||||||
|
on-surface-variant: '#45464d'
|
||||||
|
inverse-surface: '#2d3133'
|
||||||
|
inverse-on-surface: '#eff1f3'
|
||||||
|
outline: '#76777d'
|
||||||
|
outline-variant: '#c6c6cd'
|
||||||
|
surface-tint: '#565e74'
|
||||||
|
primary: '#000000'
|
||||||
|
on-primary: '#ffffff'
|
||||||
|
primary-container: '#131b2e'
|
||||||
|
on-primary-container: '#7c839b'
|
||||||
|
inverse-primary: '#bec6e0'
|
||||||
|
secondary: '#0050cc'
|
||||||
|
on-secondary: '#ffffff'
|
||||||
|
secondary-container: '#0266ff'
|
||||||
|
on-secondary-container: '#f9f7ff'
|
||||||
|
tertiary: '#000000'
|
||||||
|
on-tertiary: '#ffffff'
|
||||||
|
tertiary-container: '#001e2c'
|
||||||
|
on-tertiary-container: '#008ebf'
|
||||||
|
error: '#ba1a1a'
|
||||||
|
on-error: '#ffffff'
|
||||||
|
error-container: '#ffdad6'
|
||||||
|
on-error-container: '#93000a'
|
||||||
|
primary-fixed: '#dae2fd'
|
||||||
|
primary-fixed-dim: '#bec6e0'
|
||||||
|
on-primary-fixed: '#131b2e'
|
||||||
|
on-primary-fixed-variant: '#3f465c'
|
||||||
|
secondary-fixed: '#dae1ff'
|
||||||
|
secondary-fixed-dim: '#b3c5ff'
|
||||||
|
on-secondary-fixed: '#001849'
|
||||||
|
on-secondary-fixed-variant: '#003fa4'
|
||||||
|
tertiary-fixed: '#c4e7ff'
|
||||||
|
tertiary-fixed-dim: '#7bd0ff'
|
||||||
|
on-tertiary-fixed: '#001e2c'
|
||||||
|
on-tertiary-fixed-variant: '#004c69'
|
||||||
|
background: '#f7f9fb'
|
||||||
|
on-background: '#191c1e'
|
||||||
|
surface-variant: '#e0e3e5'
|
||||||
|
typography:
|
||||||
|
display-lg:
|
||||||
|
fontFamily: Inter
|
||||||
|
fontSize: 48px
|
||||||
|
fontWeight: '700'
|
||||||
|
lineHeight: '1.1'
|
||||||
|
letterSpacing: -0.02em
|
||||||
|
display-md:
|
||||||
|
fontFamily: Inter
|
||||||
|
fontSize: 36px
|
||||||
|
fontWeight: '700'
|
||||||
|
lineHeight: '1.2'
|
||||||
|
letterSpacing: -0.02em
|
||||||
|
headline-lg:
|
||||||
|
fontFamily: Inter
|
||||||
|
fontSize: 30px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: '1.3'
|
||||||
|
letterSpacing: -0.01em
|
||||||
|
headline-md:
|
||||||
|
fontFamily: Inter
|
||||||
|
fontSize: 24px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: '1.4'
|
||||||
|
body-lg:
|
||||||
|
fontFamily: Inter
|
||||||
|
fontSize: 18px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: '1.6'
|
||||||
|
body-md:
|
||||||
|
fontFamily: Inter
|
||||||
|
fontSize: 16px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: '1.6'
|
||||||
|
label-lg:
|
||||||
|
fontFamily: Inter
|
||||||
|
fontSize: 14px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: '1.2'
|
||||||
|
letterSpacing: 0.01em
|
||||||
|
label-md:
|
||||||
|
fontFamily: Inter
|
||||||
|
fontSize: 12px
|
||||||
|
fontWeight: '500'
|
||||||
|
lineHeight: '1.2'
|
||||||
|
letterSpacing: 0.02em
|
||||||
|
rounded:
|
||||||
|
sm: 0.25rem
|
||||||
|
DEFAULT: 0.5rem
|
||||||
|
md: 0.75rem
|
||||||
|
lg: 1rem
|
||||||
|
xl: 1.5rem
|
||||||
|
full: 9999px
|
||||||
|
spacing:
|
||||||
|
unit: 4px
|
||||||
|
gutter: 24px
|
||||||
|
margin: 32px
|
||||||
|
container-max-width: 1280px
|
||||||
|
bento-gap: 16px
|
||||||
|
---
|
||||||
|
|
||||||
|
## Brand & Style
|
||||||
|
|
||||||
|
The visual identity of this design system centers on **Modern Corporate Minimalism**, tailored specifically for a high-efficiency medical environment. The brand personality is rooted in the intersection of clinical excellence and technological advancement. It aims to evoke a sense of calm reliability and cutting-edge precision.
|
||||||
|
|
||||||
|
The aesthetic utilizes a **Bento UI** layout to organize complex medical services into digestible, modular segments. This approach communicates transparency and order, reflecting the clinic's commitment to streamlined patient care. High-quality medical photography should be integrated within the grid tiles, using a "human-centric" lens that highlights professional care and advanced medical equipment.
|
||||||
|
|
||||||
|
## Colors
|
||||||
|
|
||||||
|
This design system utilizes a palette of **Professional Medical Blues** and **Clean Whites** to establish institutional trust.
|
||||||
|
|
||||||
|
- **Primary (Deep Navy):** Used for typography and primary branding to convey authority and stability.
|
||||||
|
- **Secondary (Tech-Blue):** A vibrant, saturated blue used as a digital-first accent for call-to-actions, signaling innovation and high-tech solutions.
|
||||||
|
- **Tertiary (Sky Blue):** A soft supporting blue used for illustrative elements or secondary states.
|
||||||
|
- **Neutral (Slate/Gray):** A range of cool grays (from #F8FAFC to #64748B) provides the structural foundation for backgrounds and borders, ensuring the interface remains airy and uncluttered.
|
||||||
|
|
||||||
|
## Typography
|
||||||
|
|
||||||
|
The choice of **Inter** as the sole typeface reinforces the "Modern Corporate" aesthetic. It is a highly functional, systematic font that provides exceptional legibility in a medical context where clarity of information is paramount.
|
||||||
|
|
||||||
|
Headlines should utilize tighter letter-spacing and heavier weights to create a sense of presence. Body text is set with generous line-height to ensure readability for patients of all ages. Small labels and metadata should use medium weights to maintain visibility against soft gray backgrounds.
|
||||||
|
|
||||||
|
## Layout & Spacing
|
||||||
|
|
||||||
|
The layout follows a strict **Fixed Grid** model optimized for a **Bento UI** presentation. The central content area spans up to 1280px, utilizing a 12-column grid system.
|
||||||
|
|
||||||
|
The "Bento" philosophy requires that elements be contained within distinct, card-like containers. These tiles should span varying column counts (e.g., 3, 4, 6, or 12) to create visual hierarchy. A consistent `16px` gap between tiles ensures the grid feels cohesive yet breathable. Internal padding within these tiles should be generous (minimum 24px) to uphold the minimalist aesthetic.
|
||||||
|
|
||||||
|
## Elevation & Depth
|
||||||
|
|
||||||
|
To maintain a clean, professional appearance, this design system avoids heavy shadows. Instead, it utilizes **Ambient Shadows** and **Tonal Layering**:
|
||||||
|
|
||||||
|
1. **Base Layer:** The primary background is the neutral white or very light gray.
|
||||||
|
2. **Container Layer:** Bento tiles are white, set against a light gray background, or have a subtle `1px` border in a soft slate tone.
|
||||||
|
3. **Elevation:** When a tile or button requires focus, use an ultra-diffused shadow (Blur: 20px, Opacity: 4%, Color: Primary Navy). This creates a "lifted" effect without the clutter of traditional skeuomorphism.
|
||||||
|
|
||||||
|
## Shapes
|
||||||
|
|
||||||
|
The shape language is defined by **Rounded** geometry. A radius of `0.5rem` (8px) is the standard for small components like inputs and buttons, while larger bento containers and cards should use `1.5rem` (24px) to create a friendly, approachable, and modern feel. Icons should follow this logic, avoiding sharp corners in favor of slightly rounded stroke terminals.
|
||||||
|
|
||||||
|
## Components
|
||||||
|
|
||||||
|
### Bento Cards
|
||||||
|
The core of the interface. Each card must have a distinct purpose (e.g., "Book Appointment," "Lab Results," "Our Doctors"). Use high-quality medical photography as a background for 1-2 hero tiles, using a dark overlay to ensure white typography remains legible.
|
||||||
|
|
||||||
|
### Buttons
|
||||||
|
- **Primary:** Solid Secondary Blue with White text. Rounded corners (8px).
|
||||||
|
- **Secondary:** Transparent with a 1px Slate border and Navy text.
|
||||||
|
- **Icon Buttons:** Circular or slightly rounded squares used for navigation within tiles.
|
||||||
|
|
||||||
|
### Inputs & Form Fields
|
||||||
|
Fields should have a soft gray background (#F1F5F9) and no border, except when focused, at which point a 2px Tech-Blue border appears. This "flush" look keeps the forms feeling modern and efficient.
|
||||||
|
|
||||||
|
### Chips & Badges
|
||||||
|
Used for status indicators (e.g., "Available," "Urgent"). These should use low-saturation versions of the status colors (soft greens, soft reds) with high-saturation text to maintain the "clean" medical look.
|
||||||
|
|
||||||
|
### Navigation
|
||||||
|
A top-bar navigation that is pinned, using a subtle backdrop-blur (Glassmorphism effect) to maintain depth as the user scrolls through the bento grid.
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
# Astro Starter Kit: Basics
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm create astro@latest -- --template basics
|
||||||
|
```
|
||||||
|
|
||||||
|
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||||
|
|
||||||
|
## 🚀 Project Structure
|
||||||
|
|
||||||
|
Inside of your Astro project, you'll see the following folders and files:
|
||||||
|
|
||||||
|
```text
|
||||||
|
/
|
||||||
|
├── public/
|
||||||
|
│ └── favicon.svg
|
||||||
|
├── src
|
||||||
|
│ ├── assets
|
||||||
|
│ │ └── astro.svg
|
||||||
|
│ ├── components
|
||||||
|
│ │ └── Welcome.astro
|
||||||
|
│ ├── layouts
|
||||||
|
│ │ └── Layout.astro
|
||||||
|
│ └── pages
|
||||||
|
│ └── index.astro
|
||||||
|
└── package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
|
||||||
|
|
||||||
|
## 🧞 Commands
|
||||||
|
|
||||||
|
All commands are run from the root of the project, from a terminal:
|
||||||
|
|
||||||
|
| Command | Action |
|
||||||
|
| :------------------------ | :----------------------------------------------- |
|
||||||
|
| `npm install` | Installs dependencies |
|
||||||
|
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||||
|
| `npm run build` | Build your production site to `./dist/` |
|
||||||
|
| `npm run preview` | Preview your build locally, before deploying |
|
||||||
|
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||||
|
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||||
|
|
||||||
|
## 👀 Want to learn more?
|
||||||
|
|
||||||
|
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
// @ts-check
|
||||||
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
||||||
|
// https://astro.build/config
|
||||||
|
export default defineConfig({});
|
||||||
+28
@@ -0,0 +1,28 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Domain Default page</title>
|
||||||
|
<meta name="copyright" content="Copyright 1999-2025. WebPros International GmbH. All rights reserved.">
|
||||||
|
<script src="https://assets.plesk.com/static/default-website-content/public/default-website-index.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h2>What is Plesk</h2>
|
||||||
|
<p>
|
||||||
|
Plesk is a <a href="https://www.plesk.com">hosting panel</a> with simple and secure web server, website and web apps management tools. It is specially designed to help web professionals manage web, DNS, mail and other services through a comprehensive and user-friendly GUI. Plesk is about intelligently managing servers, apps, websites and hosting businesses, on both traditional and cloud hosting.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a href="https://docs.plesk.com/try-plesk-now/">Try Plesk Now!</a>
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://docs.plesk.com/en-US/obsidian/">Plesk Guides</a></li>
|
||||||
|
<li><a href="https://support.plesk.com/hc/en-us">Knowledge Base</a></li>
|
||||||
|
<li><a href="https://talk.plesk.com/">Forum</a></li>
|
||||||
|
<li><a href="https://www.plesk.com/blog/">Blog</a></li>
|
||||||
|
<li><a href="https://www.youtube.com/channel/UCeU-_6YHGQFcVSHLbEXLNlA/playlists">Video Guides</a></li>
|
||||||
|
<li><a href="https://www.facebook.com/Plesk">Facebook</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>Do you host WordPress sites outside of Plesk? Try <a href="https://wpguardian.io/">WP Guardian</a> - it provides complete visibility into the health of your WordPress websites in one place and keeps them protected with flexible updates management</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Generated
+4759
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"name": "beneficial-binary",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=22.12.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview",
|
||||||
|
"astro": "astro"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"astro": "^6.2.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 655 B |
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||||
|
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||||
|
<style>
|
||||||
|
path { fill: #000; }
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
path { fill: #FFF; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 749 B |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>
|
||||||
|
After Width: | Height: | Size: 2.8 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,94 @@
|
|||||||
|
---
|
||||||
|
---
|
||||||
|
<section class="about-section" id="nosotros">
|
||||||
|
<div class="container">
|
||||||
|
<div class="bento-grid about-grid">
|
||||||
|
<div class="bento-card about-image-card">
|
||||||
|
<!-- NOSOTROS image -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bento-card about-content-card">
|
||||||
|
<div class="about-header">
|
||||||
|
<div class="icon-wrapper">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
||||||
|
<circle cx="9" cy="7" r="4"></circle>
|
||||||
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
||||||
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h2 class="display-md">Nosotros</h2>
|
||||||
|
</div>
|
||||||
|
<p class="body-lg text-on-surface-variant about-text">
|
||||||
|
Somos una empresa orientada a ofrecer un servicio integral de abastecimiento de productos y servicios en general a dependencias gubernamentales e industria.
|
||||||
|
</p>
|
||||||
|
<p class="body-md text-on-surface-variant about-text">
|
||||||
|
Nos dedicamos a la compra, venta, distribución de mercancía en general, así como al arrendamiento y venta de vehículos especializados y embarcaciones de rescate.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.about-section {
|
||||||
|
padding: 32px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.about-grid {
|
||||||
|
grid-template-columns: repeat(12, 1fr);
|
||||||
|
}
|
||||||
|
.about-image-card {
|
||||||
|
grid-column: span 5;
|
||||||
|
}
|
||||||
|
.about-content-card {
|
||||||
|
grid-column: span 7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-content-card {
|
||||||
|
padding: 48px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background-color: var(--color-secondary-fixed);
|
||||||
|
color: var(--color-secondary);
|
||||||
|
border-radius: var(--rounded-full);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-header h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-text {
|
||||||
|
margin: 0 0 24px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-image-card {
|
||||||
|
min-height: 300px;
|
||||||
|
background-image: url('/NOSOTROS.webp');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
---
|
||||||
|
const clients = [
|
||||||
|
"CIEGSA.png", "CRUZ_ROJA.png", "FGE.png", "HIDALGO.png",
|
||||||
|
"LICONSA.jpg", "MARINA_ALTAMIRA.png", "MARINA_DOS_BOCAS.png",
|
||||||
|
"MARINA_GUAYMAS.png", "NUVOIL.png", "PEGSA.png", "PEMEX.png",
|
||||||
|
"POLICIA_FEDERAL.png", "PREVITA.png", "TLAXCALA.png"
|
||||||
|
];
|
||||||
|
---
|
||||||
|
|
||||||
|
<section class="clients-section" id="clientes">
|
||||||
|
<div class="container">
|
||||||
|
<div class="clients-header">
|
||||||
|
<span class="label-lg text-secondary overline-text">NUESTROS CLIENTES</span>
|
||||||
|
<h2 class="display-md">Trabajamos con las mejores instituciones</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clients-grid">
|
||||||
|
{clients.map((client) => (
|
||||||
|
<div class="client-card">
|
||||||
|
<img src={`/clients/${client}`} alt={`Cliente ${client.split('.')[0]}`} class="client-logo" loading="lazy" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.clients-section {
|
||||||
|
padding: 64px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clients-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overline-text {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clients-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.clients-grid {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.clients-grid {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.clients-grid {
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 24px;
|
||||||
|
height: 120px;
|
||||||
|
background-color: var(--color-surface-container-lowest);
|
||||||
|
border-radius: var(--rounded-md);
|
||||||
|
border: 1px solid var(--color-surface-variant);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-card:hover {
|
||||||
|
box-shadow: var(--shadow-ambient);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
border-color: var(--color-secondary-fixed-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-logo {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,242 @@
|
|||||||
|
---
|
||||||
|
---
|
||||||
|
<section class="contact-section" id="contacto">
|
||||||
|
<div class="container">
|
||||||
|
<div class="bento-grid contact-grid">
|
||||||
|
<!-- Contact Info Card -->
|
||||||
|
<div class="bento-card info-card">
|
||||||
|
<h2 class="display-md text-on-primary">Contáctanos</h2>
|
||||||
|
<p class="body-md text-on-primary-container mb-8">
|
||||||
|
Estamos listos para atender tus requerimientos médicos e industriales.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="contact-methods">
|
||||||
|
<div class="contact-method">
|
||||||
|
<div class="method-icon">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
|
||||||
|
<circle cx="12" cy="10" r="3"></circle>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="method-details">
|
||||||
|
<span class="label-lg text-on-primary">Clínica del marino:</span>
|
||||||
|
<span class="body-md text-on-primary-container">AV. 16 DE SEPTIEMBRE 296 FRACCIONAMIENTO FAROS CP 91709, VERACRUZ, VER.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-method">
|
||||||
|
<div class="method-icon">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="method-details">
|
||||||
|
<span class="label-lg text-on-primary">Teléfono:</span>
|
||||||
|
<span class="body-md text-on-primary-container">(+52) 229 192 6475</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-method">
|
||||||
|
<div class="method-icon">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
||||||
|
<polyline points="22,6 12,13 2,6"></polyline>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="method-details">
|
||||||
|
<span class="label-lg text-on-primary">Correo:</span>
|
||||||
|
<span class="body-md text-on-primary-container">administracion@la-heroica.com</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="portal-cita" style="margin-top: 32px;">
|
||||||
|
<p class="body-md text-on-primary-container" style="margin: 0;">
|
||||||
|
Realiza tu cita a través del portal en<br/>
|
||||||
|
<a href="https://cp.semar.gob.mx/dgmm/citas-sitetmar/internet/cita" target="_blank" class="text-on-primary" style="text-decoration: underline;">https://cp.semar.gob.mx/dgmm/citas-sitetmar/internet/cita</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact Form Card -->
|
||||||
|
<div class="bento-card form-card">
|
||||||
|
<h2 class="headline-md mb-6">Solicitar Cotización o Cita</h2>
|
||||||
|
<form action="https://formsubmit.co/soporte@tesscorp.com.mx" method="POST" class="contact-form">
|
||||||
|
<input type="hidden" name="_next" id="next-url" value="">
|
||||||
|
<input type="hidden" name="_captcha" value="false">
|
||||||
|
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="name" class="label-md">Nombre Completo</label>
|
||||||
|
<input type="text" id="name" name="name" placeholder="Ej. Juan Pérez" class="form-input" required />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="company" class="label-md">Empresa (Opcional)</label>
|
||||||
|
<input type="text" id="company" name="company" placeholder="Nombre de la empresa" class="form-input" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="phone" class="label-md">Teléfono</label>
|
||||||
|
<input type="tel" id="phone" name="phone" placeholder="10 dígitos" class="form-input" required />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="area" class="label-md">Área de Interés</label>
|
||||||
|
<select id="area" name="area" class="form-input form-select" required>
|
||||||
|
<option>Ambulancias y Unidades Médicas</option>
|
||||||
|
<option>Vehículos de Rescate</option>
|
||||||
|
<option>Equipo Contra Incendios</option>
|
||||||
|
<option>Embarcaciones</option>
|
||||||
|
<option>Barredoras</option>
|
||||||
|
<option>Otro</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="message" class="label-md">Mensaje o Requerimiento</label>
|
||||||
|
<textarea id="message" name="message" rows="4" placeholder="Describe brevemente cómo podemos ayudarte..." class="form-input textarea" required></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-primary full-width">Enviar Solicitud</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Set the _next URL dynamically to match the current environment (localhost or production)
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const nextUrlInput = document.getElementById('next-url');
|
||||||
|
if (nextUrlInput) {
|
||||||
|
nextUrlInput.value = window.location.origin + '/gracias';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.contact-section {
|
||||||
|
padding: 32px 0 64px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.contact-grid {
|
||||||
|
grid-template-columns: repeat(12, 1fr);
|
||||||
|
}
|
||||||
|
.info-card {
|
||||||
|
grid-column: span 5;
|
||||||
|
}
|
||||||
|
.form-card {
|
||||||
|
grid-column: span 7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card {
|
||||||
|
background-color: var(--color-primary-container);
|
||||||
|
color: var(--color-on-primary);
|
||||||
|
padding: 32px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-8 { margin-bottom: 32px; }
|
||||||
|
.mb-6 { margin-bottom: 24px; }
|
||||||
|
|
||||||
|
.contact-methods {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-method {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: var(--rounded-full);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--color-on-primary);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-details {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-card {
|
||||||
|
padding: 32px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.info-card,
|
||||||
|
.form-card {
|
||||||
|
padding: 48px;
|
||||||
|
}
|
||||||
|
.contact-methods {
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.form-row {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
background-color: var(--color-surface-container-low);
|
||||||
|
border: 2px solid transparent;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-radius: var(--rounded-DEFAULT);
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-size: var(--text-body-md-size);
|
||||||
|
color: var(--color-on-surface);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--color-secondary);
|
||||||
|
background-color: var(--color-surface-container-lowest);
|
||||||
|
}
|
||||||
|
|
||||||
|
.textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-width {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,112 @@
|
|||||||
|
---
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
features: string[];
|
||||||
|
ctaText: string;
|
||||||
|
ctaLink: string;
|
||||||
|
imageSrc: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title, description, features, ctaText, ctaLink, imageSrc } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="bento-card division-card">
|
||||||
|
<div class="card-image" style={`background-image: url('${imageSrc}');`}></div>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="headline-md">{title}</h3>
|
||||||
|
<div class="icon-box">
|
||||||
|
<slot name="icon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="body-md text-on-surface-variant description">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
<ul class="features-list">
|
||||||
|
{features.map(feature => (
|
||||||
|
<li class="label-md text-on-surface-variant">
|
||||||
|
<svg class="check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="20 6 9 17 4 12"></polyline>
|
||||||
|
</svg>
|
||||||
|
{feature}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.division-card {
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image {
|
||||||
|
height: 200px;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-color: var(--color-surface-variant);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
padding: 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header h3 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-box {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
margin: 0 0 24px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features-list {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features-list li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-icon {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
background-color: var(--color-secondary-fixed);
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-footer {
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-width {
|
||||||
|
width: 100%;
|
||||||
|
background-color: var(--color-surface-container-low);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.full-width:hover {
|
||||||
|
background-color: var(--color-surface-container);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,122 @@
|
|||||||
|
---
|
||||||
|
import DivisionCard from './DivisionCard.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<section class="divisions-section" id="servicios">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="display-md section-title">Nuestros Servicios</h2>
|
||||||
|
<div class="bento-grid divisions-grid">
|
||||||
|
<div class="grid-item">
|
||||||
|
<DivisionCard
|
||||||
|
title="Ambulancias y Otras Unidades"
|
||||||
|
description="Servicio de balizamiento, pintura y equipamiento según NOM-034-SSA3-2013. Además producimos unidades a la medida como oficinas móviles y unidades médico dentales."
|
||||||
|
features={["Equipamiento Normativo", "Unidades Médicas a Medida"]}
|
||||||
|
ctaText="Ver Especificaciones"
|
||||||
|
ctaLink="#contacto"
|
||||||
|
imageSrc="/services/AMBULANCIAS.png"
|
||||||
|
>
|
||||||
|
<svg slot="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"></path>
|
||||||
|
<circle cx="7" cy="17" r="2"></circle>
|
||||||
|
<path d="M9 17h6"></path>
|
||||||
|
<circle cx="17" cy="17" r="2"></circle>
|
||||||
|
<path d="M14 6h4v4"></path>
|
||||||
|
<path d="M16 4v8"></path>
|
||||||
|
</svg>
|
||||||
|
</DivisionCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-item">
|
||||||
|
<DivisionCard
|
||||||
|
title="Vehículos de Rescate"
|
||||||
|
description="Servicio integral de vehículos habilitados para rescate rápido, diseñados para la atención y respuesta inmediata a accidentes, emergencias y siniestros."
|
||||||
|
features={["Atención a Emergencias", "Vehículos Habilitados"]}
|
||||||
|
ctaText="Consultar Opciones"
|
||||||
|
ctaLink="#contacto"
|
||||||
|
imageSrc="/services/VEHICULOS_RESCATE.png"
|
||||||
|
>
|
||||||
|
<svg slot="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
||||||
|
<line x1="12" y1="8" x2="12" y2="16"></line>
|
||||||
|
<line x1="8" y1="12" x2="16" y2="12"></line>
|
||||||
|
</svg>
|
||||||
|
</DivisionCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-item">
|
||||||
|
<DivisionCard
|
||||||
|
title="Equipo de Combate contra Incendios"
|
||||||
|
description="Equipamiento profesional e integral para brigadas y cuerpos de bomberos, garantizando la máxima protección y eficiencia en la extinción de incendios."
|
||||||
|
features={["Protección Profesional", "Equipos de Alta Eficiencia"]}
|
||||||
|
ctaText="Ver Equipamiento"
|
||||||
|
ctaLink="#contacto"
|
||||||
|
imageSrc="/services/INCENDIOS.png"
|
||||||
|
>
|
||||||
|
<svg slot="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path>
|
||||||
|
</svg>
|
||||||
|
</DivisionCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-item">
|
||||||
|
<DivisionCard
|
||||||
|
title="Embarcaciones"
|
||||||
|
description="Suministro, arrendamiento y mantenimiento de embarcaciones de rescate y especializadas para operaciones en entornos acuáticos."
|
||||||
|
features={["Embarcaciones de Rescate", "Operaciones Acuáticas"]}
|
||||||
|
ctaText="Saber Más"
|
||||||
|
ctaLink="#contacto"
|
||||||
|
imageSrc="/services/EMBARCACIONES.png"
|
||||||
|
>
|
||||||
|
<svg slot="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M2 12A10 10 0 0 0 15 21.54A10 10 0 0 1 15 2.46 10 10 0 0 0 2 12Z"></path>
|
||||||
|
<path d="M22 12A10 10 0 0 0 15 2.46v19.08A10 10 0 0 0 22 12Z"></path>
|
||||||
|
</svg>
|
||||||
|
</DivisionCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-item">
|
||||||
|
<DivisionCard
|
||||||
|
title="Barredoras"
|
||||||
|
description="Vehículos especializados para la limpieza industrial y municipal, asegurando el mantenimiento de vialidades y espacios públicos."
|
||||||
|
features={["Limpieza Industrial", "Mantenimiento Municipal"]}
|
||||||
|
ctaText="Catálogo de Vehículos"
|
||||||
|
ctaLink="#contacto"
|
||||||
|
imageSrc="/services/BARREDORAS.png"
|
||||||
|
>
|
||||||
|
<svg slot="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M3 13h18"></path>
|
||||||
|
<path d="M19 17H5a2 2 0 0 1-2-2V5h18v10a2 2 0 0 1-2 2z"></path>
|
||||||
|
<path d="M12 17v5"></path>
|
||||||
|
<path d="M8 22h8"></path>
|
||||||
|
</svg>
|
||||||
|
</DivisionCard>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.divisions-section {
|
||||||
|
padding: 64px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
grid-column: span 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.grid-item {
|
||||||
|
grid-column: span 6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.grid-item {
|
||||||
|
grid-column: span 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
---
|
||||||
|
---
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container footer-container">
|
||||||
|
<div class="footer-brand">
|
||||||
|
<a href="/" class="logo">
|
||||||
|
<img src="/LOGO HEROICA NEGRO.png" alt="La Heroica" class="logo-img" />
|
||||||
|
</a>
|
||||||
|
<p class="body-md text-on-surface-variant copyright">
|
||||||
|
© {new Date().getFullYear()} Servicios y Soluciones La Heroica. Todos los derechos reservados.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-links-group">
|
||||||
|
<h4 class="label-lg">Enlaces</h4>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="#privacidad" class="body-md text-on-surface-variant">Privacidad</a>
|
||||||
|
<a href="#terminos" class="body-md text-on-surface-variant">Términos</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-links-group">
|
||||||
|
<h4 class="label-lg">Compañía</h4>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="#servicios" class="body-md text-on-surface-variant">Servicios</a>
|
||||||
|
<a href="#soporte" class="body-md text-on-surface-variant">Soporte</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-links-group">
|
||||||
|
<h4 class="label-lg">Contacto</h4>
|
||||||
|
<div class="footer-nav text-on-surface-variant body-md" style="gap: 8px;">
|
||||||
|
<span style="display: block;"><strong>Clínica del marino:</strong> AV. 16 DE SEPTIEMBRE 296 FRACCIONAMIENTO FAROS CP 91709, VERACRUZ, VER.</span>
|
||||||
|
<span style="display: block;"><strong>Correo:</strong> administracion@la-heroica.com</span>
|
||||||
|
<span style="display: block;"><strong>Teléfono:</strong> (+52) 229 192 6475</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.footer {
|
||||||
|
padding: 48px 0;
|
||||||
|
background-color: var(--color-surface-bright);
|
||||||
|
border-top: 1px solid var(--color-surface-variant);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.footer-container {
|
||||||
|
grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-brand {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
height: 48px;
|
||||||
|
width: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
max-width: 300px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links-group h4 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-nav a:hover {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
---
|
||||||
|
---
|
||||||
|
<header class="header">
|
||||||
|
<div class="container header-container">
|
||||||
|
<a href="/" class="logo">
|
||||||
|
<img src="/LOGO HEROICA NEGRO.png" alt="La Heroica" class="logo-img" />
|
||||||
|
</a>
|
||||||
|
<nav class="nav-links label-lg text-on-surface-variant">
|
||||||
|
<a href="#servicios">Servicios</a>
|
||||||
|
<a href="#nosotros">Nosotros</a>
|
||||||
|
<a href="#vision">Visión</a>
|
||||||
|
<a href="#clientes">Clientes</a>
|
||||||
|
<a href="#contacto">Contacto</a>
|
||||||
|
</nav>
|
||||||
|
<a href="#contacto" class="btn btn-primary">Agendar Cita</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background-color: rgba(247, 249, 251, 0.8);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
-webkit-backdrop-filter: blur(12px);
|
||||||
|
border-bottom: 1px solid var(--color-surface-variant);
|
||||||
|
padding: 16px 0;
|
||||||
|
}
|
||||||
|
.header-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.logo-img {
|
||||||
|
height: 48px;
|
||||||
|
width: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
.nav-links {
|
||||||
|
display: none;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
.nav-links a:hover {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
---
|
||||||
|
---
|
||||||
|
<section class="hero-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="bento-card hero-main-card">
|
||||||
|
<div class="hero-content">
|
||||||
|
<span class="badge label-md">Servicios Integrales</span>
|
||||||
|
<h1 class="display-md hero-title">Salud y Soluciones Industriales de Precisión.</h1>
|
||||||
|
<p class="body-md hero-text">
|
||||||
|
Ofrecemos un ecosistema completo de atención médica avanzada y mantenimiento industrial especializado.
|
||||||
|
</p>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<a href="#servicios" class="btn btn-primary">Explorar Servicios</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.hero-section {
|
||||||
|
padding: 32px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-main-card {
|
||||||
|
padding: 48px;
|
||||||
|
background-color: var(--color-surface-tint);
|
||||||
|
/* Medical gradient overlay with new corporate color #04323c (rgb 4,50,60) */
|
||||||
|
background-image: linear-gradient(135deg, rgba(4,50,60,0.9) 0%, rgba(4,50,60,0.6) 100%), url('/HERO.JPG');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
color: var(--color-surface-container-lowest);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 480px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.hero-main-card {
|
||||||
|
min-height: 560px;
|
||||||
|
padding: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: var(--color-tertiary-fixed);
|
||||||
|
color: var(--color-on-tertiary-fixed);
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: var(--rounded-full);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
margin: 0 0 16px 0;
|
||||||
|
color: var(--color-surface-container-lowest);
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text {
|
||||||
|
margin: 0 0 32px 0;
|
||||||
|
color: var(--color-surface-container-highest);
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,95 @@
|
|||||||
|
---
|
||||||
|
---
|
||||||
|
<section class="vision-section" id="vision">
|
||||||
|
<div class="container">
|
||||||
|
<div class="bento-grid vision-grid">
|
||||||
|
<div class="bento-card vision-content-card">
|
||||||
|
<div class="vision-header">
|
||||||
|
<div class="icon-wrapper">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
||||||
|
<circle cx="12" cy="12" r="3"></circle>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h2 class="display-md">Nuestra Visión</h2>
|
||||||
|
</div>
|
||||||
|
<p class="body-lg text-on-surface-variant vision-text">
|
||||||
|
Ser el referente líder en la integración de servicios de salud ocupacional y soluciones industriales, garantizando la máxima eficiencia y bienestar en cada entorno laboral a través de tecnología punta y profesionalismo clínico.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bento-card vision-image-card">
|
||||||
|
<!-- Medical / Office background image placeholder -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.vision-section {
|
||||||
|
padding: 32px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision-content-card {
|
||||||
|
padding: 32px 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision-image-card {
|
||||||
|
min-height: 250px;
|
||||||
|
background-image: url('/VISION.JPG');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
padding: 0; /* Removing padding to let the image cover the whole card */
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.vision-grid {
|
||||||
|
grid-template-columns: repeat(12, 1fr);
|
||||||
|
}
|
||||||
|
.vision-content-card {
|
||||||
|
grid-column: span 7;
|
||||||
|
order: 1;
|
||||||
|
padding: 48px;
|
||||||
|
}
|
||||||
|
.vision-image-card {
|
||||||
|
grid-column: span 5;
|
||||||
|
order: 2;
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background-color: var(--color-secondary-fixed);
|
||||||
|
color: var(--color-secondary);
|
||||||
|
border-radius: var(--rounded-full);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision-header h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision-text {
|
||||||
|
margin: 0 0 32px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,210 @@
|
|||||||
|
---
|
||||||
|
import astroLogo from '../assets/astro.svg';
|
||||||
|
import background from '../assets/background.svg';
|
||||||
|
---
|
||||||
|
|
||||||
|
<div id="container">
|
||||||
|
<img id="background" src={background.src} alt="" fetchpriority="high" />
|
||||||
|
<main>
|
||||||
|
<section id="hero">
|
||||||
|
<a href="https://astro.build"
|
||||||
|
><img src={astroLogo.src} width="115" height="48" alt="Astro Homepage" /></a
|
||||||
|
>
|
||||||
|
<h1>
|
||||||
|
To get started, open the <code><pre>src/pages</pre></code> directory in your project.
|
||||||
|
</h1>
|
||||||
|
<section id="links">
|
||||||
|
<a class="button" href="https://docs.astro.build">Read our docs</a>
|
||||||
|
<a href="https://astro.build/chat"
|
||||||
|
>Join our Discord <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"
|
||||||
|
><path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<a href="https://astro.build/blog/astro-6-beta/" id="news" class="box">
|
||||||
|
<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M24.667 12c1.333 1.414 2 3.192 2 5.334 0 4.62-4.934 5.7-7.334 12C18.444 28.567 18 27.456 18 26c0-4.642 6.667-7.053 6.667-14Zm-5.334-5.333c1.6 1.65 2.4 3.43 2.4 5.333 0 6.602-8.06 7.59-6.4 17.334C13.111 27.787 12 25.564 12 22.666c0-4.434 7.333-8 7.333-16Zm-6-5.333C15.111 3.555 16 5.556 16 7.333c0 8.333-11.333 10.962-5.333 22-3.488-.774-6-4-6-8 0-8.667 8.666-10 8.666-20Z"
|
||||||
|
fill="#111827"></path></svg
|
||||||
|
>
|
||||||
|
<h2>What's New in Astro 6.0?</h2>
|
||||||
|
<p>
|
||||||
|
Redesigned dev server, fonts, live collections, built-in CSP support, and more! Click to
|
||||||
|
explore Astro 6.0's new features.
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: -1;
|
||||||
|
filter: blur(100px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero {
|
||||||
|
display: flex;
|
||||||
|
align-items: start;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 22px;
|
||||||
|
margin-top: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 12px;
|
||||||
|
color: #111827;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a:hover {
|
||||||
|
color: rgb(78, 80, 86);
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a svg {
|
||||||
|
height: 1em;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a.button {
|
||||||
|
color: white;
|
||||||
|
background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
|
||||||
|
inset 0 -2px 0 rgba(0, 0, 0, 0.24);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a.button:hover {
|
||||||
|
color: rgb(230, 230, 230);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family:
|
||||||
|
ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
|
||||||
|
monospace;
|
||||||
|
font-weight: normal;
|
||||||
|
background: linear-gradient(14deg, #d83333 0%, #f041ff 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0 0 1em;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #111827;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #4b5563;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
letter-spacing: -0.006em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
display: inline-block;
|
||||||
|
background:
|
||||||
|
linear-gradient(66.77deg, #f3cddd 0%, #f5cee7 100%) padding-box,
|
||||||
|
linear-gradient(155deg, #d83333 0%, #f041ff 18%, #f5cee7 45%) border-box;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 6px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
padding: 16px;
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#news {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 16px;
|
||||||
|
right: 16px;
|
||||||
|
max-width: 300px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background 0.2s;
|
||||||
|
backdrop-filter: blur(50px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#news:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-height: 368px) {
|
||||||
|
#news {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
#container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero {
|
||||||
|
display: block;
|
||||||
|
padding-top: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a.button {
|
||||||
|
padding: 14px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#news {
|
||||||
|
right: 16px;
|
||||||
|
left: 16px;
|
||||||
|
bottom: 2.5rem;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<title>Astro Basics</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<slot />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
---
|
||||||
|
import '../styles/global.css';
|
||||||
|
import Header from '../components/Header.astro';
|
||||||
|
import Footer from '../components/Footer.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Gracias | La Heroica</title>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
</head>
|
||||||
|
<body style="display: flex; flex-direction: column; min-height: 100vh;">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<main style="flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 64px 0;">
|
||||||
|
<div class="container text-center">
|
||||||
|
<div class="bento-card" style="max-width: 600px; margin: 0 auto; text-align: center; padding: 64px 32px;">
|
||||||
|
<div class="icon-wrapper" style="margin: 0 auto 24px auto; width: 64px; height: 64px; background-color: var(--color-secondary-fixed); color: var(--color-secondary); border-radius: var(--rounded-full); display: flex; align-items: center; justify-content: center;">
|
||||||
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
||||||
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h1 class="display-md mb-6">¡Gracias por contactarnos!</h1>
|
||||||
|
<p class="body-lg text-on-surface-variant mb-8">
|
||||||
|
Hemos recibido tu mensaje correctamente. Nuestro equipo se pondrá en contacto contigo a la brevedad posible.
|
||||||
|
</p>
|
||||||
|
<a href="/" class="btn btn-primary">Volver al Inicio</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
---
|
||||||
|
import "../styles/global.css";
|
||||||
|
import Header from "../components/Header.astro";
|
||||||
|
import Hero from "../components/Hero.astro";
|
||||||
|
import VisionSection from "../components/VisionSection.astro";
|
||||||
|
import AboutSection from "../components/AboutSection.astro";
|
||||||
|
import DivisionsSection from "../components/DivisionsSection.astro";
|
||||||
|
import ClientsSection from "../components/ClientsSection.astro";
|
||||||
|
import ContactSection from "../components/ContactSection.astro";
|
||||||
|
import Footer from "../components/Footer.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="La Heroica - Salud y Soluciones Industriales de Precisión."
|
||||||
|
/>
|
||||||
|
<title>La Heroica | Servicios Integrales</title>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<Hero />
|
||||||
|
<VisionSection />
|
||||||
|
<AboutSection />
|
||||||
|
<DivisionsSection />
|
||||||
|
<ClientsSection />
|
||||||
|
<ContactSection />
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,230 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--color-surface: #f7f9fb;
|
||||||
|
--color-surface-dim: #d8dadc;
|
||||||
|
--color-surface-bright: #f7f9fb;
|
||||||
|
--color-surface-container-lowest: #ffffff;
|
||||||
|
--color-surface-container-low: #f2f4f6;
|
||||||
|
--color-surface-container: #eceef0;
|
||||||
|
--color-surface-container-high: #e6e8ea;
|
||||||
|
--color-surface-container-highest: #e0e3e5;
|
||||||
|
--color-on-surface: #191c1e;
|
||||||
|
--color-on-surface-variant: #45464d;
|
||||||
|
--color-inverse-surface: #2d3133;
|
||||||
|
--color-inverse-on-surface: #eff1f3;
|
||||||
|
--color-outline: #76777d;
|
||||||
|
--color-outline-variant: #c6c6cd;
|
||||||
|
--color-surface-tint: #08677a;
|
||||||
|
--color-primary: #000000;
|
||||||
|
--color-on-primary: #ffffff;
|
||||||
|
--color-primary-container: #04323c;
|
||||||
|
--color-on-primary-container: #83a5ac;
|
||||||
|
--color-inverse-primary: #bec6e0;
|
||||||
|
--color-secondary: #08677a;
|
||||||
|
--color-on-secondary: #ffffff;
|
||||||
|
--color-secondary-container: #064f5d;
|
||||||
|
--color-on-secondary-container: #f9f7ff;
|
||||||
|
--color-tertiary: #000000;
|
||||||
|
--color-on-tertiary: #ffffff;
|
||||||
|
--color-tertiary-container: #001e2c;
|
||||||
|
--color-on-tertiary-container: #008ebf;
|
||||||
|
--color-error: #ba1a1a;
|
||||||
|
--color-on-error: #ffffff;
|
||||||
|
--color-error-container: #ffdad6;
|
||||||
|
--color-on-error-container: #93000a;
|
||||||
|
--color-primary-fixed: #dae2fd;
|
||||||
|
--color-primary-fixed-dim: #bec6e0;
|
||||||
|
--color-on-primary-fixed: #131b2e;
|
||||||
|
--color-on-primary-fixed-variant: #3f465c;
|
||||||
|
--color-secondary-fixed: #dae1ff;
|
||||||
|
--color-secondary-fixed-dim: #b3c5ff;
|
||||||
|
--color-on-secondary-fixed: #001849;
|
||||||
|
--color-on-secondary-fixed-variant: #003fa4;
|
||||||
|
--color-tertiary-fixed: #c4e7ff;
|
||||||
|
--color-tertiary-fixed-dim: #7bd0ff;
|
||||||
|
--color-on-tertiary-fixed: #001e2c;
|
||||||
|
--color-on-tertiary-fixed-variant: #004c69;
|
||||||
|
--color-background: #f7f9fb;
|
||||||
|
--color-on-background: #191c1e;
|
||||||
|
--color-surface-variant: #e0e3e5;
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
--font-family: 'Inter', sans-serif;
|
||||||
|
|
||||||
|
--text-display-lg-size: 48px;
|
||||||
|
--text-display-lg-weight: 700;
|
||||||
|
--text-display-lg-line-height: 1.1;
|
||||||
|
--text-display-lg-letter-spacing: -0.02em;
|
||||||
|
|
||||||
|
--text-display-md-size: 36px;
|
||||||
|
--text-display-md-weight: 700;
|
||||||
|
--text-display-md-line-height: 1.2;
|
||||||
|
--text-display-md-letter-spacing: -0.02em;
|
||||||
|
|
||||||
|
--text-headline-lg-size: 30px;
|
||||||
|
--text-headline-lg-weight: 600;
|
||||||
|
--text-headline-lg-line-height: 1.3;
|
||||||
|
--text-headline-lg-letter-spacing: -0.01em;
|
||||||
|
|
||||||
|
--text-headline-md-size: 24px;
|
||||||
|
--text-headline-md-weight: 600;
|
||||||
|
--text-headline-md-line-height: 1.4;
|
||||||
|
|
||||||
|
--text-body-lg-size: 18px;
|
||||||
|
--text-body-lg-weight: 400;
|
||||||
|
--text-body-lg-line-height: 1.6;
|
||||||
|
|
||||||
|
--text-body-md-size: 16px;
|
||||||
|
--text-body-md-weight: 400;
|
||||||
|
--text-body-md-line-height: 1.6;
|
||||||
|
|
||||||
|
--text-label-lg-size: 14px;
|
||||||
|
--text-label-lg-weight: 600;
|
||||||
|
--text-label-lg-line-height: 1.2;
|
||||||
|
--text-label-lg-letter-spacing: 0.01em;
|
||||||
|
|
||||||
|
--text-label-md-size: 12px;
|
||||||
|
--text-label-md-weight: 500;
|
||||||
|
--text-label-md-line-height: 1.2;
|
||||||
|
--text-label-md-letter-spacing: 0.02em;
|
||||||
|
|
||||||
|
/* Rounded */
|
||||||
|
--rounded-sm: 0.25rem;
|
||||||
|
--rounded-DEFAULT: 0.5rem;
|
||||||
|
--rounded-md: 0.75rem;
|
||||||
|
--rounded-lg: 1rem;
|
||||||
|
--rounded-xl: 1.5rem;
|
||||||
|
--rounded-full: 9999px;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
--spacing-unit: 4px;
|
||||||
|
--spacing-gutter: 24px;
|
||||||
|
--spacing-margin: 32px;
|
||||||
|
--container-max-width: 1280px;
|
||||||
|
--bento-gap: 16px;
|
||||||
|
|
||||||
|
/* Shadow Elevation */
|
||||||
|
--shadow-ambient: 0 4px 20px rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
*, *::before, *::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: var(--font-family);
|
||||||
|
background-color: var(--color-background);
|
||||||
|
color: var(--color-on-background);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: var(--container-max-width);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 var(--spacing-gutter);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typography Classes */
|
||||||
|
.display-lg { font-size: var(--text-display-lg-size); font-weight: var(--text-display-lg-weight); line-height: var(--text-display-lg-line-height); letter-spacing: var(--text-display-lg-letter-spacing); }
|
||||||
|
.display-md { font-size: var(--text-display-md-size); font-weight: var(--text-display-md-weight); line-height: var(--text-display-md-line-height); letter-spacing: var(--text-display-md-letter-spacing); }
|
||||||
|
.headline-lg { font-size: var(--text-headline-lg-size); font-weight: var(--text-headline-lg-weight); line-height: var(--text-headline-lg-line-height); letter-spacing: var(--text-headline-lg-letter-spacing); }
|
||||||
|
.headline-md { font-size: var(--text-headline-md-size); font-weight: var(--text-headline-md-weight); line-height: var(--text-headline-md-line-height); }
|
||||||
|
.body-lg { font-size: var(--text-body-lg-size); font-weight: var(--text-body-lg-weight); line-height: var(--text-body-lg-line-height); }
|
||||||
|
.body-md { font-size: var(--text-body-md-size); font-weight: var(--text-body-md-weight); line-height: var(--text-body-md-line-height); }
|
||||||
|
.label-lg { font-size: var(--text-label-lg-size); font-weight: var(--text-label-lg-weight); line-height: var(--text-label-lg-line-height); letter-spacing: var(--text-label-lg-letter-spacing); }
|
||||||
|
.label-md { font-size: var(--text-label-md-size); font-weight: var(--text-label-md-weight); line-height: var(--text-label-md-line-height); letter-spacing: var(--text-label-md-letter-spacing); }
|
||||||
|
|
||||||
|
/* Bento UI Utilities */
|
||||||
|
.bento-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(12, 1fr);
|
||||||
|
gap: var(--bento-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-card {
|
||||||
|
background-color: var(--color-surface-container-lowest);
|
||||||
|
border-radius: var(--rounded-xl);
|
||||||
|
padding: 24px;
|
||||||
|
border: 1px solid var(--color-surface-variant);
|
||||||
|
transition: box-shadow 0.3s ease;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bento-card:hover {
|
||||||
|
box-shadow: var(--shadow-ambient);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button Classes */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: var(--rounded-full); /* Based on design reference */
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
border: none;
|
||||||
|
font-size: var(--text-label-lg-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--color-secondary);
|
||||||
|
color: var(--color-on-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: var(--color-secondary-container);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background-color: var(--color-surface-container);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
background: var(--color-surface-container-lowest);
|
||||||
|
border: 1px solid var(--color-surface-variant);
|
||||||
|
border-radius: var(--rounded-md);
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--color-secondary);
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Base styles for anchors and lists */
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul, ol {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typography utilities */
|
||||||
|
.text-on-surface-variant { color: var(--color-on-surface-variant); }
|
||||||
|
.text-primary { color: var(--color-primary); }
|
||||||
|
.text-secondary { color: var(--color-secondary); }
|
||||||
|
.font-bold { font-weight: 700; }
|
||||||
|
.font-semibold { font-weight: 600; }
|
||||||
|
.font-medium { font-weight: 500; }
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"include": [".astro/types.d.ts", "**/*"],
|
||||||
|
"exclude": ["dist"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user