master
/
solarai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'b6c73dfd40'
${ noResults }
solarai/resources/views/index.blade.php

461 lines
23 KiB
PHTML
Raw Blame History

@extends('layouts.app')
@section('content')
<div class="slide-container" id="js-wrapper">
<div class="sections-container" id="index-container">
<section class="main-section main-section1">
<div class="text-white d-none d-xl-block">
<div class="font-54 mobile-font-42 text-white">
청담K는 올바른 가치를 추구하고<br>
올바른 문화를 선도 합니다.
</div>
<div class="font-30 margin-t-2 text-white">
국내 미술 업계의 성장을 위해 노력하는 청담K
</div>
<div class="font-18 margin-t-2 text-white">
청담 K는 국내 미술계의 본질적인 근력을 기르기 위해 역량 있는 작가를 발굴하고<br>
국제 무대에 한국의 미술과 작가를 세계에 알리고자 열정, 진심과 전문성을 가진<br>
이들이 모여 만들어졌습니다.
</div>
</div>
<div class="main-sub-links d-none d-xl-flex">
<div class="d-flex flex-column">
<a href="{{ route('arts.category', ['painting'], false) }}" class="sub-link-item sub-link-item1">
<div class="font-26">미술작품</div>
<div class="font-20">Painting</div>
</a>
<a href="{{ route('arts.category', ['jewelry'], false) }}" class="sub-link-item sub-link-item2">
<div class="font-26">쥬얼리</div>
<div class="font-20">Jewelry</div>
</a>
</div>
<div class="d-flex flex-column">
<a href="{{ route('arts.category', ['ceramics'], false) }}" class="sub-link-item sub-link-item3">
<div class="font-26">전통도자기</div>
<div class="font-20">Ceramics</div>
</a>
<a href="{{ route('artist.list', null, false) }}" class="sub-link-item sub-link-item4">
<div class="font-26">저명한 작가</div>
<div class="font-20">Artist</div>
</a>
</div>
</div>
<div class="text-white d-block d-xl-none text-center">
<div class="font-32">❝</div>
<div class="font-32">
청담K는 올바른 가치를 <br>
추구하고 올바른 문화를 <br>
선도합니다.
</div>
<div class="font-32">❞</div>
<div class="font-24">
국내 미술업계의 성장을 위해<br>
노력하는 청담K
</div>
</div>
<div class="mobile-scroll d-flex flex-column d-xl-none justify-content-center align-content-center">
<div class="jost font-18 text-white down-text" style="font-weight: 700; letter-spacing:0">SCROLL</div>
<div class="text-center down-arrow-box"><img src="/images/arrow3.png" class="img-fluid down-arrow"/></div>
</div>
</section>
<section class="main-section main-section2">
<div class="text-white d-none d-xl-block">
<div class="font-54 text-white">
청담K의 컬렉터가 자부심을 가질 수 있고<br>
더 좋은 작품을 소장하게 지원합니다.
</div>
<div class="font-30 margin-t-2 text-white">
인증된 컬렉터 커뮤니티, 포럼 등 다양한 교육 컨텐츠를 진행<br>
</div>
<div class="font-18 margin-t-2 text-white">
청담 K는 국내외 저명한 현대미술가 전시를 개최하며, 컬렉터들을 위한 보다 쉽고 재미있게 미술을 배울 수 있는<br>
클래스와 포럼을 지원합니다. 또한 품격과 인증된 청담 K 컬렉터 멤버쉽을 통해 다양한 교육 프로그램과 커뮤니티로<br>
컬렉터들이 더 귀한 작품을 소장할 수 있도록 진행하고 있습니다.<br><br>
청담 K의 컬렉터가 고품격 문화를 창출하는 갤러리에 자부심을 가지고 한국 미술을 배우고 접하며 안목과 수준을<br>
높여갈 수 있게 프라이빗하고 폭넓게 커뮤니티의 장을 만들어가고 있습니다.<br>
</div>
</div>
<div class="text-white d-block d-xl-none text-center">
<div class="font-32">❝</div>
<div class="font-32">
청담K의 컬렉터가 자부심을<br> 가질 수 있고 더 좋은 작품을<br> 소장하게 지원합니다.
</div>
<div class="font-32">❞</div>
<div class="font-24">
인증된 컬렉터 커뮤니티, 포럼 등<br>
다양한 교육 컨텐츠를 진행
</div>
</div>
</section>
<section class="main-section main-section3">
<div class="text-white d-none d-xl-block">
<div class="font-54 text-white">
한국 미술을 K-POP에 버금가는 수준으로<br>
세계인이 인정하게 만들도록 노력 하겠습니다.
</div>
<div class="font-30 margin-t-2 text-white">
궁극적으로 건강하고 품격을 갖춘 국내 미술업계와 한국 문화의 선진화
</div>
<div class="font-18 margin-t-2 text-white">
청담 K는 진정 한국 미술 업계의 발전과 미술과 미술산업의 진심을 가진 사람들이 모여 일합니다.<br>
그렇기에 국제적으로 활발하게 한국 미술을 세계에 알리고자 교류하며, 대한민국의 훌륭한 작가를 발굴하고<br>
소개해 국내 미술계와 미술시장의 품격 있는 선진화로 이어지게 하겠습니다.
</div>
</div>
<div class="text-white d-block d-xl-none text-center">
<div class="font-32">❝</div>
<div class="font-32">
한국 미술을 K-POP에<br>
버금가는 수준으로 세계인이 <br>인정하게 만들도록 노력 하겠습니다.
</div>
<div class="font-32">❞</div>
<div class="font-24">
궁극적으로 건강하고 품격을 갖춘<br>
국내 미술업계와 한국 문화의 선진화
</div>
</div>
</section>
<section class="main-section main-section4 d-flex">
<div class="section2-image align-items-center">
<div class="text-white d-none d-xl-block">
<div class="font-54 text-white">
당신의 예술적 안목에<br>
경제적 가치를 더해 드립니다.
</div>
<div class="font-30 margin-t-2 text-white">
대한민국 대표 하이엔드-문화
</div>
<div class="font-18 margin-t-2 text-white">
국내 최초로 2대째 내려오는 40년 전통의 유서 깊은 도자기와 미술품, 귀금속을 통해<br>
청담동만의 전통성 있는 고유한 고급 문화를 향유하며, 개인과 기업에게 경제적이고도<br>
풍성한 심적, 예술적 가치를 향유케 하고 있습니다.
</div>
</div>
<div class="text-white d-block d-xl-none text-center">
<div class="font-32">❝</div>
<div class="font-32">
당신의 예술적 안목에<br>
경제적 가치를 더해 드립니다.
</div>
<div class="font-32">❞</div>
<div class="font-24">
대한민국 대표 하이엔드-문화
</div>
<div class="font-18 margin-t-2">
국내 최초로 2대째 내려오는 40년 전통의 유서 깊은 도자기와 미술품, 귀금속을 통해
청담동만의 전통성 있는 고유한 고급 문화를 향유하며, 개인과 기업에게 경제적이고도
풍성한 심적, 예술적 가치를 향유케 하고 있습니다.
</div>
</div>
</div>
<div class="section2-intro p-0">
<div class="center-info line-bottom">
<div class="info-title">
<img src="/images/word-logo.png" class="word-logo img-fluid"/>
</div>
<div class="info-operate d-flex">
<div class="operate-item" style="flex:1">
<div class="operate-title">오픈시간</div>
<div class="operate-numbers">{{ $settings->open_time }}</div>
</div>
<div class="operate-item" style="flex:1">
<div class="operate-title">대표전화</div>
<div class="operate-numbers">{{ $settings->site_phone }}</div>
</div>
</div>
<div class="info-btns">
<a href="{{ route('pages', ['greeting'], false) }}" class="info-btn">
<img src="/images/icons/btn-greeting.png" class="info-btn-img img-fluid"/>
<div class="info-btn-title">대표인사말</div>
</a>
<a href="{{ route('pages', ['gallery'], false) }}" class="info-btn">
<img src="/images/icons/btn-intro.png" class="info-btn-img img-fluid"/>
<div class="info-btn-title">갤러리소개</div>
</a>
<a href="{{ route('pages', ['visit'], false) }}" class="info-btn">
<img src="/images/icons/btn-location.png" class="info-btn-img img-fluid"/>
<div class="info-btn-title">오시는길</div>
</a>
</div>
</div>
<div class="item-page swiper" id="item-page">
<div class="swiper-wrapper">
<div class="item1 swiper-slide">
<div class="item-title">도자기</div>
<div class="item-desc">
전통 도자기로<br/>
이미 2대째 40년간 이어지고 있고<br/>
청담K 도자기는 최고의 가치를<br/>
자부하고 있습니다.
</div>
</div>
<div class="item2 swiper-slide">
<div class="item-title">그림</div>
<div class="item-desc">
정택영화백 포함 김세정<br/>
등등 고가의 그림을 보유하고있습니다.
</div>
</div>
<div class="item3 swiper-slide">
<div class="item-title">쥬얼리</div>
<div class="item-desc">
쥬얼리 귀금속은 청담k<br/>
다양한 종류 및 고가의 제품을<br/>
보유 하고 있습니다.
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main-section main-section5 d-none d-xl-block" id="foot-section">
<div class="ft-title">
<img src="/images/word-logo-white.png" class="img-fluid" style="width:194px"/>
<span class="jost news">News</span>
</div>
<div class="ft-board d-flex">
<div class="notice-box">
<div class="board-title padding-r-4">
<div class="eng">Notice</div>
<div class="kor d-flex justify-content-between">공지사항 <span><a href="{{ route('board.list', ['notice'], false) }}" class="text-white font-16">+ 더보기</a></span></div>
</div>
<div class="board-list padding-r-4">
@if($notice)
@foreach($notice as $i => $row)
<div class="d-flex justify-content-between footer-list-item">
<div class="main-subject"><a class="text-white" href="{{ route('board.view', ['notice', $row->uid], false) }}"><span>{{ $row->subject }}</span></a></div>
<div>{{ date('Y.m.d', strtotime($row->created_at)) }}</div>
</div>
@endforeach
@endif
</div>
</div>
<div class="news-box">
<div class="board-title padding-l-4 padding-r-4">
<div class="eng">News</div>
<div class="kor d-flex justify-content-between">뉴스 <span><a href="{{ route('board.list', ['news'], false) }}" class="text-white font-16">+ 더보기</a></span></div>
</div>
<div class="board-list padding-l-4 padding-r-4">
@if($news)
@foreach($news as $i => $row)
<div class="d-flex justify-content-between footer-list-item">
<div class="main-subject"><a class="text-white" href="{{ route('board.view', ['news', $row->uid], false) }}"><span>{{ $row->subject }}</span></a></div>
<div>{{ date('Y.m.d', strtotime($row->created_at)) }}</div>
</div>
@endforeach
@endif
</div>
</div>
<div class="info-box line-left">
<div class="board-title padding-l-4">
<div class="eng">{{ $settings->site_engName }}</div>
<div class="kor">{{ $settings->site_name }}</div>
</div>
<div class="board-list padding-l-4">
<div class="d-flex align-items-center margin-b-2">
<img src="/images/icons/footer-info-icon1.png" style="width:40px; margin-right:15px"/>
<div class="font-18">{{ $settings->site_phone }}</div>
</div>
<div class="d-flex align-items-center margin-b-2">
<img src="/images/icons/footer-info-icon2.png" style="width:40px; margin-right:15px"/>
<div class="font-18">{{ $settings->site_fax }}</div>
</div>
<div class="d-flex align-items-center margin-b-2">
<img src="/images/icons/footer-info-icon3.png" style="width:40px; margin-right:15px"/>
<div class="font-18">{!! str_replace(')', ')<br/>', $settings->site_address) !!}</div>
</div>
<div class="d-flex align-items-center">
<img src="/images/icons/footer-info-icon4.png" style="width:40px; margin-right:15px"/>
<div class="font-18">{{ $settings->open_time }}</div>
</div>
</div>
</div>
</div>
<div class="footer d-flex">
<div class="margin-r-4 d-flex flex-column justify-content-center">
<img src="/images/logo.png" style="width:62px;" class="img-fluid"/>
</div>
<div class="d-flex flex-column" style="flex:1">
<div class="d-flex justify-content-between">
<div>
<span class="text-white info-term" style="cursor:pointer" id="infoTerm">개인정보처리방침</span>
<span class="padding-l-1 padding-r-1">|</span> <span class="text-white service-term" style="cursor:pointer" id="serviceTerm">서비스 이용약관</span>
</div>
<div class="d-flex">
<div class="margin-r-2">FLOLLOW US</div>
<a href="{{ $settings->url_facebook }}" target="_blank" class="footer-social-link margin-r-1"><img src="/images/icons/icon-facebook.png" style="width:18px"/></a>
<a href="{{ $settings->url_instagram }}" target="_blank" class="footer-social-link margin-r-1"><img src="/images/icons/icon-instar.png" style="width:18px"/></a>
<a href="{{ $settings->url_youtube }}" target="_blank" class="footer-social-link"><img src="/images/icons/icon-youtube.png" style="width:18px"/></a>
</div>
</div>
<div class="company-info">
<div>
총괄대표 : {{ $settings->ceo_name }}
</div>
<div>
E. {{ $settings->site_email }}&nbsp; T. {{ $settings->site_phone }}&nbsp; F. {{ $settings->site_fax }}
</div>
<div>{{ $settings->site_address }}</div>
</div>
<div class="copyright">
{{ $settings->copyright }}
</div>
</div>
</div>
</section>
</div>
</div>
<div class="scroll d-none" id="scroll-arrow">
<div class="jost font-18 text-white" style="font-weight: 700; letter-spacing:0">SCROLL</div>
<div class="margin-l-1 arrow"><div class="arrow-line"></div><i class="arrow-end right"></i></div>
</div>
@endsection
@push('scripts')
<script>
$(function () {
var ww = window.innerWidth;
TweenLite.defaultEase = Linear.easeNone;
var controller = new ScrollMagic.Controller();
var scroll = null
var scrollType = ""
if(ww >= 1400){
scroll = createScroll()
}else if(ww < 1400 && ww >= 1200){
scroll = middleCreateScroll()
}
window.onscroll = function() {myScroll()}
function createScroll() {
var t1 = new TimelineMax();
$('.k-sidebar').removeClass('position-fixed')
t1
.fromTo("section.main-section2", 1, {x:"100%"}, {x:"0%"})
.fromTo("section.main-section3", 1, {x:"-100%"}, {x:"0%"})
.fromTo("section.main-section4", 1, {y:"-100%"}, {y:"0%"})
.fromTo("section.main-section5", 1, {x:"100%"}, {x:"0%"})
scrollType = "pc"
return new ScrollMagic.Scene({
triggerElement: '#index-conatiner',
triggerHook: 'onLeave',
duration: '1000%'
})
.setPin('#js-wrapper')
.setTween(t1)
.setClassToggle('.main-section5', "section-none-scroll")
.setClassToggle('#scroll-arrow', "d-xl-flex")
.addTo(controller)
}
function middleCreateScroll() {
var t2 = new TimelineMax();
$('.k-sidebar').addClass('position-fixed')
scrollType = "middle"
t2
.fromTo("section.main-section2", 1, {x:"100%"}, {x:"0%"})
.fromTo("section.main-section3", 1, {x:"-100%"}, {x:"0%"})
.fromTo("section.main-section4", 1, {y:"100%"}, {y:"0%"})
.fromTo("section.main-section5", 1, {x:"100%"}, {x:"0%"})
return new ScrollMagic.Scene({
triggerElement: '#index-conatiner',
triggerHook: 'onLeave',
duration: '1000%'
})
.setPin('#js-wrapper')
.setTween(t2)
.setClassToggle('#scroll-arrow', "d-xl-flex")
.addTo(controller)
}
function myScroll() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
// var ww = window.innerWidth;
// var noSlides = $("section").length;
// var slideWidth = $("section").width();
// var slideContainerWidth = slideWidth * noSlides - ww;
// console.log(noSlides, slideWidth, slideContainerWidth)
// var actionHorizontal = new TimelineMax()
// .to("#index-container", 1, {x: -slideContainerWidth, ease: Power0.easeNone});
// var horizontal = createHorizontal();
// // var wipeContainer = createWipe();
// function createHorizontal() {
// return new ScrollMagic.Scene({
// triggerElement: ".slide-container",
// triggerHook: "onLeave",
// duration: slideContainerWidth,
// })
// .setPin('.slide-container')
// .setTween(actionHorizontal)
// .addIndicators()
// .addTo(controller);
// }
// controller.scrollTo(function (newpos) {
// //TweenMax.to(window, 1, { scrollTo: { x: newpos } });
// TweenMax.to(window, 1, {
// scrollTo: {
// y: newpos,
// autoKill: true,
// },
// ease: Power3.easeOut,
// });
// });
$(window).resize(function () {
ww = window.innerWidth;
if(ww < 1200 && scroll){
scroll.destroy(true);
scrollType = ""
scroll = null
$('.k-sidebar').addClass('position-fixed')
$('.main-section').removeAttr('style')
}else if(ww < 1400 && ww >= 1200){
if(scroll){
if(scrollType == "pc"){
scroll.destroy(true);
scroll = middleCreateScroll()
}
}else{
scroll = middleCreateScroll()
}
}else if (ww >= 1400){
if(scroll){
if(scrollType == "middle"){
scroll.destroy(true);
scroll = createScroll()
}
}else{
scroll = createScroll()
}
}
});
});
</script>
@endpush
@push('style')
<link rel="stylesheet" type="text/css" href="/css/board.css?v={{ $now }}">
@endpush
Reference in New Issue View Git Blame Copy Permalink