Upload
This commit is contained in:
commit
388f90b98d
57 changed files with 25807 additions and 0 deletions
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
node_modules/
|
||||||
|
.venv/
|
||||||
|
.vscode/
|
||||||
|
|
||||||
1
.prettierignore
Normal file
1
.prettierignore
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
|
||||||
32
.prettierrc
Normal file
32
.prettierrc
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
{
|
||||||
|
"arrowParens": "always",
|
||||||
|
"bracketSpacing": true,
|
||||||
|
"endOfLine": "lf",
|
||||||
|
"htmlWhitespaceSensitivity": "css",
|
||||||
|
"insertPragma": false,
|
||||||
|
"jsxBracketSameLine": false,
|
||||||
|
"jsxSingleQuote": true,
|
||||||
|
"overrides": [
|
||||||
|
{
|
||||||
|
"files": "*.html",
|
||||||
|
"options": {
|
||||||
|
"tabWidth": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"files": "*.jinja",
|
||||||
|
"options": {
|
||||||
|
"tabWidth": 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"printWidth": 80,
|
||||||
|
"proseWrap": "always",
|
||||||
|
"quoteProps": "as-needed",
|
||||||
|
"requirePragma": false,
|
||||||
|
"semi": true,
|
||||||
|
"singleQuote": true,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"trailingComma": "all",
|
||||||
|
"useTabs": false
|
||||||
|
}
|
||||||
47
README.md
Normal file
47
README.md
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
# Kubeload
|
||||||
|
|
||||||
|
Kubeload is an unfinished project that began with the goal of making cloud hosting more affordable and accessible in Korea, where prices tend to be higher than in the US or Europe, and there are fewer local competitors.
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
- **Python 3.x**: [Download Python](https://www.python.org/downloads/)
|
||||||
|
- **Node.js & npm**: [Download Node.js](https://nodejs.org/)
|
||||||
|
|
||||||
|
## Setup Instructions
|
||||||
|
|
||||||
|
### 1. Set up the Python Virtual Environment
|
||||||
|
|
||||||
|
- **Linux/macOS**:
|
||||||
|
```bash
|
||||||
|
python3 -m venv .venv
|
||||||
|
source .venv/bin/activate
|
||||||
|
```
|
||||||
|
|
||||||
|
- **Windows**:
|
||||||
|
```bash
|
||||||
|
python -m venv .venv
|
||||||
|
.\.venv\Scripts\activate
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Install Python Dependencies
|
||||||
|
|
||||||
|
With the virtual environment activated, install the required Python packages:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pip install -r requirements.txt
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Start the Flask Server
|
||||||
|
|
||||||
|
```bash
|
||||||
|
flask run
|
||||||
|
```
|
||||||
|
|
||||||
|
The Flask server will be available at: `http://127.0.0.1:5000/`
|
||||||
|
|
||||||
|
### 4. Start the Front-end Development Server
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run develop
|
||||||
|
```
|
||||||
|
|
||||||
BIN
__pycache__/app.cpython-310.pyc
Normal file
BIN
__pycache__/app.cpython-310.pyc
Normal file
Binary file not shown.
BIN
__pycache__/app.cpython-311.pyc
Normal file
BIN
__pycache__/app.cpython-311.pyc
Normal file
Binary file not shown.
BIN
__pycache__/auth.cpython-311.pyc
Normal file
BIN
__pycache__/auth.cpython-311.pyc
Normal file
Binary file not shown.
BIN
__pycache__/home.cpython-311.pyc
Normal file
BIN
__pycache__/home.cpython-311.pyc
Normal file
Binary file not shown.
BIN
__pycache__/kubeload.cpython-311.pyc
Normal file
BIN
__pycache__/kubeload.cpython-311.pyc
Normal file
Binary file not shown.
35
kubeload.py
Normal file
35
kubeload.py
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
from flask import Flask, send_from_directory, render_template
|
||||||
|
import os
|
||||||
|
import routes
|
||||||
|
|
||||||
|
app = Flask(__name__, static_folder="static", template_folder="templates")
|
||||||
|
|
||||||
|
# Enable template auto-reload
|
||||||
|
app.config['TEMPLATES_AUTO_RELOAD'] = True
|
||||||
|
|
||||||
|
# Absolute path to node_modules
|
||||||
|
NODE_MODULES_DIR = os.path.join(os.path.dirname(__file__), "node_modules")
|
||||||
|
|
||||||
|
# Serve the main page from templates
|
||||||
|
app.register_blueprint(routes.main)
|
||||||
|
app.register_blueprint(routes.account, url_prefix="/account")
|
||||||
|
app.register_blueprint(routes.auth)
|
||||||
|
app.register_blueprint(routes.products, url_prefix="/products")
|
||||||
|
|
||||||
|
# Serve files from the static folder
|
||||||
|
@app.route("/static/<path:filename>")
|
||||||
|
def serve_static(filename):
|
||||||
|
return send_from_directory(app.static_folder, filename) # type: ignore
|
||||||
|
|
||||||
|
# Serve files from node_modules
|
||||||
|
@app.route("/node_modules/<path:filename>")
|
||||||
|
def node_modules(filename):
|
||||||
|
file_path = os.path.join(NODE_MODULES_DIR, filename)
|
||||||
|
if os.path.exists(file_path):
|
||||||
|
return send_from_directory(NODE_MODULES_DIR, filename)
|
||||||
|
else:
|
||||||
|
return "File not found", 404
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
# Enable debug mode with reloader
|
||||||
|
app.run(debug=True)
|
||||||
4602
package-lock.json
generated
Normal file
4602
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
26
package.json
Normal file
26
package.json
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"name": "kubeload",
|
||||||
|
"scripts": {
|
||||||
|
"watch": "concurrently \"npm:watch:*\"",
|
||||||
|
"watch:tailwind": "npx tailwindcss -i src/styles/tailwind.css -o static/css/tailwind.css --watch",
|
||||||
|
"watch:stylus": "stylus src/stylus -o static/css -w",
|
||||||
|
"watch:ts": "esbuild src/ts/Main.ts --bundle --outfile=static/js/bundle.js --format=esm --sourcemap --watch",
|
||||||
|
"build": "concurrently \"npm:build:*\"",
|
||||||
|
"build:tailwind": "tailwindcss -i src/styles/tailwind.css -o static/css/tailwind.css --minify",
|
||||||
|
"build:stylus": "stylus src/stylus -o static/css",
|
||||||
|
"build:ts": "esbuild src/ts/Main.ts --bundle --outfile=static/js/bundle.js --format=esm --sourcemap --minify"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/cli": "^4.1.13",
|
||||||
|
"@tailwindcss/forms": "^0.5.10",
|
||||||
|
"autoprefixer": "^10.4.21",
|
||||||
|
"concurrently": "^8.2.2",
|
||||||
|
"esbuild": "^0.24.0",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"preline": "^3.2.3",
|
||||||
|
"prettier": "^3.6.2",
|
||||||
|
"stylus": "^0.64.0",
|
||||||
|
"tailwindcss": "^4.1.13",
|
||||||
|
"typescript": "^5.6.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
0
requirements.txt
Normal file
0
requirements.txt
Normal file
4
routes/__init__.py
Normal file
4
routes/__init__.py
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
from .main import main
|
||||||
|
from .account import account
|
||||||
|
from .auth import auth
|
||||||
|
from .products import products
|
||||||
BIN
routes/__pycache__/__init__.cpython-311.pyc
Normal file
BIN
routes/__pycache__/__init__.cpython-311.pyc
Normal file
Binary file not shown.
BIN
routes/__pycache__/account.cpython-311.pyc
Normal file
BIN
routes/__pycache__/account.cpython-311.pyc
Normal file
Binary file not shown.
BIN
routes/__pycache__/auth.cpython-311.pyc
Normal file
BIN
routes/__pycache__/auth.cpython-311.pyc
Normal file
Binary file not shown.
BIN
routes/__pycache__/home.cpython-311.pyc
Normal file
BIN
routes/__pycache__/home.cpython-311.pyc
Normal file
Binary file not shown.
BIN
routes/__pycache__/main.cpython-311.pyc
Normal file
BIN
routes/__pycache__/main.cpython-311.pyc
Normal file
Binary file not shown.
BIN
routes/__pycache__/products.cpython-311.pyc
Normal file
BIN
routes/__pycache__/products.cpython-311.pyc
Normal file
Binary file not shown.
BIN
routes/__pycache__/user.cpython-311.pyc
Normal file
BIN
routes/__pycache__/user.cpython-311.pyc
Normal file
Binary file not shown.
8
routes/account.py
Normal file
8
routes/account.py
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
from flask import Blueprint, render_template
|
||||||
|
|
||||||
|
account = Blueprint("account", __name__)
|
||||||
|
|
||||||
|
@account.route("/console")
|
||||||
|
def console():
|
||||||
|
return render_template("account/console.jinja")
|
||||||
|
|
||||||
15
routes/auth.py
Normal file
15
routes/auth.py
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
from flask import Blueprint, render_template
|
||||||
|
|
||||||
|
auth = Blueprint("auth", __name__)
|
||||||
|
|
||||||
|
@auth.route("/login")
|
||||||
|
def login():
|
||||||
|
return render_template("auth/login.jinja")
|
||||||
|
|
||||||
|
@auth.route("/register")
|
||||||
|
def register():
|
||||||
|
return render_template("auth/register.jinja")
|
||||||
|
|
||||||
|
@auth.route("/recovery")
|
||||||
|
def recovery():
|
||||||
|
return render_template("auth/recovery.jinja")
|
||||||
7
routes/main.py
Normal file
7
routes/main.py
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
from flask import Blueprint, render_template
|
||||||
|
|
||||||
|
main = Blueprint("main", __name__)
|
||||||
|
|
||||||
|
@main.route("/")
|
||||||
|
def index():
|
||||||
|
return render_template("index.jinja")
|
||||||
23
routes/products.py
Normal file
23
routes/products.py
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
from flask import Blueprint, render_template
|
||||||
|
|
||||||
|
products = Blueprint("products", __name__)
|
||||||
|
|
||||||
|
@products.route("/cloud")
|
||||||
|
def login():
|
||||||
|
return render_template("products/cloud.jinja")
|
||||||
|
|
||||||
|
@products.route("/ai")
|
||||||
|
def register():
|
||||||
|
return render_template("products/ai.jinja")
|
||||||
|
|
||||||
|
@products.route("/storage")
|
||||||
|
def storage():
|
||||||
|
return render_template("products/storage.jinja")
|
||||||
|
|
||||||
|
@products.route("/dns")
|
||||||
|
def dns():
|
||||||
|
return render_template("products/dns.jinja")
|
||||||
|
|
||||||
|
@products.route("/loadbalancer")
|
||||||
|
def loadbalancer():
|
||||||
|
return render_template("products/loadbalancer.jinja")
|
||||||
12
rsync.sh
Executable file
12
rsync.sh
Executable file
|
|
@ -0,0 +1,12 @@
|
||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
while true; do
|
||||||
|
rsync -avz -e "ssh -p 2222" --delete \
|
||||||
|
--exclude 'app.db' \
|
||||||
|
--exclude 'init.sql' \
|
||||||
|
--exclude '__pycache__/' \
|
||||||
|
--exclude '.venv/' \
|
||||||
|
./ user@142.132.183.45:/var/www/app/kubeload
|
||||||
|
|
||||||
|
sleep 10
|
||||||
|
done
|
||||||
6
src/styles/tailwind.css
Normal file
6
src/styles/tailwind.css
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
@import "tailwindcss";
|
||||||
|
/* Preline UI */
|
||||||
|
@source "../../node_modules/preline/dist/*.js";
|
||||||
|
@import "../../node_modules/preline/variants.css";
|
||||||
|
/* Plugins */
|
||||||
|
@plugin "@tailwindcss/forms";
|
||||||
22
src/stylus/index.styl
Normal file
22
src/stylus/index.styl
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
body
|
||||||
|
background: #fafaf8; //
|
||||||
|
|
||||||
|
@theme
|
||||||
|
--color-blue: oklch(0.707 0.165 254.624);
|
||||||
|
--color-purple: oklch(0.714 0.203 305.504);
|
||||||
|
--color-pink: oklch(0.718 0.202 349.761);
|
||||||
|
--color-orange: oklch(0.75 0.183 55.934);
|
||||||
|
--color-green: oklch(0.792 0.209 151.711);
|
||||||
|
--color-yellow: oklch(0.852 0.199 91.936);
|
||||||
|
--color-gray-dark: oklch(0.13 0.028 261.692);
|
||||||
|
--color-gray: oklch(0.707 0.022 261.325);
|
||||||
|
--color-gray-light: oklch(0.985 0.002 247.839);
|
||||||
|
|
||||||
|
--font-sans: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif";
|
||||||
|
--font-serif: "Merriweather", "serif";
|
||||||
|
--columns: 14;
|
||||||
|
|
||||||
|
--spacing-8xl: 96rem;
|
||||||
|
--spacing-9xl: 128rem;
|
||||||
|
|
||||||
|
--radius-4xl: 2rem;
|
||||||
0
src/ts/Login.ts
Normal file
0
src/ts/Login.ts
Normal file
9
src/ts/Main.ts
Normal file
9
src/ts/Main.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import "preline";
|
||||||
|
|
||||||
|
export class Main {
|
||||||
|
static init() {
|
||||||
|
console.log("Main initialized!");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Main.init();
|
||||||
20
static/css/index.css
Normal file
20
static/css/index.css
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
body {
|
||||||
|
background: #fafaf8;
|
||||||
|
}
|
||||||
|
@theme {
|
||||||
|
--color-blue: oklch(0.707 0.165 254.624);
|
||||||
|
--color-purple: oklch(0.714 0.203 305.504);
|
||||||
|
--color-pink: oklch(0.718 0.202 349.761);
|
||||||
|
--color-orange: oklch(0.75 0.183 55.934);
|
||||||
|
--color-green: oklch(0.792 0.209 151.711);
|
||||||
|
--color-yellow: oklch(0.852 0.199 91.936);
|
||||||
|
--color-gray-dark: oklch(0.13 0.028 261.692);
|
||||||
|
--color-gray: oklch(0.707 0.022 261.325);
|
||||||
|
--color-gray-light: oklch(0.985 0.002 247.839);
|
||||||
|
--font-sans: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif";
|
||||||
|
--font-serif: "Merriweather", "serif";
|
||||||
|
--columns: 14;
|
||||||
|
--spacing-8xl: 96rem;
|
||||||
|
--spacing-9xl: 128rem;
|
||||||
|
--radius-4xl: 2rem;
|
||||||
|
}
|
||||||
3479
static/css/tailwind.css
Normal file
3479
static/css/tailwind.css
Normal file
File diff suppressed because it is too large
Load diff
BIN
static/favicon.ico
Normal file
BIN
static/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
12
static/favicon.svg
Normal file
12
static/favicon.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
|
||||||
|
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
|
||||||
|
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
||||||
|
|
||||||
|
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
|
||||||
|
<g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 10C2 5.61631 5.43583 2 9.75 2C13.4633 2 16.5282 4.68197 17.3077 8.22257C19.9376 8.2545 22 10.465 22 13.1111C22 15.7766 19.9073 18 17.25 18H9.75C5.43583 18 2 14.3837 2 10Z" fill="#155dfc"/> </g>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 697 B |
14329
static/js/bundle.js
Normal file
14329
static/js/bundle.js
Normal file
File diff suppressed because it is too large
Load diff
7
static/js/bundle.js.map
Normal file
7
static/js/bundle.js.map
Normal file
File diff suppressed because one or more lines are too long
13
tailwind.config.js
Normal file
13
tailwind.config.js
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
'./src/pug/**/*.pug', // Scan all pug files
|
||||||
|
'./src/**/*.js', // Scan JS if you use classes dynamically
|
||||||
|
'./src/**/*.ts',
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
darkMode: false,
|
||||||
|
};
|
||||||
33
templates/account/base.jinja
Normal file
33
templates/account/base.jinja
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
{% include "partials/_head.jinja" %}
|
||||||
|
<title>
|
||||||
|
{% block title %}
|
||||||
|
{% endblock title %}
|
||||||
|
큐브로드
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{% include "partials/_sidebar.jinja" %}
|
||||||
|
<!-- ========== MAIN CONTENT ========== -->
|
||||||
|
<main id="content" class="lg:ps-65 pt-15 lg:pt-0">
|
||||||
|
<div class="p-2 sm:p-5 sm:py-0 md:pt-5 space-y-5">
|
||||||
|
<!-- Card -->
|
||||||
|
<div class="p-4 flex flex-col justify-center h-72 md:h-96 min-h-[calc(100vh-56px)] sm:min-h-[calc(100vh-40px)] bg-white border border-gray-200 shadow-2xs rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
|
||||||
|
<div class="relative h-full border border-none border-gray-200 rounded-xl overflow-hidden dark:border-neutral-700">
|
||||||
|
<div class="absolute inset-0 size-full">
|
||||||
|
<div class="bg-[linear-gradient(45deg,var(--color-gray-100)_7.14%,transparent_7.14%,transparent_50%,var(--color-gray-100)_50%,var(--color-gray-100)_57.14%,transparent_57.14%,transparent);] bg-[length:10px_10px] dark:bg-[linear-gradient(45deg,var(--color-neutral-700)_7.14%,transparent_7.14%,transparent_50%,var(--color-neutral-700)_50%,var(--color-neutral-700)_57.14%,transparent_57.14%,transparent);] size-full">
|
||||||
|
{% block content %}
|
||||||
|
{% endblock content %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Card -->
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- ========== END MAIN CONTENT ========== -->
|
||||||
|
</body>
|
||||||
|
<script src="/node_modules/preline/dist/preline.js"></script>
|
||||||
|
</html>
|
||||||
122
templates/account/console.jinja
Normal file
122
templates/account/console.jinja
Normal file
|
|
@ -0,0 +1,122 @@
|
||||||
|
{% extends "account/base.jinja" %}
|
||||||
|
{% block title %}
|
||||||
|
콘솔 -
|
||||||
|
{% endblock title %}
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="{{ url_for('static', filename='css/index.css') }}" />
|
||||||
|
{% endblock head %}
|
||||||
|
{% block content %}
|
||||||
|
<!-- Grid -->
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-1 gap-3">
|
||||||
|
<!-- Card -->
|
||||||
|
<div class="flex flex-col bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
|
||||||
|
<!-- Body -->
|
||||||
|
<div class="h-full p-4 md:p-6">
|
||||||
|
<!-- Grid -->
|
||||||
|
<div class="mt-3 grid grid-cols-2 gap-x-2">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-x-2">
|
||||||
|
<h2 class="text-xl font-semibold text-gray-800 dark:text-neutral-200">
|
||||||
|
<a href="#" class="hover:underline">My Server</a>
|
||||||
|
</h2>
|
||||||
|
<span class="inline-flex items-center gap-1.5 py-1.5 px-2 text-xs font-medium bg-blue-100 text-blue-800 rounded-full dark:bg-blue-500/10 dark:text-blue-500">
|
||||||
|
<span class="size-1.5 inline-block bg-blue-800 rounded-full dark:bg-blue-500"></span>
|
||||||
|
Active
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1.5 text-sm text-gray-500 dark:text-neutral-500">C1#1234</p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-neutral-500">2 vCPUs / 4 GB RAM / 40 GB SSD</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
<div class="text-end">
|
||||||
|
<div class="flex justify-between items-center gap-x-2 mb-1">
|
||||||
|
<div></div>
|
||||||
|
<a href="#"
|
||||||
|
class="font-medium text-sm text-gray-800 dark:text-neutral-200 flex items-center hover:underline">
|
||||||
|
<span>127.0.0.1</span>
|
||||||
|
<span href="#" class="ml-2">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="0"
|
||||||
|
stroke="currentColor"
|
||||||
|
class="size-4">
|
||||||
|
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M21 8C21 6.34315 19.6569 5 18 5H10C8.34315 5 7 6.34315 7 8V20C7 21.6569 8.34315 23 10 23H18C19.6569 23 21 21.6569 21 20V8ZM19 8C19 7.44772 18.5523 7 18 7H10C9.44772 7 9 7.44772 9 8V20C9 20.5523 9.44772 21 10 21H18C18.5523 21 19 20.5523 19 20V8Z" />
|
||||||
|
<path fill="currentColor" d="M6 3H16C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1H6C4.34315 1 3 2.34315 3 4V18C3 18.5523 3.44772 19 4 19C4.55228 19 5 18.5523 5 18V4C5 3.44772 5.44772 3 6 3Z" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
</div>
|
||||||
|
<!-- End Grid -->
|
||||||
|
<!-- Progress -->
|
||||||
|
<div class="my-4">
|
||||||
|
<div class="flex justify-between items-center gap-x-2 mb-1 -mt-9">
|
||||||
|
<div></div>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-neutral-500">Created 9 hours ago</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Body -->
|
||||||
|
</div>
|
||||||
|
<!-- End Card --> <!-- Card -->
|
||||||
|
<div class="flex flex-col bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
|
||||||
|
<!-- Body -->
|
||||||
|
<div class="h-full p-4 md:p-6">
|
||||||
|
<!-- Grid -->
|
||||||
|
<div class="mt-3 grid grid-cols-2 gap-x-2">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-x-2">
|
||||||
|
<h2 class="text-xl font-semibold text-gray-800 dark:text-neutral-200">
|
||||||
|
<a href="#" class="hover:underline">My Server</a>
|
||||||
|
</h2>
|
||||||
|
<span class="inline-flex items-center gap-1.5 py-1.5 px-2 text-xs font-medium bg-blue-100 text-blue-800 rounded-full dark:bg-blue-500/10 dark:text-blue-500">
|
||||||
|
<span class="size-1.5 inline-block bg-blue-800 rounded-full dark:bg-blue-500"></span>
|
||||||
|
Active
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1.5 text-sm text-gray-500 dark:text-neutral-500">C1#1234</p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-neutral-500">2 vCPUs / 4 GB RAM / 40 GB SSD</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
<div class="text-end">
|
||||||
|
<div class="flex justify-between items-center gap-x-2 mb-1">
|
||||||
|
<div></div>
|
||||||
|
<a href="#"
|
||||||
|
class="font-medium text-sm text-gray-800 dark:text-neutral-200 flex items-center hover:underline">
|
||||||
|
<span>127.0.0.1</span>
|
||||||
|
<span href="#" class="ml-2">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="0"
|
||||||
|
stroke="currentColor"
|
||||||
|
class="size-4">
|
||||||
|
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M21 8C21 6.34315 19.6569 5 18 5H10C8.34315 5 7 6.34315 7 8V20C7 21.6569 8.34315 23 10 23H18C19.6569 23 21 21.6569 21 20V8ZM19 8C19 7.44772 18.5523 7 18 7H10C9.44772 7 9 7.44772 9 8V20C9 20.5523 9.44772 21 10 21H18C18.5523 21 19 20.5523 19 20V8Z" />
|
||||||
|
<path fill="currentColor" d="M6 3H16C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1H6C4.34315 1 3 2.34315 3 4V18C3 18.5523 3.44772 19 4 19C4.55228 19 5 18.5523 5 18V4C5 3.44772 5.44772 3 6 3Z" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
</div>
|
||||||
|
<!-- End Grid -->
|
||||||
|
<!-- Progress -->
|
||||||
|
<div class="my-4">
|
||||||
|
<div class="flex justify-between items-center gap-x-2 mb-1 -mt-9">
|
||||||
|
<div></div>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-neutral-500">Created 9 hours ago</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Body -->
|
||||||
|
</div>
|
||||||
|
<!-- End Card -->
|
||||||
|
</div>
|
||||||
|
<!-- End Grid -->
|
||||||
|
{% endblock content %}
|
||||||
18
templates/auth/base.jinja
Normal file
18
templates/auth/base.jinja
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
{% include "partials/_head.jinja" %}
|
||||||
|
<title>
|
||||||
|
{% block title %}
|
||||||
|
{% endblock title %}
|
||||||
|
큐브로드
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-100 flex min-h-screen items-center justify-center py-16 dark:bg-neutral-800">
|
||||||
|
<main class="w-full max-w-md mx-auto p-6">
|
||||||
|
{% block content %}
|
||||||
|
{% endblock content %}
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
<script src="/node_modules/preline/dist/preline.js"></script>
|
||||||
|
</html>
|
||||||
132
templates/auth/login.jinja
Normal file
132
templates/auth/login.jinja
Normal file
|
|
@ -0,0 +1,132 @@
|
||||||
|
{% extends "auth/base.jinja" %}
|
||||||
|
{% block title %}
|
||||||
|
Login -
|
||||||
|
{% endblock title %}
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="{{ url_for('static', filename='css/index.css') }}" />
|
||||||
|
{% endblock head %}
|
||||||
|
{% block content %}
|
||||||
|
<div class="mt-7 bg-white border border-gray-200 rounded-xl shadow-2xs dark:bg-neutral-900 dark:border-neutral-700">
|
||||||
|
<div class="p-4 sm:p-7">
|
||||||
|
<div class="text-center">
|
||||||
|
<h1 class="block text-2xl font-bold text-gray-800 dark:text-white">Sign in</h1>
|
||||||
|
<p class="mt-2 text-sm text-gray-600 dark:text-neutral-400">
|
||||||
|
Don't have an account yet?
|
||||||
|
<a class="text-blue-600 decoration-2 hover:underline focus:outline-hidden focus:underline font-medium dark:text-blue-500"
|
||||||
|
href="../../examples/html/signup.html">Sign up here</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-5">
|
||||||
|
<button type="button"
|
||||||
|
class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
|
||||||
|
<svg class="w-4 h-auto"
|
||||||
|
width="46"
|
||||||
|
height="47"
|
||||||
|
viewBox="0 0 46 47"
|
||||||
|
fill="none">
|
||||||
|
<path d="M46 24.0287C46 22.09 45.8533 20.68 45.5013 19.2112H23.4694V27.9356H36.4069C36.1429 30.1094 34.7347 33.37 31.5957 35.5731L31.5663 35.8669L38.5191 41.2719L38.9885 41.3306C43.4477 37.2181 46 31.1669 46 24.0287Z" fill="#4285F4" />
|
||||||
|
<path d="M23.4694 47C29.8061 47 35.1161 44.9144 39.0179 41.3012L31.625 35.5437C29.6301 36.9244 26.9898 37.8937 23.4987 37.8937C17.2793 37.8937 12.0281 33.7812 10.1505 28.1412L9.88649 28.1706L2.61097 33.7812L2.52296 34.0456C6.36608 41.7125 14.287 47 23.4694 47Z" fill="#34A853" />
|
||||||
|
<path d="M10.1212 28.1413C9.62245 26.6725 9.32908 25.1156 9.32908 23.5C9.32908 21.8844 9.62245 20.3275 10.0918 18.8588V18.5356L2.75765 12.8369L2.52296 12.9544C0.909439 16.1269 0 19.7106 0 23.5C0 27.2894 0.909439 30.8731 2.49362 34.0456L10.1212 28.1413Z" fill="#FBBC05" />
|
||||||
|
<path d="M23.4694 9.07688C27.8699 9.07688 30.8622 10.9863 32.5344 12.5725L39.1645 6.11C35.0867 2.32063 29.8061 0 23.4694 0C14.287 0 6.36607 5.2875 2.49362 12.9544L10.0918 18.8588C11.9987 13.1894 17.25 9.07688 23.4694 9.07688Z" fill="#EB4335" />
|
||||||
|
</svg>
|
||||||
|
Sign in with Google
|
||||||
|
</button>
|
||||||
|
<div class="py-3 flex items-center text-xs text-gray-400 uppercase before:flex-1 before:border-t before:border-gray-200 before:me-6 after:flex-1 after:border-t after:border-gray-200 after:ms-6 dark:text-neutral-500 dark:before:border-neutral-600 dark:after:border-neutral-600">
|
||||||
|
Or
|
||||||
|
</div>
|
||||||
|
<!-- Form -->
|
||||||
|
<form>
|
||||||
|
<div class="grid gap-y-4">
|
||||||
|
<!-- Form Group -->
|
||||||
|
<div>
|
||||||
|
<label for="email" class="block text-sm mb-2 dark:text-white">Email address</label>
|
||||||
|
<div class="relative">
|
||||||
|
<input type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
class="py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"
|
||||||
|
required
|
||||||
|
aria-describedby="email-error">
|
||||||
|
<div class="hidden absolute inset-y-0 end-0 pointer-events-none pe-3">
|
||||||
|
<svg class="size-5 text-red-500"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
aria-hidden="true">
|
||||||
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="hidden text-xs text-red-600 mt-2" id="email-error">
|
||||||
|
Please include a valid email address so we can get back to you
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Form Group -->
|
||||||
|
<!-- Form Group -->
|
||||||
|
<div>
|
||||||
|
<div class="flex flex-wrap justify-between items-center gap-2">
|
||||||
|
<label for="password" class="block text-sm mb-2 dark:text-white">Password</label>
|
||||||
|
<a class="inline-flex items-center gap-x-1 text-sm text-blue-600 decoration-2 hover:underline focus:outline-hidden focus:underline font-medium dark:text-blue-500"
|
||||||
|
href="../../examples/html/recover-account.html">Forgot password?</a>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<input type="password"
|
||||||
|
id="password"
|
||||||
|
name="password"
|
||||||
|
class="py-2.5 sm:py-3 px-4 block w-full border-gray-200 rounded-lg sm:text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"
|
||||||
|
required
|
||||||
|
aria-describedby="password-error">
|
||||||
|
<div class="hidden absolute inset-y-0 end-0 pointer-events-none pe-3">
|
||||||
|
<svg class="size-5 text-red-500"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
aria-hidden="true">
|
||||||
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="hidden text-xs text-red-600 mt-2" id="password-error">8+ characters required</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Form Group -->
|
||||||
|
<!-- Checkbox -->
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex">
|
||||||
|
<input id="remember-me"
|
||||||
|
name="remember-me"
|
||||||
|
type="checkbox"
|
||||||
|
class="shrink-0 mt-0.5 border-gray-200 rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
|
||||||
|
</div>
|
||||||
|
<div class="ms-3">
|
||||||
|
<label for="remember-me" class="text-sm dark:text-white">Remember me</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Checkbox -->
|
||||||
|
<button type="submit"
|
||||||
|
class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
|
||||||
|
Sign in
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<!-- End Form -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="mt-3 flex justify-center items-center text-center divide-x divide-gray-300 dark:divide-neutral-700">
|
||||||
|
<a class="pe-3.5 inline-flex items-center gap-x-2 text-sm text-gray-600 decoration-2 hover:underline hover:text-blue-600 dark:text-neutral-500 dark:hover:text-neutral-200"
|
||||||
|
href="../../examples.html">
|
||||||
|
<svg class="size-2.5"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
fill="none">
|
||||||
|
<path d="M11.2792 1.64001L5.63273 7.28646C5.43747 7.48172 5.43747 7.79831 5.63273 7.99357L11.2792 13.64" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||||
|
</svg>
|
||||||
|
Go back
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
{% endblock content %}
|
||||||
12
templates/auth/recovery.jinja
Normal file
12
templates/auth/recovery.jinja
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
{% extends "auth/base.jinja" %}
|
||||||
|
{% block title %}
|
||||||
|
Home - My Site
|
||||||
|
{% endblock title %}
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="{{ url_for('static', filename='css/index.css') }}" />
|
||||||
|
{% endblock head %}
|
||||||
|
{% block content %}
|
||||||
|
{% include "partials/_recovery.jinja" %}
|
||||||
|
{% endblock content %}
|
||||||
25
templates/auth/register.jinja
Normal file
25
templates/auth/register.jinja
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
{% extends "auth/base.jinja" %}
|
||||||
|
{% block title %}
|
||||||
|
Home - My Site
|
||||||
|
{% endblock title %}
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="{{ url_for('static', filename='css/index.css') }}" />
|
||||||
|
{% endblock head %}
|
||||||
|
{% block content %}
|
||||||
|
{% include "partials/_register.jinja" %}
|
||||||
|
<script src="{{ url_for('node_modules', filename='preline/dist/index.js') }}"></script>
|
||||||
|
<script>
|
||||||
|
// Wait for the library to initialize instances
|
||||||
|
window.addEventListener("load", () => {
|
||||||
|
if (!window.$hsStrongPasswordCollection) return;
|
||||||
|
|
||||||
|
window.$hsStrongPasswordCollection.forEach(item => {
|
||||||
|
item.element.minLength = 20; // override minLength
|
||||||
|
// Re-run strength check to update UI
|
||||||
|
item.element.setStrength(item.element.target.value);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock content %}
|
||||||
20
templates/base.jinja
Normal file
20
templates/base.jinja
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
{% include "partials/_head.jinja" %}
|
||||||
|
<title>
|
||||||
|
{% block title %}
|
||||||
|
{% endblock title %}
|
||||||
|
큐브로드
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{% include "partials/_header.jinja" %}
|
||||||
|
<main class="bg-neutral-50">
|
||||||
|
{% block content %}
|
||||||
|
{% endblock content %}
|
||||||
|
</main>
|
||||||
|
{% include "partials/_footer.jinja" %}
|
||||||
|
</body>
|
||||||
|
<script src="/node_modules/preline/dist/preline.js"></script>
|
||||||
|
</html>
|
||||||
12
templates/index.jinja
Normal file
12
templates/index.jinja
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
{% extends "base.jinja" %}
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="{{ url_for('static', filename='css/index.css') }}" />
|
||||||
|
{% endblock head %}
|
||||||
|
{% block content %}
|
||||||
|
{% include "partials/_hero.jinja" %}
|
||||||
|
{% include "partials/_features.jinja" %}
|
||||||
|
{% include "partials/_cta.jinja" %}
|
||||||
|
{% include "partials/_contacts.jinja" %}
|
||||||
|
{% endblock content %}
|
||||||
135
templates/partials/_contacts.jinja
Normal file
135
templates/partials/_contacts.jinja
Normal file
|
|
@ -0,0 +1,135 @@
|
||||||
|
<!-- Contact -->
|
||||||
|
<div id="contact" class="bg-neutral-50">
|
||||||
|
<div class="max-w-5xl px-4 xl:px-0 py-10 lg:py-20 mx-auto">
|
||||||
|
<!-- Title -->
|
||||||
|
<div class="max-w-3xl mb-10 lg:mb-14">
|
||||||
|
<h2 class="text-neutral-900 font-semibold text-2xl md:text-4xl md:leading-tight">이용문의</h2>
|
||||||
|
<p class="mt-1 text-neutral-600">서비스 관련 어려운 점이나, 관심있는 서비스를 알려주세요.</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Title -->
|
||||||
|
<!-- Grid -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-10 lg:gap-x-16">
|
||||||
|
<div class="md:order-2 border-b border-neutral-200 pb-10 mb-10 md:border-b-0 md:pb-0 md:mb-0">
|
||||||
|
<form>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<!-- Input -->
|
||||||
|
<div class="relative">
|
||||||
|
<input type="text"
|
||||||
|
id="hs-tac-input-name"
|
||||||
|
class="peer p-3 sm:p-4 block w-full bg-neutral-100 border border-neutral-200 rounded-lg sm:text-sm text-neutral-900 placeholder:text-transparent focus:outline-hidden focus:ring-0 focus:border-blue-500 disabled:opacity-50 disabled:pointer-events-none focus:pt-6 focus:pb-2 not-placeholder-shown:pt-6 not-placeholder-shown:pb-2 autofill:pt-6 autofill:pb-2"
|
||||||
|
placeholder="Name">
|
||||||
|
<label for="hs-tac-input-name"
|
||||||
|
class="absolute top-0 start-0 p-3 sm:p-4 h-full text-neutral-500 text-sm truncate pointer-events-none transition ease-in-out duration-100 peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-blue-500 peer-not-placeholder-shown:text-xs peer-not-placeholder-shown:-translate-y-1.5 peer-not-placeholder-shown:text-neutral-500">
|
||||||
|
이름
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<!-- End Input -->
|
||||||
|
<!-- Input -->
|
||||||
|
<div class="relative">
|
||||||
|
<input type="email"
|
||||||
|
id="hs-tac-input-email"
|
||||||
|
class="peer p-3 sm:p-4 block w-full bg-neutral-100 border border-neutral-200 rounded-lg sm:text-sm text-neutral-900 placeholder:text-transparent focus:outline-hidden focus:ring-0 focus:border-blue-500 disabled:opacity-50 disabled:pointer-events-none focus:pt-6 focus:pb-2 not-placeholder-shown:pt-6 not-placeholder-shown:pb-2 autofill:pt-6 autofill:pb-2"
|
||||||
|
placeholder="Email">
|
||||||
|
<label for="hs-tac-input-email"
|
||||||
|
class="absolute top-0 start-0 p-3 sm:p-4 h-full text-neutral-500 text-sm truncate pointer-events-none transition ease-in-out duration-100 peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-blue-500 peer-not-placeholder-shown:text-xs peer-not-placeholder-shown:-translate-y-1.5 peer-not-placeholder-shown:text-neutral-500">
|
||||||
|
이메일
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<!-- End Input -->
|
||||||
|
<!-- Textarea -->
|
||||||
|
<div class="relative">
|
||||||
|
<textarea id="hs-tac-message"
|
||||||
|
class="peer p-3 sm:p-4 block w-full bg-neutral-100 border border-neutral-200 rounded-lg sm:text-sm text-neutral-900 placeholder:text-transparent focus:outline-hidden focus:ring-0 focus:border-blue-500 disabled:opacity-50 disabled:pointer-events-none focus:pt-6 focus:pb-2 not-placeholder-shown:pt-6 not-placeholder-shown:pb-2 autofill:pt-6 autofill:pb-2"
|
||||||
|
placeholder="This is a textarea placeholder"
|
||||||
|
data-hs-textarea-auto-height></textarea>
|
||||||
|
<label for="hs-tac-message"
|
||||||
|
class="absolute top-0 start-0 p-3 sm:p-4 h-full text-neutral-500 text-sm truncate pointer-events-none transition ease-in-out duration-100 peer-disabled:opacity-50 peer-disabled:pointer-events-none peer-focus:text-xs peer-focus:-translate-y-1.5 peer-focus:text-blue-500 peer-not-placeholder-shown:text-xs peer-not-placeholder-shown:-translate-y-1.5 peer-not-placeholder-shown:text-neutral-500">
|
||||||
|
프로젝트에 대해 알려주세요
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<!-- End Textarea -->
|
||||||
|
</div>
|
||||||
|
<div class="mt-2">
|
||||||
|
<p class="text-xs text-neutral-500">평균 답변 시간은 평일 기준 1일 이내에요.</p>
|
||||||
|
<p class="mt-5">
|
||||||
|
<a class="group inline-flex items-center gap-x-2 py-2 px-3 bg-blue-600 font-medium text-sm text-white rounded-full focus:outline-hidden"
|
||||||
|
href="#">
|
||||||
|
보내기
|
||||||
|
<svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-0.5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path d="M5 12h14" />
|
||||||
|
<path d="m12 5 7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
<div class="space-y-14">
|
||||||
|
<!-- Item -->
|
||||||
|
<div class="flex gap-x-5">
|
||||||
|
<svg class="shrink-0 size-6 text-neutral-400"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
프로젝트에
|
||||||
|
대해
|
||||||
|
알려주세요
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
|
||||||
|
<circle cx="12" cy="10" r="3" />
|
||||||
|
</svg>
|
||||||
|
<div class="grow">
|
||||||
|
<h4 class="text-neutral-900 font-semibold">주소:</h4>
|
||||||
|
<address class="mt-1 text-neutral-600 text-sm not-italic">
|
||||||
|
X
|
||||||
|
<br>
|
||||||
|
서울, 한국
|
||||||
|
</address>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Item -->
|
||||||
|
<!-- Item -->
|
||||||
|
<div class="flex gap-x-5">
|
||||||
|
<svg class="shrink-0 size-6 text-neutral-400"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path d="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z" />
|
||||||
|
<path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10" />
|
||||||
|
</svg>
|
||||||
|
<div class="grow">
|
||||||
|
<h4 class="text-neutral-900 font-semibold">이메일:</h4>
|
||||||
|
<a class="mt-1 text-neutral-600 text-sm hover:text-neutral-800 focus:outline-hidden focus:text-neutral-800"
|
||||||
|
href="#mailto:support@kubeload.com"
|
||||||
|
target="_blank">support@kubeload.com</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Item -->
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
</div>
|
||||||
|
<!-- End Grid -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Contact -->
|
||||||
14
templates/partials/_cta.jinja
Normal file
14
templates/partials/_cta.jinja
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!-- CTA -->
|
||||||
|
<div class="max-w-6xl px-4 sm:px-6 lg:px-8 mx-auto">
|
||||||
|
<div class="md:-mx-4 xl:-mx-20 px-4 py-6 md:py-12 xl:p-20 rounded-2xl">
|
||||||
|
<div class="mb-4 sm:mb-8 text-center">
|
||||||
|
<p class="mb-2 font-mono text-sm text-gray-500">지금 가입하고</p>
|
||||||
|
<h2 class="font-semibold text-2xl sm:text-4xl text-gray-800">3개월 동안 클라우드를 무료로 사용해보세요</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap justify-center items-center gap-2">
|
||||||
|
<a class="py-2 px-3 md:py-2.5 md:px-4 inline-flex justify-center items-center gap-x-1.5 whitespace-nowrap text-[13px] md:text-sm rounded-lg shadow-md bg-blue-600 text-white hover:bg-blue-700 hover:shadow-none focus:outline-hidden focus:bg-blue-700 focus:shadow-none disabled:opacity-50 disabled:pointer-events-none"
|
||||||
|
href="#">사용하기</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End CTA -->
|
||||||
112
templates/partials/_features.jinja
Normal file
112
templates/partials/_features.jinja
Normal file
|
|
@ -0,0 +1,112 @@
|
||||||
|
{% set buttons = [
|
||||||
|
{
|
||||||
|
"href": "/products/cloud",
|
||||||
|
"product": "클라우드",
|
||||||
|
"description": "루트 액세스가 가능한 서버로, DDoS 방어와 무제한 트래픽이 제공돼요",
|
||||||
|
"price": "최저 월 7,900원",
|
||||||
|
"icon": ' <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M22 14.3529C22 17.4717 19.4416 20 16.2857 20H10.4995C9.55792 18.7465 9 17.1884 9 15.5C9 11.3579 12.3579 8 16.5 8C17.009 8 17.5062 8.05071 17.9868 8.14736C18.0649 8.42841 18.1216 8.71822 18.1551 9.01498C20.393 9.78024 22 11.8811 22 14.3529Z" fill="#155dfc" />
|
||||||
|
<path d="M12.4762 4C9.32028 4 6.7619 6.52827 6.7619 9.64706C6.7619 10.3369 6.88706 10.9978 7.11616 11.6089C6.8475 11.5567 6.56983 11.5294 6.28571 11.5294C3.91878 11.5294 2 13.4256 2 15.7647C2 18.1038 3.91878 20 6.28571 20H10.4995C9.55792 18.7465 9 17.1884 9 15.5C9 11.3579 12.3579 8 16.5 8C17.009 8 17.5062 8.05071 17.9868 8.14736C17.9721 8.09441 17.9566 8.04178 17.9403 7.98948C17.2237 5.67956 15.0484 4 12.4762 4Z" fill="#155dfc" />'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"href": "/products/dns",
|
||||||
|
"product": "DNS",
|
||||||
|
"description": "대시보드에서 DNS 레코드를 몇 번의 클릭으로 쉽게 관리할 수 있어요",
|
||||||
|
"price": "무료",
|
||||||
|
"icon": '<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M12.4277 2C11.3139 2 10.2995 2.6007 8.27081 3.80211L7.58466 4.20846C5.55594 5.40987 4.54158 6.01057 3.98466 7C3.42773 7.98943 3.42773 9.19084 3.42773 11.5937V12.4063C3.42773 14.8092 3.42773 16.0106 3.98466 17C4.54158 17.9894 5.55594 18.5901 7.58466 19.7915L8.27081 20.1979C10.2995 21.3993 11.3139 22 12.4277 22C13.5416 22 14.5559 21.3993 16.5847 20.1979L17.2708 19.7915C19.2995 18.5901 20.3139 17.9894 20.8708 17C21.4277 16.0106 21.4277 14.8092 21.4277 12.4063V11.5937C21.4277 9.19084 21.4277 7.98943 20.8708 7C20.3139 6.01057 19.2995 5.40987 17.2708 4.20846L16.5847 3.80211C14.5559 2.6007 13.5416 2 12.4277 2Z" fill="#155dfc" /> <path d="M12.4277 8.25C10.3567 8.25 8.67773 9.92893 8.67773 12C8.67773 14.0711 10.3567 15.75 12.4277 15.75C14.4988 15.75 16.1777 14.0711 16.1777 12C16.1777 9.92893 14.4988 8.25 12.4277 8.25Z" fill="#155dfc" />'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"href": "/products/storage",
|
||||||
|
"product": "저장소",
|
||||||
|
"description": "SFTP와 WebDAV를 지원하며, 안전하고 확장 가능하고 온라인 백업으로도 활용 가능해요",
|
||||||
|
"price": "최저 월 7,900원",
|
||||||
|
"icon": ' <path d="M8.42229 20.6181C10.1779 21.5395 11.0557 22.0001 12 22.0001V12.0001L2.63802 7.07275C2.62423 7.09491 2.6107 7.11727 2.5974 7.13986C2 8.15436 2 9.41678 2 11.9416V12.0586C2 14.5834 2 15.8459 2.5974 16.8604C3.19479 17.8749 4.27063 18.4395 6.42229 19.5686L8.42229 20.6181Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.7" d="M17.5774 4.43152L15.5774 3.38197C13.8218 2.46066 12.944 2 11.9997 2C11.0554 2 10.1776 2.46066 8.42197 3.38197L6.42197 4.43152C4.31821 5.53552 3.24291 6.09982 2.6377 7.07264L11.9997 12L21.3617 7.07264C20.7564 6.09982 19.6811 5.53552 17.5774 4.43152Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.5" d="M21.4026 7.13986C21.3893 7.11727 21.3758 7.09491 21.362 7.07275L12 12.0001V22.0001C12.9443 22.0001 13.8221 21.5395 15.5777 20.6181L17.5777 19.5686C19.7294 18.4395 20.8052 17.8749 21.4026 16.8604C22 15.8459 22 14.5834 22 12.0586V11.9416C22 9.41678 22 8.15436 21.4026 7.13986Z" fill="#155dfc" />'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"href": "/products/loadbalancer",
|
||||||
|
"product": "로드밸런서",
|
||||||
|
"description": "여러 서버에 트래픽을 나누어 하나의 문제로 전체 서비스가 영향을 받지 않도록 하세요",
|
||||||
|
"price": "최저 월 16.900원",
|
||||||
|
"icon": '<path d="M8.0374 9.85761C7.78266 9.73024 7.47314 9.84107 7.35714 10.1012L3.16447 19.5029C2.49741 20.9987 3.97865 22.5503 5.36641 21.8093L11.2701 18.6573C11.7293 18.4121 12.2697 18.4121 12.7289 18.6573L18.6326 21.8093C20.0204 22.5503 21.5016 20.9987 20.8346 19.5029L19.2629 15.9785C19.0743 15.5557 18.7448 15.2113 18.3307 15.0043L8.0374 9.85761Z" fill="#155dfc" /> <path opacity="0.5" d="M8.6095 8.46721C8.37019 8.34755 8.26749 8.06071 8.37646 7.81635L10.5271 2.99379C11.1174 1.67004 12.8818 1.67004 13.4722 2.99379L17.4401 11.8915C17.6313 12.3202 17.1797 12.7523 16.7598 12.5424L8.6095 8.46721Z" fill="#155dfc" />'
|
||||||
|
},
|
||||||
|
] %}
|
||||||
|
<!--
|
||||||
|
{
|
||||||
|
"href": "/products/ai",
|
||||||
|
"product": "AI",
|
||||||
|
"description": "저렴한 가격으로 데이터 센터에서 GPU를 대여하여 AI 및 머신러닝 작업을 처리할 수 있어요",
|
||||||
|
"price": "출시 예정",
|
||||||
|
"icon": '<path d="M21.2058 15.9119C20.9921 15.9989 20.7565 16.1 20.4946 16.2127L20.4845 16.217C19.9982 16.4262 19.44 16.6663 18.8314 16.8912C17.6046 17.3446 16.1383 17.7502 14.5091 17.7502C12.6959 17.7502 11.3063 17.2655 10.1918 16.731C9.76157 16.5247 9.36342 16.3062 9.01252 16.1136C8.91833 16.0619 8.82723 16.0119 8.74015 15.9647C8.31075 15.7319 7.97599 15.5652 7.67788 15.4714C6.34018 15.0505 5.04861 14.8691 4.08751 14.7938C3.6084 14.7563 3.21511 14.7454 2.94401 14.7439C2.80855 14.7431 2.70386 14.7446 2.63452 14.7463C2.59986 14.7471 2.57406 14.748 2.55768 14.7486L2.54028 14.7493L2.53747 14.7494L2.38477 14.7571C3.58171 18.9391 7.43333 22 11.9999 22C16.1345 22 19.6831 19.4907 21.2058 15.9119Z" fill="#155dfc" />
|
||||||
|
<path d="M3.23676 7.17868L3.53394 7.48144L3.53709 7.48459L3.55582 7.50294C3.57379 7.52036 3.60263 7.54786 3.64202 7.58403C3.72083 7.6564 3.84159 7.76321 4.0016 7.89306C4.32207 8.15313 4.79725 8.50343 5.40559 8.85435C6.62489 9.55771 8.35499 10.2501 10.4369 10.2501C11.8105 10.2501 12.8621 9.85611 13.7542 9.38998C14.1093 9.20444 14.429 9.01331 14.7466 8.82347C14.8383 8.76869 14.9298 8.71401 15.0219 8.6596C15.4141 8.42789 15.8325 8.1918 16.2565 8.04645C17.6126 7.58156 18.7967 7.38416 19.6473 7.30323C20.0728 7.26273 20.4159 7.25129 20.6566 7.25025C20.7104 7.25002 20.759 7.25031 20.8024 7.2509C19.1119 4.12408 15.8039 2 11.9999 2C8.22517 2 4.93895 4.09141 3.23676 7.17868Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.5" d="M21.7753 14.1179C21.9225 13.4352 22 12.7267 22 12.0001C22 10.8787 21.8154 9.80039 21.475 8.79394L20.9481 8.75617L20.947 8.75609L20.9374 8.75555C20.9272 8.755 20.91 8.75416 20.886 8.75332C20.838 8.75162 20.7629 8.74988 20.6632 8.75032C20.4637 8.75118 20.1661 8.76073 19.7895 8.79656C19.0358 8.86828 17.9699 9.04491 16.7431 9.46547C16.4799 9.55569 16.1798 9.71791 15.785 9.95116C15.7058 9.99794 15.623 10.0474 15.537 10.0989C15.2148 10.2916 14.8462 10.512 14.449 10.7195C13.419 11.2577 12.1263 11.7502 10.437 11.7502C8.01897 11.7502 6.03049 10.9465 4.65621 10.1537C3.96776 9.75661 3.4274 9.35884 3.05652 9.05786C2.87086 8.90719 2.727 8.78023 2.62761 8.68896C2.60946 8.67229 2.59278 8.65681 2.5776 8.64258C2.20363 9.692 2 10.8223 2 12.0001C2 12.4305 2.02719 12.8545 2.07994 13.2706L2.46407 13.2513L2.46666 13.2512L2.47465 13.2508L2.50174 13.2497C2.52466 13.2489 2.55722 13.2478 2.59884 13.2468C2.68207 13.2448 2.80162 13.2431 2.95282 13.244C3.25506 13.2457 3.68485 13.2578 4.20473 13.2985C5.24158 13.3796 6.65156 13.576 8.1282 14.0406C8.57883 14.1824 9.02704 14.414 9.45523 14.6461C9.5548 14.7001 9.65396 14.7545 9.75352 14.8091C10.0999 14.9991 10.4512 15.1918 10.8405 15.3786C11.8204 15.8484 12.9851 16.2503 14.5092 16.2503C15.8918 16.2503 17.1709 15.9059 18.3115 15.4843C18.8824 15.2734 19.4099 15.0465 19.9021 14.8348L19.9204 14.8269C20.3949 14.6228 20.8566 14.4242 21.2628 14.2888L21.7753 14.1179Z" fill="#155dfc" />'
|
||||||
|
}
|
||||||
|
] %} -->
|
||||||
|
<!-- Features -->
|
||||||
|
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||||
|
<div class="max-w-2xl mx-auto text-center pt-20 pb-6 lg:pb-16 px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-2xl font-bold sm:text-3xl md:text-4xl">한 눈에 보는 서비스</h2>
|
||||||
|
<p class="mt-4 md:text-lg text-gray-600">클라우드, 저장소, DNS, 로드밸런서까지, 모든 상황에 최적화된 다양한 서비스를 만 원도 안 되는 가격에 사용하세요.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Tab Nav -->
|
||||||
|
<nav class="max-w-6xl mx-auto flex flex-col sm:flex-row gap-y-px sm:gap-y-0 sm:gap-x-5 md:gap-x-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
|
||||||
|
aria-label="Tabs"
|
||||||
|
role="tablist"
|
||||||
|
aria-orientation="horizontal">
|
||||||
|
{% for button in buttons %}
|
||||||
|
<a href="{{ button.href }}"
|
||||||
|
class="hs-tab-active:hover:shadow-lg bg-white hs-tab-active:bg-gray-50 w-full flex flex-col text-start rounded-xl mb-5"
|
||||||
|
id="tabs-with-card-item-1"
|
||||||
|
aria-selected="true"
|
||||||
|
data-hs-tab="#tabs-with-card-1"
|
||||||
|
aria-controls="tabs-with-card-1"
|
||||||
|
role="tab">
|
||||||
|
<div class="p-4 sm:p-6 relative flex flex-col items-start rounded-xl before:absolute before:inset-0 before:z-10 before:border before:border-gray-200 before:rounded-xl before:transition hover:before:border-2 hover:before:border-blue-600 hover:before:shadow-lg focus:before:border-2 focus:before:border-blue-600 focus:before:shadow-lg">
|
||||||
|
<div class="mb-4 flex flex-col items-start">
|
||||||
|
<!-- Icon aligned to the left -->
|
||||||
|
<span class="flex justify-center items-center size-12 xl:size-16 bg-blue-50 text-white rounded-2xl">
|
||||||
|
<svg class="shrink-0 size-6 xl:w-7 xl:h-7 text-blue-600"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="0"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
{{ button.icon }}
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="mt-4 font-medium text-gray-800">{{ button.product }}</h4>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">{{ button.description }}</p>
|
||||||
|
<span class="underline inline-flex items-center gap-x-1 py-4 text-sm text-gray-800 hover:text-blue-600 focus:outline-hidden focus:text-blue-600">
|
||||||
|
{{ button.price }}
|
||||||
|
<svg class="shrink-0 size-4"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path d="m9 18 6-6-6-6"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
{% if loop.index == 5 %}
|
||||||
|
<span class="absolute top-1.5 end-2 pointer-events-none">
|
||||||
|
<span class="py-px px-1 min-w-5 inline-flex justify-center items-center gap-x-1 text-xs rounded-full border border-blue-200 bg-blue-100 text-blue-800">
|
||||||
|
<span class="px-0.5">Coming soon</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</nav>
|
||||||
|
<!-- End Tab Nav -->
|
||||||
|
</div>
|
||||||
|
<!-- End Features -->
|
||||||
156
templates/partials/_footer.jinja
Normal file
156
templates/partials/_footer.jinja
Normal file
|
|
@ -0,0 +1,156 @@
|
||||||
|
<footer class="mt-auto bg-white">
|
||||||
|
<div class="w-full max-w-6xl mx-auto pt-10 lg:pt-20 px-4 sm:px-6 lg:px-8">
|
||||||
|
<!-- Grid -->
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-5 mb-6 md:mb-14">
|
||||||
|
<div class="col-span-2 md:col-span-1 h-full flex flex-row md:flex-col justify-between gap-5">
|
||||||
|
<div>
|
||||||
|
<!-- Logo -->
|
||||||
|
<a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80"
|
||||||
|
href="/"
|
||||||
|
aria-label="Kubeload">
|
||||||
|
<svg class="w-24 h-auto"
|
||||||
|
width="116"
|
||||||
|
height="32"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 10C2 5.61631 5.43583 2 9.75 2C13.4633 2 16.5282 4.68197 17.3077 8.22257C19.9376 8.2545 22 10.465 22 13.1111C22 15.7766 19.9073 18 17.25 18H9.75C5.43583 18 2 14.3837 2 10Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<!-- End Logo -->
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<!-- Social Brands -->
|
||||||
|
<div class="-mx-2.5 flex flex-wrap items-center gap-1">
|
||||||
|
<a class="flex flex-col justify-center items-center size-7 md:size-9 rounded-full text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100"
|
||||||
|
href="#">
|
||||||
|
<svg class="shrink-0 size-3.5"
|
||||||
|
width="48"
|
||||||
|
height="50"
|
||||||
|
viewBox="0 0 48 50"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M28.5665 20.7714L46.4356 0H42.2012L26.6855 18.0355L14.2931 0H0L18.7397 27.2728L0 49.0548H4.23464L20.6196 30.0087L33.7069 49.0548H48L28.5655 20.7714H28.5665ZM22.7666 27.5131L5.76044 3.18778H12.2646L42.2032 46.012H35.699L22.7666 27.5142V27.5131Z" fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
<span class="sr-only">X (Twitter)</span>
|
||||||
|
</a>
|
||||||
|
<a class="flex flex-col justify-center items-center size-7 md:size-9 rounded-full text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100"
|
||||||
|
href="#">
|
||||||
|
<svg class="shrink-0 size-4"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
|
||||||
|
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
|
||||||
|
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
|
||||||
|
</svg>
|
||||||
|
<span class="sr-only">Instagram</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<!-- End Social Brands -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
<div>
|
||||||
|
<h4 class="mb-1 md:mb-3 font-medium text-sm text-gray-800">기업</h4>
|
||||||
|
<ul class="grid md:space-y-2">
|
||||||
|
<li>
|
||||||
|
<a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
|
||||||
|
href="#">소개</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
|
||||||
|
href="#">채용</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
<div>
|
||||||
|
<h4 class="mb-1 md:mb-3 font-medium text-sm text-gray-800">제품</h4>
|
||||||
|
<ul class="grid md:space-y-2">
|
||||||
|
<li>
|
||||||
|
<a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
|
||||||
|
href="#">클라우드</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
|
||||||
|
href="#">AI</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
|
||||||
|
href="#">저장소</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
|
||||||
|
href="#">DNS</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
|
||||||
|
href="#">로드밸런서</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-10">
|
||||||
|
<h4 class="mb-1 md:mb-3 font-medium text-sm text-gray-800">법률</h4>
|
||||||
|
<ul class="grid md:space-y-2">
|
||||||
|
<li>
|
||||||
|
<a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
|
||||||
|
href="#">신고 (Report Abuse)</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
<!-- End Col -->
|
||||||
|
<div>
|
||||||
|
<h4 class="mb-1 md:mb-3 font-medium text-sm text-gray-800">도움</h4>
|
||||||
|
<ul class="grid md:space-y-2">
|
||||||
|
<li>
|
||||||
|
<a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
|
||||||
|
href="#">고객센터</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
|
||||||
|
href="#">자주하는 질문</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
|
||||||
|
href="#">환불 정책</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
|
||||||
|
href="#">공정 사용 정책</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="text-[13px] md:text-sm text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
|
||||||
|
href="#">문의하기</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
</div>
|
||||||
|
<!-- End Grid -->
|
||||||
|
</div>
|
||||||
|
<div class="w-full max-w-6xl pb-10 lg:pb-20 mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex flex-wrap justify-between items-center gap-3">
|
||||||
|
<!-- List -->
|
||||||
|
<ul class="flex flex-wrap items-center whitespace-nowrap gap-3">
|
||||||
|
<li class="inline-flex items-center relative text-xs text-gray-500 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:end-0 after:inline-block after:size-[3px] after:bg-gray-400 after:rounded-full after:-translate-y-1/2">
|
||||||
|
<a class="text-xs text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
|
||||||
|
href="#">이용약관</a>
|
||||||
|
</li>
|
||||||
|
<li class="inline-flex items-center relative text-xs text-gray-500 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:end-0 after:inline-block after:size-[3px] after:bg-gray-400 after:rounded-full after:-translate-y-1/2">
|
||||||
|
<a class="text-xs text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800"
|
||||||
|
href="#">개인정보처리방침</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!-- End List -->
|
||||||
|
<p class="text-xs text-gray-500">© 2025-2026 Kubeload.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
11
templates/partials/_head.jinja
Normal file
11
templates/partials/_head.jinja
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="keywords" content="">
|
||||||
|
<meta name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover">
|
||||||
|
<link rel="icon"
|
||||||
|
type="image/svg+xml"
|
||||||
|
href="{{ url_for('static', filename='favicon.svg') }}">
|
||||||
|
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="{{ url_for('static', filename='css/tailwind.css') }}" />
|
||||||
110
templates/partials/_header.jinja
Normal file
110
templates/partials/_header.jinja
Normal file
|
|
@ -0,0 +1,110 @@
|
||||||
|
<header class="sticky top-0 inset-x-0 z-50 bg-white">
|
||||||
|
<nav class="max-w-6xl basis-full w-full py-4 px-4 sm:px-6 lg:px-8 lg:mx-auto">
|
||||||
|
<div class="flex flex-wrap md:flex-nowrap basis-full justify-between gap-x-2 w-full">
|
||||||
|
<div class="flex items-center gap-x-1">
|
||||||
|
<!-- Logo -->
|
||||||
|
<a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80"
|
||||||
|
href="/"
|
||||||
|
aria-label="Kubeload">
|
||||||
|
<svg class="w-24 h-auto"
|
||||||
|
width="116"
|
||||||
|
height="32"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 10C2 5.61631 5.43583 2 9.75 2C13.4633 2 16.5282 4.68197 17.3077 8.22257C19.9376 8.2545 22 10.465 22 13.1111C22 15.7766 19.9073 18 17.25 18H9.75C5.43583 18 2 14.3837 2 10Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<!-- End Logo -->
|
||||||
|
<div class="ms-1 sm:ms-2"></div>
|
||||||
|
</div>
|
||||||
|
<!-- Button Group -->
|
||||||
|
<div class="md:order-3 flex gap-x-1">
|
||||||
|
<a class="py-2 px-2.5 flex items-center gap-x-1.5 whitespace-nowrap text-[13px] md:text-sm text-start text-gray-800 rounded-lg hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100"
|
||||||
|
href="#">로그인</a>
|
||||||
|
<a class="py-2 px-2.5 inline-flex items-center gap-x-1.5 whitespace-nowrap text-[13px] md:text-sm rounded-lg shadow-md bg-blue-600 text-white hover:bg-blue-700 hover:shadow-none focus:outline-hidden focus:bg-blue-700 focus:shadow-none disabled:opacity-50 disabled:pointer-events-none"
|
||||||
|
href="#">가입하기</a>
|
||||||
|
<!-- Collapse Button Trigger -->
|
||||||
|
<button type="button"
|
||||||
|
class="hs-collapse-toggle md:hidden flex justify-center items-center size-9 rounded-lg shadow-2xs bg-white border border-gray-200 text-sm text-gray-800 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none"
|
||||||
|
id="hs-pro-dmh-collapse"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-controls="hs-pro-dmh"
|
||||||
|
aria-label="Toggle navigation"
|
||||||
|
data-hs-collapse="#hs-pro-dmh">
|
||||||
|
<svg class="shrink-0 size-4"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="1" />
|
||||||
|
<circle cx="12" cy="5" r="1" />
|
||||||
|
<circle cx="12" cy="19" r="1" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<!-- End Collapse Button Trigger -->
|
||||||
|
</div>
|
||||||
|
<!-- End Button Group -->
|
||||||
|
<!-- Collapse -->
|
||||||
|
<div id="hs-pro-dmh"
|
||||||
|
class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow md:block bg-white"
|
||||||
|
aria-labelledby="hs-pro-dmh-collapse">
|
||||||
|
<div class="overflow-hidden overflow-y-auto max-h-[75vh] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-white/10 [&::-webkit-scrollbar-thumb]:bg-white/30">
|
||||||
|
<!-- Nav -->
|
||||||
|
<div class="flex flex-col md:flex-row md:gap-y-0 md:gap-x-1 py-2 md:p-0">
|
||||||
|
<a class="py-2 px-2.5 flex items-center gap-x-1.5 text-sm whitespace-nowrap text-start text-gray-800 rounded-lg hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100"
|
||||||
|
href="../products/cloud">클라우드</a>
|
||||||
|
<!-- <a class="py-2 px-2.5 flex items-center gap-x-1.5 text-sm whitespace-nowrap text-start text-gray-800 rounded-lg hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100" href="../products/ai">AI</a>-->
|
||||||
|
<a class="py-2 px-2.5 flex items-center gap-x-1.5 text-sm whitespace-nowrap text-start text-gray-800 rounded-lg hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100"
|
||||||
|
href="../products/storage">저장소</a>
|
||||||
|
<!-- Dropdown Link -->
|
||||||
|
<div class="hs-dropdown [--strategy:static] md:[--strategy:fixed] [--adaptive:none] md:[--adaptive:adaptive] md:[--trigger:hover] md:inline-block">
|
||||||
|
<!-- Link -->
|
||||||
|
<button id="hs-pro-cnncddm"
|
||||||
|
type="button"
|
||||||
|
class="hs-dropdown-toggle py-2 px-2.5 w-full md:w-auto flex items-center gap-x-1.5 text-sm whitespace-nowrap text-start text-gray-800 rounded-lg hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100"
|
||||||
|
aria-haspopup="menu"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-label="Dropdown">
|
||||||
|
서비스
|
||||||
|
<svg class="shrink-0 size-4"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path d="m6 9 6 6 6-6" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<!-- End Link -->
|
||||||
|
<!-- Dropdown Menu -->
|
||||||
|
<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 relative w-full md:w-52 hidden z-10 top-full bg-white md:rounded-lg md:shadow-xl shadow-stone-200 ps-6 md:ps-0 before:absolute before:-top-4 before:start-0 before:w-full before:h-5 md:after:hidden after:absolute after:top-1 after:start-4.5 after:w-0.5 after:h-[calc(100%-4px)] after:bg-stone-100"
|
||||||
|
role="menu"
|
||||||
|
aria-orientation="vertical"
|
||||||
|
aria-labelledby="hs-pro-cnncddm">
|
||||||
|
<div class="p-1 space-y-0.5">
|
||||||
|
<a class="relative group py-2 px-3 flex items-center gap-x-3 text-sm text-gray-800 hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100 "
|
||||||
|
href="../products/dns">DNS</a>
|
||||||
|
<a class="relative group py-2 px-3 flex items-center gap-x-3 text-sm text-gray-800 hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100 "
|
||||||
|
href="../products/loadbalancer">로드밸런서</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Dropdown Menu -->
|
||||||
|
</div>
|
||||||
|
<!-- End Dropdown Link -->
|
||||||
|
<!-- End Nav -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Collapse -->
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
27
templates/partials/_hero.jinja
Normal file
27
templates/partials/_hero.jinja
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<section>
|
||||||
|
<div class="max-w-screen-xl px-4 pt-8 mx-auto text-center lg:pt-16 lg:px-12">
|
||||||
|
<h1 class="mb-4 text-3xl font-bold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-5xl">
|
||||||
|
개발자와 성장하는 기업을 위한 클라우드
|
||||||
|
</h1>
|
||||||
|
<p class="mb-8 text-gray-500 md:text-lg lg:text-xl sm:px-16 xl:px-48">
|
||||||
|
복잡한 설정 없이 단 몇 분 만에 배포하세요. 예측 가능한 정액제 요금으로 비즈니스 성장에 더 집중할 수 있는 환경을 제공해요.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col mb-8 lg:mb-16 space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
|
||||||
|
<a href="#"
|
||||||
|
class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300">
|
||||||
|
빌드 시작하기
|
||||||
|
</a>
|
||||||
|
<a href="#"
|
||||||
|
class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-center text-gray-900 border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-gray-100">
|
||||||
|
개발 가이드
|
||||||
|
<svg class="w-5 h-5 ml-2 -mr-1"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
0
templates/partials/_icons.jinja
Normal file
0
templates/partials/_icons.jinja
Normal file
218
templates/partials/_sidebar.jinja
Normal file
218
templates/partials/_sidebar.jinja
Normal file
|
|
@ -0,0 +1,218 @@
|
||||||
|
<!-- ========== HEADER ========== -->
|
||||||
|
<header class="lg:hidden lg:ms-65 fixed top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-50 bg-white border-b border-gray-200 dark:bg-neutral-800 dark:border-neutral-700">
|
||||||
|
<div class="flex justify-between basis-full items-center w-full py-2.5 px-2 sm:px-5">
|
||||||
|
<!-- Sidebar Toggle -->
|
||||||
|
<button type="button"
|
||||||
|
class="w-7 h-9.5 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
|
||||||
|
aria-haspopup="dialog"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-controls="hs-pro-sidebar"
|
||||||
|
aria-label="Toggle navigation"
|
||||||
|
data-hs-overlay="#hs-pro-sidebar">
|
||||||
|
<svg class="shrink-0 size-4"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path d="M17 8L21 12L17 16M3 12H13M3 6H13M3 18H13" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<!-- End Sidebar Toggle -->
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- ========== END HEADER ========== -->
|
||||||
|
<!-- ========== MAIN SIDEBAR ========== -->
|
||||||
|
<aside id="hs-pro-sidebar"
|
||||||
|
class="hs-overlay [--auto-close:lg] hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform w-65 h-full hidden fixed inset-y-0 start-0 z-60 bg-white border-e border-gray-200 lg:block lg:translate-x-0 lg:end-auto lg:bottom-0 dark:bg-neutral-800 dark:border-neutral-700"
|
||||||
|
tabindex="-1"
|
||||||
|
aria-label="Sidebar">
|
||||||
|
<div class="relative flex flex-col h-full max-h-full pt-3">
|
||||||
|
<header class="h-11.5 ps-5 pe-2 lg:ps-8 flex items-center gap-x-1">
|
||||||
|
<!-- Logo -->
|
||||||
|
<a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80"
|
||||||
|
href="@@href"
|
||||||
|
aria-label="Kubeload">
|
||||||
|
<svg class="w-8 mt-2 -ml-2 h-auto"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 10C2 5.61631 5.43583 2 9.75 2C13.4633 2 16.5282 4.68197 17.3077 8.22257C19.9376 8.2545 22 10.465 22 13.1111C22 15.7766 19.9073 18 17.25 18H9.75C5.43583 18 2 14.3837 2 10Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<!-- End Logo -->
|
||||||
|
<div class="lg:hidden ms-auto">
|
||||||
|
<!-- Sidebar Close -->
|
||||||
|
<button type="button"
|
||||||
|
class="w-6 h-7 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-md border border-gray-200 bg-white text-gray-500 hover:bg-gray-50 focus:outline-hidden focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
|
||||||
|
data-hs-overlay="#hs-pro-sidebar">
|
||||||
|
<svg class="shrink-0 size-4"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<polyline points="7 8 3 12 7 16" /><line x1="21" x2="11" y1="12" y2="12" /><line x1="21" x2="11" y1="6" y2="6" /><line x1="21" x2="11" y1="18" y2="18" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<!-- End Sidebar Close -->
|
||||||
|
</div>
|
||||||
|
<div class="hidden lg:block ms-2"></div>
|
||||||
|
</header>
|
||||||
|
<!-- Content -->
|
||||||
|
<div class="mt-1.5 h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="hs-accordion-group pb-3 w-full flex flex-col flex-wrap"
|
||||||
|
data-hs-accordion-always-open>
|
||||||
|
<ul class="flex flex-col gap-y-1">
|
||||||
|
<!-- Link -->
|
||||||
|
<li class="px-2 lg:px-5">
|
||||||
|
<a class="flex items-center gap-x-3 py-2 px-3 text-sm rounded-lg hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:focus:bg-neutral-700"
|
||||||
|
href="../../pro/dashboard/empty-states.html">
|
||||||
|
<!-- SVG with proper background -->
|
||||||
|
<span class="bg-blue-50 p-1 rounded flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="none">
|
||||||
|
<path opacity="0.4" d="M18.6695 2H16.7695C14.5895 2 13.4395 3.15 13.4395 5.33V7.23C13.4395 9.41 14.5895 10.56 16.7695 10.56H18.6695C20.8495 10.56 21.9995 9.41 21.9995 7.23V5.33C21.9995 3.15 20.8495 2 18.6695 2Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.4" d="M7.24 13.4302H5.34C3.15 13.4302 2 14.5802 2 16.7602V18.6602C2 20.8502 3.15 22.0002 5.33 22.0002H7.23C9.41 22.0002 10.56 20.8502 10.56 18.6702V16.7702C10.57 14.5802 9.42 13.4302 7.24 13.4302Z" fill="#155dfc" />
|
||||||
|
<path d="M6.29 10.58C8.6593 10.58 10.58 8.6593 10.58 6.29C10.58 3.9207 8.6593 2 6.29 2C3.9207 2 2 3.9207 2 6.29C2 8.6593 3.9207 10.58 6.29 10.58Z" fill="#155dfc" />
|
||||||
|
<path d="M17.7099 21.9999C20.0792 21.9999 21.9999 20.0792 21.9999 17.7099C21.9999 15.3406 20.0792 13.4199 17.7099 13.4199C15.3406 13.4199 13.4199 15.3406 13.4199 17.7099C13.4199 20.0792 15.3406 21.9999 17.7099 21.9999Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<!-- End Link -->
|
||||||
|
<li class="px-2 lg:px-5">
|
||||||
|
<a class="flex items-center gap-x-3 py-2 px-3 text-sm rounded-lg hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:focus:bg-neutral-700"
|
||||||
|
href="../../pro/dashboard/empty-states.html">
|
||||||
|
<!-- SVG with proper background -->
|
||||||
|
<span class="bg-blue-50 p-1 rounded flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="none">
|
||||||
|
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M22 14.3529C22 17.4717 19.4416 20 16.2857 20H10.4995C9.55792 18.7465 9 17.1884 9 15.5C9 11.3579 12.3579 8 16.5 8C17.009 8 17.5062 8.05071 17.9868 8.14736C18.0649 8.42841 18.1216 8.71822 18.1551 9.01498C20.393 9.78024 22 11.8811 22 14.3529Z" fill="#155dfc">
|
||||||
|
</path>
|
||||||
|
<path d="M12.4762 4C9.32028 4 6.7619 6.52827 6.7619 9.64706C6.7619 10.3369 6.88706 10.9978 7.11616 11.6089C6.8475 11.5567 6.56983 11.5294 6.28571 11.5294C3.91878 11.5294 2 13.4256 2 15.7647C2 18.1038 3.91878 20 6.28571 20H10.4995C9.55792 18.7465 9 17.1884 9 15.5C9 11.3579 12.3579 8 16.5 8C17.009 8 17.5062 8.05071 17.9868 8.14736C17.9721 8.09441 17.9566 8.04178 17.9403 7.98948C17.2237 5.67956 15.0484 4 12.4762 4Z" fill="#155dfc">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
Cloud
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="px-2 lg:px-5">
|
||||||
|
<a class="flex items-center gap-x-3 py-2 px-3 text-sm rounded-lg hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:focus:bg-neutral-700"
|
||||||
|
href="../../pro/dashboard/empty-states.html">
|
||||||
|
<!-- SVG with proper background -->
|
||||||
|
<span class="bg-blue-50 p-1 rounded flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="none">
|
||||||
|
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M12.4277 2C11.3139 2 10.2995 2.6007 8.27081 3.80211L7.58466 4.20846C5.55594 5.40987 4.54158 6.01057 3.98466 7C3.42773 7.98943 3.42773 9.19084 3.42773 11.5937V12.4063C3.42773 14.8092 3.42773 16.0106 3.98466 17C4.54158 17.9894 5.55594 18.5901 7.58466 19.7915L8.27081 20.1979C10.2995 21.3993 11.3139 22 12.4277 22C13.5416 22 14.5559 21.3993 16.5847 20.1979L17.2708 19.7915C19.2995 18.5901 20.3139 17.9894 20.8708 17C21.4277 16.0106 21.4277 14.8092 21.4277 12.4063V11.5937C21.4277 9.19084 21.4277 7.98943 20.8708 7C20.3139 6.01057 19.2995 5.40987 17.2708 4.20846L16.5847 3.80211C14.5559 2.6007 13.5416 2 12.4277 2Z" fill="#155dfc">
|
||||||
|
</path>
|
||||||
|
<path d="M12.4277 8.25C10.3567 8.25 8.67773 9.92893 8.67773 12C8.67773 14.0711 10.3567 15.75 12.4277 15.75C14.4988 15.75 16.1777 14.0711 16.1777 12C16.1777 9.92893 14.4988 8.25 12.4277 8.25Z" fill="#155dfc">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
DNS
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="px-2 lg:px-5">
|
||||||
|
<a class="flex items-center gap-x-3 py-2 px-3 text-sm rounded-lg hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:focus:bg-neutral-700"
|
||||||
|
href="../../pro/dashboard/empty-states.html">
|
||||||
|
<!-- SVG with proper background -->
|
||||||
|
<span class="bg-blue-50 p-1 rounded flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="none">
|
||||||
|
<path d="M8.42229 20.6181C10.1779 21.5395 11.0557 22.0001 12 22.0001V12.0001L2.63802 7.07275C2.62423 7.09491 2.6107 7.11727 2.5974 7.13986C2 8.15436 2 9.41678 2 11.9416V12.0586C2 14.5834 2 15.8459 2.5974 16.8604C3.19479 17.8749 4.27063 18.4395 6.42229 19.5686L8.42229 20.6181Z" fill="#155dfc">
|
||||||
|
</path>
|
||||||
|
<path opacity="0.7" d="M17.5774 4.43152L15.5774 3.38197C13.8218 2.46066 12.944 2 11.9997 2C11.0554 2 10.1776 2.46066 8.42197 3.38197L6.42197 4.43152C4.31821 5.53552 3.24291 6.09982 2.6377 7.07264L11.9997 12L21.3617 7.07264C20.7564 6.09982 19.6811 5.53552 17.5774 4.43152Z" fill="#155dfc">
|
||||||
|
</path>
|
||||||
|
<path opacity="0.5" d="M21.4026 7.13986C21.3893 7.11727 21.3758 7.09491 21.362 7.07275L12 12.0001V22.0001C12.9443 22.0001 13.8221 21.5395 15.5777 20.6181L17.5777 19.5686C19.7294 18.4395 20.8052 17.8749 21.4026 16.8604C22 15.8459 22 14.5834 22 12.0586V11.9416C22 9.41678 22 8.15436 21.4026 7.13986Z" fill="#155dfc">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
Storage
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="px-2 lg:px-5">
|
||||||
|
<a class="flex items-center gap-x-3 py-2 px-3 text-sm rounded-lg hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:focus:bg-neutral-700"
|
||||||
|
href="../../pro/dashboard/empty-states.html">
|
||||||
|
<!-- SVG with proper background -->
|
||||||
|
<span class="bg-blue-50 p-1 rounded flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="none">
|
||||||
|
<path d="M8.0374 9.85761C7.78266 9.73024 7.47314 9.84107 7.35714 10.1012L3.16447 19.5029C2.49741 20.9987 3.97865 22.5503 5.36641 21.8093L11.2701 18.6573C11.7293 18.4121 12.2697 18.4121 12.7289 18.6573L18.6326 21.8093C20.0204 22.5503 21.5016 20.9987 20.8346 19.5029L19.2629 15.9785C19.0743 15.5557 18.7448 15.2113 18.3307 15.0043L8.0374 9.85761Z" fill="#155dfc">
|
||||||
|
</path>
|
||||||
|
<path opacity="0.5" d="M8.6095 8.46721C8.37019 8.34755 8.26749 8.06071 8.37646 7.81635L10.5271 2.99379C11.1174 1.67004 12.8818 1.67004 13.4722 2.99379L17.4401 11.8915C17.6313 12.3202 17.1797 12.7523 16.7598 12.5424L8.6095 8.46721Z" fill="#155dfc">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
Load Balancer
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="px-2 lg:px-5">
|
||||||
|
<a class="flex items-center gap-x-3 py-2 px-3 text-sm rounded-lg hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:focus:bg-neutral-700"
|
||||||
|
href="../../pro/dashboard/empty-states.html">
|
||||||
|
<!-- SVG with proper background -->
|
||||||
|
<span class="bg-blue-50 p-1 rounded flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="none">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.8293 10.7154L20.3116 12.6473C19.7074 14.9024 19.4052 16.0299 18.7203 16.7612C18.1795 17.3386 17.4796 17.7427 16.7092 17.9223C16.6129 17.9448 16.5152 17.9621 16.415 17.9744C15.4999 18.0873 14.3834 17.7881 12.3508 17.2435C10.0957 16.6392 8.96815 16.3371 8.23687 15.6522C7.65945 15.1114 7.25537 14.4115 7.07573 13.641C6.84821 12.6652 7.15033 11.5377 7.75458 9.28263L8.27222 7.35077C8.3591 7.02654 8.43979 6.7254 8.51621 6.44561C8.97128 4.77957 9.27709 3.86298 9.86351 3.23687C10.4043 2.65945 11.1042 2.25537 11.8747 2.07573C12.8504 1.84821 13.978 2.15033 16.2331 2.75458C18.4881 3.35883 19.6157 3.66095 20.347 4.34587C20.9244 4.88668 21.3285 5.58657 21.5081 6.35703C21.7356 7.3328 21.4335 8.46034 20.8293 10.7154ZM11.0524 9.80589C11.1596 9.40579 11.5709 9.16835 11.971 9.27556L16.8006 10.5697C17.2007 10.6769 17.4381 11.0881 17.3309 11.4882C17.2237 11.8883 16.8125 12.1257 16.4124 12.0185L11.5827 10.7244C11.1826 10.6172 10.9452 10.206 11.0524 9.80589ZM10.2756 12.7033C10.3828 12.3032 10.794 12.0658 11.1941 12.173L14.0919 12.9495C14.492 13.0567 14.7294 13.4679 14.6222 13.868C14.515 14.2681 14.1038 14.5056 13.7037 14.3984L10.8059 13.6219C10.4058 13.5147 10.1683 13.1034 10.2756 12.7033Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.5" d="M16.4149 17.9745C16.2064 18.6128 15.8398 19.1903 15.347 19.6519C14.6157 20.3368 13.4881 20.6389 11.2331 21.2432C8.97798 21.8474 7.85044 22.1496 6.87466 21.922C6.10421 21.7424 5.40432 21.3383 4.86351 20.7609C4.17859 20.0296 3.87647 18.9021 3.27222 16.647L2.75458 14.7152C2.15033 12.4601 1.84821 11.3325 2.07573 10.3568C2.25537 9.5863 2.65945 8.88641 3.23687 8.3456C3.96815 7.66068 5.09569 7.35856 7.35077 6.75431C7.7774 6.64 8.16369 6.53649 8.51621 6.44534C8.51618 6.44545 8.51624 6.44524 8.51621 6.44534C8.43979 6.72513 8.3591 7.02657 8.27222 7.35081L7.75458 9.28266C7.15033 11.5377 6.84821 12.6653 7.07573 13.6411C7.25537 14.4115 7.65945 15.1114 8.23687 15.6522C8.96815 16.3371 10.0957 16.6393 12.3508 17.2435C14.3833 17.7881 15.4999 18.0873 16.4149 17.9745Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
Invoice
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="px-2 lg:px-5">
|
||||||
|
<a class="flex items-center gap-x-3 py-2 px-3 text-sm rounded-lg hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-300 dark:focus:bg-neutral-700"
|
||||||
|
href="../../pro/dashboard/empty-states.html">
|
||||||
|
<!-- SVG with proper background -->
|
||||||
|
<span class="bg-blue-50 p-1 rounded flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="none">
|
||||||
|
<path opacity="0.4" d="M12 2C9.38 2 7.25 4.13 7.25 6.75C7.25 9.32 9.26 11.4 11.88 11.49C11.96 11.48 12.04 11.48 12.1 11.49C12.12 11.49 12.13 11.49 12.15 11.49C12.16 11.49 12.16 11.49 12.17 11.49C14.73 11.4 16.74 9.32 16.75 6.75C16.75 4.13 14.62 2 12 2Z" fill="#155dfc" />
|
||||||
|
<path d="M17.0809 14.1499C14.2909 12.2899 9.74094 12.2899 6.93094 14.1499C5.66094 14.9999 4.96094 16.1499 4.96094 17.3799C4.96094 18.6099 5.66094 19.7499 6.92094 20.5899C8.32094 21.5299 10.1609 21.9999 12.0009 21.9999C13.8409 21.9999 15.6809 21.5299 17.0809 20.5899C18.3409 19.7399 19.0409 18.5999 19.0409 17.3599C19.0309 16.1299 18.3409 14.9899 17.0809 14.1499Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
Account
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<!-- End Link -->
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<!-- End Nav -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- ========== END MAIN SIDEBAR ========== -->
|
||||||
418
templates/products/ai.jinja
Normal file
418
templates/products/ai.jinja
Normal file
|
|
@ -0,0 +1,418 @@
|
||||||
|
{% extends "base.jinja" %}
|
||||||
|
{% block title %}
|
||||||
|
인공지능 -
|
||||||
|
{% endblock title %}
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="{{ url_for('static', filename='css/index.css') }}" />
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const prices = [...document.querySelectorAll('[data-hs-toggle-count-custom]')];
|
||||||
|
const yearly = document.getElementById('toggle-count-with-yearly');
|
||||||
|
const update = () => prices.forEach(p => p.textContent = (JSON.parse(p.dataset.hsToggleCountCustom)[yearly.checked ? 'yearly' : 'monthly']).toLocaleString());
|
||||||
|
document.querySelectorAll('input[name="hs-pro-toggle-count"]').forEach(r => r.addEventListener('change', update));
|
||||||
|
update();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<!-- Announcement Banner -->
|
||||||
|
<div id="ab-full-width-with-dismiss-button-on-blue-bg"
|
||||||
|
class="hs-removing:-translate-y-full bg-blue-600">
|
||||||
|
<div class="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
|
||||||
|
<div class="flex">
|
||||||
|
<p class="text-white">큐브 AI는 2026년 출시 예정이에요</p>
|
||||||
|
<div class="ps-3 ms-auto">
|
||||||
|
<button type="button"
|
||||||
|
class="inline-flex rounded-lg p-1.5 text-white/80 hover:bg-white/10 focus:outline-hidden focus:bg-white/10"
|
||||||
|
data-hs-remove-element="#ab-full-width-with-dismiss-button-on-blue-bg">
|
||||||
|
<span class="sr-only">Dismiss</span>
|
||||||
|
<svg class="shrink-0 size-4"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path d="M18 6 6 18" />
|
||||||
|
<path d="m6 6 12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Announcement Banner -->
|
||||||
|
{% endblock head %}
|
||||||
|
{% block content %}
|
||||||
|
<div class="max-w-2xl mx-auto text-center pt-20 pb-6 lg:pb-16 px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-2xl font-bold sm:text-3xl md:text-4xl">
|
||||||
|
<svg class="size-20 mx-auto"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M21.2058 15.9119C20.9921 15.9989 20.7565 16.1 20.4946 16.2127L20.4845 16.217C19.9982 16.4262 19.44 16.6663 18.8314 16.8912C17.6046 17.3446 16.1383 17.7502 14.5091 17.7502C12.6959 17.7502 11.3063 17.2655 10.1918 16.731C9.76157 16.5247 9.36342 16.3062 9.01252 16.1136C8.91833 16.0619 8.82723 16.0119 8.74015 15.9647C8.31075 15.7319 7.97599 15.5652 7.67788 15.4714C6.34018 15.0505 5.04861 14.8691 4.08751 14.7938C3.6084 14.7563 3.21511 14.7454 2.94401 14.7439C2.80855 14.7431 2.70386 14.7446 2.63452 14.7463C2.59986 14.7471 2.57406 14.748 2.55768 14.7486L2.54028 14.7493L2.53747 14.7494L2.38477 14.7571C3.58171 18.9391 7.43333 22 11.9999 22C16.1345 22 19.6831 19.4907 21.2058 15.9119Z" fill="#155dfc" />
|
||||||
|
<path d="M3.23676 7.17868L3.53394 7.48144L3.53709 7.48459L3.55582 7.50294C3.57379 7.52036 3.60263 7.54786 3.64202 7.58403C3.72083 7.6564 3.84159 7.76321 4.0016 7.89306C4.32207 8.15313 4.79725 8.50343 5.40559 8.85435C6.62489 9.55771 8.35499 10.2501 10.4369 10.2501C11.8105 10.2501 12.8621 9.85611 13.7542 9.38998C14.1093 9.20444 14.429 9.01331 14.7466 8.82347C14.8383 8.76869 14.9298 8.71401 15.0219 8.6596C15.4141 8.42789 15.8325 8.1918 16.2565 8.04645C17.6126 7.58156 18.7967 7.38416 19.6473 7.30323C20.0728 7.26273 20.4159 7.25129 20.6566 7.25025C20.7104 7.25002 20.759 7.25031 20.8024 7.2509C19.1119 4.12408 15.8039 2 11.9999 2C8.22517 2 4.93895 4.09141 3.23676 7.17868Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.5" d="M21.7753 14.1179C21.9225 13.4352 22 12.7267 22 12.0001C22 10.8787 21.8154 9.80039 21.475 8.79394L20.9481 8.75617L20.947 8.75609L20.9374 8.75555C20.9272 8.755 20.91 8.75416 20.886 8.75332C20.838 8.75162 20.7629 8.74988 20.6632 8.75032C20.4637 8.75118 20.1661 8.76073 19.7895 8.79656C19.0358 8.86828 17.9699 9.04491 16.7431 9.46547C16.4799 9.55569 16.1798 9.71791 15.785 9.95116C15.7058 9.99794 15.623 10.0474 15.537 10.0989C15.2148 10.2916 14.8462 10.512 14.449 10.7195C13.419 11.2577 12.1263 11.7502 10.437 11.7502C8.01897 11.7502 6.03049 10.9465 4.65621 10.1537C3.96776 9.75661 3.4274 9.35884 3.05652 9.05786C2.87086 8.90719 2.727 8.78023 2.62761 8.68896C2.60946 8.67229 2.59278 8.65681 2.5776 8.64258C2.20363 9.692 2 10.8223 2 12.0001C2 12.4305 2.02719 12.8545 2.07994 13.2706L2.46407 13.2513L2.46666 13.2512L2.47465 13.2508L2.50174 13.2497C2.52466 13.2489 2.55722 13.2478 2.59884 13.2468C2.68207 13.2448 2.80162 13.2431 2.95282 13.244C3.25506 13.2457 3.68485 13.2578 4.20473 13.2985C5.24158 13.3796 6.65156 13.576 8.1282 14.0406C8.57883 14.1824 9.02704 14.414 9.45523 14.6461C9.5548 14.7001 9.65396 14.7545 9.75352 14.8091C10.0999 14.9991 10.4512 15.1918 10.8405 15.3786C11.8204 15.8484 12.9851 16.2503 14.5092 16.2503C15.8918 16.2503 17.1709 15.9059 18.3115 15.4843C18.8824 15.2734 19.4099 15.0465 19.9021 14.8348L19.9204 14.8269C20.3949 14.6228 20.8566 14.4242 21.2628 14.2888L21.7753 14.1179Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
<br>
|
||||||
|
더 적은 비용에 더 많은 GPU
|
||||||
|
</h2>
|
||||||
|
<p class="mt-4 md:text-lg text-gray-600">
|
||||||
|
유연한 요금제와 즉시 사용 가능한 GPU로 AI, 머신러닝, 딥러닝, 렌더링 작업을 손쉽게 시작해 보세요. 필요할 때 언제든 바로 확장할 수 있어요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="max-w-[60.5rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||||
|
<!-- Pricing -->
|
||||||
|
<div>
|
||||||
|
<!-- Title -->
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<h1 class="text-2xl font-semibold text-gray-800">요금</h1>
|
||||||
|
</div>
|
||||||
|
<!-- End Title -->
|
||||||
|
<!-- Table Section -->
|
||||||
|
<div class="overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300">
|
||||||
|
<div class="min-w-full inline-block align-middle">
|
||||||
|
<!-- Table -->
|
||||||
|
<table class="min-w-full divide-y divide-gray-200">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col" class="w-3/4">
|
||||||
|
<div class="pe-4 py-3 text-start flex items-center gap-x-1 text-sm font-medium text-gray-800">GPU 이름</div>
|
||||||
|
</th>
|
||||||
|
<th scope="col" class="w-1/4">
|
||||||
|
<div class="px-4 py-3 text-start flex items-center gap-x-1 text-sm font-medium text-gray-800">시간당 가격 (하위 25%)</div>
|
||||||
|
</th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-gray-200">
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 4090</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 420원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 5090</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 522원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">H200</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 3,176원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">H100 SXM</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 2,262원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX PRO 6000 S</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 1,780원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 3090</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 189원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">A100 SXM4</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 943원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX PRO 6000 WS</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 1,175원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">B200</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 4,829원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">H200 NVL</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 2,364원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">L40S</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 682원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">H100 NVL</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 2,509원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX A6000</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 537원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 3060</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 72원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">A100 PCIE</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 769원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX A5000</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 247원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 6000 ADA</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 682원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 5060 Ti</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 116원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">Tesla V100</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 189원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">A40</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 406원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 4060 Ti</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 130원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 5080</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 174원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 3080</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 102원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX A4000</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 116원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="size-px whitespace-nowrap pe-4 py-3">
|
||||||
|
<div class="w-full flex items-center gap-x-2">
|
||||||
|
<div class="grow">
|
||||||
|
<span class="text-sm font-medium text-gray-800"><a class="text-blue-600 underline" href="#">RTX 5070 Ti</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="size-px whitespace-nowrap px-4 py-3">
|
||||||
|
<span class="text-sm text-gray-600">시간당 145원</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<!-- End Table -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Table Section -->
|
||||||
|
</div>
|
||||||
|
<div class="relative z-20 flex justify-center gap-x-3 mt-12">
|
||||||
|
<a class="rounded-lg shadow-md py-3 px-4 inline-flex justify-center items-center gap-x-1 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:ring-2 focus:ring-blue-500"
|
||||||
|
href="#">
|
||||||
|
사용 가능한 모든 GPU 보기
|
||||||
|
<svg class="shrink-0 size-4"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path d="m9 18 6-6-6-6"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock content %}
|
||||||
935
templates/products/cloud.jinja
Normal file
935
templates/products/cloud.jinja
Normal file
|
|
@ -0,0 +1,935 @@
|
||||||
|
{% extends "base.jinja" %}
|
||||||
|
{% block title %}
|
||||||
|
클라우드 -
|
||||||
|
{% endblock title %}
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="{{ url_for('static', filename='css/index.css') }}" />
|
||||||
|
{% endblock head %}
|
||||||
|
{% block content %}
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const prices = [...document.querySelectorAll('[data-hs-toggle-count-custom]')];
|
||||||
|
const yearly = document.getElementById('toggle-count-with-yearly');
|
||||||
|
const update = () => prices.forEach(p => p.textContent = (JSON.parse(p.dataset.hsToggleCountCustom)[yearly.checked ? 'yearly' : 'monthly']).toLocaleString());
|
||||||
|
document.querySelectorAll('input[name="hs-pro-toggle-count"]').forEach(r => r.addEventListener('change', update));
|
||||||
|
update();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<!-- Icon Blocks -->
|
||||||
|
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||||
|
<!-- Grid -->
|
||||||
|
<div class="grid md:grid-cols-2 gap-12">
|
||||||
|
<div class="lg:w-3/4">
|
||||||
|
<h2 class="text-3xl text-gray-800 font-bold lg:text-4xl dark:text-white">
|
||||||
|
<svg class="size-20 mx-auto"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M22 14.3529C22 17.4717 19.4416 20 16.2857 20H10.4995C9.55792 18.7465 9 17.1884 9 15.5C9 11.3579 12.3579 8 16.5 8C17.009 8 17.5062 8.05071 17.9868 8.14736C18.0649 8.42841 18.1216 8.71822 18.1551 9.01498C20.393 9.78024 22 11.8811 22 14.3529Z" fill="#155dfc" />
|
||||||
|
<path d="M12.4762 4C9.32028 4 6.7619 6.52827 6.7619 9.64706C6.7619 10.3369 6.88706 10.9978 7.11616 11.6089C6.8475 11.5567 6.56983 11.5294 6.28571 11.5294C3.91878 11.5294 2 13.4256 2 15.7647C2 18.1038 3.91878 20 6.28571 20H10.4995C9.55792 18.7465 9 17.1884 9 15.5C9 11.3579 12.3579 8 16.5 8C17.009 8 17.5062 8.05071 17.9868 8.14736C17.9721 8.09441 17.9566 8.04178 17.9403 7.98948C17.2237 5.67956 15.0484 4 12.4762 4Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
<br>
|
||||||
|
빠르고, 간단한 대한민국 개발자의 클라우드
|
||||||
|
</h2>
|
||||||
|
<p class="mt-3 text-gray-800 dark:text-neutral-400">
|
||||||
|
한국 개발자가 세상을 바꾸는 소프트웨어 개발에 더 집중할 수 있도록, 최저 8,900원으로 저비용 고사양의 클라우드를 제공하며 설정 없이 바로 개발을 시작할 수 있어요.
|
||||||
|
</p>
|
||||||
|
<p class="mt-5">
|
||||||
|
<a class="inline-flex items-center gap-x-1 text-sm text-blue-600 decoration-2 hover:underline focus:outline-hidden focus:underline font-medium dark:text-blue-500"
|
||||||
|
href="#">
|
||||||
|
콘솔로 이동하기
|
||||||
|
<svg class="shrink-0 size-4 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path d="m9 18 6-6-6-6" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
<div class="space-y-6 lg:space-y-10">
|
||||||
|
<!-- Icon Block -->
|
||||||
|
<div class="flex gap-x-5 sm:gap-x-8">
|
||||||
|
<!-- Icon -->
|
||||||
|
<span class="shrink-0 inline-flex justify-center items-center size-11 rounded-full border border-gray-200 bg-white text-gray-800 shadow-2xs mx-auto dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
|
||||||
|
<svg class="shrink-0 size-5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="0"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path opacity="0.4" d="M19.9707 10V18C19.9707 21 18.9707 22 15.9707 22H7.9707C4.9707 22 3.9707 21 3.9707 18V10H19.9707Z" fill="#155dfc" />
|
||||||
|
<path d="M21.5 7V8C21.5 9.1 20.97 10 19.5 10H4.5C2.97 10 2.5 9.1 2.5 8V7C2.5 5.9 2.97 5 4.5 5H19.5C20.97 5 21.5 5.9 21.5 7Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.4" d="M11.6408 4.99994H6.12076C5.78076 4.62994 5.79076 4.05994 6.15076 3.69994L7.57076 2.27994C7.94076 1.90994 8.55076 1.90994 8.92076 2.27994L11.6408 4.99994Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.4" d="M17.8696 4.99994H12.3496L15.0696 2.27994C15.4396 1.90994 16.0496 1.90994 16.4196 2.27994L17.8396 3.69994C18.1996 4.05994 18.2096 4.62994 17.8696 4.99994Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.6" d="M8.93945 10V15.14C8.93945 15.94 9.81945 16.41 10.4895 15.98L11.4295 15.36C11.7695 15.14 12.1995 15.14 12.5295 15.36L13.4195 15.96C14.0795 16.4 14.9695 15.93 14.9695 15.13V10H8.93945Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<div class="grow">
|
||||||
|
<h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-neutral-200">추가 금액 제로</h3>
|
||||||
|
<p class="mt-1 text-gray-600 dark:text-neutral-400">
|
||||||
|
무제한 트래픽부터 DDoS 방어, 공인 IP, 스냅샷까지 모두 포함된 가격이에요. 클라우드 사용 중 예상치 못한 추가 비용 걱정이 없어요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Icon Block -->
|
||||||
|
<!-- Icon Block -->
|
||||||
|
<div class="flex gap-x-5 sm:gap-x-8">
|
||||||
|
<!-- Icon -->
|
||||||
|
<span class="shrink-0 inline-flex justify-center items-center size-11 rounded-full border border-gray-200 bg-white text-gray-800 shadow-2xs mx-auto dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
|
||||||
|
<svg class="shrink-0 size-5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="0"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path opacity="0.5" d="M18.9771 14.7904C21.6743 12.0932 21.6743 7.72013 18.9771 5.02291C16.2799 2.3257 11.9068 2.3257 9.20961 5.02291C7.41866 6.81385 6.8169 9.34366 7.40432 11.6311C7.49906 12 7.41492 12.399 7.14558 12.6684L3.43349 16.3804C3.11558 16.6984 2.95941 17.1435 3.00906 17.5904L3.24113 19.679C3.26587 19.9017 3.36566 20.1093 3.52408 20.2677L3.73229 20.4759C3.89072 20.6343 4.09834 20.7341 4.32101 20.7589L6.4096 20.9909C6.85645 21.0406 7.30164 20.8844 7.61956 20.5665L8.32958 19.8565L9.39026 18.7958L11.3319 16.8541C11.6013 16.5848 12 16.5009 12.3689 16.5957C14.6563 17.1831 17.1861 16.5813 18.9771 14.7904Z" fill="#155dfc" />
|
||||||
|
<path d="M15.4142 8.58579C14.6332 7.80474 13.3668 7.80474 12.5858 8.58579C11.8047 9.36683 11.8047 10.6332 12.5858 11.4142C13.3668 12.1953 14.6332 12.1953 15.4142 11.4142C16.1953 10.6332 16.1953 9.36683 15.4142 8.58579Z" fill="#155dfc" />
|
||||||
|
<path d="M6.58295 18.1294L8.3291 19.8565L9.38977 18.7958L7.63776 17.063C7.34326 16.7717 6.86839 16.7743 6.57711 17.0688C6.28584 17.3633 6.28845 17.8382 6.58295 18.1294Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<div class="grow">
|
||||||
|
<h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-neutral-200">서버 보안 포함</h3>
|
||||||
|
<p class="mt-1 text-gray-600 dark:text-neutral-400">
|
||||||
|
비밀번호 없는 SSH 로그인, SSH 포트 변경, 루트 로그인 비활성화가 기본으로 포함된 클라우드로, 더 안전한 접속 환경을 제공해요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Icon Block -->
|
||||||
|
<!-- Icon Block -->
|
||||||
|
<div class="flex gap-x-5 sm:gap-x-8">
|
||||||
|
<!-- Icon -->
|
||||||
|
<span class="shrink-0 inline-flex justify-center items-center size-11 rounded-full border border-gray-200 bg-white text-gray-800 shadow-2xs mx-auto dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
|
||||||
|
<svg class="shrink-0 size-5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="0"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path d="M3 11.9914C3 17.6294 7.23896 20.3655 9.89856 21.5273C10.62 21.8424 10.9807 22 12 22V8L3 11V11.9914Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.5" d="M14.1014 21.5273C16.761 20.3655 21 17.6294 21 11.9914V11L12 8V22C13.0193 22 13.38 21.8424 14.1014 21.5273Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.5" d="M8.83772 2.80472L8.26491 3.00079C5.25832 4.02996 3.75503 4.54454 3.37752 5.08241C3 5.62028 3 7.21907 3 10.4167V11L12 8V2C11.1886 2 10.405 2.26824 8.83772 2.80472Z" fill="#155dfc" />
|
||||||
|
<path d="M15.7351 3.00079L15.1623 2.80472C13.595 2.26824 12.8114 2 12 2V8L21 11V10.4167C21 7.21907 21 5.62028 20.6225 5.08241C20.245 4.54454 18.7417 4.02996 15.7351 3.00079Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<div class="grow">
|
||||||
|
<h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-neutral-200">SSL 인증서 포함</h3>
|
||||||
|
<p class="mt-1 text-gray-600 dark:text-neutral-400">
|
||||||
|
클라우드에 기본으로 설치된 캐디(Caddy)를 이용하면, HTTPS가 자동으로 설정되어 별도의 인증서 관리가 필요 없어요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Icon Block -->
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
</div>
|
||||||
|
<!-- End Grid -->
|
||||||
|
</div>
|
||||||
|
<!-- End Icon Blocks -->
|
||||||
|
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||||
|
<!-- Pricing -->
|
||||||
|
<div>
|
||||||
|
<!-- Title -->
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<h1 class="text-2xl font-semibold text-gray-800">요금</h1>
|
||||||
|
</div>
|
||||||
|
<!-- End Title -->
|
||||||
|
<!-- Toggle -->
|
||||||
|
<div class="flex justify-center mb-6">
|
||||||
|
<div id="hs-pro-toggle-count"
|
||||||
|
class="p-0.5 inline-block bg-gray-100 rounded-full">
|
||||||
|
<label for="toggle-count-by-card"
|
||||||
|
class="relative inline-block py-1.5 px-3.5">
|
||||||
|
<input id="toggle-count-by-card"
|
||||||
|
name="hs-pro-toggle-count"
|
||||||
|
type="radio"
|
||||||
|
class="peer absolute top-0 end-0 size-full border-transparent bg-transparent bg-none text-transparent rounded-full cursor-pointer disabled:opacity-50 disabled:pointer-events-none before:absolute before:inset-0 before:size-full before:rounded-full focus:ring-offset-0 checked:before:bg-white checked:before:shadow-2xs checked:bg-none focus:ring-transparent">
|
||||||
|
<span class="relative z-10 inline-flex justify-center items-center gap-x-2 text-sm font-medium text-gray-800 cursor-pointer peer-disabled:cursor-default">
|
||||||
|
월간
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label for="toggle-count-with-yearly"
|
||||||
|
class="relative inline-block py-1.5 px-3.5">
|
||||||
|
<input id="toggle-count-with-yearly"
|
||||||
|
name="hs-pro-toggle-count"
|
||||||
|
type="radio"
|
||||||
|
class="peer absolute top-0 end-0 size-full border-transparent bg-transparent bg-none text-transparent rounded-full cursor-pointer disabled:opacity-50 disabled:pointer-events-none before:absolute before:inset-0 before:size-full before:rounded-full focus:ring-offset-0 checked:before:bg-white checked:before:shadow-2xs checked:bg-none focus:ring-transparent"
|
||||||
|
checked>
|
||||||
|
<span class="relative z-10 inline-flex justify-center items-center gap-x-2 text-sm font-medium text-gray-800 cursor-pointer peer-disabled:cursor-default">
|
||||||
|
연간
|
||||||
|
</span>
|
||||||
|
<span class="absolute -top-6 start-10">
|
||||||
|
<span class="flex items-center -mt-5">
|
||||||
|
<svg class="shrink-0 -mr-6 text-gray-400"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
x="0px"
|
||||||
|
y="0px"
|
||||||
|
viewBox="0 0 99.3 57"
|
||||||
|
width="48">
|
||||||
|
<path fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42">
|
||||||
|
</path>
|
||||||
|
<path fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
<span class="block mt-3">
|
||||||
|
<span class="inline-flex items-center gap-1.5 py-1 px-2 whitespace-nowrap text-xs font-medium bg-blue-600 text-white rounded-full ">
|
||||||
|
최대 10% 절약
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Toggle -->
|
||||||
|
<!-- Pricing Cards Grid -->
|
||||||
|
<div class="grid sm:grid-cols-2 2xl:grid-cols-4 2xl:gap-6 gap-4">
|
||||||
|
<!-- Card -->
|
||||||
|
<div class="p-4 sm:p-6 bg-white border border-gray-200 rounded-xl">
|
||||||
|
<div class="flex justify-between items-center gap-x-2 mb-3">
|
||||||
|
<svg class="w-8.5 h-7.5"
|
||||||
|
width="34"
|
||||||
|
height="30"
|
||||||
|
viewBox="0 0 34 30"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect y="5" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-300" />
|
||||||
|
</svg>
|
||||||
|
<span class="inline-flex items-center gap-1.5 py-1.5 px-2 text-xs font-medium bg-blue-100 text-blue-800 rounded-md /10 ">
|
||||||
|
인기
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800">C1</h3>
|
||||||
|
<div class="mt-4 flex items-center gap-x-0.5">
|
||||||
|
<p data-hs-toggle-count-custom='{ "target": "#hs-pro-toggle-count", "yearly": 7900, "monthly": 7900 }'
|
||||||
|
class="text-gray-800 font-semibold text-3xl">7,900</p>
|
||||||
|
<span class="text-xl font-normal text-gray-800">원</span>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">매달</p>
|
||||||
|
<div class="mt-5">
|
||||||
|
<button type="button"
|
||||||
|
class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:ring-2 focus:ring-blue-500"
|
||||||
|
data-hs-overlay="#hs-pro-dutprom">선택</button>
|
||||||
|
</div>
|
||||||
|
<ul class="mt-5 space-y-1">
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">4GB 메모리</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">vCPU 2개</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">40GB 디스크</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">무제한 트래픽</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">공인 IP</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
7
|
||||||
|
316.17
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<polyline points="20 6 9 17 4 12" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">DDoS 방어</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">스냅샷</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">Linux 운영체제</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">여러 개 추가, 업그레이드/다운그레이드 가능</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- End Card -->
|
||||||
|
<!-- Card -->
|
||||||
|
<div class="p-4 sm:p-6 bg-white border border-gray-200 rounded-xl">
|
||||||
|
<div class="flex justify-between items-center gap-x-2 mb-3">
|
||||||
|
<svg class="w-8.5 h-7.5"
|
||||||
|
width="34"
|
||||||
|
height="30"
|
||||||
|
viewBox="0 0 34 30"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect y="5" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-300" /><rect x="14" y="5" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-500" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800">C2</h3>
|
||||||
|
<div class="mt-4 flex items-center gap-x-0.5">
|
||||||
|
<p data-hs-toggle-count-custom='{ "target": "#hs-pro-toggle-count", "yearly": 16900, "monthly": 18900 }'
|
||||||
|
class="text-gray-800 font-semibold text-3xl">16,900</p>
|
||||||
|
<span class="text-xl font-normal text-gray-800">원</span>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">매달</p>
|
||||||
|
<div class="mt-5">
|
||||||
|
<button type="button"
|
||||||
|
class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:ring-2 focus:ring-blue-500"
|
||||||
|
data-hs-overlay="#hs-pro-dutprom">선택</button>
|
||||||
|
</div>
|
||||||
|
<ul class="mt-5 space-y-1">
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">8GB 메모리</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">vCPU 4개</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">80GB 디스크</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">무제한 트래픽</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">공인 IP</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">DDoS 방어</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">스냅샷</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">Linux 운영체제</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">여러 개 추가, 업그레이드/다운그레이드 가능</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- End Card -->
|
||||||
|
<!-- Card -->
|
||||||
|
<div class="p-4 sm:p-6 bg-white border border-gray-200 rounded-xl">
|
||||||
|
<div class="flex justify-between items-center gap-x-2 mb-3">
|
||||||
|
<svg class="w-8.5 h-7.5"
|
||||||
|
width="34"
|
||||||
|
height="30"
|
||||||
|
viewBox="0 0 34 30"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="7" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-200" /><rect y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-300" /><rect x="14" y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-500" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800">C3</h3>
|
||||||
|
<div class="mt-4 flex items-center gap-x-0.5">
|
||||||
|
<p data-hs-toggle-count-custom='{ "target": "#hs-pro-toggle-count", "yearly": 30900, "monthly": 34900 }'
|
||||||
|
class="text-gray-800 font-semibold text-3xl">30,900</p>
|
||||||
|
<span class="text-xl font-normal text-gray-800">원</span>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">매달</p>
|
||||||
|
<div class="mt-5">
|
||||||
|
<button type="button"
|
||||||
|
class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:ring-2 focus:ring-blue-500"
|
||||||
|
data-hs-overlay="#hs-pro-dutprom">선택</button>
|
||||||
|
</div>
|
||||||
|
<ul class="mt-5 space-y-1">
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">16GB 메모리</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">vCPU 8개</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">160GB 디스크</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">무제한 트래픽</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">공인 IP</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">DDoS 방어</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">스냅샷</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">Linux 운영체제</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">여러 개 추가, 업그레이드/다운그레이드 가능</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- End Card -->
|
||||||
|
<!-- Card -->
|
||||||
|
<div class="p-4 sm:p-6 bg-white border border-gray-200 rounded-xl">
|
||||||
|
<div class="flex justify-between items-center gap-x-2 mb-3">
|
||||||
|
<svg class="w-8.5 h-7.5"
|
||||||
|
width="34"
|
||||||
|
height="30"
|
||||||
|
viewBox="0 0 34 30"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="20" height="20" rx="10" fill="currentColor" class="fill-blue-200" /><rect y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-300" /><rect x="14" y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-400" /><rect x="14" width="20" height="20" rx="10" fill="currentColor" class="fill-blue-600" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800">C4</h3>
|
||||||
|
<div class="mt-4 flex items-center gap-x-0.5">
|
||||||
|
<p data-hs-toggle-count-custom='{ "target": "#hs-pro-toggle-count", "yearly": 57900, "monthly": 65900 }'
|
||||||
|
class="text-gray-800 font-semibold text-3xl">57,900</p>
|
||||||
|
<span class="text-xl font-normal text-gray-800">원</span>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">매달</p>
|
||||||
|
<div class="mt-5">
|
||||||
|
<button type="button"
|
||||||
|
class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:ring-2 focus:ring-blue-500"
|
||||||
|
data-hs-overlay="#hs-pro-dutprom">선택</button>
|
||||||
|
</div>
|
||||||
|
<ul class="mt-5 space-y-1">
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">32GB 메모리</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">vCPU 16개</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">320GB 디스크</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">무제한 트래픽</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">공인 IP</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">DDoS 방어</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">스냅샷</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">Linux 운영체제</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">여러 개 추가, 업그레이드/다운그레이드 가능</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- End Card -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Pricing -->
|
||||||
|
<!-- FAQ -->
|
||||||
|
<div class="space-y-5">
|
||||||
|
<div class="pt-16 text-center">
|
||||||
|
<h2 class="text-xl font-semibold text-gray-800">자주하는 질문</h2>
|
||||||
|
</div>
|
||||||
|
<!-- Grid -->
|
||||||
|
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-y-6 sm:gap-8 lg:gap-y-5 lg:gap-x-12">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-medium text-gray-800">월 요금은 언제 결제되나요?</h3>
|
||||||
|
<p class="mt-2 text-gray-500">서비스를 사용하기 시작한 날을 기준으로 매월 같은 날짜에 자동 결제돼요.</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
<div>
|
||||||
|
<h3 class="font-medium text-gray-800">운영체제(OS)를 바꿀 수 있나요?</h3>
|
||||||
|
<p class="mt-2 text-gray-500">네, 우분투, 데비안, 페도라, CentOS, 로키 리눅스 중에 선택하여 설치할 수 있어요. Windows 운영체제는 지원하지 않아요.</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
<div>
|
||||||
|
<h3 class="font-medium text-gray-800">공인 IP를 제공하나요?</h3>
|
||||||
|
<p class="mt-2 text-gray-500">네, 클라우드 서버 1대당 IPv4와 IPv6 주소가 각각 제공돼요.</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
<div>
|
||||||
|
<h3 class="font-medium text-gray-800">중간에 클라우드를 업그레이드하거나 다운그레이드하면 어떻게 되나요?</h3>
|
||||||
|
<p class="mt-2 text-gray-500">
|
||||||
|
업그레이드를 할 경우, 바로 새로운 요금제의 기능을 이용할 수 있어요. 다운그레이드를 할 경우, 변경 사항이 다음 결제일부터 적용되어, 한 달 동안은 기존 요금제의 기능을 그대로 이용할 수 있어요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
<div>
|
||||||
|
<h3 class="font-medium text-gray-800">스냅샷이란 무엇이며, 제공되나요?</h3>
|
||||||
|
<p class="mt-2 text-gray-500">
|
||||||
|
스냅샷은 특정 시점의 서버 상태를 그대로 저장하는 기능이에요. 이를 통해 서버를 똑같이 복제하거나, 백업할 수 있어요. 서버 1대당 최대 2개까지 무료로 저장할 수 있으며, 기존 스냅샷을 삭제하고 새로 생성할 수 있어요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
<div>
|
||||||
|
<h3 class="font-medium text-gray-800">클라우드 서버를 정지하면 요금은 어떻게 되나요?</h3>
|
||||||
|
<p class="mt-2 text-gray-500">
|
||||||
|
서버를 일시 중지하더라도 서버 리소스(CPU, 메모리, 디스크)는 계속 유지되며, 다음 달에도 요금이 계속 청구돼요. 요금 청구를 원치 않는 경우, 서버를 삭제해 주세요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
<div>
|
||||||
|
<h3 class="font-medium text-gray-800">트래픽은 무료인가요?</h3>
|
||||||
|
<p class="mt-2 text-gray-500">
|
||||||
|
모든 클라우드 요금제는 무제한 인바운드 트래픽과 아웃바운드 트래픽을 제공해요. 공정 사용 정책에 따라 모든 사용자가 안정적으로 서비스를 이용할 수 있도록, 비정상적으로 과도한 사용 시 서비스가 일시적으로 제한될 수 있어요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
<div>
|
||||||
|
<h3 class="font-medium text-gray-800">환불은 어떻게 받을 수 있나요?</h3>
|
||||||
|
<p class="mt-2 text-gray-500">
|
||||||
|
서비스 사용 시작일로부터 30일 이내에 해지하면, 별도의 사유 없이 전액 환불이 가능해요. 30일 이후에는 이미 결제된 기간에 대한 환불은 제공되지 않으며, 다음 결제일부터는 요금이 청구되지 않아요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
</div>
|
||||||
|
<!-- End Grid -->
|
||||||
|
<div class="pt-3 flex justify-center items-center gap-x-3">
|
||||||
|
<p class="text-sm text-gray-500">아직 궁금한 점이 있나요?</p>
|
||||||
|
<a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-50"
|
||||||
|
href="#">물어보기</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End FAQ -->
|
||||||
|
</div>
|
||||||
|
{% endblock content %}
|
||||||
584
templates/products/storage.jinja
Normal file
584
templates/products/storage.jinja
Normal file
|
|
@ -0,0 +1,584 @@
|
||||||
|
{% extends "base.jinja" %}
|
||||||
|
{% block title %}
|
||||||
|
저장소 -
|
||||||
|
{% endblock title %}
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="{{ url_for('static', filename='css/index.css') }}" />
|
||||||
|
{% endblock head %}
|
||||||
|
{% block content %}
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const prices = [...document.querySelectorAll('[data-hs-toggle-count-custom]')];
|
||||||
|
const yearly = document.getElementById('toggle-count-with-yearly');
|
||||||
|
const update = () => prices.forEach(p => p.textContent = (JSON.parse(p.dataset.hsToggleCountCustom)[yearly.checked ? 'yearly' : 'monthly']).toLocaleString());
|
||||||
|
document.querySelectorAll('input[name="hs-pro-toggle-count"]').forEach(r => r.addEventListener('change', update));
|
||||||
|
update();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<div class="max-w-2xl mx-auto text-center pt-20 pb-6 lg:pb-16 px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-2xl font-bold sm:text-3xl md:text-4xl">
|
||||||
|
<svg class="size-20 mx-auto"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8.42229 20.6181C10.1779 21.5395 11.0557 22.0001 12 22.0001V12.0001L2.63802 7.07275C2.62423 7.09491 2.6107 7.11727 2.5974 7.13986C2 8.15436 2 9.41678 2 11.9416V12.0586C2 14.5834 2 15.8459 2.5974 16.8604C3.19479 17.8749 4.27063 18.4395 6.42229 19.5686L8.42229 20.6181Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.7" d="M17.5774 4.43152L15.5774 3.38197C13.8218 2.46066 12.944 2 11.9997 2C11.0554 2 10.1776 2.46066 8.42197 3.38197L6.42197 4.43152C4.31821 5.53552 3.24291 6.09982 2.6377 7.07264L11.9997 12L21.3617 7.07264C20.7564 6.09982 19.6811 5.53552 17.5774 4.43152Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.5" d="M21.4026 7.13986C21.3893 7.11727 21.3758 7.09491 21.362 7.07275L12 12.0001V22.0001C12.9443 22.0001 13.8221 21.5395 15.5777 20.6181L17.5777 19.5686C19.7294 18.4395 20.8052 17.8749 21.4026 16.8604C22 15.8459 22 14.5834 22 12.0586V11.9416C22 9.41678 22 8.15436 21.4026 7.13986Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
<br>
|
||||||
|
백업에 최적화된 넉넉한 저장소
|
||||||
|
</h2>
|
||||||
|
<p class="mt-4 md:text-lg text-gray-600">
|
||||||
|
안전하고 믿을 수 있는 저장 공간으로, 개인과 기업이 파일을 마음껏 보관할 수 있어요. 무제한 트래픽으로 원하는 만큼 업로드와 다운로드하세요.
|
||||||
|
</p>
|
||||||
|
<p class="mt-5 text-center">
|
||||||
|
<a class="inline-flex items-center gap-x-1 text-sm text-blue-600 decoration-2 hover:underline focus:outline-hidden focus:underline font-medium dark:text-blue-500"
|
||||||
|
href="#">
|
||||||
|
콘솔로 이동하기
|
||||||
|
<svg class="shrink-0 size-4 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path d="m9 18 6-6-6-6"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<!-- End Grid -->
|
||||||
|
</div>
|
||||||
|
<!-- Icon Blocks -->
|
||||||
|
<div class="py-10 w-full max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto">
|
||||||
|
<!-- Grid -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-y-10 gap-x-4">
|
||||||
|
<!-- Icon Block -->
|
||||||
|
<div class="max-w-xs lg:max-w-full mx-auto text-center lg:px-4 xl:px-10">
|
||||||
|
<svg class="shrink-0 size-7 mx-auto text-blue-600"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="0.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.28869 2.76279C1.41968 2.36983 1.84442 2.15746 2.23737 2.28845L2.50229 2.37675C2.51549 2.38115 2.52864 2.38554 2.54176 2.38991C3.16813 2.59867 3.69746 2.7751 4.11369 2.96873C4.55613 3.17456 4.94002 3.42965 5.23112 3.83352C5.52221 4.2374 5.64282 4.68226 5.69817 5.16708C5.75025 5.62318 5.75023 6.18114 5.7502 6.84139L5.7502 9.49996C5.7502 10.9354 5.7518 11.9365 5.85335 12.6918C5.952 13.4256 6.13245 13.8142 6.40921 14.091C6.68598 14.3677 7.07455 14.5482 7.80832 14.6468C8.56367 14.7484 9.56479 14.75 11.0002 14.75H18.0002C18.4144 14.75 18.7502 15.0857 18.7502 15.5C18.7502 15.9142 18.4144 16.25 18.0002 16.25H10.9453C9.57774 16.25 8.47542 16.25 7.60845 16.1334C6.70834 16.0124 5.95047 15.7535 5.34855 15.1516C4.74664 14.5497 4.48774 13.7918 4.36673 12.8917C4.25017 12.0247 4.25018 10.9224 4.2502 9.55484L4.2502 6.883C4.2502 6.17 4.24907 5.69823 4.20785 5.33722C4.16883 4.99538 4.10068 4.83049 4.01426 4.71059C3.92784 4.59069 3.79296 4.47389 3.481 4.32877C3.15155 4.17551 2.70435 4.02524 2.02794 3.79978L1.76303 3.71147C1.37008 3.58049 1.15771 3.15575 1.28869 2.76279Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.5" d="M5.74512 6C5.75008 6.25912 5.75008 6.53957 5.75007 6.8414L5.75006 9.5C5.75006 10.9354 5.75166 11.9365 5.85321 12.6919C5.86803 12.8021 5.8847 12.9046 5.90326 13H16.0221C16.9815 13 17.4612 13 17.8369 12.7523C18.2126 12.5045 18.4016 12.0636 18.7795 11.1818L19.2081 10.1818C20.0176 8.29294 20.4223 7.34853 19.9777 6.67426C19.5331 6 18.5056 6 16.4507 6H5.74512Z" fill="#155dfc" />
|
||||||
|
<path d="M7.5 18C8.32843 18 9 18.6716 9 19.5C9 20.3284 8.32843 21 7.5 21C6.67157 21 6 20.3284 6 19.5C6 18.6716 6.67157 18 7.5 18Z" fill="#155dfc" />
|
||||||
|
<path d="M18 19.5001C18 18.6716 17.3284 18.0001 16.5 18.0001C15.6716 18.0001 15 18.6716 15 19.5001C15 20.3285 15.6716 21.0001 16.5 21.0001C17.3284 21.0001 18 20.3285 18 19.5001Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
<p class="mt-3 font-medium text-gray-800">간단하고 투명한 비용</p>
|
||||||
|
<p class="mt-2 text-sm text-gray-500">무제한 트래픽으로 비용 걱정 없이, 합리적인 월 요금으로 백업 비용을 절감해요.</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Icon Block -->
|
||||||
|
<!-- Icon Block -->
|
||||||
|
<div class="max-w-xs lg:max-w-full mx-auto text-center lg:px-4 xl:px-10">
|
||||||
|
<svg class="shrink-0 size-7 mx-auto text-blue-600"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="0"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path d="M3.29289 9.29289C3 9.58579 3 10.0572 3 11V17C3 17.9428 3 18.4142 3.29289 18.7071C3.58579 19 4.05719 19 5 19C5.94281 19 6.41421 19 6.70711 18.7071C7 18.4142 7 17.9428 7 17V11C7 10.0572 7 9.58579 6.70711 9.29289C6.41421 9 5.94281 9 5 9C4.05719 9 3.58579 9 3.29289 9.29289Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.4" d="M17.2929 2.29289C17 2.58579 17 3.05719 17 4V17C17 17.9428 17 18.4142 17.2929 18.7071C17.5858 19 18.0572 19 19 19C19.9428 19 20.4142 19 20.7071 18.7071C21 18.4142 21 17.9428 21 17V4C21 3.05719 21 2.58579 20.7071 2.29289C20.4142 2 19.9428 2 19 2C18.0572 2 17.5858 2 17.2929 2.29289Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.7" d="M10 7C10 6.05719 10 5.58579 10.2929 5.29289C10.5858 5 11.0572 5 12 5C12.9428 5 13.4142 5 13.7071 5.29289C14 5.58579 14 6.05719 14 7V17C14 17.9428 14 18.4142 13.7071 18.7071C13.4142 19 12.9428 19 12 19C11.0572 19 10.5858 19 10.2929 18.7071C10 18.4142 10 17.9428 10 17V7Z" fill="#155dfc" />
|
||||||
|
<path d="M3 21.25C2.58579 21.25 2.25 21.5858 2.25 22C2.25 22.4142 2.58579 22.75 3 22.75H21C21.4142 22.75 21.75 22.4142 21.75 22C21.75 21.5858 21.4142 21.25 21 21.25H3Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
<p class="mt-3 font-medium text-gray-800">쉬운 확장성</p>
|
||||||
|
<p class="mt-2 text-sm text-gray-500">용량이 부족할 때, 클릭 몇 번으로 간편하게 용량을 늘릴 수 있어요.</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Icon Block -->
|
||||||
|
<!-- Icon Block -->
|
||||||
|
<div class="max-w-xs lg:max-w-full mx-auto text-center lg:px-4 xl:px-10">
|
||||||
|
<svg class="shrink-0 size-7 mx-auto text-blue-600"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="0"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
<path opacity="0.5" d="M3.84453 3.84453C2.71849 4.97056 2.71849 6.79623 3.84453 7.92226L5.43227 9.51C5.44419 9.49622 5.98691 10.013 6 9.99989L10 5.99989C10.0131 5.98683 9.49625 5.44415 9.50999 5.43226L7.92226 3.84453C6.79623 2.71849 4.97056 2.71849 3.84453 3.84453Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.5" d="M5.1332 15.3072C5.29414 14.8976 5.87167 14.8976 6.03261 15.3072L6.18953 15.7065C6.23867 15.8316 6.33729 15.9306 6.46188 15.9799L6.85975 16.1374C7.26783 16.2989 7.26783 16.8786 6.85975 17.0401L6.46188 17.1976C6.33729 17.2469 6.23867 17.3459 6.18953 17.471L6.03261 17.8703C5.87167 18.2799 5.29414 18.2799 5.1332 17.8703L4.97628 17.471C4.92714 17.3459 4.82852 17.2469 4.70393 17.1976L4.30606 17.0401C3.89798 16.8786 3.89798 16.2989 4.30606 16.1374L4.70393 15.9799C4.82852 15.9306 4.92714 15.8316 4.97628 15.7065L5.1332 15.3072Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.2" d="M19.9672 9.12945C20.1281 8.71987 20.7057 8.71987 20.8666 9.12945L21.0235 9.5288C21.0727 9.65385 21.1713 9.75284 21.2959 9.80215L21.6937 9.95965C22.1018 10.1212 22.1018 10.7009 21.6937 10.8624L21.2959 11.0199C21.1713 11.0692 21.0727 11.1682 21.0235 11.2932L20.8666 11.6926C20.7057 12.1022 20.1281 12.1022 19.9672 11.6926L19.8103 11.2932C19.7611 11.1682 19.6625 11.0692 19.5379 11.0199L19.14 10.8624C18.732 10.7009 18.732 10.1212 19.14 9.95965L19.5379 9.80215C19.6625 9.75284 19.7611 9.65385 19.8103 9.5288L19.9672 9.12945Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.7" d="M16.1 2.30719C16.261 1.8976 16.8385 1.8976 16.9994 2.30719L17.4298 3.40247C17.479 3.52752 17.5776 3.62651 17.7022 3.67583L18.7934 4.1078C19.2015 4.26934 19.2015 4.849 18.7934 5.01054L17.7022 5.44252C17.5776 5.49184 17.479 5.59082 17.4298 5.71587L16.9995 6.81115C16.8385 7.22074 16.261 7.22074 16.1 6.81116L15.6697 5.71587C15.6205 5.59082 15.5219 5.49184 15.3973 5.44252L14.3061 5.01054C13.898 4.849 13.898 4.26934 14.3061 4.1078L15.3973 3.67583C15.5219 3.62651 15.6205 3.52752 15.6697 3.40247L16.1 2.30719Z" fill="#155dfc" />
|
||||||
|
<path d="M10.5681 6.48999C10.5562 6.50373 10.0133 5.9867 10.0002 5.99975L6.00024 9.99975C5.98715 10.0128 6.50414 10.5558 6.49036 10.5677L16.078 20.1553C17.204 21.2814 19.0297 21.2814 20.1557 20.1553C21.2818 19.0293 21.2818 17.2036 20.1557 16.0776L10.5681 6.48999Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
<p class="mt-3 font-medium text-gray-800">다양한 활용</p>
|
||||||
|
<p class="mt-2 text-sm text-gray-500">SFTP를 통한 파일 업로드나 넥스트클라우드(Nextcloud)를 활용한 개인 클라우드 구축이 가능해요.</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Icon Block -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Icon Section -->
|
||||||
|
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||||
|
<!-- Pricing -->
|
||||||
|
<div>
|
||||||
|
<!-- Title -->
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<h1 class="text-2xl font-semibold text-gray-800">요금</h1>
|
||||||
|
</div>
|
||||||
|
<!-- End Title -->
|
||||||
|
<!-- Toggle -->
|
||||||
|
<div class="flex justify-center mb-6">
|
||||||
|
<div id="hs-pro-toggle-count"
|
||||||
|
class="p-0.5 inline-block bg-gray-100 rounded-full">
|
||||||
|
<label for="toggle-count-by-card"
|
||||||
|
class="relative inline-block py-1.5 px-3.5">
|
||||||
|
<input id="toggle-count-by-card"
|
||||||
|
name="hs-pro-toggle-count"
|
||||||
|
type="radio"
|
||||||
|
class="peer absolute top-0 end-0 size-full border-transparent bg-transparent bg-none text-transparent rounded-full cursor-pointer disabled:opacity-50 disabled:pointer-events-none before:absolute before:inset-0 before:size-full before:rounded-full focus:ring-offset-0 checked:before:bg-white checked:before:shadow-2xs checked:bg-none focus:ring-transparent">
|
||||||
|
<span class="relative z-10 inline-flex justify-center items-center gap-x-2 text-sm font-medium text-gray-800 cursor-pointer peer-disabled:cursor-default">
|
||||||
|
월간
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label for="toggle-count-with-yearly"
|
||||||
|
class="relative inline-block py-1.5 px-3.5">
|
||||||
|
<input id="toggle-count-with-yearly"
|
||||||
|
name="hs-pro-toggle-count"
|
||||||
|
type="radio"
|
||||||
|
class="peer absolute top-0 end-0 size-full border-transparent bg-transparent bg-none text-transparent rounded-full cursor-pointer disabled:opacity-50 disabled:pointer-events-none before:absolute before:inset-0 before:size-full before:rounded-full focus:ring-offset-0 checked:before:bg-white checked:before:shadow-2xs checked:bg-none focus:ring-transparent"
|
||||||
|
checked>
|
||||||
|
<span class="relative z-10 inline-flex justify-center items-center gap-x-2 text-sm font-medium text-gray-800 cursor-pointer peer-disabled:cursor-default">
|
||||||
|
연간
|
||||||
|
</span>
|
||||||
|
<span class="absolute -top-6 start-10">
|
||||||
|
<span class="flex items-center -mt-5">
|
||||||
|
<svg class="shrink-0 -mr-6 text-gray-400"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
x="0px"
|
||||||
|
y="0px"
|
||||||
|
viewBox="0 0 99.3 57"
|
||||||
|
width="48">
|
||||||
|
<path fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42">
|
||||||
|
</path>
|
||||||
|
<path fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
<span class="block mt-3">
|
||||||
|
<span class="inline-flex items-center gap-1.5 py-1 px-2 whitespace-nowrap text-xs font-medium bg-blue-600 text-white rounded-full">
|
||||||
|
최대 10% 절약
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Toggle -->
|
||||||
|
<!-- Pricing Cards Grid -->
|
||||||
|
<div class="grid sm:grid-cols-2 2xl:grid-cols-4 2xl:gap-6 gap-4">
|
||||||
|
<!-- End Card -->
|
||||||
|
<!-- Card -->
|
||||||
|
<div class="p-4 sm:p-6 bg-white border border-gray-200 rounded-xl">
|
||||||
|
<div class="flex justify-between items-center gap-x-2 mb-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
class="size-9 h-9">
|
||||||
|
<path d="M8.42229 20.6181C10.1779 21.5395 11.0557 22.0001 12 22.0001V12.0001L2.63802 7.07275C2.62423 7.09491 2.6107 7.11727 2.5974 7.13986C2 8.15436 2 9.41678 2 11.9416V12.0586C2 14.5834 2 15.8459 2.5974 16.8604C3.19479 17.8749 4.27063 18.4395 6.42229 19.5686L8.42229 20.6181Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.7" d="M17.5774 4.43152L15.5774 3.38197C13.8218 2.46066 12.944 2 11.9997 2C11.0554 2 10.1776 2.46066 8.42197 3.38197L6.42197 4.43152C4.31821 5.53552 3.24291 6.09982 2.6377 7.07264L11.9997 12L21.3617 7.07264C20.7564 6.09982 19.6811 5.53552 17.5774 4.43152Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.5" d="M21.4026 7.13986C21.3893 7.11727 21.3758 7.09491 21.362 7.07275L12 12.0001V22.0001C12.9443 22.0001 13.8221 21.5395 15.5777 20.6181L17.5777 19.5686C19.7294 18.4395 20.8052 17.8749 21.4026 16.8604C22 15.8459 22 14.5834 22 12.0586V11.9416C22 9.41678 22 8.15436 21.4026 7.13986Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800">S1</h3>
|
||||||
|
<div class="mt-4 flex items-center gap-x-0.5">
|
||||||
|
<p data-hs-toggle-count-custom='{ "target": "#hs-pro-toggle-count", "yearly": 7900, "monthly": 8900 }'
|
||||||
|
class="text-gray-800 font-semibold text-3xl">7,900</p>
|
||||||
|
<span class="text-xl font-normal text-gray-800">원</span>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">매달</p>
|
||||||
|
<div class="mt-5">
|
||||||
|
<button type="button"
|
||||||
|
class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:ring-2 focus:ring-blue-500"
|
||||||
|
data-hs-overlay="#hs-pro-dutprom">선택</button>
|
||||||
|
</div>
|
||||||
|
<ul class="mt-5 space-y-1">
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">1TB 용량</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">SFTP, HTTPS, rsync, Rclone, WebDAV, Samba (CIFS) 지원</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">무제한 트래픽</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">여러 개 추가, 업그레이드/다운그레이드 가능</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- End Card -->
|
||||||
|
<!-- Card -->
|
||||||
|
<div class="p-4 sm:p-6 bg-white border border-gray-200 rounded-xl">
|
||||||
|
<div class="flex justify-between items-center gap-x-2 mb-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
class="size-9 h-9">
|
||||||
|
<path d="M8.42229 20.6181C10.1779 21.5395 11.0557 22.0001 12 22.0001V12.0001L2.63802 7.07275C2.62423 7.09491 2.6107 7.11727 2.5974 7.13986C2 8.15436 2 9.41678 2 11.9416V12.0586C2 14.5834 2 15.8459 2.5974 16.8604C3.19479 17.8749 4.27063 18.4395 6.42229 19.5686L8.42229 20.6181Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.7" d="M17.5774 4.43152L15.5774 3.38197C13.8218 2.46066 12.944 2 11.9997 2C11.0554 2 10.1776 2.46066 8.42197 3.38197L6.42197 4.43152C4.31821 5.53552 3.24291 6.09982 2.6377 7.07264L11.9997 12L21.3617 7.07264C20.7564 6.09982 19.6811 5.53552 17.5774 4.43152Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.5" d="M21.4026 7.13986C21.3893 7.11727 21.3758 7.09491 21.362 7.07275L12 12.0001V22.0001C12.9443 22.0001 13.8221 21.5395 15.5777 20.6181L17.5777 19.5686C19.7294 18.4395 20.8052 17.8749 21.4026 16.8604C22 15.8459 22 14.5834 22 12.0586V11.9416C22 9.41678 22 8.15436 21.4026 7.13986Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800">S5</h3>
|
||||||
|
<div class="mt-4 flex items-center gap-x-0.5">
|
||||||
|
<p data-hs-toggle-count-custom='{ "target": "#hs-pro-toggle-count", "yearly": 24900, "monthly": 27900 }'
|
||||||
|
class="text-gray-800 font-semibold text-3xl">24,900</p>
|
||||||
|
<span class="text-xl font-normal text-gray-800">원</span>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">매달</p>
|
||||||
|
<div class="mt-5">
|
||||||
|
<button type="button"
|
||||||
|
class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:ring-2 focus:ring-blue-500"
|
||||||
|
data-hs-overlay="#hs-pro-dutprom">선택</button>
|
||||||
|
</div>
|
||||||
|
<ul class="mt-5 space-y-1">
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">5TB 용량</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">SFTP, HTTPS, rsync, Rclone, WebDAV, Samba (CIFS) 지원</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">무제한 트래픽</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">여러 개 추가, 업그레이드/다운그레이드 가능</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- End Card -->
|
||||||
|
<!-- Card -->
|
||||||
|
<div class="p-4 sm:p-6 bg-white border border-gray-200 rounded-xl">
|
||||||
|
<div class="flex justify-between items-center gap-x-2 mb-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
class="size-9 h-9">
|
||||||
|
<path d="M8.42229 20.6181C10.1779 21.5395 11.0557 22.0001 12 22.0001V12.0001L2.63802 7.07275C2.62423 7.09491 2.6107 7.11727 2.5974 7.13986C2 8.15436 2 9.41678 2 11.9416V12.0586C2 14.5834 2 15.8459 2.5974 16.8604C3.19479 17.8749 4.27063 18.4395 6.42229 19.5686L8.42229 20.6181Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.7" d="M17.5774 4.43152L15.5774 3.38197C13.8218 2.46066 12.944 2 11.9997 2C11.0554 2 10.1776 2.46066 8.42197 3.38197L6.42197 4.43152C4.31821 5.53552 3.24291 6.09982 2.6377 7.07264L11.9997 12L21.3617 7.07264C20.7564 6.09982 19.6811 5.53552 17.5774 4.43152Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.5" d="M21.4026 7.13986C21.3893 7.11727 21.3758 7.09491 21.362 7.07275L12 12.0001V22.0001C12.9443 22.0001 13.8221 21.5395 15.5777 20.6181L17.5777 19.5686C19.7294 18.4395 20.8052 17.8749 21.4026 16.8604C22 15.8459 22 14.5834 22 12.0586V11.9416C22 9.41678 22 8.15436 21.4026 7.13986Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800">S10</h3>
|
||||||
|
<div class="mt-4 flex items-center gap-x-0.5">
|
||||||
|
<p data-hs-toggle-count-custom='{ "target": "#hs-pro-toggle-count", "yearly": 46900, "monthly": 51900 }'
|
||||||
|
class="text-gray-800 font-semibold text-3xl">46,900</p>
|
||||||
|
<span class="text-xl font-normal text-gray-800">원</span>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">매달</p>
|
||||||
|
<div class="mt-5">
|
||||||
|
<button type="button"
|
||||||
|
class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:ring-2 focus:ring-blue-500"
|
||||||
|
data-hs-overlay="#hs-pro-dutprom">선택</button>
|
||||||
|
</div>
|
||||||
|
<ul class="mt-5 space-y-1">
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">10TB 용량</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">SFTP, HTTPS, rsync, Rclone, WebDAV, Samba (CIFS) 지원</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">무제한 트래픽</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">여러 개 추가, 업그레이드/다운그레이드 가능</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- End Card -->
|
||||||
|
<!-- Card -->
|
||||||
|
<div class="p-4 sm:p-6 bg-white border border-gray-200 rounded-xl">
|
||||||
|
<div class="flex justify-between items-center gap-x-2 mb-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
class="size-9 h-9">
|
||||||
|
<path d="M8.42229 20.6181C10.1779 21.5395 11.0557 22.0001 12 22.0001V12.0001L2.63802 7.07275C2.62423 7.09491 2.6107 7.11727 2.5974 7.13986C2 8.15436 2 9.41678 2 11.9416V12.0586C2 14.5834 2 15.8459 2.5974 16.8604C3.19479 17.8749 4.27063 18.4395 6.42229 19.5686L8.42229 20.6181Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.7" d="M17.5774 4.43152L15.5774 3.38197C13.8218 2.46066 12.944 2 11.9997 2C11.0554 2 10.1776 2.46066 8.42197 3.38197L6.42197 4.43152C4.31821 5.53552 3.24291 6.09982 2.6377 7.07264L11.9997 12L21.3617 7.07264C20.7564 6.09982 19.6811 5.53552 17.5774 4.43152Z" fill="#155dfc" />
|
||||||
|
<path opacity="0.5" d="M21.4026 7.13986C21.3893 7.11727 21.3758 7.09491 21.362 7.07275L12 12.0001V22.0001C12.9443 22.0001 13.8221 21.5395 15.5777 20.6181L17.5777 19.5686C19.7294 18.4395 20.8052 17.8749 21.4026 16.8604C22 15.8459 22 14.5834 22 12.0586V11.9416C22 9.41678 22 8.15436 21.4026 7.13986Z" fill="#155dfc" />
|
||||||
|
</svg>
|
||||||
|
<span class="inline-flex items-center gap-1.5 py-1.5 px-2 text-xs font-medium bg-blue-100 text-blue-800 rounded-md /10 ">
|
||||||
|
인기
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-800">S20</h3>
|
||||||
|
<div class="mt-4 flex items-center gap-x-0.5">
|
||||||
|
<p data-hs-toggle-count-custom='{ "target": "#hs-pro-toggle-count", "yearly": 89900, "monthly": 99900 }'
|
||||||
|
class="text-gray-800 font-semibold text-3xl">89,900</p>
|
||||||
|
<span class="text-xl font-normal text-gray-800">원</span>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 text-xs text-gray-500">매달</p>
|
||||||
|
<div class="mt-5">
|
||||||
|
<button type="button"
|
||||||
|
class="w-full py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:ring-2 focus:ring-blue-500"
|
||||||
|
data-hs-overlay="#hs-pro-dutprom">선택</button>
|
||||||
|
</div>
|
||||||
|
<ul class="mt-5 space-y-1">
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">20TB 용량</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">SFTP, HTTPS, rsync, Rclone, WebDAV, Samba (CIFS) 지원</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">무제한 트래픽</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex gap-x-2">
|
||||||
|
<svg class="shrink-0 mt-0.5 size-4 text-gray-500"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
<span class="text-sm text-gray-800">여러 개 추가, 업그레이드/다운그레이드 가능</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- End Card -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End Pricing -->
|
||||||
|
<!-- FAQ -->
|
||||||
|
<div class="space-y-5">
|
||||||
|
<div class="pt-16 text-center">
|
||||||
|
<h2 class="text-xl font-semibold text-gray-800">자주하는 질문</h2>
|
||||||
|
</div>
|
||||||
|
<!-- Grid -->
|
||||||
|
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-y-6 sm:gap-8 lg:gap-y-5 lg:gap-x-12">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-medium text-gray-800">월 요금은 언제 결제되나요?</h3>
|
||||||
|
<p class="mt-2 text-gray-500">서비스를 사용하기 시작한 날을 기준으로 매월 같은 날짜에 자동 결제돼요.</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
<div>
|
||||||
|
<h3 class="font-medium text-gray-800">중간에 저장소를 업그레이드하거나 다운그레이드하면 어떻게 되나요?</h3>
|
||||||
|
<p class="mt-2 text-gray-500">
|
||||||
|
업그레이드를 할 경우, 바로 새로운 요금제의 기능을 이용할 수 있어요. 다운그레이드를 할 경우, 변경 사항이 다음 결제일부터 적용되어, 한 달 동안은 기존 요금제의 기능을 그대로 이용할 수 있어요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
<!-- End Col -->
|
||||||
|
<!-- End Col -->
|
||||||
|
<div>
|
||||||
|
<h3 class="font-medium text-gray-800">환불은 어떻게 받을 수 있나요?</h3>
|
||||||
|
<p class="mt-2 text-gray-500">
|
||||||
|
서비스 사용 시작일로부터 30일 이내에 해지하면, 별도의 사유 없이 전액 환불이 가능해요. 30일 이후에는 이미 결제된 기간에 대한 환불은 제공되지 않으며, 다음 결제일부터는 요금이 청구되지 않아요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-medium text-gray-800">트래픽은 무료인가요?</h3>
|
||||||
|
<p class="mt-2 text-gray-500">
|
||||||
|
모든 저장소 요금제는 무제한 인바운드 트래픽과 아웃바운드 트래픽을 제공해요. 공정 사용 정책에 따라 모든 사용자가 안정적으로 서비스를 이용할 수 있도록, 비정상적으로 과도한 사용 시 서비스가 일시적으로 제한될 수 있어요.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
</div>
|
||||||
|
<!-- End Grid -->
|
||||||
|
<div class="pt-3 flex justify-center items-center gap-x-3">
|
||||||
|
<p class="text-sm text-gray-500">아직 궁금한 점이 있나요?</p>
|
||||||
|
<a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-50"
|
||||||
|
href="#">물어보기</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End FAQ -->
|
||||||
|
</div>
|
||||||
|
{% endblock content %}
|
||||||
Loading…
Reference in a new issue