139 lines
6.0 KiB
JavaScript
139 lines
6.0 KiB
JavaScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
|
|
export default function CallToAction() {
|
|
const [data, setData] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
|
|
useEffect(() => {
|
|
async function fetchData() {
|
|
try {
|
|
setLoading(true);
|
|
const res = await axios.get("/api/get-component-data", {
|
|
params: { component_name: "CallToAction" },
|
|
});
|
|
setData(res.data.data);
|
|
} catch (err) {
|
|
setError("获取CallToAction数据失败");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
fetchData();
|
|
}, []);
|
|
|
|
if (loading) return <div className="text-center py-20">Loading...</div>;
|
|
if (error) return null;
|
|
if (!data) return null;
|
|
|
|
const title = data.title || "";
|
|
const subtitle = data.subtitle || "";
|
|
const buttonText = data.button_text || "";
|
|
const icon = data.icon || "/files/icon.svg";
|
|
const htmlCode = data.html_code || "";
|
|
|
|
return (
|
|
<section className="wrapper !bg-[#edf2fc]">
|
|
<div className="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24 !text-center">
|
|
<div className="flex flex-wrap mx-[-15px]">
|
|
<div className="md:w-9/12 lg:w-7/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
|
|
{htmlCode ? (
|
|
<div
|
|
style={{ display: "inline-block", width: "2.6rem", height: "2.6rem", marginBottom: "1rem" }}
|
|
dangerouslySetInnerHTML={{ __html: htmlCode }}
|
|
/>
|
|
) : (
|
|
<img
|
|
src={icon}
|
|
alt="icon"
|
|
style={{ display: "inline-block", width: "2.6rem", height: "2.6rem", marginBottom: "1rem" }}
|
|
/>
|
|
)}
|
|
<h2 className="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">
|
|
{title}
|
|
</h2>
|
|
<p className="lead text-[1.05rem] !leading-[1.6] font-medium !mb-6 xl:!px-10 xxl:!px-20">
|
|
{subtitle}
|
|
</p>
|
|
</div>
|
|
{/* /column */}
|
|
</div>
|
|
{/* /.row */}
|
|
<div className="flex flex-wrap mx-[-15px]">
|
|
<div className="md:w-6/12 lg:w-5/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div className="newsletter-wrapper">
|
|
{/* Begin Mailchimp Signup Form */}
|
|
<div id="mc_embed_signup2">
|
|
<form
|
|
onSubmit={(e) => e.preventDefault()}
|
|
id="mc-embedded-subscribe-form2"
|
|
name="mc-embedded-subscribe-form"
|
|
className="validate"
|
|
>
|
|
<div id="mc_embed_signup_scroll2">
|
|
<div className="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
|
|
<input
|
|
type="email"
|
|
defaultValue=""
|
|
name="EMAIL"
|
|
className="required form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:bg-[#ffffff] focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
|
|
placeholder=""
|
|
id="mce-EMAIL2"
|
|
/>
|
|
<label
|
|
className="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0"
|
|
htmlFor="mce-EMAIL2"
|
|
>
|
|
Email
|
|
</label>
|
|
<input
|
|
type="submit"
|
|
value={buttonText || "Submit"}
|
|
name="subscribe"
|
|
id="mc-embedded-subscribe2"
|
|
className="!text-[.85rem] btn btn-primary !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] !relative z-[2] focus:z-[5] hover:!transform-none hover:!translate-none border-0"
|
|
/>
|
|
</div>
|
|
<div id="mce-responses2" className="clear">
|
|
<div
|
|
className="response"
|
|
id="mce-error-response2"
|
|
style={{ display: "none" }}
|
|
/>
|
|
<div
|
|
className="response"
|
|
id="mce-success-response2"
|
|
style={{ display: "none" }}
|
|
/>
|
|
</div>
|
|
{/* real people should not fill this in and expect good things - do not remove this or risk form bot signups*/}
|
|
<div
|
|
style={{ position: "absolute", left: "-5000px" }}
|
|
aria-hidden="true"
|
|
>
|
|
<input
|
|
type="text"
|
|
name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc"
|
|
tabIndex={-1}
|
|
defaultValue=""
|
|
/>
|
|
</div>
|
|
<div className="clear" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{/*End mc_embed_signup*/}
|
|
</div>
|
|
{/* /.newsletter-wrapper */}
|
|
</div>
|
|
{/* /column */}
|
|
</div>
|
|
{/* /.row */}
|
|
</div>
|
|
{/* /.container */}
|
|
</section>
|
|
);
|
|
}
|