Code Examples
            
            
<div
class=" pt-20"
          >
            <div class="relative mx-auto max-w-screen-xl px-3">
              <div class="grid grid-cols-12 gap-0 lg:gap-8">
                <div class="col-span-12">
                  <div class="flex">
                    <div class="w-full lg:w-3/5">
                      <div
                        
                        class="mb-4 text-xl font-bold text-black lg:text-3xl dark:text-white"
                      >
                        제품을 구매 하면 컴포넌트와 템플릿을 사용할 수 있습니다.
                      </div>
                      <div
                        
                        class="dark:text-dark-500 text-sm lg:text-base text-gray-400"
                      >
                        컴포넌트는 React와 Next.js에서 사용할 수 있습니다. 모든
                        Component는 tailwindcss와 Framer motion을 활용하여
                        애니메이션과 스타일을 정의했습니다.
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="pb-10 pt-10">
                <div class="relative mx-auto max-w-screen-xl px-3">
                  <div class="grid grid-cols-12 gap-y-8 lg:gap-8">
                    <div class="col-span-12 lg:col-span-5">
                      <div
                        
                        class="dark:bg-dark-900 dark:shadow-dark-950 dark:border-dark-700/90 dark:border-t-dark-600/60 relative w-full overflow-hidden rounded-xl border border-gray-200/75 bg-gray-100 p-5 shadow-lg shadow-gray-100/90 backdrop-blur-xl lg:p-10"
                      >
                        <div
                          
                          
                        >
                          <div
                            
                            class="relative mb-10 px-3"
                          >
                            <div class="h-[350px] bg-[url('/assets/images/Iphone14.png')] bg-cover bg-top bg-no-repeat"></div>
                          </div>

                          <div
                            
                            class="mb-3 text-lg text-black lg:text-xl dark:text-white"
                          >
                            Coming soon mobile
                          </div>
                          <div
                            
                            class="dark:text-dark-500 mb-10 text-sm text-gray-600"
                          >
                            Desktop의 경험과 Mobile에섣의 경험을 어느것 하나도
                            불편함이 없게 UI/UX를 설계 합니다.
                          </div>
                          <button class="">
                            <div class="text-white relative text-sm bg-primary-600 hover:bg-primary-700 py-1.5 px-5 rounded-md">
                              Link more
                            </div>
                          </button>
                        </div>
                      </div>
                    </div>
                    <div class="col-span-12 flex flex-wrap gap-8 lg:col-span-7">
                      <div
                        
                        class="dark:bg-dark-900 dark:shadow-dark-950/75 hover:shadow-xs dark:border-dark-700/90 dark:border-t-dark-600/60 relative w-full overflow-hidden rounded-xl border border-gray-200/75 bg-gray-100 p-5 shadow-md shadow-gray-100/90 backdrop-blur-xl lg:p-10"
                      >
                        <div class="relative h-full items-center overflow-hidden">
                          <div class="absolute inset-0"></div>
                          <div class="mx-auto h-36 w-36">
                            <div class="dark:bg-dark-900 dark:border-dark-800 mx-auto rounded-full border border-gray-100 bg-white"></div>
                          </div>
                        </div>
                      </div>
                      <div
                        
                        class="dark:bg-dark-900 dark:shadow-dark-950/75 hover:shadow-xs dark:border-dark-700/90 dark:border-t-dark-600/60 relative w-full overflow-hidden rounded-xl border border-gray-200/75 bg-gray-100 p-5 shadow-md shadow-gray-100/90 backdrop-blur-xl lg:p-10"
                      >
                        <div
                          
                        >
                          <div  class="mb-6">
                            <div class="bg-indigo-600 flex h-10 w-10 items-center justify-center rounded-full text-white">
                              <svg
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                                viewBox="0 0 24 24"
                                strokeWidth={1.5}
                                stroke="currentColor"
                                class="h-6 w-6"
                              >
                                <path
                                  strokeLinecap="round"
                                  strokeLinejoin="round"
                                  d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
                                />
                              </svg>
                            </div>
                          </div>
                          <div
                            
                            class="mb-5 text-lg text-black lg:text-xl dark:text-white"
                          >
                            Rhymix 제작 및 유지보수를 해드립니다.
                          </div>
                          <div
                            
                            class="dark:text-dark-500 mb-10 text-sm text-gray-600"
                          >
                            라이믹스 모듈제작과 데이터 이전 그리고 유지보수까지
                            모든 부분의 제작을 의뢰를 통해 하고 있습니다. 결제
                            모듈과 카카오톡 메세지 전송까지 다양한 서드파티
                            모듈을 가지고 있으며 라이믹스의 모든 부분에 해당
                            기능을 추가하여 코어 수정 없이 지원합니다.
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>