增加案例组件
This commit is contained in:
parent
6c599eafac
commit
4264a64ecf
@ -110,7 +110,7 @@ export default async function DynamicPage({ params, searchParams }) {
|
|||||||
<div className="flex-1 min-w-0 !px-[15px] max-w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px]">
|
<div className="flex-1 min-w-0 !px-[15px] max-w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px]">
|
||||||
<div className="bg-white rounded-lg shadow-md p-6 md:p-10">
|
<div className="bg-white rounded-lg shadow-md p-6 md:p-10">
|
||||||
{/* 图片和附加信息并排显示，响应式优化 */}
|
{/* 图片和附加信息并排显示，响应式优化 */}
|
||||||
{(data.image || data.additional_info) && (
|
{(data.image || data.subtitle) && (
|
||||||
<div className="flex flex-col md:flex-row gap-4 md:gap-8 mb-6 md:mb-8 items-center md:items-start w-full max-w-full">
|
<div className="flex flex-col md:flex-row gap-4 md:gap-8 mb-6 md:mb-8 items-center md:items-start w-full max-w-full">
|
||||||
{data.image && (
|
{data.image && (
|
||||||
<div className="flex-shrink-0 w-full md:w-72 flex justify-center md:justify-start mb-4 md:mb-0 max-w-full">
|
<div className="flex-shrink-0 w-full md:w-72 flex justify-center md:justify-start mb-4 md:mb-0 max-w-full">
|
||||||
@ -121,9 +121,9 @@ export default async function DynamicPage({ params, searchParams }) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{data.additional_info && (
|
{data.subtitle && (
|
||||||
<div className="bg-gray-50 rounded-md p-3 md:p-4 whitespace-pre-line text-gray-700 w-full shadow-sm max-w-full prose prose-sm">
|
<div className="bg-gray-50 rounded-md p-3 md:p-4 whitespace-pre-line text-gray-700 w-full shadow-sm max-w-full prose prose-sm">
|
||||||
{data.additional_info}
|
{data.subtitle}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -95,7 +95,7 @@ export default async function Page({ params, searchParams }) {
|
|||||||
<div className="flex-1 min-w-0 !px-[15px] max-w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px]">
|
<div className="flex-1 min-w-0 !px-[15px] max-w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px]">
|
||||||
<div className="bg-white rounded-lg shadow-md p-6 md:p-10">
|
<div className="bg-white rounded-lg shadow-md p-6 md:p-10">
|
||||||
{/* 图片和附加信息并排显示，响应式优化 */}
|
{/* 图片和附加信息并排显示，响应式优化 */}
|
||||||
{(data.image || data.additional_info) && (
|
{(data.image || data.subtitle) && (
|
||||||
<div className="flex flex-col md:flex-row gap-4 md:gap-8 mb-6 md:mb-8 items-center md:items-start w-full max-w-full">
|
<div className="flex flex-col md:flex-row gap-4 md:gap-8 mb-6 md:mb-8 items-center md:items-start w-full max-w-full">
|
||||||
{data.image && (
|
{data.image && (
|
||||||
<div className="flex-shrink-0 w-full md:w-72 flex justify-center md:justify-start mb-4 md:mb-0 max-w-full">
|
<div className="flex-shrink-0 w-full md:w-72 flex justify-center md:justify-start mb-4 md:mb-0 max-w-full">
|
||||||
@ -106,9 +106,9 @@ export default async function Page({ params, searchParams }) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{data.additional_info && (
|
{data.subtitle && (
|
||||||
<div className="bg-gray-50 rounded-md p-3 md:p-4 whitespace-pre-line text-gray-700 w-full shadow-sm max-w-full prose prose-sm">
|
<div className="bg-gray-50 rounded-md p-3 md:p-4 whitespace-pre-line text-gray-700 w-full shadow-sm max-w-full prose prose-sm">
|
||||||
{data.additional_info}
|
{data.subtitle}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import Faqs from "@/components/homes/home-15/Faqs";
|
|||||||
import Gallery from "@/components/homes/home-15/Gallery";
|
import Gallery from "@/components/homes/home-15/Gallery";
|
||||||
import Features from "@/components/homes/home-15/Features";
|
import Features from "@/components/homes/home-15/Features";
|
||||||
import Hero from "@/components/homes/home-15/Hero";
|
import Hero from "@/components/homes/home-15/Hero";
|
||||||
import Process from "@/components/homes/home-15/Process";
|
import CategoryItems from "@/components/homes/home-15/CategoryItems";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { getSiteSettings } from "@/utlis/siteSettings";
|
import { getSiteSettings } from "@/utlis/siteSettings";
|
||||||
|
|
||||||
@ -34,13 +34,13 @@ export default function Page() {
|
|||||||
<>
|
<>
|
||||||
<div className="grow shrink-0">
|
<div className="grow shrink-0">
|
||||||
<>
|
<>
|
||||||
<section className="wrapper overflow-hidden">
|
<section className="wrapper">
|
||||||
<Hero />
|
<Hero />
|
||||||
{/* /.swiper-container */}
|
{/* /.swiper-container */}
|
||||||
</section>
|
</section>
|
||||||
<section className="wrapper !bg-[#ffffff] ">
|
<section className="wrapper !bg-[#ffffff] ">
|
||||||
<div className="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
|
<div className="w-full">
|
||||||
<Features />
|
<CategoryItems />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@ -95,7 +95,7 @@ export default async function Page({ params, searchParams }) {
|
|||||||
<div className="flex-1 min-w-0 !px-[15px] max-w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px]">
|
<div className="flex-1 min-w-0 !px-[15px] max-w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px]">
|
||||||
<div className="bg-white rounded-lg shadow-md p-6 md:p-10">
|
<div className="bg-white rounded-lg shadow-md p-6 md:p-10">
|
||||||
{/* 图片和附加信息并排显示，响应式优化 */}
|
{/* 图片和附加信息并排显示，响应式优化 */}
|
||||||
{(data.image || data.additional_info) && (
|
{(data.image || data.subtitle) && (
|
||||||
<div className="flex flex-col md:flex-row gap-4 md:gap-8 mb-6 md:mb-8 items-center md:items-start w-full max-w-full">
|
<div className="flex flex-col md:flex-row gap-4 md:gap-8 mb-6 md:mb-8 items-center md:items-start w-full max-w-full">
|
||||||
{data.image && (
|
{data.image && (
|
||||||
<div className="flex-shrink-0 w-full md:w-72 flex justify-center md:justify-start mb-4 md:mb-0 max-w-full">
|
<div className="flex-shrink-0 w-full md:w-72 flex justify-center md:justify-start mb-4 md:mb-0 max-w-full">
|
||||||
@ -106,9 +106,9 @@ export default async function Page({ params, searchParams }) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{data.additional_info && (
|
{data.subtitle && (
|
||||||
<div className="bg-gray-50 rounded-md p-3 md:p-4 whitespace-pre-line text-gray-700 w-full shadow-sm max-w-full prose prose-sm">
|
<div className="bg-gray-50 rounded-md p-3 md:p-4 whitespace-pre-line text-gray-700 w-full shadow-sm max-w-full prose prose-sm">
|
||||||
{data.additional_info}
|
{data.subtitle}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
262
components/blogs/BlogSingle.jsx
Normal file
262
components/blogs/BlogSingle.jsx
Normal file
@ -0,0 +1,262 @@
|
|||||||
|
import React from "react";
|
||||||
|
import RelatedBlogs from "./RelatedBlogs";
|
||||||
|
import Gallery from "./Gallery";
|
||||||
|
import Comment from "./Comment";
|
||||||
|
import CommentBox from "./CommentBox";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
export default function BlogSingle({ marginTop = true }) {
|
||||||
|
return (
|
||||||
|
<div className={`blog single ${marginTop ? "!mt-[-7rem]" : ""} `}>
|
||||||
|
<div className="card">
|
||||||
|
<figure className="card-img-top">
|
||||||
|
<Image
|
||||||
|
alt="image"
|
||||||
|
src="/assets/img/photos/b1.jpg"
|
||||||
|
width={960}
|
||||||
|
height={600}
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
<div className="card-body flex-[1_1_auto] p-[40px] xl:!p-[2.8rem_3rem_2.8rem] lg:!p-[2.8rem_3rem_2.8rem] md:!p-[2.8rem_3rem_2.8rem]">
|
||||||
|
<div className="classic-view">
|
||||||
|
<article className="post !mb-8">
|
||||||
|
<div className="relative !mb-5">
|
||||||
|
<h2 className="h1 !mb-4 !leading-[1.3]">
|
||||||
|
Cras mattis consectetur purus fermentum
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||||
|
condimentum nibh, ut fermentum massa justo sit amet. Vivamus
|
||||||
|
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||||
|
Cras mattis consectetur purus sit amet fermentum. Aenean
|
||||||
|
lacinia bibendum nulla sed consectetur. Curabitur blandit
|
||||||
|
tempus porttitor. Vivamus sagittis lacus vel augue laoreet
|
||||||
|
rutrum faucibus dolor auctor. Nullam quis risus eget porta ac
|
||||||
|
consectetur vestibulum.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Donec sed odio dui consectetur adipiscing elit. Etiam
|
||||||
|
adipiscing tincidunt elit, eu convallis felis suscipit ut.
|
||||||
|
Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris.
|
||||||
|
Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean
|
||||||
|
tortor libero, condimentum ac laoreet vitae, varius tempor
|
||||||
|
nisi. Duis non arcu vel lectus urna mollis ornare vel eu leo.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Gallery />
|
||||||
|
|
||||||
|
{/* /.row */}
|
||||||
|
<p>
|
||||||
|
Maecenas sed diam eget risus varius blandit sit amet non
|
||||||
|
magna. Cum sociis natoque penatibus et magnis dis parturient
|
||||||
|
montes, nascetur ridiculus mus. Donec sed odio dui. Nulla
|
||||||
|
vitae elit libero, a pharetra augue. Maecenas faucibus mollis
|
||||||
|
interdum. Donec id elit non mi porta gravida at eget metus.
|
||||||
|
Nullam quis risus eget urna mollis ornare vel eu leo. Lorem
|
||||||
|
ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere
|
||||||
|
consectetur est at lobortis. Cras mattis consectetur purus sit
|
||||||
|
amet fermentum. Praesent commodo cursus magna.
|
||||||
|
</p>
|
||||||
|
<blockquote className="border-l-[#3f78e0] !leading-[1.7] font-medium !pl-4 border-l-[0.15rem] border-solid !text-[1rem] !my-8">
|
||||||
|
<p>
|
||||||
|
Sed posuere consectetur est at lobortis. Lorem ipsum dolor
|
||||||
|
sit amet, consectetur adipiscing elit. Duis mollis, est non
|
||||||
|
commodo luctus, nisi erat porttitor ligula lacinia odio sem
|
||||||
|
nec elit purus.
|
||||||
|
</p>
|
||||||
|
<footer className="!text-[0.6rem] !text-[#aab0bc] !mb-4 before:content-['\2014\a0'] font-bold uppercase !tracking-[0.02rem] !mt-0">
|
||||||
|
Very important person
|
||||||
|
</footer>
|
||||||
|
</blockquote>
|
||||||
|
<h3 className="h2 !mb-4">Sit Vulputate Bibendum Purus</h3>
|
||||||
|
<p>
|
||||||
|
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||||
|
condimentum nibh, ut fermentum massa justo sit amet risus.
|
||||||
|
Aenean lacinia bibendum nulla sed consectetur. Cras mattis
|
||||||
|
consectetur purus sit amet fermentum. Praesent commodo cursus
|
||||||
|
magna, vel scelerisque nisl consectetur et. Vestibulum id
|
||||||
|
ligula porta felis euismod semper.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||||
|
condimentum nibh, ut fermentum massa justo sit amet risus.
|
||||||
|
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in,
|
||||||
|
egestas eget quam. Fusce dapibus, tellus ac cursus commodo,
|
||||||
|
tortor mauris condimentum nibh, ut fermentum massa justo sit
|
||||||
|
amet risus. Sed posuere consectetur est at lobortis. Donec id
|
||||||
|
elit non mi porta gravida at eget metus. Nulla vitae elit
|
||||||
|
libero, a pharetra augue. Cum sociis natoque penatibus et
|
||||||
|
magnis dis parturient montes, nascetur ridiculus mus. Fusce
|
||||||
|
dapibus, tellus ac cursus commodo, tortor mauris condimentum
|
||||||
|
nibh.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{/* /.post-content */}
|
||||||
|
<div className="post-footer xl:!flex xl:!flex-row xl:!justify-between lg:!flex lg:!flex-row lg:!justify-between md:!flex md:!flex-row md:!justify-between !items-center !mt-8">
|
||||||
|
<div>
|
||||||
|
<ul className="pl-0 list-none tag-list !mb-0">
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Still Life
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Urban
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Nature
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="!mb-0 xl:!mb-2 lg:!mb-2 md:!mb-2">
|
||||||
|
<div className="dropdown share-dropdown btn-group">
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-red !text-white !bg-[#e2626b] border-[#e2626b] hover:text-white hover:bg-[#e2626b] hover:!border-[#e2626b] active:text-white active:bg-[#e2626b] active:border-[#e2626b] disabled:text-white disabled:bg-[#e2626b] disabled:border-[#e2626b] !rounded-[50rem] btn-icon btn-icon-start dropdown-toggle !mb-0 !mr-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
||||||
|
data-bs-toggle="dropdown"
|
||||||
|
aria-haspopup="true"
|
||||||
|
aria-expanded="false"
|
||||||
|
>
|
||||||
|
<i className="uil uil-share-alt !mr-[0.3rem] text-[0.8rem] before:content-['\ecb0']" />
|
||||||
|
Share
|
||||||
|
</button>
|
||||||
|
<div className="dropdown-menu !shadow-[rgba(30,34,40,0.06)_0px_0px_25px_0px]">
|
||||||
|
<a
|
||||||
|
className="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
<i className="uil uil-twitter w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\ed59']" />
|
||||||
|
Twitter
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
<i className="uil uil-facebook-f w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\eae2']" />
|
||||||
|
Facebook
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
<i className="uil uil-linkedin w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\ebd1']" />
|
||||||
|
Linkedin
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/*/.dropdown-menu */}
|
||||||
|
</div>
|
||||||
|
{/*/.share-dropdown */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* /.post-footer */}
|
||||||
|
</article>
|
||||||
|
{/* /.post */}
|
||||||
|
</div>
|
||||||
|
{/* /.classic-view */}
|
||||||
|
<hr />
|
||||||
|
<div className="author-info xl:!flex lg:!flex md:!flex items-center !mb-3">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<figure className="w-12 h-12 !relative !mr-4 rounded-[100%]">
|
||||||
|
<Image
|
||||||
|
className="rounded-[50%]"
|
||||||
|
alt="image"
|
||||||
|
src="/assets/img/avatars/u5.jpg"
|
||||||
|
width={120}
|
||||||
|
height={120}
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
<div>
|
||||||
|
<h6>
|
||||||
|
<a href="#" className="!text-[#343f52] hover:!text-[#3f78e0]">
|
||||||
|
Nikolas Brooten
|
||||||
|
</a>
|
||||||
|
</h6>
|
||||||
|
<span className="!text-[0.75rem] !text-[#aab0bc] m-0 p-0 list-none">
|
||||||
|
Sales Manager
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-sm btn-soft-ash !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
||||||
|
>
|
||||||
|
<i className="uil uil-file-alt !mr-[0.3rem] before:content-['\eaec'] text-[.8rem]" />
|
||||||
|
All Posts
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* /.author-info */}
|
||||||
|
<p>
|
||||||
|
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
|
||||||
|
nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus
|
||||||
|
mollis interdum. Fusce dapibus, tellus ac. Maecenas faucibus mollis
|
||||||
|
interdum.
|
||||||
|
</p>
|
||||||
|
<nav className="nav social">
|
||||||
|
<a
|
||||||
|
className="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
<i className="text-[1rem] !text-[#5daed5] before:content-['\ed59'] uil uil-twitter" />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
<i className="text-[1rem] !text-[#4470cf] before:content-['\eae2'] uil uil-facebook-f" />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
<i className="text-[1rem] !text-[#e94d88] before:content-['\eaa2'] uil uil-dribbble" />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
<i className="text-[1rem] !text-[#d53581] before:content-['\eb9c'] uil uil-instagram" />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
<i className="text-[1rem] !text-[#c8312b] before:content-['\edb5'] uil uil-youtube" />
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
{/* /.social */}
|
||||||
|
<hr />
|
||||||
|
<h3 className="!mb-6">You Might Also Like</h3>
|
||||||
|
<RelatedBlogs />
|
||||||
|
{/* /.swiper-container */}
|
||||||
|
<hr />
|
||||||
|
<Comment />
|
||||||
|
{/* /#comments */}
|
||||||
|
<hr />
|
||||||
|
<h3 className="!mb-3">Would you like to share your thoughts?</h3>
|
||||||
|
<p className="!mb-7">
|
||||||
|
Your email address will not be published. Required fields are marked
|
||||||
|
*
|
||||||
|
</p>
|
||||||
|
<CommentBox />
|
||||||
|
{/* /.comment-form */}
|
||||||
|
</div>
|
||||||
|
{/* /.card-body */}
|
||||||
|
</div>
|
||||||
|
{/* /.card */}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
157
components/blogs/Blogs.jsx
Normal file
157
components/blogs/Blogs.jsx
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
"use client";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { Swiper, SwiperSlide } from "swiper/react";
|
||||||
|
import { Navigation, Pagination } from "swiper/modules";
|
||||||
|
import Link from "next/link";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
const PAGE_SIZE = 8; // 每页8条，4列2行
|
||||||
|
const PAGE_SLUG = "case"; // 博客slug常量
|
||||||
|
|
||||||
|
export default function Blogs({
|
||||||
|
parentClass = "xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto",
|
||||||
|
marginTop = true,
|
||||||
|
}) {
|
||||||
|
const [posts, setPosts] = useState([]);
|
||||||
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
const [totalPages, setTotalPages] = useState(1);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function fetchData() {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await fetch("/api/get-page-data", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ slug_list: [PAGE_SLUG], page: currentPage, page_size: PAGE_SIZE }),
|
||||||
|
});
|
||||||
|
const json = await res.json();
|
||||||
|
if (Array.isArray(json.data)) {
|
||||||
|
setPosts(json.data);
|
||||||
|
setTotalPages(Math.ceil((json.total || 0) / PAGE_SIZE));
|
||||||
|
} else {
|
||||||
|
setPosts([]);
|
||||||
|
setTotalPages(1);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setPosts([]);
|
||||||
|
setTotalPages(1);
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
fetchData();
|
||||||
|
}, [currentPage]);
|
||||||
|
|
||||||
|
// 分页控件
|
||||||
|
function PaginationComp() {
|
||||||
|
if (totalPages <= 1) return null;
|
||||||
|
return (
|
||||||
|
<nav className="flex justify-center mt-8" aria-label="pagination">
|
||||||
|
<ul className="pagination flex gap-2">
|
||||||
|
{Array.from({ length: totalPages }).map((_, idx) => (
|
||||||
|
<li key={idx}>
|
||||||
|
<button
|
||||||
|
className={`px-3 py-1 rounded ${currentPage === idx + 1 ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-700"}`}
|
||||||
|
onClick={() => setCurrentPage(idx + 1)}
|
||||||
|
disabled={currentPage === idx + 1}
|
||||||
|
>
|
||||||
|
{idx + 1}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 渲染卡片内容
|
||||||
|
function renderCard(post, idx) {
|
||||||
|
// 多图轮播
|
||||||
|
if (Array.isArray(post.images) && post.images.length > 1) {
|
||||||
|
return (
|
||||||
|
<Swiper
|
||||||
|
className="w-full h-56 rounded-xl overflow-hidden"
|
||||||
|
modules={[Navigation, Pagination]}
|
||||||
|
pagination={{ clickable: true }}
|
||||||
|
navigation
|
||||||
|
>
|
||||||
|
{post.images.map((img, i) => (
|
||||||
|
<SwiperSlide key={i}>
|
||||||
|
<Image src={img} alt={post.title || "image"} width={400} height={225} className="w-full h-56 object-cover" />
|
||||||
|
</SwiperSlide>
|
||||||
|
))}
|
||||||
|
</Swiper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// 视频
|
||||||
|
if (post.video_src || post.videoId) {
|
||||||
|
// 支持YouTube或本地视频
|
||||||
|
if (post.video_src && (post.video_src.endsWith('.mp4') || post.video_src.startsWith('/files/'))) {
|
||||||
|
return (
|
||||||
|
<video controls className="w-full h-56 rounded-xl object-cover">
|
||||||
|
<source src={post.video_src} type="video/mp4" />
|
||||||
|
您的浏览器不支持视频播放。
|
||||||
|
</video>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// YouTube
|
||||||
|
const vid = post.videoId || (post.video_src && post.video_src.includes('youtube') ? post.video_src.split('embed/')[1] : null);
|
||||||
|
if (vid) {
|
||||||
|
return (
|
||||||
|
<iframe
|
||||||
|
className="w-full h-56 rounded-xl"
|
||||||
|
src={`https://www.youtube.com/embed/${vid}`}
|
||||||
|
title="YouTube video"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowFullScreen
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 单图
|
||||||
|
const img = post.image || (Array.isArray(post.images) && post.images[0]);
|
||||||
|
if (img) {
|
||||||
|
return (
|
||||||
|
<Image src={img} alt={post.title || "image"} width={400} height={225} className="w-full h-56 object-cover rounded-xl" />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={parentClass}>
|
||||||
|
<div className={`blog grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 ${marginTop ? "!mt-[-7rem]" : ""}`}>
|
||||||
|
{loading ? (
|
||||||
|
<div className="col-span-4 text-center py-12 text-gray-400">加载中...</div>
|
||||||
|
) : posts.length === 0 ? (
|
||||||
|
<div className="col-span-4 text-center py-12 text-gray-400">暂无数据</div>
|
||||||
|
) : (
|
||||||
|
posts.map((post, idx) => (
|
||||||
|
<article key={post.slug || post.id || idx} className="post card bg-white rounded-xl shadow hover:shadow-lg transition overflow-hidden flex flex-col">
|
||||||
|
<div className="card-img-top relative">
|
||||||
|
{renderCard(post, idx)}
|
||||||
|
</div>
|
||||||
|
<div className="card-body flex-1 p-4 flex flex-col">
|
||||||
|
<div className="post-header mb-2">
|
||||||
|
<div className="text-xs text-blue-500 font-bold uppercase mb-1">{post.category || post.categories || ""}</div>
|
||||||
|
<h2 className="post-title text-lg font-semibold mb-1 line-clamp-2">
|
||||||
|
<Link href={post.slug ? `/${PAGE_SLUG}/${post.slug}` : "#"} className="hover:text-blue-600">{post.title}</Link>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div className="text-gray-500 text-sm flex-1 line-clamp-3 mb-2">{post.subtitle}</div>
|
||||||
|
<div className="flex items-center text-xs text-gray-400 mt-auto">
|
||||||
|
<span>{post.date || post.published_at || ""}</span>
|
||||||
|
{post.author && <span className="ml-2">{post.author}</span>}
|
||||||
|
{typeof post.comments === 'number' && <span className="ml-auto">💬 {post.comments}</span>}
|
||||||
|
{typeof post.likes === 'number' && <span className="ml-2">❤️ {post.likes}</span>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<PaginationComp />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
260
components/blogs/Comment.jsx
Normal file
260
components/blogs/Comment.jsx
Normal file
@ -0,0 +1,260 @@
|
|||||||
|
import Image from "next/image";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
export default function Comment() {
|
||||||
|
return (
|
||||||
|
<div id="comments" className="relative !m-0">
|
||||||
|
<h3 className="!mb-6">5 Comments</h3>
|
||||||
|
<ol id="singlecomments" className="commentlist m-0 p-0 list-none">
|
||||||
|
<li className="comment !mt-8">
|
||||||
|
<div className="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<figure className="w-12 h-12 !relative !mr-4 rounded-[100%]">
|
||||||
|
<Image
|
||||||
|
className="rounded-[50%]"
|
||||||
|
alt="image"
|
||||||
|
src="/assets/img/avatars/u1.jpg"
|
||||||
|
width={120}
|
||||||
|
height={120}
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
<div>
|
||||||
|
<h6 className="m-0 !mb-[0.2rem]">
|
||||||
|
<a href="#" className="!text-[#343f52] hover:!text-[#3f78e0]">
|
||||||
|
Connor Gibson
|
||||||
|
</a>
|
||||||
|
</h6>
|
||||||
|
<ul className="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
|
||||||
|
<li>
|
||||||
|
<i className="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']" />
|
||||||
|
14 Jan 2022
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
{/* /.post-meta */}
|
||||||
|
</div>
|
||||||
|
{/* /div */}
|
||||||
|
</div>
|
||||||
|
{/* /div */}
|
||||||
|
<div className="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
||||||
|
>
|
||||||
|
<i className="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]" />
|
||||||
|
Reply
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/* /div */}
|
||||||
|
</div>
|
||||||
|
{/* /.comment-header */}
|
||||||
|
<p>
|
||||||
|
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
|
||||||
|
vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor
|
||||||
|
ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est
|
||||||
|
at lobortis integer posuere erat ante.
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li className="comment !mt-8">
|
||||||
|
<div className="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<figure className="w-12 h-12 !relative !mr-4 rounded-[100%]">
|
||||||
|
<Image
|
||||||
|
className="rounded-[50%]"
|
||||||
|
alt="image"
|
||||||
|
src="/assets/img/avatars/u2.jpg"
|
||||||
|
width={120}
|
||||||
|
height={120}
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
<div>
|
||||||
|
<h6 className="m-0 !mb-[0.2rem]">
|
||||||
|
<a href="#" className="!text-[#343f52] hover:!text-[#3f78e0]">
|
||||||
|
Nikolas Brooten
|
||||||
|
</a>
|
||||||
|
</h6>
|
||||||
|
<ul className="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
|
||||||
|
<li>
|
||||||
|
<i className="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']" />
|
||||||
|
21 Feb 2022
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
{/* /.post-meta */}
|
||||||
|
</div>
|
||||||
|
{/* /div */}
|
||||||
|
</div>
|
||||||
|
{/* /div */}
|
||||||
|
<div className="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
||||||
|
>
|
||||||
|
<i className="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]" />
|
||||||
|
Reply
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/* /div */}
|
||||||
|
</div>
|
||||||
|
{/* /.comment-header */}
|
||||||
|
<p>
|
||||||
|
Quisque tristique tincidunt metus non aliquam. Quisque ac risus sit
|
||||||
|
amet quam sollicitudin vestibulum vitae malesuada libero. Mauris
|
||||||
|
magna elit, suscipit non ornare et, blandit a tellus. Pellentesque
|
||||||
|
dignissim ornare faucibus mollis.
|
||||||
|
</p>
|
||||||
|
<ul className="children">
|
||||||
|
<li className="comment !mt-8">
|
||||||
|
<div className="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<figure className="w-12 h-12 !relative !mr-4 rounded-[100%]">
|
||||||
|
<Image
|
||||||
|
className="rounded-[50%]"
|
||||||
|
alt="image"
|
||||||
|
src="/assets/img/avatars/u3.jpg"
|
||||||
|
width={120}
|
||||||
|
height={120}
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
<div>
|
||||||
|
<h6 className="m-0 !mb-[0.2rem]">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="!text-[#343f52] hover:!text-[#3f78e0]"
|
||||||
|
>
|
||||||
|
Pearce Frye
|
||||||
|
</a>
|
||||||
|
</h6>
|
||||||
|
<ul className="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
|
||||||
|
<li>
|
||||||
|
<i className="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']" />
|
||||||
|
22 Feb 2022
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
{/* /.post-meta */}
|
||||||
|
</div>
|
||||||
|
{/* /div */}
|
||||||
|
</div>
|
||||||
|
{/* /div */}
|
||||||
|
<div className="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
||||||
|
>
|
||||||
|
<i className="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]" />
|
||||||
|
Reply
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/* /div */}
|
||||||
|
</div>
|
||||||
|
{/* /.comment-header */}
|
||||||
|
<p>
|
||||||
|
Cras mattis consectetur purus sit amet fermentum. Integer
|
||||||
|
posuere erat a ante venenatis dapibus posuere velit aliquet.
|
||||||
|
Etiam porta sem malesuada magna mollis.
|
||||||
|
</p>
|
||||||
|
<ul className="children">
|
||||||
|
<li className="comment !mt-8">
|
||||||
|
<div className="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<figure className="w-12 h-12 !relative !mr-4 rounded-[100%]">
|
||||||
|
<Image
|
||||||
|
className="rounded-[50%]"
|
||||||
|
alt="image"
|
||||||
|
src="/assets/img/avatars/u2.jpg"
|
||||||
|
width={120}
|
||||||
|
height={120}
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
<div>
|
||||||
|
<h6 className="m-0 !mb-[0.2rem]">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="!text-[#343f52] hover:!text-[#3f78e0]"
|
||||||
|
>
|
||||||
|
Nikolas Brooten
|
||||||
|
</a>
|
||||||
|
</h6>
|
||||||
|
<ul className="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
|
||||||
|
<li>
|
||||||
|
<i className="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']" />
|
||||||
|
4 Apr 2022
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
{/* /.post-meta */}
|
||||||
|
</div>
|
||||||
|
{/* /div */}
|
||||||
|
</div>
|
||||||
|
{/* /div */}
|
||||||
|
<div className="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
||||||
|
>
|
||||||
|
<i className="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]" />
|
||||||
|
Reply
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/* /div */}
|
||||||
|
</div>
|
||||||
|
{/* /.comment-header */}
|
||||||
|
<p>
|
||||||
|
Nullam id dolor id nibh ultricies vehicula ut id. Cras
|
||||||
|
mattis consectetur purus sit amet fermentum. Aenean eu leo
|
||||||
|
quam. Pellentesque ornare sem lacinia aenean bibendum nulla
|
||||||
|
consectetur.
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li className="comment !mt-8">
|
||||||
|
<div className="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<figure className="w-12 h-12 !relative !mr-4 rounded-[100%]">
|
||||||
|
<Image
|
||||||
|
className="rounded-[50%]"
|
||||||
|
alt="image"
|
||||||
|
src="/assets/img/avatars/u4.jpg"
|
||||||
|
width={120}
|
||||||
|
height={120}
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
<div>
|
||||||
|
<h6 className="m-0 !mb-[0.2rem]">
|
||||||
|
<a href="#" className="!text-[#343f52] hover:!text-[#3f78e0]">
|
||||||
|
Lou Bloxham
|
||||||
|
</a>
|
||||||
|
</h6>
|
||||||
|
<ul className="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
|
||||||
|
<li>
|
||||||
|
<i className="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']" />
|
||||||
|
3 May 2022
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
{/* /.post-meta */}
|
||||||
|
</div>
|
||||||
|
{/* /div */}
|
||||||
|
</div>
|
||||||
|
{/* /div */}
|
||||||
|
<div className="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
||||||
|
>
|
||||||
|
<i className="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]" />
|
||||||
|
Reply
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/* /div */}
|
||||||
|
</div>
|
||||||
|
{/* /.comment-header */}
|
||||||
|
<p>
|
||||||
|
Sed posuere consectetur est at lobortis. Vestibulum id ligula porta
|
||||||
|
felis euismod semper. Cum sociis natoque penatibus et magnis dis
|
||||||
|
parturient montes, nascetur ridiculus mus.
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
69
components/blogs/CommentBox.jsx
Normal file
69
components/blogs/CommentBox.jsx
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
"use client";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
export default function CommentBox() {
|
||||||
|
return (
|
||||||
|
<form className="comment-form" onSubmit={(e) => e.preventDefault()}>
|
||||||
|
<div className="form-floating relative !mb-4">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="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: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="c-name"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
className="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope"
|
||||||
|
htmlFor="c-name"
|
||||||
|
>
|
||||||
|
Name *
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="form-floating relative !mb-4">
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
className="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: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="c-email"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
className="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope"
|
||||||
|
htmlFor="c-email"
|
||||||
|
>
|
||||||
|
Email*
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="form-floating relative !mb-4">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="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: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="c-web"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
className="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope"
|
||||||
|
htmlFor="c-web"
|
||||||
|
>
|
||||||
|
Website
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="form-floating relative !mb-4">
|
||||||
|
<textarea
|
||||||
|
name="textarea"
|
||||||
|
className="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: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=""
|
||||||
|
style={{ height: 150 }}
|
||||||
|
defaultValue={""}
|
||||||
|
/>
|
||||||
|
<label className="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">
|
||||||
|
Comment *
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
82
components/blogs/Gallery.jsx
Normal file
82
components/blogs/Gallery.jsx
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
"use client";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { Gallery, Item } from "react-photoswipe-gallery";
|
||||||
|
|
||||||
|
const images = [
|
||||||
|
{
|
||||||
|
fullImage: "/assets/img/photos/b8-full.jpg",
|
||||||
|
thumbnail: "/assets/img/photos/b8.jpg",
|
||||||
|
title: "Heading",
|
||||||
|
description: "Purus Vulputate Sem Tellus Quam",
|
||||||
|
width: 460,
|
||||||
|
height: 307,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fullImage: "/assets/img/photos/b9-full.jpg",
|
||||||
|
thumbnail: "/assets/img/photos/b9.jpg",
|
||||||
|
title: "",
|
||||||
|
description: "",
|
||||||
|
width: 460,
|
||||||
|
height: 307,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fullImage: "/assets/img/photos/b10-full.jpg",
|
||||||
|
thumbnail: "/assets/img/photos/b10.jpg",
|
||||||
|
title: "",
|
||||||
|
description: "",
|
||||||
|
width: 460,
|
||||||
|
height: 307,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fullImage: "/assets/img/photos/b11-full.jpg",
|
||||||
|
thumbnail: "/assets/img/photos/b11.jpg",
|
||||||
|
title: "",
|
||||||
|
description: "",
|
||||||
|
width: 460,
|
||||||
|
height: 307,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const ImageGallery = () => {
|
||||||
|
return (
|
||||||
|
<Gallery>
|
||||||
|
<div className="flex flex-wrap mx-[-15px] !mt-3 !mb-10">
|
||||||
|
<>
|
||||||
|
{images.map((image, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]"
|
||||||
|
>
|
||||||
|
<Item
|
||||||
|
original={image.thumbnail}
|
||||||
|
thumbnail={image.thumbnail}
|
||||||
|
width={image.width}
|
||||||
|
height={image.height}
|
||||||
|
>
|
||||||
|
{({ ref, open }) => (
|
||||||
|
<figure className="overflow-hidden translate-y-0 group rounded cursor-dark">
|
||||||
|
<a
|
||||||
|
onClick={open}
|
||||||
|
data-glightbox={`title: ${image.title}; description: ${image.description}`}
|
||||||
|
data-gallery="post"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
ref={ref}
|
||||||
|
alt="image"
|
||||||
|
src={image.thumbnail}
|
||||||
|
width={image.width}
|
||||||
|
height={image.height}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</figure>
|
||||||
|
)}
|
||||||
|
</Item>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
</div>
|
||||||
|
</Gallery>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ImageGallery;
|
||||||
98
components/blogs/RelatedBlogs.jsx
Normal file
98
components/blogs/RelatedBlogs.jsx
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { blogPosts } from "@/data/blogs";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Pagination } from "swiper/modules";
|
||||||
|
import { Swiper, SwiperSlide } from "swiper/react";
|
||||||
|
|
||||||
|
export default function RelatedBlogs() {
|
||||||
|
return (
|
||||||
|
<div className="swiper-container blog grid-view !mb-24 relative z-10">
|
||||||
|
<Swiper
|
||||||
|
className="swiper"
|
||||||
|
spaceBetween={30}
|
||||||
|
modules={[Pagination]}
|
||||||
|
pagination={{
|
||||||
|
clickable: true,
|
||||||
|
el: ".spdb2",
|
||||||
|
}}
|
||||||
|
breakpoints={{
|
||||||
|
0: { slidesPerView: 1 },
|
||||||
|
575: {
|
||||||
|
slidesPerView: 1,
|
||||||
|
},
|
||||||
|
768: {
|
||||||
|
slidesPerView: 2,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{blogPosts.map((post, i) => (
|
||||||
|
<SwiperSlide key={i} className="swiper-slide">
|
||||||
|
<article>
|
||||||
|
<figure className="overlay overlay-1 hover-scale group rounded !mb-5">
|
||||||
|
<a href="#">
|
||||||
|
<Image
|
||||||
|
className="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105"
|
||||||
|
alt="image"
|
||||||
|
src={post.imageUrl}
|
||||||
|
width={560}
|
||||||
|
height={350}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<figcaption className="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
||||||
|
<h5 className="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">
|
||||||
|
Read More
|
||||||
|
</h5>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<div className="post-header !mb-[.9rem]">
|
||||||
|
<div className="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
|
||||||
|
<a href="#" className="hover" rel="category">
|
||||||
|
{post.category}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/* /.post-category */}
|
||||||
|
<h2 className="post-title h3 !mt-1 !mb-3">
|
||||||
|
<Link
|
||||||
|
className="!text-[#343f52] hover:!text-[#3f78e0]"
|
||||||
|
href={`/blog-post`}
|
||||||
|
>
|
||||||
|
{post.title}
|
||||||
|
</Link>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
{/* /.post-header */}
|
||||||
|
<div className="post-footer">
|
||||||
|
<ul className="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none !mb-0">
|
||||||
|
<li className="post-date inline-block">
|
||||||
|
<i className="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']" />
|
||||||
|
<span>{post.date}</span>
|
||||||
|
</li>
|
||||||
|
<li className="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
|
||||||
|
<a
|
||||||
|
className="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
<i className="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']" />
|
||||||
|
4
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
{/* /.post-meta */}
|
||||||
|
</div>
|
||||||
|
{/* /.post-footer */}
|
||||||
|
</article>
|
||||||
|
{/* /article */}
|
||||||
|
</SwiperSlide>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/*/.swiper-wrapper */}
|
||||||
|
</Swiper>
|
||||||
|
<div className="swiper-controls">
|
||||||
|
<div className="swiper-pagination spdb2"></div>
|
||||||
|
</div>
|
||||||
|
{/* /.swiper */}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
247
components/blogs/Sidebar.jsx
Normal file
247
components/blogs/Sidebar.jsx
Normal file
@ -0,0 +1,247 @@
|
|||||||
|
"use client";
|
||||||
|
import { posts3 } from "@/data/blogs";
|
||||||
|
import { socialLinks } from "@/data/socials";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
export default function Sidebar() {
|
||||||
|
return (
|
||||||
|
<aside className="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full sidebar !mt-8 xl:!mt-6 lg:!mt-6">
|
||||||
|
<div className="widget">
|
||||||
|
<form
|
||||||
|
onSubmit={(e) => e.preventDefault()}
|
||||||
|
className="search-form relative before:content-['\eca5'] before:block before:absolute before:-translate-y-2/4 before:text-[0.9rem] before:!text-[#959ca9] before:z-[9] before:right-3 before:top-2/4 font-Unicons"
|
||||||
|
>
|
||||||
|
<div className="form-floating relative !mb-0">
|
||||||
|
<input
|
||||||
|
id="search-form"
|
||||||
|
type="text"
|
||||||
|
className="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: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=""
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="search-form"
|
||||||
|
className="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope"
|
||||||
|
>
|
||||||
|
Search
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
{/* /.widget */}
|
||||||
|
<div className="widget !mt-[40px]">
|
||||||
|
<h4 className="widget-title !mb-3">About Us</h4>
|
||||||
|
<p>
|
||||||
|
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
|
||||||
|
nibh, ut fermentum. Nulla vitae elit libero, a pharetra augue. Donec
|
||||||
|
id elit non mi porta gravida at eget metus.
|
||||||
|
</p>
|
||||||
|
<nav className="nav social">
|
||||||
|
{socialLinks.map((elm, i) => (
|
||||||
|
<a
|
||||||
|
key={i}
|
||||||
|
className="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]"
|
||||||
|
href={elm.href}
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
className={`text-[1rem] !text-[${elm.color}] before:content-[${elm.unicode}] uil ${elm.icon}`}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
{/* /.social */}
|
||||||
|
</div>
|
||||||
|
{/* /.widget */}
|
||||||
|
<div className="widget !mt-[40px]">
|
||||||
|
<h4 className="widget-title !mb-3">Popular Posts</h4>
|
||||||
|
<ul className="m-0 p-0 after:content-[''] after:block after:h-0 after:clear-both after:invisible">
|
||||||
|
{posts3.map((post, i) => (
|
||||||
|
<li
|
||||||
|
key={post.id}
|
||||||
|
className={`clear-both block overflow-hidden ${
|
||||||
|
i !== 0 ? "!mt-4" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<figure className="!rounded-[.4rem] float-left w-14 !h-[4.5rem]">
|
||||||
|
<Link href={`/blog-post`}>
|
||||||
|
<Image
|
||||||
|
className="!rounded-[.4rem]"
|
||||||
|
alt="image"
|
||||||
|
src={post.image}
|
||||||
|
width={100}
|
||||||
|
height={100}
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
</figure>
|
||||||
|
<div className="!relative !ml-[4.25rem] !mb-0">
|
||||||
|
<h6 className="!mb-2">
|
||||||
|
<Link
|
||||||
|
className="!text-[#343f52] hover:!text-[#3f78e0]"
|
||||||
|
href={`/blog-post`}
|
||||||
|
>
|
||||||
|
{post.title}
|
||||||
|
</Link>
|
||||||
|
</h6>
|
||||||
|
<ul className="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
|
||||||
|
<li className="post-date inline-block">
|
||||||
|
<i className="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']" />
|
||||||
|
<span>{post.date}</span>
|
||||||
|
</li>
|
||||||
|
<li className="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
|
||||||
|
<a
|
||||||
|
className="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
<i className="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']" />
|
||||||
|
{post.comments}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
{/* /.image-list */}
|
||||||
|
</div>
|
||||||
|
{/* /.widget */}
|
||||||
|
<div className="widget !mt-[40px]">
|
||||||
|
<h4 className="widget-title !mb-3">Categories</h4>
|
||||||
|
<ul className="pl-0 list-none bullet-primary !text-inherit">
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
Teamwork (21)
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
Ideas (19)
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
Workspace (16)
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
Coding (7)
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
Meeting (12)
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
Business Tips (14)
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/* /.widget */}
|
||||||
|
<div className="widget !mt-[40px]">
|
||||||
|
<h4 className="widget-title !mb-3">Tags</h4>
|
||||||
|
<ul className="pl-0 list-none tag-list">
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Still Life
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Urban
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Nature
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Landscape
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Macro
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Fun
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Workshop
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Photography
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/* /.widget */}
|
||||||
|
<div className="widget !mt-[40px]">
|
||||||
|
<h4 className="widget-title !mb-3">Archive</h4>
|
||||||
|
<ul className="pl-0 list-none bullet-primary !text-inherit">
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
February 2019
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
January 2019
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
December 2018
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
November 2018
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
October 2018
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/* /.widget */}
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
247
components/blogs/Sidebar2.jsx
Normal file
247
components/blogs/Sidebar2.jsx
Normal file
@ -0,0 +1,247 @@
|
|||||||
|
"use client";
|
||||||
|
import { posts3 } from "@/data/blogs";
|
||||||
|
import { socialLinks } from "@/data/socials";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
export default function Sidebar2() {
|
||||||
|
return (
|
||||||
|
<aside className="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full sidebar !mt-[3rem] xl:!mt-6 lg:!mt-6">
|
||||||
|
<div className="widget">
|
||||||
|
<form
|
||||||
|
onSubmit={(e) => e.preventDefault()}
|
||||||
|
className="search-form relative before:content-['\eca5'] before:block before:absolute before:-translate-y-2/4 before:text-[0.9rem] before:!text-[#959ca9] before:z-[9] before:right-3 before:top-2/4 font-Unicons"
|
||||||
|
>
|
||||||
|
<div className="form-floating relative !mb-0">
|
||||||
|
<input
|
||||||
|
id="search-form"
|
||||||
|
type="text"
|
||||||
|
className="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: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=""
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="search-form"
|
||||||
|
className="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope"
|
||||||
|
>
|
||||||
|
Search
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
{/* /.widget */}
|
||||||
|
<div className="widget !mt-[40px]">
|
||||||
|
<h4 className="widget-title !mb-3">About Us</h4>
|
||||||
|
<p>
|
||||||
|
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
|
||||||
|
nibh, ut fermentum. Nulla vitae elit libero, a pharetra augue. Donec
|
||||||
|
id elit non mi porta gravida at eget metus.
|
||||||
|
</p>
|
||||||
|
<nav className="nav social">
|
||||||
|
{socialLinks.map((elm, i) => (
|
||||||
|
<a
|
||||||
|
key={i}
|
||||||
|
className="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]"
|
||||||
|
href={elm.href}
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
className={`text-[1rem] !text-[${elm.color}] before:content-[${elm.unicode}] uil ${elm.icon}`}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
{/* /.social */}
|
||||||
|
</div>
|
||||||
|
{/* /.widget */}
|
||||||
|
<div className="widget !mt-[40px]">
|
||||||
|
<h4 className="widget-title !mb-3">Popular Posts</h4>
|
||||||
|
<ul className="m-0 p-0 after:content-[''] after:block after:h-0 after:clear-both after:invisible">
|
||||||
|
{posts3.map((post, i) => (
|
||||||
|
<li
|
||||||
|
key={post.id}
|
||||||
|
className={`clear-both block overflow-hidden ${
|
||||||
|
i !== 0 ? "!mt-4" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<figure className="!rounded-[.4rem] float-left w-14 !h-[4.5rem]">
|
||||||
|
<Link href={`/blog-post`}>
|
||||||
|
<Image
|
||||||
|
className="!rounded-[.4rem]"
|
||||||
|
alt="image"
|
||||||
|
src={post.image}
|
||||||
|
width={100}
|
||||||
|
height={100}
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
</figure>
|
||||||
|
<div className="!relative !ml-[4.25rem] !mb-0">
|
||||||
|
<h6 className="!mb-2">
|
||||||
|
<Link
|
||||||
|
className="!text-[#343f52] hover:!text-[#3f78e0]"
|
||||||
|
href={`/blog-post`}
|
||||||
|
>
|
||||||
|
{post.title}
|
||||||
|
</Link>
|
||||||
|
</h6>
|
||||||
|
<ul className="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
|
||||||
|
<li className="post-date inline-block">
|
||||||
|
<i className="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']" />
|
||||||
|
<span>{post.date}</span>
|
||||||
|
</li>
|
||||||
|
<li className="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
|
||||||
|
<a
|
||||||
|
className="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
<i className="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']" />
|
||||||
|
{post.comments}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
{/* /.image-list */}
|
||||||
|
</div>
|
||||||
|
{/* /.widget */}
|
||||||
|
<div className="widget !mt-[40px]">
|
||||||
|
<h4 className="widget-title !mb-3">Categories</h4>
|
||||||
|
<ul className="pl-0 list-none bullet-primary !text-inherit">
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
Teamwork (21)
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
Ideas (19)
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
Workspace (16)
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
Coding (7)
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
Meeting (12)
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
Business Tips (14)
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/* /.widget */}
|
||||||
|
<div className="widget !mt-[40px]">
|
||||||
|
<h4 className="widget-title !mb-3">Tags</h4>
|
||||||
|
<ul className="pl-0 list-none tag-list">
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Still Life
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Urban
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Nature
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Landscape
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Macro
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Fun
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Workshop
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]"
|
||||||
|
>
|
||||||
|
Photography
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/* /.widget */}
|
||||||
|
<div className="widget !mt-[40px]">
|
||||||
|
<h4 className="widget-title !mb-3">Archive</h4>
|
||||||
|
<ul className="pl-0 list-none bullet-primary !text-inherit">
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
February 2019
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
January 2019
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
December 2018
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
November 2018
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:font-SansSerif !mt-[.35rem]">
|
||||||
|
<a className="!text-[#60697b] hover:!text-[#3f78e0]" href="#">
|
||||||
|
October 2018
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/* /.widget */}
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -13,7 +13,7 @@ export default function Footer15() {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<footer className="bg-[#21262c] opacity-100 !text-[#cacaca]">
|
<footer className="bg-[#fefefe] !text-[#333333]">
|
||||||
<div className="container pt-20 pb-7">
|
<div className="container pt-20 pb-7">
|
||||||
<div className="w-full flex flex-col md:flex-row justify-center items-stretch gap-8 md:gap-10 xl:gap-16">
|
<div className="w-full flex flex-col md:flex-row justify-center items-stretch gap-8 md:gap-10 xl:gap-16">
|
||||||
{/* 产品中心 */}
|
{/* 产品中心 */}
|
||||||
@ -35,7 +35,7 @@ export default function Footer15() {
|
|||||||
© {new Date().getFullYear()} {siteSettings.company_name || "Jsite"} {siteSettings.copyright || "All Rights Reserved."}
|
© {new Date().getFullYear()} {siteSettings.company_name || "Jsite"} {siteSettings.copyright || "All Rights Reserved."}
|
||||||
{siteSettings.icp && (
|
{siteSettings.icp && (
|
||||||
<a
|
<a
|
||||||
className="ml-2 !text-[#cacaca] hover:!text-[#22b573]"
|
className="ml-2 !text-[#333333] hover:!text-[#22b573]"
|
||||||
href="https://beian.miit.gov.cn"
|
href="https://beian.miit.gov.cn"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
|
|||||||
@ -30,13 +30,13 @@ export default function MenuList({ componentName = "MenuList" }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="widget text-left">
|
<div className="widget text-left">
|
||||||
<h4 className="widget-title !mb-[.75rem] !text-[.95rem] !leading-[1.45] !text-white">
|
<h4 className="widget-title !mb-[.75rem] !text-[.95rem] !leading-[1.45] !text-[#333333]">
|
||||||
{data.title}
|
{data.title}
|
||||||
</h4>
|
</h4>
|
||||||
<ul className="pl-0 list-none text-inherit !mb-0">
|
<ul className="pl-0 list-none text-inherit !mb-0">
|
||||||
{data.items?.map((elm, i) => (
|
{data.items?.map((elm, i) => (
|
||||||
<li key={i} className={i !== 0 ? "!mt-[0.35rem]" : ""}>
|
<li key={i} className={i !== 0 ? "!mt-[0.35rem]" : ""}>
|
||||||
<Link className="!text-white hover:!text-[#22b573]" href={elm.item_link || "#"}>
|
<Link className="!text-[#333333] hover:!text-[#22b573]" href={elm.item_link || "#"}>
|
||||||
{elm.item_title}
|
{elm.item_title}
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
231
components/homes/home-15/CategoryItems.jsx
Normal file
231
components/homes/home-15/CategoryItems.jsx
Normal file
@ -0,0 +1,231 @@
|
|||||||
|
"use client";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { Swiper, SwiperSlide } from "swiper/react";
|
||||||
|
import { Navigation, Pagination } from "swiper/modules";
|
||||||
|
import Link from "next/link";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
const PAGE_SIZE = 8; // 每页8条，4列2行
|
||||||
|
const PAGE_SLUG = "case"; // 博客slug常量
|
||||||
|
|
||||||
|
export default function CategoryItems() {
|
||||||
|
const [posts, setPosts] = useState([]);
|
||||||
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
const [totalPages, setTotalPages] = useState(1);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function fetchData() {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await fetch("/api/get-page-data", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ slug_list: [PAGE_SLUG], page: currentPage, page_size: PAGE_SIZE }),
|
||||||
|
});
|
||||||
|
const json = await res.json();
|
||||||
|
if (Array.isArray(json.data)) {
|
||||||
|
setPosts(json.data);
|
||||||
|
setTotalPages(Math.ceil((json.total || 0) / PAGE_SIZE));
|
||||||
|
} else {
|
||||||
|
setPosts([]);
|
||||||
|
setTotalPages(1);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setPosts([]);
|
||||||
|
setTotalPages(1);
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
fetchData();
|
||||||
|
}, [currentPage]);
|
||||||
|
|
||||||
|
// 分页控件
|
||||||
|
function PaginationComp() {
|
||||||
|
if (totalPages <= 1) return null;
|
||||||
|
return (
|
||||||
|
<nav className="flex justify-center mt-8" aria-label="pagination">
|
||||||
|
<ul className="pagination flex gap-2">
|
||||||
|
{Array.from({ length: totalPages }).map((_, idx) => (
|
||||||
|
<li key={idx}>
|
||||||
|
<button
|
||||||
|
className={`px-3 py-1 rounded ${currentPage === idx + 1 ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-700"}`}
|
||||||
|
onClick={() => setCurrentPage(idx + 1)}
|
||||||
|
disabled={currentPage === idx + 1}
|
||||||
|
>
|
||||||
|
{idx + 1}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 渲染卡片内容（只返回图片部分，结构在下方article里）
|
||||||
|
function renderCardImage(post, idx) {
|
||||||
|
// 多图轮播
|
||||||
|
if (Array.isArray(post.images) && post.images.length > 1) {
|
||||||
|
return (
|
||||||
|
<Swiper
|
||||||
|
className="swiper"
|
||||||
|
modules={[Navigation, Pagination]}
|
||||||
|
pagination={{ clickable: true, el: `.spdb${idx}` }}
|
||||||
|
navigation={{ prevEl: `.snbpb${idx}`, nextEl: `.snbnb${idx}` }}
|
||||||
|
>
|
||||||
|
{post.images.map((img, i) => (
|
||||||
|
<SwiperSlide key={i} className="swiper-slide">
|
||||||
|
<Image
|
||||||
|
className="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105 w-full h-auto"
|
||||||
|
alt={post.title || "image"}
|
||||||
|
src={img}
|
||||||
|
width={960}
|
||||||
|
height={600}
|
||||||
|
/>
|
||||||
|
</SwiperSlide>
|
||||||
|
))}
|
||||||
|
</Swiper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// 视频
|
||||||
|
if (post.video_src || post.videoId) {
|
||||||
|
if (post.video_src && (post.video_src.endsWith('.mp4') || post.video_src.startsWith('/files/'))) {
|
||||||
|
return (
|
||||||
|
<video controls className="w-full h-56 rounded-xl object-cover">
|
||||||
|
<source src={post.video_src} type="video/mp4" />
|
||||||
|
您的浏览器不支持视频播放。
|
||||||
|
</video>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const vid = post.videoId || (post.video_src && post.video_src.includes('youtube') ? post.video_src.split('embed/')[1] : null);
|
||||||
|
if (vid) {
|
||||||
|
return (
|
||||||
|
<iframe
|
||||||
|
className="w-full h-56 rounded-xl"
|
||||||
|
src={`https://www.youtube.com/embed/${vid}`}
|
||||||
|
title="YouTube video"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowFullScreen
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 单图
|
||||||
|
const img = post.image || (Array.isArray(post.images) && post.images[0]);
|
||||||
|
if (img) {
|
||||||
|
return (
|
||||||
|
<Image
|
||||||
|
className="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105 w-full h-auto"
|
||||||
|
alt={post.title || "image"}
|
||||||
|
src={img}
|
||||||
|
width={960}
|
||||||
|
height={600}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSummary(text, maxLen = 100) {
|
||||||
|
if (!text) return "";
|
||||||
|
// 中文：直接按字符截断
|
||||||
|
if (/[\u4e00-\u9fa5]/.test(text)) {
|
||||||
|
return text.length > maxLen ? text.slice(0, maxLen) + "..." : text;
|
||||||
|
}
|
||||||
|
// 英文：按字符截断，但不截断单词
|
||||||
|
if (text.length <= maxLen) return text;
|
||||||
|
let cut = text.slice(0, maxLen);
|
||||||
|
// 如果最后一个字符不是空格，向前找到最近的空格
|
||||||
|
if (!/\s/.test(text[maxLen])) {
|
||||||
|
const lastSpace = cut.lastIndexOf(" ");
|
||||||
|
if (lastSpace > 0) cut = cut.slice(0, lastSpace);
|
||||||
|
}
|
||||||
|
return cut + "...";
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto my-[150px]">
|
||||||
|
<div className="blog classic-view grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{loading ? (
|
||||||
|
<div className="col-span-4 text-center py-12 text-gray-400">加载中...</div>
|
||||||
|
) : posts.length === 0 ? (
|
||||||
|
<div className="col-span-4 text-center py-12 text-gray-400">暂无数据</div>
|
||||||
|
) : (
|
||||||
|
posts.map((post, idx) => (
|
||||||
|
<article key={post.slug || post.id || idx} className="post !mb-8">
|
||||||
|
<div className="card">
|
||||||
|
{/* 图片/轮播/视频部分 */}
|
||||||
|
<figure className="card-img-top overlay overlay-1 hover-scale group">
|
||||||
|
<Link href={post.slug ? `/${PAGE_SLUG}/${post.slug}` : "#"} className="block relative">
|
||||||
|
{renderCardImage(post, idx)}
|
||||||
|
<span className="bg"></span>
|
||||||
|
<figcaption className="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
||||||
|
<h5 className="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">
|
||||||
|
查看详情
|
||||||
|
</h5>
|
||||||
|
</figcaption>
|
||||||
|
</Link>
|
||||||
|
</figure>
|
||||||
|
{/* 文字内容 */}
|
||||||
|
<div className="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4">
|
||||||
|
<div className="post-header !mb-[.9rem]">
|
||||||
|
<div className="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
|
||||||
|
<a href="#" className="hover" rel="category">
|
||||||
|
{post.category || post.categories || ""}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<h2 className="post-title !mt-1 !leading-[1.35] !mb-0">
|
||||||
|
<Link
|
||||||
|
className="!text-[#343f52] hover:!text-[#3f78e0]"
|
||||||
|
href={post.slug ? `/${PAGE_SLUG}/${post.slug}` : "#"}
|
||||||
|
>
|
||||||
|
{post.title}
|
||||||
|
</Link>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div className="!relative">
|
||||||
|
<p>{getSummary(post.subtitle)}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 底部信息 */}
|
||||||
|
<div className="card-footer xl:!p-[1.25rem_2.5rem_1.25rem] lg:!p-[1.25rem_2.5rem_1.25rem] md:!p-[1.25rem_2.5rem_1.25rem] p-[18px_40px]">
|
||||||
|
<ul className="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex !mb-0">
|
||||||
|
<li className="post-date inline-block">
|
||||||
|
<i className="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\\e9ba']" />
|
||||||
|
<span>{post.date || post.published_at || ""}</span>
|
||||||
|
</li>
|
||||||
|
{post.author && (
|
||||||
|
<li className="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
|
||||||
|
<a className="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#">
|
||||||
|
<i className="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\\ed6f']" />
|
||||||
|
<span>{post.author}</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
{typeof post.comments === 'number' && (
|
||||||
|
<li className="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
|
||||||
|
<a className="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#">
|
||||||
|
<i className="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\\ea54']" />
|
||||||
|
{post.comments}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
{typeof post.likes === 'number' && (
|
||||||
|
<li className="post-likes !ml-auto inline-block">
|
||||||
|
<a className="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#">
|
||||||
|
<i className="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\\eb60']" />
|
||||||
|
{post.likes}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<PaginationComp />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -31,20 +31,14 @@ export default function Hero() {
|
|||||||
if (error) return null;
|
if (error) return null;
|
||||||
if (!data) return null;
|
if (!data) return null;
|
||||||
|
|
||||||
// 主图
|
|
||||||
const bgImage = data.bg_image || "/assets/img/photos/blurry.png";
|
const bgImage = data.bg_image || "/assets/img/photos/blurry.png";
|
||||||
// 标题/副标题/描述
|
|
||||||
const title = data.title || "";
|
const title = data.title || "";
|
||||||
const subtitle = data.subtitle || "";
|
const subtitle = data.subtitle || "";
|
||||||
const description = data.description || "";
|
|
||||||
const icon = data.icon || "/files/icon.svg";
|
|
||||||
const htmlCode = data.html_code || "";
|
|
||||||
const buttonText = data.button_text || "MORE";
|
const buttonText = data.button_text || "MORE";
|
||||||
const buttonLink = data.button_link || "#";
|
const buttonLink = data.button_link || "#";
|
||||||
const buttonText2 = data.button_2_text || "MORE";
|
const buttonText2 = data.button_2_text || "MORE";
|
||||||
const buttonLink2 = data.button_2_link || "#";
|
const buttonLink2 = data.button_2_link || "#";
|
||||||
// items 子表
|
|
||||||
// const items = data.items || [];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container pt-36 xl:pt-[12.5rem] lg:pt-[12.5rem] md:pt-[12.5rem] !text-center !relative">
|
<div className="container pt-36 xl:pt-[12.5rem] lg:pt-[12.5rem] md:pt-[12.5rem] !text-center !relative">
|
||||||
|
|||||||
BIN
public/files/1695105857795607.jpg
Normal file
BIN
public/files/1695105857795607.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Loading…
x
Reference in New Issue
Block a user