2ce0572283
- Added SVG icons for Alipay and WeChat Pay in the payment assets directory. - Updated paths for Lottie animations in various components to use relative paths. - Changed QR code image sources in payment-related components to point to the new asset paths. - Adjusted i18n configuration to load translation files from the updated assets directory.
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
|
|
import { motion } from "framer-motion";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export function GlobalMap() {
|
|
const { t } = useTranslation("main");
|
|
return (
|
|
<motion.section
|
|
initial={{ opacity: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
viewport={{ once: true }}
|
|
whileInView={{ opacity: 1 }}
|
|
>
|
|
<motion.h2
|
|
className="mb-2 text-center font-bold text-3xl"
|
|
initial={{ opacity: 0, y: -20 }}
|
|
transition={{ duration: 0.5 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
>
|
|
{t("global_map_itle", "Global Connection, Easy and Worry-free")}
|
|
</motion.h2>
|
|
<motion.p
|
|
className="mb-8 text-center text-lg text-muted-foreground"
|
|
initial={{ opacity: 0, y: -20 }}
|
|
transition={{ duration: 0.5, delay: 0.1 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
>
|
|
{t(
|
|
"global_map_description",
|
|
"Explore seamless global connectivity. Choose network services that suit your needs and stay connected anytime, anywhere."
|
|
)}
|
|
</motion.p>
|
|
<motion.div
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
className="aspect-video w-full overflow-hidden"
|
|
initial={{ scale: 0.9, opacity: 0 }}
|
|
transition={{
|
|
type: "spring",
|
|
stiffness: 100,
|
|
damping: 15,
|
|
delay: 0.4,
|
|
}}
|
|
>
|
|
<DotLottieReact
|
|
autoplay
|
|
className="w-full scale-150"
|
|
loop
|
|
src="./assets/lotties/global-map.json"
|
|
/>
|
|
</motion.div>
|
|
</motion.section>
|
|
);
|
|
}
|