112 lines
10 KiB
Django/Jinja
112 lines
10 KiB
Django/Jinja
{% 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 -->
|