중간 및 푸터 변경

public/css/app.css

@@ -27,10 +27,9 @@ a {
   line-height: 140%;
   padding: 10px;
   border: 0;
-  border: 1px solid #c5c5c5;
-  border-radius: 10px;
+  border: 1px solid #bbb;
   width: 100%;
-  margin-bottom: 10px;
+  margin-bottom: 25px;
 }
 .k-input:focus, .k-input:focus-visible {
   outline: none;
@@ -56,45 +55,36 @@ a {
 }
 
 .intro-image-box {
-  background: rgb(244, 255, 143);
+  background: url("/images/middle-img.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
   text-align: center;
-  padding: 40px 0px;
-}
-.intro-image-box img {
-  max-width: 300px;
+  margin-bottom: 30px;
+  min-height: 280px;
 }
 
 .intro-text-box {
-  padding: 20px 0px;
   text-align: center;
 }
 .intro-text-box .text-image img {
-  max-width: 250px;
-}
-.intro-text-box .text-title {
-  font-size: 32px;
-  color: #24469c;
-  font-weight: bold;
+  max-width: 270px;
 }
 .intro-text-box .text-desc {
   font-size: 16px;
+  line-height: 130%;
+  letter-spacing: -0.5px;
 }
 
 .ai-hr {
-  margin: 20px 0px;
+  margin: 60px 0px;
 }
 
 .inquiry-message-box {
-  padding: 20px 0px;
-}
-.inquiry-message-box .inquiry-message {
-  font-size: 22px;
-  font-weight: 700;
-}
-.inquiry-message-box .inquiry-team {
+  padding: 40px 0px 50px;
   font-size: 16px;
-  font-style: italic;
-  color: rgb(153, 153, 153);
+  line-height: 130%;
+  letter-spacing: -0.5px;
 }
 
 .inquiry-box {
@@ -198,4 +188,19 @@ a {
   margin-top: 20px;
 }
 
+.footer-logo {
+  max-width: 120px;
+  margin-right: 40px;
+}
+
+.footer-text {
+  font-size: 14px;
+  line-height: 130%;
+  letter-spacing: -0.5px;
+}
+
+footer {
+  padding-bottom: 100px;
+}
+
 /************ BreakPoints ************/

resources/sass/app.scss

@@ -18,44 +18,35 @@ $font-sizes: 52;
 }
 
 .intro-image-box{
-    background:rgb(244, 255, 143);
+    background: url('/images/middle-img.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
     text-align: center;
-    padding:40px 0px;
-    img{
-        max-width: 300px;
-    }
+    margin-bottom:30px;
+    min-height:280px;
 }
 .intro-text-box{
-    padding:20px 0px;
     text-align: center;
     .text-image{
         img{
-            max-width:250px;
+            max-width:270px;
         }
     }
-    .text-title{
-        font-size: 32px;
-        color:#24469c;
-        font-weight: bold;
-    }
     .text-desc{
         font-size:16px;
+        line-height: 130%;
+        letter-spacing: -0.5px;
     }
 }
 .ai-hr{
-    margin:20px 0px;
+    margin:60px 0px;
 }
 .inquiry-message-box{
-    padding:20px 0px;
-    .inquiry-message{
-        font-size:22px;
-        font-weight: 700;
-    }
-    .inquiry-team{
-        font-size:16px;
-        font-style: italic;
-        color:rgb(153, 153, 153);        
-    }
+    padding:40px 0px 50px;
+    font-size:16px;
+    line-height: 130%;
+    letter-spacing: -0.5px;
 }
 .inquiry-box{
     margin-bottom:20px;
@@ -161,6 +152,18 @@ $font-sizes: 52;
     display: inline-block;
     margin-top:20px;
 }
+.footer-logo{
+    max-width: 120px;
+    margin-right:40px;
+}
+.footer-text{
+    font-size:14px;
+    line-height:130%;
+    letter-spacing: -0.5px;
+}
+footer{
+    padding-bottom:100px;
+}
 /************ BreakPoints ************/
 // Small devices (landscape phones, 576px and up)
 @media (max-width: 576px) { 

resources/sass/custom.scss

@@ -22,10 +22,9 @@ a {
     line-height: 140%;
     padding:10px;
     border:0;
-    border:1px solid #c5c5c5;
-    border-radius: 10px;
+    border:1px solid #bbb;
     width: 100%;
-    margin-bottom:10px;
+    margin-bottom:25px;
 
     &:focus, &:focus-visible{
         outline:none;

resources/views/layouts/footer.blade.php

@@ -0,0 +1,20 @@
+<footer>
+    <div class="container">
+        <div class="row">
+            <hr class="ai-hr"/>
+            <div class="d-flex align-items-center">
+                <div class="footer-logo">
+                    <img src="/images/main/frame-logo.png" class="img-fluid" alt="(주)쏠라아이"/>
+                </div>
+                <div class="footer-text">
+                    <div>(주)쏠라아이</div>
+                    <div>본사.공장 : 경기도 용인시 처인구 모현읍 곡현로 485번길 59</div>
+                    <div>디자인 사무소 : 서울 서대문구 홍연길 77 한인트윈빌 202호 B-6</div>
+                    <div>문의전화 : 1599-3574<span class="mr-2"></span> 이메일 : solarai@naver.com</div>
+                    <div>블로그 : blogf.naver.com/solarai</div>
+                    <div>COPYRIGHT INFORMATION solarai © 2022. ALL RIGHTS RESERVED.</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>

resources/views/pages/inquiry.blade.php

@@ -1,14 +1,14 @@
 <section class="main-inquiry" id="inquiry">
     <div class="container">
         <div class="row">
-            <div class="inquiry-message-box">
-                <div class="inquiry-message mb-2">"쏠라아이를 방문해 주셔서 감사합니다. 궁금하신 점이 있다면 문의 주세요."</div>
-                <div class="inquiry-team">- Solarai 일동</div>
+            <div class="inquiry-message-box text-center">
+                방문해주셔서 감사합니다. 궁금하신 점이 있다면 언제든 문의 주세요.<br><br>
+                질문이 있거나 도움이 필요한 경우 아래 양식을 작성해주세요.<br>
+                빠른 시간내 답변 드리겠습니다.
             </div>
-            <hr class="ai-hr">
             <div class="inquiry-form">
                 <div class="row">
-                    <div class="col-12 col-md-6">
+                    <div class="col-12 col-md-6 mx-auto">
                         <form id="writeForm" method="post" accept-charset="utf-8" action="{{ route('board.store', null, false) }}">
                             <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                             <input type="hidden" name="mode" value="add" />
@@ -18,50 +18,53 @@
                             <input type="hidden" name="category" value="" />
                             <div class="row">
                                 <div class="col-12">
-                                    <input type="text" class="k-input" name="name" id="name" value="" placeholder="이름" required />
+                                    <label for="name" class="form-label mb-3">이름 또는 업체명 *</label>
+                                    <input type="text" class="k-input" name="name" id="name" value="" required />
                                 </div>
                                 <div class="col-12">
-                                    <input type="text" class="k-input" name="phone" id="phone" value="" placeholder="연락처" required />
+                                    <label for="name" class="form-label mb-3">이메일 주소 *</label>
+                                    <input type="text" class="k-input" name="email" id="email" value="" required />
                                 </div>
                                 <div class="col-12">
-                                    <input type="text" class="k-input" name="email" id="email" value="" placeholder="이메일" required />
+                                    <label for="name" class="form-label mb-3">제목 *</label>
+                                    <input type="text" class="k-input" name="subject" id="subject" value="" required />
                                 </div>
                             </div>
-                            <textarea name="content" id="content" rows="14" class="k-input k-text-area autosize" placeholder="문의내용을 입력해 주세요." required></textarea>
+                            <label for="name" class="form-label mb-3">내용 * </label>
+                            <textarea name="content" id="content" rows="14" class="k-input k-text-area autosize" required></textarea>
 
                             <div class="text-center inquery-submit">
-                                <button type="submit" class="black-submit-button">등록하기 <i class="fa-solid fa-chevron-right"></i></button>
+                                <button type="submit" class="more-button bg-white">등록하기 <i class="fa-solid fa-chevron-right"></i></button>
                             </div>
                         </form>
                     </div>
-                    <div class="col-12 col-md-6">
-                        <div class="inquiry-box">
-                            <div class="inquiry-box-title">문의하기</div>
-
-                            <div class="inquiry-box-desc">
-                                질문이 있거나 도움이 필요한 경우<br>
-                                왼쪽 양식을 작성해 주세요.<br>
-                                빠른 시간 내에 답변 드리겠습니다.
-                            </div>
-                        </div>
-                        <div class="inquiry-box">
-                            <div class="inquiry-box-title">주소</div>
-
-                            <div class="inquiry-box-desc">
-                                {{ $settings->site_address }}
-                            </div>
-                        </div>
-                        <div class="inquiry-box mb-0">
-                            <div class="inquiry-box-title">연락처</div>
-
-                            <div class="inquiry-box-desc">
-                                {{ $settings->site_phone }}
-                            </div>
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>
     </div>
 </section>
 
+@push('scripts')
+<script type="text/javascript">
+$(document).ready(function() {
+    $('#writeForm').submit(function () {
+        if (!$("#name").checkEmpty('이름을 입력해 주세요.')) return false;
+        if (!$("#email").checkEmpty('연락처를 입력해 주세요.')) return false;
+        if (!$("#subject").checkEmpty('이메일을 입력해 주세요.')) return false;
+        if (!$("#content").checkEmpty('문의내용을 입력해 주세요.')) return false;
+
+        $.post($(this).attr('action'), $(this).serialize(), function(result) {
+            alert(result.message);
+            if (result.code == 'success') {
+                window.history.go(-1);
+            }
+        }).fail(function(result) {
+            console.log(result);
+            alert('문의 등록에 실패했습니다!!\n잠시 후 다시 시도해 주세요.');
+        });
+
+        return false;
+    });
+});
+</script>
+@endpush

resources/views/pages/introduce.blade.php

@@ -2,15 +2,12 @@
     <div class="container">
         <div class="row">
             <div class="intro-image-box">
-                <img src="/images/main/solarai-middle.png" class="img-fluid"/>
             </div>
-            <hr class="ai-hr">
             <div class="intro-text-box">
                 <div class="text-image">
-                    <img src="/images/main/text-logo.png" class="image-fluid"/>
+                    <img src="/images/main/frame-logo.png" class="image-fluid" alt="(주)쏠라아이"/>
                 </div>
-                <div class="text-title">쏠라아이</div>
-                <div class="text-desc mt-3">
+                <div class="text-desc mt-4">
                     쏠라아이는 프리미엄 태양광 파고라, 썬룸 및 주차장 전문 시공 업체로<br>
                     디자인과 고품질로 고객님들에 만족도를 드리고 있습니다. <br>
                     빨리 시공하기보다는 한 땀 한 땀 장인정신으로 기본과 원칙을 준수하여 제대로 시공해 드립니다.