|
|
<!doctype html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">
|
|
|
<title>{{.Title}}</title>
|
|
|
<script src="{{staticFile "/js/main.js"}}"></script>
|
|
|
<link rel="stylesheet" href="{{staticFile "css/theme.css"}}">
|
|
|
<link rel="stylesheet" href="{{staticFile "css/chunk.css"}}">
|
|
|
<link rel="stylesheet" href="{{staticFile "css/main.css"}}">
|
|
|
<style>
|
|
|
.sf__blog-card .sf__blog-cardImage img{
|
|
|
width: 366px;
|
|
|
height: 202px;
|
|
|
}
|
|
|
.grid{
|
|
|
display: block;
|
|
|
}
|
|
|
@media screen and (min-width: 768px) {
|
|
|
.sf__blog-card .sf__blog-cardImage img{
|
|
|
width: 458px;
|
|
|
height: 258px;
|
|
|
}
|
|
|
.grid{
|
|
|
display: grid;
|
|
|
}
|
|
|
#sf-custom__block--f1dd125c-186b-4145-8084-19059b38682f{
|
|
|
width: 100%;
|
|
|
}
|
|
|
.template-page #MainContent{
|
|
|
padding-top: ;
|
|
|
padding-bottom: 0;
|
|
|
}
|
|
|
.sf__page-about .about__block-heading{
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
@media (min-width: 1280px){
|
|
|
.sf__page-about .sf__about-block {
|
|
|
margin-bottom: 20px;
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body id="sf-theme" class="template-page page-about-us page-why-oracura cart-empty
|
|
|
relative min-h-screen">
|
|
|
|
|
|
<div id="shopify-section-header" class="shopify-section">
|
|
|
<section data-section-id="header" data-section-type="header" data-page="/blogs/blog"
|
|
|
data-header-design="logo-left-menu-center" class="sf-header opacity-0 transition-opacity "
|
|
|
data-transparent="false" data-sticky="true">
|
|
|
<div class="absolute inset-x-0 z-[70] header__wrapper ">
|
|
|
<header class="flex lg:hidden sf-header__mobile container-fluid bg-white items-center"
|
|
|
data-screen="sf-header__mobile" data-transparent="false">
|
|
|
<div class="sf-logo sf-logo--mobile w-1/2 flex flex-1 justify-center has-logo-img">
|
|
|
<a href="{{.IndexUrl}}" class="block py-2.5 logo-img relative" title="ORACURA">
|
|
|
<img src="{{replaceImage .Logo}}" alt="logo" alt="">
|
|
|
</a>
|
|
|
</div>
|
|
|
</header>
|
|
|
<header class="hidden lg:block bg-white sf-header__desktop logo-left-menu-center"
|
|
|
data-screen="sf-header__desktop" data-transparent="false">
|
|
|
<div class="container relative z-[1]">
|
|
|
<div class="sf-menu-logo-bar flex -mx-4 items-center">
|
|
|
<div class="sf-logo px-4 flex-1 justify-start has-logo-img">
|
|
|
<a href="{{.IndexUrl}}" class="block py-2.5 logo-img relative" title="ORACURA">
|
|
|
<img src="{{replaceImage .Logo}}" alt="logo" alt="">
|
|
|
</a>
|
|
|
</div>
|
|
|
<div
|
|
|
class="flex-grow-[2] shrink flex justify-center items-center sf-no-scroll-bar sf-menu-wrapper__desktop">
|
|
|
<ul class="sf-nav flex text-base font-medium whitespace-nowrap sf-no-scroll-bar ">
|
|
|
<li class="sf-menu-item list-none sf-menu-item--no-mega sf__menu-item-level1 sf-menu-item-parent"
|
|
|
data-index="0">
|
|
|
<a href="{{.IndexUrl}}"
|
|
|
class="block px-4 py-5 sf__sub-menu-link1 flex items-center sf__parent-item">{{ lang "home"}}
|
|
|
</a>
|
|
|
</li>
|
|
|
{{if .HasAbout }}
|
|
|
<li class="sf-menu-item list-none sf-menu-item--no-mega sf-menu-item-parent" data-index="1">
|
|
|
<a href="{{.AboutUrl}}"
|
|
|
class="block px-4 py-5 flex items-center sf__parent-item">
|
|
|
{{ lang "about"}}
|
|
|
</a>
|
|
|
</li>
|
|
|
{{end}}
|
|
|
{{if .HasContact }}
|
|
|
<li class="sf-menu-item list-none sf-menu-item--no-mega sf-menu-item-parent" data-index="2">
|
|
|
<a href="{{.ContactUrl}}" class="block px-4 py-5 flex items-center sf__parent-item active">
|
|
|
{{ lang "contact"}}
|
|
|
</a>
|
|
|
</li>
|
|
|
{{end}}
|
|
|
{{if .HasPolicy }}
|
|
|
<li class="sf-menu-item list-none sf-menu-item--no-mega sf-menu-item-parent" data-index="3">
|
|
|
<a href="{{.PolicyUrl}}"
|
|
|
class="block px-4 py-5 flex items-center sf__parent-item">
|
|
|
{{ lang "policy"}}
|
|
|
</a>
|
|
|
</li>
|
|
|
{{end}}
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header>
|
|
|
</div>
|
|
|
<div style="--tw-bg-opacity: 0;"
|
|
|
class="sf-menu-wrapper sf-menu-wrapper-mobile touch-none hidden fixed z-[80] inset-0 transition-colors duration-300 bg-black">
|
|
|
<div
|
|
|
class="sf-menu__content overscroll-contain transition-transform -translate-x-full duration-300 md:w-[450px] z-50 bg-white text-black overflow-x-hidden h-full overflow-y-scroll">
|
|
|
<div class="close-icon">
|
|
|
<svg class="w-[24px] h-[24px]" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
|
</svg>
|
|
|
</div>
|
|
|
<!-- mobile menu -->
|
|
|
<div class="flex flex-col">
|
|
|
<div
|
|
|
class="sf-menu-content flex-grow flex flex-col justify-between transition-all opacity-0 opacity-100 duration-300">
|
|
|
<div class="w-full sf-menu-links pt-8">
|
|
|
<li class="list-none sf-link flex items-center" data-url="{{.IndexUrl}}">
|
|
|
<a href="{{.IndexUrl}}"
|
|
|
class="w-full px-4 py-3 flex items-center justify-between relative">
|
|
|
<span>{{ lang "home"}}</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
{{if .HasAbout }}
|
|
|
<li class="list-none">
|
|
|
<a href="{{.AboutUrl}}" class="block px-4 py-3 ">
|
|
|
{{ lang "about"}}
|
|
|
</a>
|
|
|
</li>
|
|
|
{{end}}
|
|
|
{{if .HasContact }}
|
|
|
<li class="list-none">
|
|
|
<a href="{{.ContactUrl}}" class="block px-4 py-3 ">
|
|
|
{{ lang "contact"}}
|
|
|
</a>
|
|
|
</li>
|
|
|
{{end}}
|
|
|
{{if .HasPolicy }}
|
|
|
<li class="list-none">
|
|
|
<a href="{{.PolicyUrl}}" class="block px-4 py-3 ">
|
|
|
{{ lang "policy"}}
|
|
|
</a>
|
|
|
</li>
|
|
|
{{end}}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- end -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</div>
|
|
|
|
|
|
<main role="main" id="MainContent">
|
|
|
<div id="shopify-section-template--16163352510686__main" class="shopify-section">
|
|
|
<section data-section-type="article-template" data-section-id="template--16163352510686__main"
|
|
|
class="sf__page-blog-single-post pb-10 lg:pb-12 xl:pb-24">
|
|
|
<div class="container">
|
|
|
<div role="article" class="flex flex-col md:flex-row gap-8">
|
|
|
<article class="flex-1">
|
|
|
<div class="text-center">
|
|
|
<p><a href="{{.IndexUrl}}" class="text-xs text-black uppercase mb-2"> {{lang "home"}} / </a> <a
|
|
|
href="#" class="text-xs text-black uppercase mb-2">{{.Title}}</a> </p>
|
|
|
<h1 class="text-2xl xl:text-4xl xl:leading-relaxed mb-1">{{.Title}}</h1>
|
|
|
<p class="text-gray-500 mb-7 xl:mb-10">
|
|
|
<span class="text-black" style="text-transform: uppercase;font-size: 15px;">{{timeFormat .PublishTime}}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="mb-4">
|
|
|
<img class="lazyload w-full" src="{{getCover .Article.Pictures}}">
|
|
|
<p style="font-weight: 400;">{{.Article.Summary}}</p>
|
|
|
</div>
|
|
|
<div class="mb-10 prose max-w-none">
|
|
|
{{range .Article.Topics}}
|
|
|
<p><span style="font-weight: 400;">{{.Topic}} </span></p>
|
|
|
{{$tlen := len .Pictures}}
|
|
|
{{if ne $tlen 0}}
|
|
|
{{range .Pictures}}
|
|
|
<img width="100%" src="{{replaceImage .}}" />
|
|
|
{{end}}
|
|
|
{{end}}
|
|
|
<p><span style="font-weight: 400;">{{.Content}}</span></p>
|
|
|
{{end}}
|
|
|
</div>
|
|
|
<div class="border-t pt-7 flex justify-start" style="border-color: var(--border-color-1);flex-direction: column;">
|
|
|
{{ if .Prev }}
|
|
|
<a href="{{.Prev.Url}}"
|
|
|
class="flex flex-1 items-center py-2.5 " style="border-color: var(--border-color-1);">
|
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
|
d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
|
|
|
</svg>
|
|
|
<div class="ml-5">
|
|
|
<div class="uppercase text-gray-400 font-medium text-xs lg:mb-1"
|
|
|
style="color: var(--text-gray-9b);">{{lang "prev_article"}}:</div>
|
|
|
<div class="text-black hidden md:block">{{.Prev.Title}}</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
{{ end }}
|
|
|
{{ if .Next }}
|
|
|
<a href="{{.Next.Url}}"
|
|
|
class="flex flex-1 items-center py-2.5 " style="border-color: var(--border-color-1);">
|
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
|
d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
|
|
|
</svg>
|
|
|
<div class="ml-5">
|
|
|
<div class="uppercase text-gray-400 font-medium text-xs lg:mb-1"
|
|
|
style="color: var(--text-gray-9b);">{{lang "next_article"}}:</div>
|
|
|
<div class="text-black hidden md:block">{{.Next.Title}}</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
{{ end }}
|
|
|
</div>
|
|
|
{{$rlen := len .RecommendArticles}}
|
|
|
{{if ne $rlen 0}}
|
|
|
<div class="mt-28">
|
|
|
<div class="text-black text-3xl mb-16 text-center">{{lang "recommend"}}</div>
|
|
|
<div class="sf__ms">
|
|
|
<div class="sf__ms-wrapper md:grid md:grid-cols-2 lg:grid-cols-3 gap-7 md-gap-8">
|
|
|
{{range .RecommendArticles}}
|
|
|
<div class="sf__blog-card sf__view-grid ">
|
|
|
<a href="{{.Url}}">
|
|
|
<img class="lazyload w-full h-full" src="{{getCover .Cover}}">
|
|
|
</a>
|
|
|
<div class="sf__blog-cardContent text-left">
|
|
|
<h3 class="sf__blog-cardTitle" style="overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
display: -webkit-box;
|
|
|
-webkit-line-clamp: 1;
|
|
|
-webkit-box-orient: vertical;"><a
|
|
|
href="{{.Url}}">{{.Title}}</a></h3>
|
|
|
</div>
|
|
|
</div>
|
|
|
{{end}}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
{{end}}
|
|
|
</article>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
</div>
|
|
|
<div id="cart-drawer-container"></div>
|
|
|
</main>
|
|
|
<div id="shopify-section-footer" class="shopify-section">
|
|
|
<footer class="sf-footer" data-section-type="footer" data-section-id="footer">
|
|
|
|
|
|
<div class=" sf__footer-middle">
|
|
|
<div class="container-fluid">
|
|
|
<div class="sf-footer__accordion flex flex-wrap lg:flex-nowrap -mx-5">
|
|
|
<div class="sf-footer__block sf__footer-block-custom_text w-full lg:w-1/4 ">
|
|
|
<div class="sf-footer__block-inner px-5">
|
|
|
<div class=" sf__footer-block-content">
|
|
|
<div class="pb-5 md:pb-0">
|
|
|
<div class="mb-5" style="max-width: 150px">
|
|
|
<a href="{{.IndexUrl}}">
|
|
|
<img src="{{replaceImage .Logo}}" alt="">
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="sf-footer__block sf__accordion-item open sf__footer-block-menu w-full lg:w-1/4 ">
|
|
|
<div class="sf-footer__block-inner px-5">
|
|
|
<ul class="sf__accordion-content sf__footer-block-content">
|
|
|
<div class="pb-5 md:pb-0">
|
|
|
|
|
|
{{if .HasAbout }}
|
|
|
<li class="link-lv2 leading-8 hover-underline">
|
|
|
<a href="{{.AboutUrl}}">
|
|
|
{{ lang "about"}}
|
|
|
</a>
|
|
|
</li>
|
|
|
{{end}}
|
|
|
{{if .HasContact }}
|
|
|
<li class="link-lv2 leading-8 hover-underline">
|
|
|
<a href="{{.ContactUrl}}">
|
|
|
{{ lang "contact"}}
|
|
|
</a>
|
|
|
</li>
|
|
|
{{end}}
|
|
|
{{if .HasPolicy }}
|
|
|
<li class="link-lv2 leading-8 hover-underline">
|
|
|
<a href="{{.PolicyUrl}}">
|
|
|
{{ lang "policy"}}
|
|
|
</a>
|
|
|
</li>
|
|
|
{{end}}
|
|
|
|
|
|
</div>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
{{$flen := len .Friendship}}
|
|
|
{{if ne $flen 0}}
|
|
|
<div class="sf-footer__block sf__accordion-item sf__footer-block-menu w-full lg:w-1/4 ">
|
|
|
<div class="sf-footer__block-inner px-5">
|
|
|
<ul class="sf__accordion-content sf__footer-block-content">
|
|
|
<div class="pb-5 md:pb-0">
|
|
|
{{range .Friendship}}
|
|
|
<li class="link-lv2 leading-8 hover-underline">
|
|
|
<a href="{{.Url}}">
|
|
|
{{.Name}}
|
|
|
</a>
|
|
|
</li>
|
|
|
{{end}}
|
|
|
</div>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
{{end}}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="footer-layout sf__footer-bottom mt-5 md:mt-0">
|
|
|
<div class="container-fluid">
|
|
|
<div class="sf__footer-bottom-inner pt-0 lg:py-5 flex flex-col lg:flex-row justify-between items-center">
|
|
|
<div class="sf-footer__center flex-1 text-center mb-6 lg:mb-0 lg:order-none lg:w-auto w-full">
|
|
|
<span class="text-sm">{{.Copyright}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</div>
|
|
|
</body>
|
|
|
|
|
|
</html> |
