|
|
@@ -1,16 +1,1875 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <TopNavbar />
|
|
|
+ <div class="home">
|
|
|
+ <!-- <TopNavbar /> -->
|
|
|
+ <div class="home-bg">
|
|
|
+ <TopNavbar />
|
|
|
+ <div class="txt-bg">
|
|
|
+ <div class="txt-content">
|
|
|
+ <div class="txt-desc">
|
|
|
+ The Top 100 Scenic Spots of beautiful China - China Travel Network
|
|
|
+ recommend in 2025
|
|
|
+ </div>
|
|
|
+ <div class="txt-title">Lake Sayram Xinjiang China</div>
|
|
|
+ <div class="txt-content-index">
|
|
|
+ Lake Sayram, like a sapphire fallen to earth, is serene and
|
|
|
+ profound, whispering tales of a thousand years. Here, a marvel of
|
|
|
+ nature unfolds, a perfect earthly paradise.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="home-bg-star">
|
|
|
+ <div class="home-name-address">
|
|
|
+ <div class="name-address">WiTour eSIM</div>
|
|
|
+ <div class="address-txt">
|
|
|
+ More comfortable services for tourists coming to China
|
|
|
+ </div>
|
|
|
+ <div class="esim-btn">
|
|
|
+ <img
|
|
|
+ src="@/assets/images/main/shop.svg"
|
|
|
+ alt="icon"
|
|
|
+ class="esim-btn-icon"
|
|
|
+ />
|
|
|
+ <span class="esim-btn-text">Get eSIM Now</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="star-box">
|
|
|
+ <div class="star-img-txt">
|
|
|
+ <img src="@/assets/images/icon/Star.svg" alt="" />
|
|
|
+ Trustpilot
|
|
|
+ </div>
|
|
|
+ <div class="star-five">
|
|
|
+ <div class="star-bg" v-for="(item, index) in 5" :key="index">
|
|
|
+ <img src="@/assets/images/icon/star-white.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="num-star-txt">TrustScore 4.8 2,644 reviews</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="title-color-txt">
|
|
|
+ <div class="title-color">Better Quality Services</div>
|
|
|
+ <div class="desc-black">
|
|
|
+ We provide quality One-Stop services to safeguard your trip
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-liner-bg">
|
|
|
+ <div class="my-swipe-wrapper">
|
|
|
+ <div
|
|
|
+ class="my-swipe"
|
|
|
+ indicator-color="#6B55D6"
|
|
|
+ style="padding-bottom: 22px"
|
|
|
+ >
|
|
|
+ <div v-show="currentIndex === 0">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 200px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <!-- 左侧：标题、描述、套餐按钮 -->
|
|
|
+ <div style="width: 471px">
|
|
|
+ <div class="liner-title">Traffic Data Ai Dynamic Alert</div>
|
|
|
+ <div class="liner-desc">
|
|
|
+ You can clearly monitor data usage. An AI assistant alerts you
|
|
|
+ to abnormal usage for flexible and secure data use, with no
|
|
|
+ hidden fees.
|
|
|
+ </div>
|
|
|
+ <div class="liner-title">Flexible Data Plan</div>
|
|
|
+ <div class="plan-box">
|
|
|
+ <div class="plan-item">
|
|
|
+ <img src="@/assets/images/icon/free-data.svg" alt="" />Free
|
|
|
+ Data Plan
|
|
|
+ </div>
|
|
|
+ <div class="plan-item">
|
|
|
+ <img
|
|
|
+ src="@/assets/images/icon/unlimit.svg"
|
|
|
+ alt=""
|
|
|
+ />Unlimited Data
|
|
|
+ </div>
|
|
|
+ <div class="plan-item">
|
|
|
+ <img
|
|
|
+ src="@/assets/images/icon/flexible.svg"
|
|
|
+ alt=""
|
|
|
+ />Flexible Package
|
|
|
+ </div>
|
|
|
+ <div class="plan-item">
|
|
|
+ <img src="@/assets/images/icon/pay-as.svg" alt="" />Pay as
|
|
|
+ you go
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 右侧：卡片 -->
|
|
|
+ <div>
|
|
|
+ <div class="chart-box">
|
|
|
+ <div class="chart-title">
|
|
|
+ <img src="@/assets/images/icon/ai-svg.svg" alt="" />
|
|
|
+ <span>Traffic Data Ai Dynamic Alert</span>
|
|
|
+ </div>
|
|
|
+ <img src="@/assets/images/icon/data-chart.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 底部 -->
|
|
|
+ <div class="bottom-box">
|
|
|
+ <div class="big-img">
|
|
|
+ <div class="big-img-top">
|
|
|
+ <img
|
|
|
+ src="@/assets/images/main/ai.svg"
|
|
|
+ style="width: 24px; height: 24px; margin-right: 5px"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div class="text">China Travel Ai Recommender</div>
|
|
|
+ </div>
|
|
|
+ <div class="big-img-bottom">
|
|
|
+ <img src="@/assets/images/main/bule-ai.svg" alt="" />
|
|
|
+ <div class="text">
|
|
|
+ Recommending data plans and travel resources based on your
|
|
|
+ trip and habits, offering one-stop service
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <div class="liner-title">
|
|
|
+ Premium Ai Recommender for China Travel
|
|
|
+ </div>
|
|
|
+ <div class="liner-desc">
|
|
|
+ If you're touring China and unfamiliar with its culture, don't
|
|
|
+ worry. The Ai Recommender will recommend guides based on your
|
|
|
+ travel and daily routine habits.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-show="currentIndex === 1">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div style="padding: 126px 0; margin-right: 100px">
|
|
|
+ <div class="liner-title">Reliable Travel Ai Assistant</div>
|
|
|
+ <div class="liner-desc">
|
|
|
+ Ai Assistant will ensure smooth China trip for you, If you
|
|
|
+ meet any troubles on the way, Ai Assistant helps you. Also,
|
|
|
+ we've gathered tourism experts and "China hands" to write
|
|
|
+ quality China travel guides for your reference.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="width: 600px; height: 400px">
|
|
|
+ <img
|
|
|
+ src="@/assets/images/icon/assistant.svg"
|
|
|
+ alt=""
|
|
|
+ style="width: 100%; height: 100%; object-fit: cover"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div style="width: 600px; height: 400px; margin-right: 100px">
|
|
|
+ <img
|
|
|
+ src="@/assets/images/icon/phone-img.svg"
|
|
|
+ alt=""
|
|
|
+ style="width: 100%; height: 100%; object-fit: cover"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="padding: 126px 0">
|
|
|
+ <div class="liner-title">More Use, More Earn</div>
|
|
|
+ <div class="liner-desc">
|
|
|
+ The WiTour Coin you can use to make data consumption, except
|
|
|
+ that you can invite friends or do some challenge to earn coins
|
|
|
+ and dollars. Also, we may publish a lot of promot activities
|
|
|
+ that make your price cheaper.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="swipe-controls">
|
|
|
+ <button
|
|
|
+ class="swipe-arrow left"
|
|
|
+ :disabled="currentIndex === 0"
|
|
|
+ @click="currentIndex = Math.max(0, currentIndex - 1)"
|
|
|
+ >
|
|
|
+ <img src="@/assets/images/main/left.svg" alt="left" />
|
|
|
+ </button>
|
|
|
+ <span
|
|
|
+ class="swipe-dot"
|
|
|
+ :class="{ active: currentIndex === 0 }"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ class="swipe-dot"
|
|
|
+ :class="{ active: currentIndex === 1 }"
|
|
|
+ ></span>
|
|
|
+ <button
|
|
|
+ class="swipe-arrow right"
|
|
|
+ :disabled="currentIndex === 1"
|
|
|
+ @click="currentIndex = Math.min(1, currentIndex + 1)"
|
|
|
+ >
|
|
|
+ <img src="@/assets/images/main/right.svg" alt="right" />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-free-box">
|
|
|
+ <div class="card-free-title">
|
|
|
+ There's always a Data plan that suits your journey
|
|
|
+ </div>
|
|
|
+ <div class="card-free-text">
|
|
|
+ Whether your trip is short or long, we've got diverse, cost-effective
|
|
|
+ data plans for students, businesspeople, tourists, or digital nomads.
|
|
|
+ Enjoy worry-free web surfing!
|
|
|
+ </div>
|
|
|
+ <div class="card-free-item-box margin-box feature-list">
|
|
|
+ <div class="feature-item">
|
|
|
+ <div class="feature-header">
|
|
|
+ <img src="@/assets/images/icon/time-svg.svg" alt="" />
|
|
|
+ <span class="feature-title"
|
|
|
+ >Truly High Speed: 4G/5G Connectivity</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="feature-desc">
|
|
|
+ Enjoy stable and fast internet connections, deep cooperation with
|
|
|
+ China's top carriers, No hidden costs
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="feature-item">
|
|
|
+ <div class="feature-header">
|
|
|
+ <img src="@/assets/images/icon/eff-svg.svg" alt="" />
|
|
|
+ <span class="feature-title"
|
|
|
+ >Cost effective & Flexible Data Plan</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="feature-desc">
|
|
|
+ Goodbye to roaming fees, you can enjoy Free Data, Unlimited Data
|
|
|
+ Plan, Flexible Package & Pay as you go
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="feature-item">
|
|
|
+ <div class="feature-header">
|
|
|
+ <img src="@/assets/images/icon/erji.svg" alt="" />
|
|
|
+ <span class="feature-title">Full time customer support - 24/7</span>
|
|
|
+ </div>
|
|
|
+ <div class="feature-desc">
|
|
|
+ Get instant assistance and troubleshooting help 24/7 to ensure a
|
|
|
+ smooth and worry-free experience
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="back-color">
|
|
|
+ <div
|
|
|
+ class="my-swipe"
|
|
|
+ indicator-color="#6B55D6"
|
|
|
+ style="padding-bottom: 22px"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <div class="card-free-item-box" style="background: none">
|
|
|
+ <div class="free-title-desc-btn-box">
|
|
|
+ <div class="free-txt">
|
|
|
+ <div>
|
|
|
+ <div class="title-img-plan">
|
|
|
+ <img src="@/assets/images/icon/free-sd.svg" alt="" />
|
|
|
+ <br />
|
|
|
+ <span>Free Data Plan</span>
|
|
|
+ </div>
|
|
|
+ <div class="plan-desc">
|
|
|
+ Gain free data by viewing ads, joining activities, or
|
|
|
+ completing challenges. Free data is time - limited but has
|
|
|
+ no usage cap.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="play-btn-box">
|
|
|
+ <div class="play-btn-item">Basic Speed</div>
|
|
|
+ <div class="play-btn-item">Ulimited</div>
|
|
|
+ <div class="play-btn-item">120 min</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="get-it-btn">
|
|
|
+ <img src="@/assets/images/icon/bb-svg.svg" alt="" />
|
|
|
+ <span>Get It</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="free-img">
|
|
|
+ <img src="@/assets/images/main/Unlimited.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="free-title-desc-btn-box" style="margin-top: 28px">
|
|
|
+ <div class="free-txt">
|
|
|
+ <div>
|
|
|
+ <div class="title-img-plan">
|
|
|
+ <img src="@/assets/images/icon/free-sd.svg" alt="" />
|
|
|
+ <br />
|
|
|
+ <span>Unlimited Data</span>
|
|
|
+ </div>
|
|
|
+ <div class="plan-desc">
|
|
|
+ Travel in China with our unlimited data plan. It will meet
|
|
|
+ your trip needs, ensure uninterrupted connectivity, and
|
|
|
+ let you freely use favorite apps and services to share
|
|
|
+ travel joys.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="play-btn-box">
|
|
|
+ <div class="play-btn-item">4G/5G</div>
|
|
|
+ <div class="play-btn-item">Ulimited</div>
|
|
|
+ <div class="play-btn-item">Effective</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="get-it-btn">
|
|
|
+ <img src="@/assets/images/icon/bb-svg.svg" alt="" />
|
|
|
+ <span>Get It</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="free-img">
|
|
|
+ <img src="@/assets/images/main/dataPlan.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div>
|
|
|
+ <div class="card-free-item-box" style="background: none">
|
|
|
+ <div class="free-title-desc-btn-box">
|
|
|
+ <div class="free-txt">
|
|
|
+ <div>
|
|
|
+ <div class="title-img-plan">
|
|
|
+ <img src="@/assets/images/icon/free-sd.svg" alt="" /><span
|
|
|
+ >Flexible Package</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="plan-desc">
|
|
|
+ According to your travel plan, we have a variety of data
|
|
|
+ packages available for you to choose from
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="play-btn-box">
|
|
|
+ <div class="play-btn-item">4G/5G</div>
|
|
|
+ <div class="play-btn-item">Flexible</div>
|
|
|
+ <div class="play-btn-item">Top-Up Support</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="free-img">
|
|
|
+ <img src="@/assets/images/icon/package.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="free-title-desc-btn-box" style="margin-top: 28px">
|
|
|
+ <div class="free-txt">
|
|
|
+ <div>
|
|
|
+ <div class="title-img-plan">
|
|
|
+ <img src="@/assets/images/icon/free-sd.svg" alt="" /><span
|
|
|
+ class="sim-size"
|
|
|
+ >Prepaid＆Pay as you go</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="plan-desc">
|
|
|
+ You can prepay an amount to get different data rates. This
|
|
|
+ plan allows you to pause/resume network use as needed,
|
|
|
+ with transparent and flexible data usage. It's a cost -
|
|
|
+ effective option
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="play-btn-box">
|
|
|
+ <div class="play-btn-item">4G/5G</div>
|
|
|
+ <div class="play-btn-item padd-sise">Suspend Network</div>
|
|
|
+ <div class="play-btn-item padd-sise">Quickly Refund</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="free-img">
|
|
|
+ <img
|
|
|
+ src="@/assets/images/icon/popular.svg"
|
|
|
+ alt=""
|
|
|
+ class="popular-img"
|
|
|
+ />
|
|
|
+ <img src="@/assets/images/icon/you-go.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="get-it-btn">
|
|
|
+ <img src="@/assets/images/icon/bb-svg.svg" alt="" />
|
|
|
+ <span>Get It</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="big-title-desc">
|
|
|
+ <div class="big-title">How WiTour eSIM Works</div>
|
|
|
+ <div class="grey-desc">
|
|
|
+ Follow these steps to get and set up your WiTour eSIM
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <img class="WiTour" src="" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card-search-box">
|
|
|
+ <div class="video-box">
|
|
|
+ <div class="video-box-title">Don't just take it from us…</div>
|
|
|
+ <div class="video-desc">
|
|
|
+ Hear what fellow travelers are saying about WiTour!
|
|
|
+ </div>
|
|
|
+ <div class="video-num-txt">+1 M Travler trust Us</div>
|
|
|
+
|
|
|
+ <img class="img" src="@/assets/images/main/huaban.svg" alt="" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="search-img-victor">
|
|
|
+ <div class="victor-title">
|
|
|
+ Subscribe to our news, for the latest updates on China travel
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="subscribe-box">
|
|
|
+ <input
|
|
|
+ class="subscribe-input"
|
|
|
+ type="email"
|
|
|
+ placeholder="Enter Your Email"
|
|
|
+ />
|
|
|
+ <button class="subscribe-btn">Subscribe</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="travel-box">
|
|
|
+ <div class="travel-text">Travel Guide＆Expert Shares</div>
|
|
|
+
|
|
|
+ <div class="travel-text2">
|
|
|
+ Explore articles on China travel, culture, scenery, and eSIM
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="travel-content">
|
|
|
+ <div class="content-item">
|
|
|
+ <img src="@/assets/images/main/Team1.svg" alt="" />
|
|
|
+ <div class="item-text1">Victor</div>
|
|
|
+ <div class="item-text2">
|
|
|
+ East and West Tai Lakes of the Shui Shang Ya Dan in Chaka Salt Lake
|
|
|
+ </div>
|
|
|
+ <div class="item-text3">Read More</div>
|
|
|
+ </div>
|
|
|
+ <div class="content-item">
|
|
|
+ <img src="@/assets/images/main/Team2.svg" alt="" />
|
|
|
+ <div class="item-text1">Bruce Wei</div>
|
|
|
+ <div class="item-text2">
|
|
|
+ China's breathtaking landscapes are captivating. Vast green
|
|
|
+ grasslands ev...
|
|
|
+ </div>
|
|
|
+ <div class="item-text3">Read More</div>
|
|
|
+ </div>
|
|
|
+ <div class="content-item">
|
|
|
+ <img src="@/assets/images/main/Team3.svg" alt="" />
|
|
|
+ <div class="item-text1">ShiDi Luo</div>
|
|
|
+ <div class="item-text2">
|
|
|
+ Gannan lies far beyond a thousand hills, its nine-colored pure land
|
|
|
+ all a fairytale...
|
|
|
+ </div>
|
|
|
+ <div class="item-text3">Read More</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="find-box">
|
|
|
+ <div class="find-text">
|
|
|
+ Find the answers to some of the more frequently asked questions
|
|
|
+ </div>
|
|
|
+ <div class="faq-list">
|
|
|
+ <div class="faq-item" v-for="(item, idx) in faqList" :key="idx">
|
|
|
+ <div class="faq-icon">
|
|
|
+ <img src="@/assets/images/main/ul-right.svg" alt="icon" />
|
|
|
+ </div>
|
|
|
+ <div class="faq-question">{{ item }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="promote-box">
|
|
|
+ <div class="box-left">
|
|
|
+ <div class="promote-text">Promote Items</div>
|
|
|
+ <div class="promote-bg">
|
|
|
+ <div class="promote-bg-text">
|
|
|
+ <div class="promote-bg-t1">
|
|
|
+ Refer a friend, get free WiTour credit!
|
|
|
+ </div>
|
|
|
+ <div class="promote-bg-t2">
|
|
|
+ Invite your friends to use WiTour and get a USD 5 credit for every
|
|
|
+ successful referral
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-right">
|
|
|
+ <div class="promote-item" v-for="(item, idx) in promoteList" :key="idx">
|
|
|
+ <div class="promote-icon">
|
|
|
+ <img :src="item.icon" :alt="item.title" />
|
|
|
+ </div>
|
|
|
+ <div class="promote-info">
|
|
|
+ <div class="promote-title">{{ item.title }}</div>
|
|
|
+ <div class="promote-desc">{{ item.desc }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="business-box">
|
|
|
+ <div class="business-text">
|
|
|
+ Are you ready to grow your business with us?
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="business-text2">
|
|
|
+ If you want to be our close partner, contact us now!
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button class="contact-now-btn">Contact Now</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
<Bottom />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup name="Index">
|
|
|
-import Bottom from '@/components/Bottom/index.vue'
|
|
|
-import TopNavbar from '@/components/TopNavbar/index.vue';
|
|
|
+import Bottom from "@/components/Bottom/index.vue";
|
|
|
+import TopNavbar from "@/components/TopNavbar/index.vue";
|
|
|
+import recommenderBg from "@/assets/images/main/Recommender.svg";
|
|
|
+import { ref } from "vue";
|
|
|
+import buyIcon from "@/assets/images/main/buy.svg";
|
|
|
+import limitIcon from "@/assets/images/main/limit.svg";
|
|
|
+import fullyIcon from "@/assets/images/main/fully.svg";
|
|
|
+import coinsIcon from "@/assets/images/main/coins.svg";
|
|
|
+const currentIndex = ref(0);
|
|
|
+const faqList = [
|
|
|
+ "Can I top up my eSIM?",
|
|
|
+ "What do I do if I delete or lose my eSIM's QR code?",
|
|
|
+ "Do I have to activate data roaming on my device?",
|
|
|
+ "When should I set up my eSIM?",
|
|
|
+ "How can I get a refund?",
|
|
|
+ "Can I use my SIM card and WiTour eSIM at the same time?",
|
|
|
+ "When will I receive my eSIM?",
|
|
|
+ "Can I share data with other devices?",
|
|
|
+];
|
|
|
+const promoteList = [
|
|
|
+ {
|
|
|
+ icon: buyIcon,
|
|
|
+ title: "Group Buying",
|
|
|
+ desc: "At specific times, group buying will bring huge discounts",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: limitIcon,
|
|
|
+ title: "Limited-time Offer",
|
|
|
+ desc: "Flash sale! The best price maybe. Don't miss out!",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: fullyIcon,
|
|
|
+ title: "Fully Cash Back",
|
|
|
+ desc: "Share to social media, you've get chance to fully cash back",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: coinsIcon,
|
|
|
+ title: "Coins Centre",
|
|
|
+ desc: "Do challenges to get coins, which use to offset dollars",
|
|
|
+ },
|
|
|
+];
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+.home {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .home-bg {
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 810px;
|
|
|
+ background-image: url("@/assets/images/bg/blue-bg.png");
|
|
|
|
|
|
-</style>
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ .txt-bg {
|
|
|
+ color: #fff;
|
|
|
+ height: 298px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 139px;
|
|
|
+ padding: 22px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(0, 0, 0, 0.35);
|
|
|
+ margin: auto;
|
|
|
+ .txt-content {
|
|
|
+ // width: 768px;
|
|
|
+ // margin-left: 208px;
|
|
|
+ width: 1025px;
|
|
|
+ font-family: Inter;
|
|
|
+ margin: auto;
|
|
|
+ .txt-desc {
|
|
|
+ font-family: Ubuntu;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 11px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .txt-title {
|
|
|
+ color: rgb(255, 255, 255);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 56px;
|
|
|
+ font-weight: 700;
|
|
|
+ padding: 12px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .txt-content-index {
|
|
|
+ color: rgb(255, 255, 255);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .home-bg-star {
|
|
|
+ // width: 100%;
|
|
|
+ width: 1025px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ // padding: 56px 208px 49px 208px;
|
|
|
+ padding-top: 200px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: auto;
|
|
|
+ .home-name-address {
|
|
|
+ .name-address {
|
|
|
+ color: rgb(255, 255, 255);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 900;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .address-txt {
|
|
|
+ color: rgb(255, 255, 255);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: -1.1%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .esim-btn {
|
|
|
+ width: 231px;
|
|
|
+ height: 68px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 192px;
|
|
|
+ box-shadow: 0px 30px 50px 0px rgba(168, 22, 75, 0.15);
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 18px;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 2px solid #a8164b33;
|
|
|
+ transition: box-shadow 0.2s;
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0px 40px 60px 0px rgba(168, 22, 75, 0.22);
|
|
|
+ }
|
|
|
+ .esim-btn-icon {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ .esim-btn-text {
|
|
|
+ color: #6b55d6;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-family: Inter, Ubuntu, Arial, sans-serif;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .star-box {
|
|
|
+ color: rgb(255, 255, 255);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ .star-img-txt {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .star-five {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 3px 0;
|
|
|
+ .star-bg {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: rgb(0, 182, 122);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 3px;
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title-color-txt {
|
|
|
+ margin: 60px auto 40px auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+ .title-color {
|
|
|
+ background: linear-gradient(
|
|
|
+ 60.48deg,
|
|
|
+ rgb(55, 63, 255),
|
|
|
+ rgb(58, 202, 248)
|
|
|
+ );
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+ text-fill-color: transparent;
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 120%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+ .desc-black {
|
|
|
+ color: rgb(34, 36, 44);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 48px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 50px;
|
|
|
+ letter-spacing: -1.1%;
|
|
|
+ text-align: center;
|
|
|
+ width: 721px;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chart-liner-bg {
|
|
|
+ padding: 64px 208px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: linear-gradient(
|
|
|
+ 89.43deg,
|
|
|
+ rgb(218, 243, 241) 0.372%,
|
|
|
+ rgb(192, 231, 237) 20.445%,
|
|
|
+ rgb(201, 228, 244) 50.606%,
|
|
|
+ rgb(205, 224, 246) 78.76%,
|
|
|
+ rgb(232, 238, 251) 98.914%
|
|
|
+ );
|
|
|
+ .liner-title {
|
|
|
+ color: rgba(29, 33, 48, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 120%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .liner-desc {
|
|
|
+ width: 471px;
|
|
|
+ color: rgba(29, 33, 48, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 150%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .chart-box {
|
|
|
+ /* Image */
|
|
|
+ width: 389px;
|
|
|
+ height: 327px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: rgba(255, 255, 255, 0.64);
|
|
|
+ padding: 29px 31px 24px 31px;
|
|
|
+
|
|
|
+ .chart-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 8px;
|
|
|
+ margin-top: 0 !important;
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ background: linear-gradient(
|
|
|
+ 132.53deg,
|
|
|
+ rgba(107, 85, 214, 0.96),
|
|
|
+ rgb(145, 88, 191)
|
|
|
+ );
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+ text-fill-color: transparent;
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 30px;
|
|
|
+ letter-spacing: -1.5%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom-box {
|
|
|
+ margin: 30px 208px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 200px;
|
|
|
+
|
|
|
+ .big-img {
|
|
|
+ width: 389px;
|
|
|
+ height: 184px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ padding: 33px 31px;
|
|
|
+ background-image: url("@/assets/images/main/Recommender.svg");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+
|
|
|
+ .big-img-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ background: linear-gradient(
|
|
|
+ 132.53deg,
|
|
|
+ rgba(107, 85, 214, 0.96),
|
|
|
+ rgba(145, 88, 191, 1) 95%
|
|
|
+ );
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+ text-fill-color: transparent;
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 30px;
|
|
|
+ letter-spacing: -1.5%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .big-img-bottom {
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ background-image: url("@/assets/images/main/bule.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: rgba(111, 210, 255, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 550;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ margin: auto 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .liner-title {
|
|
|
+ width: 471px;
|
|
|
+ }
|
|
|
+ .liner-desc {
|
|
|
+ width: 471px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .plan-box {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ margin-top: 15px;
|
|
|
+ gap: 8px;
|
|
|
+ .plan-item {
|
|
|
+ width: 227px;
|
|
|
+ height: 53px;
|
|
|
+ border-radius: 72px;
|
|
|
+ background: rgba(255, 255, 255, 0.65);
|
|
|
+ padding-top: 6px;
|
|
|
+ padding-bottom: 9.67px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: rgb(0, 0, 0);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ letter-spacing: -2%;
|
|
|
+ img {
|
|
|
+ width: 26px;
|
|
|
+ height: 36px;
|
|
|
+ object-fit: contain;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-free-box {
|
|
|
+ padding: 10px 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .card-free-title {
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 48px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 60px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: center;
|
|
|
+ width: 633px;
|
|
|
+ margin: 40px auto 25px auto;
|
|
|
+ }
|
|
|
+ .card-free-text {
|
|
|
+ color: rgba(36, 34, 62, 1);
|
|
|
+ width: 802px;
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 27px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto 35px auto;
|
|
|
+ }
|
|
|
+ .card-free-item-box {
|
|
|
+ background: linear-gradient(
|
|
|
+ 132.53deg,
|
|
|
+ rgba(107, 85, 214, 0.05) -1.353%,
|
|
|
+ rgba(145, 88, 191, 0.05) 97.241%
|
|
|
+ );
|
|
|
+ border-radius: 10px;
|
|
|
+ // padding: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .free-img-txt {
|
|
|
+ color: rgba(29, 33, 48, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 650;
|
|
|
+ line-height: 120%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ text-align: left;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 292px;
|
|
|
+ height: 135px;
|
|
|
+ margin: auto;
|
|
|
+ img {
|
|
|
+ width: 51.34px;
|
|
|
+ height: 48px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
|
|
|
+ .free-img-des {
|
|
|
+ color: rgba(29, 33, 48, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 150%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .free-title-desc-btn-box {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ overflow: hidden;
|
|
|
+ gap: 100px;
|
|
|
+ .free-txt {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .free-img {
|
|
|
+ /* Free Data Plan */
|
|
|
+ width: 523px;
|
|
|
+ height: 540px;
|
|
|
+ margin-left: 10px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ .popular-img {
|
|
|
+ width: 113px !important;
|
|
|
+ height: 24px !important;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title-img-plan {
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ background: linear-gradient(
|
|
|
+ 132.53deg,
|
|
|
+ rgba(107, 85, 214, 0.96),
|
|
|
+ rgba(145, 88, 191, 1) 95%
|
|
|
+ );
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+ text-fill-color: transparent;
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 46px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ margin-right: 2.33px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .plan-desc {
|
|
|
+ color: rgba(41, 45, 52, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ width: 472px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .play-btn-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ margin: 30px 0;
|
|
|
+ .play-btn-item {
|
|
|
+ height: 34px;
|
|
|
+ padding: 0 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid rgb(206, 206, 234);
|
|
|
+ border-radius: 6px;
|
|
|
+ box-shadow: 0px 3px 5px 0px rgba(67, 46, 134, 0.05);
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ color: rgb(41, 45, 52);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .get-it-btn {
|
|
|
+ width: 231px;
|
|
|
+ height: 68px;
|
|
|
+ margin: 9px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 192px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border: 1px solid rgba(18, 0, 255, 0.34);
|
|
|
+ padding: 7px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ span {
|
|
|
+ background: linear-gradient(
|
|
|
+ 132.53deg,
|
|
|
+ rgba(18, 0, 255, 0.96),
|
|
|
+ rgb(140, 30, 153)
|
|
|
+ );
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+ text-fill-color: transparent;
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 150%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .margin-box {
|
|
|
+ margin: 10px 0;
|
|
|
+ // background: rgb(248, 247, 254) !important;
|
|
|
+ width: 1152px !important;
|
|
|
+ padding: 64px;
|
|
|
+ margin: auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+ .big-title-desc {
|
|
|
+ padding: 16px 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .big-title {
|
|
|
+ color: rgba(29, 33, 48, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 56px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 110%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 32px 0;
|
|
|
+ }
|
|
|
+ .grey-desc {
|
|
|
+ color: rgba(29, 33, 48, 1);
|
|
|
+ font-family: Roboto;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 150%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .WiTour {
|
|
|
+ display: block;
|
|
|
+ margin: 35px auto;
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .linear-bg-card {
|
|
|
+ background: linear-gradient(
|
|
|
+ 89.43deg,
|
|
|
+ rgb(218, 243, 241) 0.063%,
|
|
|
+ rgb(192, 231, 237) 20.383%,
|
|
|
+ rgb(201, 228, 244) 50.914%,
|
|
|
+ rgb(205, 224, 246) 79.414%,
|
|
|
+ rgb(232, 238, 251) 99.816%
|
|
|
+ );
|
|
|
+ padding: 17px 12px 8px 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .linear-title {
|
|
|
+ color: rgb(29, 33, 48);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 120%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .linear-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 38px 25px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .linear-card-phone {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ .linear-img {
|
|
|
+ width: 63px;
|
|
|
+ height: 129px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .linear-txt {
|
|
|
+ color: rgba(41, 45, 52, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 11px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 2px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .linear-card {
|
|
|
+ /* ::before */
|
|
|
+ width: 88px;
|
|
|
+ height: 117px;
|
|
|
+ border-radius: 9px;
|
|
|
+ box-shadow: 0px 16px 78px 0px rgba(253, 113, 175, 0.1);
|
|
|
+ background: rgb(255, 248, 251);
|
|
|
+ padding: 19px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ .linear-img {
|
|
|
+ height: 34px;
|
|
|
+ color: rgb(255, 255, 255);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 32px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .linear-txt {
|
|
|
+ color: rgb(51, 51, 51);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 15px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-search-box {
|
|
|
+ padding: 20px 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .video-box-title {
|
|
|
+ color: rgba(29, 33, 48, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 48px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 110%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ .video-box {
|
|
|
+ .video-desc {
|
|
|
+ color: rgba(29, 33, 48, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 150%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ .video-num-txt {
|
|
|
+ color: rgba(29, 33, 48, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 110%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ font-style: italic;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ display: block;
|
|
|
+ margin: 20px auto 40px auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .travel-box {
|
|
|
+ height: 715px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ gap: 30;
|
|
|
+ padding: 64px 208px 64px 208px;
|
|
|
+ background: linear-gradient(
|
|
|
+ 89.43deg,
|
|
|
+ rgba(218, 243, 241, 1),
|
|
|
+ rgba(192, 231, 237, 1) 20%,
|
|
|
+ rgba(201, 228, 244, 1) 51%,
|
|
|
+ rgba(205, 224, 246, 1) 80%,
|
|
|
+ rgba(232, 238, 251, 1) 100%
|
|
|
+ );
|
|
|
+
|
|
|
+ .travel-text {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 48px;
|
|
|
+ font-weight: 800;
|
|
|
+ line-height: 65px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .travel-text2 {
|
|
|
+ color: rgba(41, 45, 52, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 25px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ margin: 30px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .travel-content {
|
|
|
+ display: flex;
|
|
|
+ gap: 9px;
|
|
|
+
|
|
|
+ .content-item {
|
|
|
+ width: 336px;
|
|
|
+ height: 369px;
|
|
|
+ border-radius: 9px;
|
|
|
+ box-shadow: 0px 16px 78px 0px rgba(123, 104, 238, 0.1);
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+
|
|
|
+ .item-text1 {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: 800;
|
|
|
+ line-height: 53.2px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ margin-left: 33px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-text2 {
|
|
|
+ color: rgba(41, 45, 52, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 18px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ margin-left: 33px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-text3 {
|
|
|
+ color: rgba(20, 24, 62, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 25px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ margin-left: 33px;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin: 10px auto;
|
|
|
+ width: 100%;
|
|
|
+ height: 207.58px;
|
|
|
+ border-radius: 9px;
|
|
|
+ box-shadow: 0px 10px 25px 0px rgba(16, 30, 54, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .find-box {
|
|
|
+ height: 502;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 40;
|
|
|
+ padding: 20px 208px 20px 208px;
|
|
|
+
|
|
|
+ .find-text {
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ font-family: Roboto;
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 120%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .promote-box {
|
|
|
+ height: 545px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 40;
|
|
|
+ padding: 40px 80px 40px 80px;
|
|
|
+
|
|
|
+ .promote-text {
|
|
|
+ background: linear-gradient(
|
|
|
+ 60.48deg,
|
|
|
+ rgba(55, 63, 255, 1),
|
|
|
+ rgba(58, 202, 248, 1) 100%
|
|
|
+ );
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+ text-fill-color: transparent;
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 120%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .promote-bg {
|
|
|
+ width: 611px;
|
|
|
+ height: 407px;
|
|
|
+ background: url("@/assets/images/main/grile.png") no-repeat center center;
|
|
|
+ background-size: cover;
|
|
|
+ border-radius: 16px;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 24px;
|
|
|
+ padding: 91px 15px;
|
|
|
+ box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.08);
|
|
|
+
|
|
|
+ .promote-bg-text {
|
|
|
+ width: 560px;
|
|
|
+ height: 225px;
|
|
|
+ border-radius: 14px;
|
|
|
+ background: rgba(255, 255, 255, 0.41);
|
|
|
+ padding: 10px 17px;
|
|
|
+
|
|
|
+ .promote-bg-t1 {
|
|
|
+ background: linear-gradient(
|
|
|
+ 134.2deg,
|
|
|
+ rgba(4, 9, 123, 1) 4%,
|
|
|
+ rgba(58, 169, 248, 1) 100%
|
|
|
+ );
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+ text-fill-color: transparent;
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 48px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 120%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .promote-bg-t2 {
|
|
|
+ background: linear-gradient(
|
|
|
+ 132.53deg,
|
|
|
+ rgba(18, 0, 255, 0.96),
|
|
|
+ rgba(140, 30, 153, 1) 99%
|
|
|
+ );
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+ text-fill-color: transparent;
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: undefined;
|
|
|
+ line-height: 150%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .business-box {
|
|
|
+ height: 468px;
|
|
|
+ background: url("@/assets/images/main/business.svg");
|
|
|
+ background-size: cover;
|
|
|
+
|
|
|
+ .business-text {
|
|
|
+ width: 864px;
|
|
|
+ color: rgba(29, 33, 48, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 56px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 110%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .business-text2 {
|
|
|
+ color: rgba(29, 33, 48, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 150%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 24px 0 32px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-img-victor {
|
|
|
+ border-radius: 6px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ .search-email {
|
|
|
+ margin: 10px auto;
|
|
|
+ width: 290px;
|
|
|
+ }
|
|
|
+ .victor-img {
|
|
|
+ width: 350px;
|
|
|
+ height: 247px;
|
|
|
+ border-radius: 20px;
|
|
|
+ box-shadow: 0px 10px 25px 0px rgba(16, 30, 54, 0.1);
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 10px auto;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .victor-desc {
|
|
|
+ color: rgb(41, 45, 52);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 14px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ padding: 10px 25px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .victor-txt {
|
|
|
+ color: rgb(51, 51, 51);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 800;
|
|
|
+ line-height: 15.2px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ padding: 0 25px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .share-title {
|
|
|
+ background: linear-gradient(60.48deg, rgb(55, 63, 255), rgb(58, 202, 248));
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+ text-fill-color: transparent;
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 22px;
|
|
|
+ letter-spacing: -1.1%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .read-txt {
|
|
|
+ background: linear-gradient(134.2deg, rgb(4, 9, 123), rgb(58, 169, 248));
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ background-clip: text;
|
|
|
+ text-fill-color: transparent;
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 15px;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .victor-title {
|
|
|
+ width: 768px;
|
|
|
+ color: rgba(29, 33, 48, 1);
|
|
|
+ font-family: Roboto;
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 110%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+.my-swipe-wrapper {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.swipe-controls {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 18px;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+.swipe-arrow {
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: none;
|
|
|
+ box-shadow: 0 2px 8px rgba(107, 85, 214, 0.08);
|
|
|
+ font-size: 28px;
|
|
|
+ color: #232b3b;
|
|
|
+ background: #fff !important;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.swipe-arrow:disabled {
|
|
|
+ opacity: 0.5;
|
|
|
+ cursor: not-allowed;
|
|
|
+}
|
|
|
+.swipe-dot {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #fff;
|
|
|
+ margin: 0 6px;
|
|
|
+ display: inline-block;
|
|
|
+ transition: background 0.2s;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+.swipe-dot.active {
|
|
|
+ background: #7a5fd6;
|
|
|
+}
|
|
|
+.back-color {
|
|
|
+ // background: linear-gradient(
|
|
|
+ // 132.53deg,
|
|
|
+ // rgba(107, 85, 214, 0.05) -1.353%,
|
|
|
+ // rgba(145, 88, 191, 0.05) 97.241%
|
|
|
+ // );
|
|
|
+ border-radius: 10px;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 208px;
|
|
|
+}
|
|
|
+.feature-list {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 32px;
|
|
|
+ background: none;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+.feature-item {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16px;
|
|
|
+ box-shadow: 0 2px 16px 0 rgba(122, 95, 214, 0.08);
|
|
|
+ width: 340px;
|
|
|
+ min-height: 220px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 32px 24px 24px 24px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ img {
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ margin-bottom: 18px;
|
|
|
+ }
|
|
|
+ .feature-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 12px;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ img {
|
|
|
+ width: 51px;
|
|
|
+ height: 48px;
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .feature-title {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #241e3e;
|
|
|
+ font-family: Inter, Ubuntu, Arial, sans-serif;
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .feature-desc {
|
|
|
+ color: rgba(29, 33, 48, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 150%;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+}
|
|
|
+.subscribe-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 566px;
|
|
|
+ height: 72px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 14px;
|
|
|
+ border: 1.5px solid #e5e5e5;
|
|
|
+ margin: 32px auto 60px auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 8px 0 24px;
|
|
|
+ box-shadow: 0 2px 8px rgba(122, 95, 214, 0.04);
|
|
|
+
|
|
|
+ .subscribe-input {
|
|
|
+ flex: 1;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #232b3b;
|
|
|
+ background: transparent;
|
|
|
+ height: 100%;
|
|
|
+ &::placeholder {
|
|
|
+ color: #bdbdbd;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .subscribe-btn {
|
|
|
+ width: 160px;
|
|
|
+ height: 56px;
|
|
|
+ background: #232b3b;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ border: none;
|
|
|
+ border-radius: 14px;
|
|
|
+ margin-left: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background 0.2s;
|
|
|
+ &:hover {
|
|
|
+ background: #1a202c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.faq-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 32px 0;
|
|
|
+ max-width: 1000px;
|
|
|
+ margin: 40px auto;
|
|
|
+}
|
|
|
+
|
|
|
+.faq-item {
|
|
|
+ width: 48%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.faq-icon {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ background: #ffbdbd;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 24px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ img {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.faq-question {
|
|
|
+ color: rgba(29, 33, 48, 1);
|
|
|
+ font-family: Inter;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 1.2;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.box-right {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 38px;
|
|
|
+ margin-left: 48px;
|
|
|
+ margin-top: 12px;
|
|
|
+ .promote-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 24px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ .promote-icon {
|
|
|
+ width: 72px;
|
|
|
+ height: 72px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+ img {
|
|
|
+ width: 72px;
|
|
|
+ height: 72px;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .promote-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .promote-title {
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #232b3b;
|
|
|
+ font-family: Inter, Ubuntu, Arial, sans-serif;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+ .promote-desc {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #232b3b;
|
|
|
+ font-family: Inter, Ubuntu, Arial, sans-serif;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+}
|
|
|
+.contact-now-btn {
|
|
|
+ display: block;
|
|
|
+ margin: 32px auto 0 auto;
|
|
|
+ padding: 16px 40px;
|
|
|
+ background: #232b3b;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ border: none;
|
|
|
+ border-radius: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ box-shadow: 0 2px 8px rgba(107, 85, 214, 0.08);
|
|
|
+ transition: background 0.2s;
|
|
|
+}
|
|
|
+.contact-now-btn:hover {
|
|
|
+ background: #1a202c;
|
|
|
+}
|
|
|
+</style>
|
