rankrunners-dev/next-cochise
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: rankrunners-dev:debfdcfb335ac78232051163ab951decd133f1e4
Branches Tags
rankrunners-dev:main
rankrunners-dev:dev
..
compare: rankrunners-dev:b64aaf7144dd07729bd890d5ce34031b9dcbde46
Branches Tags
rankrunners-dev:main
rankrunners-dev:dev

No commits in common. "debfdcfb335ac78232051163ab951decd133f1e4" and "b64aaf7144dd07729bd890d5ce34031b9dcbde46" have entirely different histories.
debfdcfb33 ... b64aaf7144

7 changed files with 149 additions and 53 deletions
Show Stats Expand all files Collapse all files

10
src/app/(main)/[slug]/page.tsx
View File

@ -1,9 +1,9 @@
import { BlogDetailContentSkeleton } from "@/components/Blogs/BlogDetail";
import HeroOther from "@/components/HeroOther";
import Page from "@/components/Pages/Page";
import { fetchBlogDetail } from "@/services/payload/blog";
import { fetchPageBySlug } from "@/services/payload/page";
import { Metadata } from "next";
import Image from "next/image";
import { Suspense } from "react";
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
@ -58,7 +58,13 @@ export default async function SinglePage({ params }: { params: Promise<{ slug: s
function Loading() {
return (
<>
<HeroOther />
<section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
{/* <!-- Background Shape --> */}
<div className="bg-shape-1 opacity-003">
<Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
</div>
{/* <!-- End Background Shape --> */}
</section>
{/* Section */}
<BlogDetailContentSkeleton />

35
src/app/(main)/biography/[slug]/page.tsx
View File

@ -1,5 +1,4 @@
import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
import HeroOther from "@/components/HeroOther";
import { fetchTeamDetail } from "@/services/payload/team";
import { RichText } from "@payloadcms/richtext-lexical/react";
import Image from "next/image";
@ -47,11 +46,35 @@ export default async function BiographySinglePage({ params }: { params: Promise<
<>
<Suspense fallback={<Loading />}>
<>
<HeroOther
img={"/assets/images/full-width-images/section-bg-13.jpeg"}
title={data.data.name}
createdAt={data.createdAt}
/>
<section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
{/* <!-- Background Shape --> */}
<div className="absolute top-0 left-0 w-full h-full opacity-40">
<Image
src={"/assets/images/full-width-images/section-bg-13.jpeg"}
width="0"
height="0"
sizes="100vw"
className="w-full"
alt={"section-bg-13"}
/>
</div>
{/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center">
<div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10 wow fadeInUp">{data.data.name}</h1>
{/* Author, Categories, Comments */}
<div className="blog-item-data mb-0 wow fadeIn" data-wow-delay="0.2s">
<div className="flex justify-center items-center">
<i className="mi-clock mr-2" />
<a href="#">{data.createdAt}</a>
</div>
</div>
{/* End Author, Categories, Comments */}
</div>
</div>
</div>
</section>
{/* Section */}
<section className="page-section">

28
src/app/(main)/contact/page.tsx
View File

@ -1,6 +1,6 @@
import Contact from "@/components/Contacts/Contact";
import ContactForm from "@/components/Contacts/ContactForm";
import HeroOther from "@/components/HeroOther";
import Image from "next/image";
import { Suspense } from "react";
export const metadata = {
@ -11,7 +11,31 @@ export const metadata = {
export default async function ContactPage() {
return (
<>
<HeroOther title="Contact Us" />
<section
className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden"
id="home"
>
{/* <!-- Background Shape --> */}
<div className="bg-shape-1 opacity-003">
<Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
</div>
{/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center">
<div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10 wow fadeInUp">Contact Us</h1>
{/* <p
className="section-descr mb-0 wow fadeInUp"
data-wow-delay="0.2s"
>
Crafting immersive digital journeys for brands.
</p> */}
</div>
</div>
</div>
</section>
<section className="page-section scrollSpysection" id="contact">
<Contact />

6
src/components/Blocks/RenderBlocks.tsx
View File

@ -39,7 +39,7 @@ export const RenderBlocks: React.FC<{
if (blockType === "googleReviewBlock") {
return (
<div className="my-10" key={index}>
<div className="my-16" key={index}>
<Suspense fallback={<GoogleReviewsSkeleton />}>
<GoogleReviewsBlock />
</Suspense>
@ -47,14 +47,14 @@ export const RenderBlocks: React.FC<{
);
} else if (blockType === "beforeFooterBlock") {
return (
<div className="mt-10" key={index}>
<div className="mt-16" key={index}>
{/* @ts-ignore */}
<BeforeFooterBlock {...block} />
</div>
);
} else {
return (
<div className="my-10" key={index}>
<div className="my-16" key={index}>
{/* @ts-ignore */}
<Block {...block} disableInnerContainer />
</div>

38
src/components/Blogs/BlogDetail.tsx
View File

@ -1,9 +1,9 @@
import HeroOther from "@/components/HeroOther";
import { fetchBlogDetail } from "@/services/payload/blog";
import { RichText } from "@payloadcms/richtext-lexical/react";
import { headers } from "next/headers";
import Image from "next/image";
import { notFound } from "next/navigation";
import { FaFacebook, FaLinkedin, FaTwitter } from "react-icons/fa";
export interface BlogDetailProps {
slug: string | undefined;
@ -26,7 +26,41 @@ export default async function BlogDetail({ slug }: BlogDetailProps) {
return (
<>
<HeroOther title={data.data.title} createdAt={data?.createdAt} shareUrl={shareUrl} />
<section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
{/* <!-- Background Shape --> */}
<div className="bg-shape-1 opacity-003">
<Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
</div>
{/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center">
<div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10 wow fadeInUp">{data.data.title}</h1>
{/* Author, Categories, Comments */}
<div className="blog-item-data mb-0 wow fadeIn" data-wow-delay="0.2s">
<div className="flex justify-center items-center">
<i className="mi-clock mr-2" />
<a href="#">{data.createdAt}</a>
</div>
</div>
{/* End Author, Categories, Comments */}
<div className="flex justify-center space-x-5 mt-8 wow fadeIn">
<a className="cursor-pointer" href={shareUrl["facebook"]} target="_blank">
<FaFacebook className="text-2xl text-gray-300" />
</a>
<a className="cursor-pointer" href={shareUrl["linkedin"]} target="_blank">
<FaLinkedin className="text-2xl text-gray-300" />
</a>
<a className="cursor-pointer" href={shareUrl["twitter"]} target="_blank">
<FaTwitter className="text-2xl text-gray-300" />
</a>
</div>
</div>
</div>
</div>
</section>
{/* Section */}
<section className="page-section">

45
src/components/HeroOther.tsx
View File

@ -1,57 +1,30 @@
import Image from "next/image";
import { FaFacebook, FaLinkedin, FaTwitter } from "react-icons/fa";
export interface HeroOtherProps {
title?: string;
img?: string;
createdAt?: string;
shareUrl?: Record<string, string>;
title: string;
}
const shareIcons: Record<string, any> = {
facebook: <FaFacebook className="text-2xl text-gray-300" />,
linkedin: <FaLinkedin className="text-2xl text-gray-300" />,
twitter: <FaTwitter className="text-2xl text-gray-300" />,
};
export default function HeroOther({ title, img, createdAt, shareUrl }: HeroOtherProps) {
export default function HeroOther({ title }: HeroOtherProps) {
return (
<section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden !py-20 md:!py-48 relative">
<section
className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden !py-52 relative"
// style={{ clipPath: "ellipse(50% 100% at 50% 100%)" }}
>
{/* <!-- Background Shape --> */}
<div className="bg-shape-1 w-full h-full opacity-50">
<Image src={!!img ? img : "/assets/images/hero-default.webp"} fill alt="" />
<Image src="/assets/images/hero-default.webp" fill alt="" />
</div>
{/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center">
<div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10">{title ?? ""}</h1>
{!!createdAt && (
<div className="blog-item-data mb-0 wow fadeIn" data-wow-delay="0.2s">
<div className="flex justify-center items-center">
<i className="mi-clock mr-2" />
<a href="#">{createdAt}</a>
</div>
</div>
)}
{!!shareUrl && (
<div className="flex justify-center space-x-5 mt-8 wow fadeIn">
{Object.keys(shareUrl).map((k, idx) => {
return (
<a key={idx} className="cursor-pointer" href={shareUrl[k]} target="_blank">
{shareIcons[k]}
</a>
);
})}
</div>
)}
<h1 className="hs-title-10 mb-10 wow fadeInUp">{title ?? ""}</h1>
</div>
</div>
</div>
<svg className="absolute bottom-[-10px] left-0 w-full" viewBox="0 0 1440 50" xmlns="http://www.w3.org/2000/svg">
<svg className="absolute bottom-0 left-0 w-full" viewBox="0 0 1440 50" xmlns="http://www.w3.org/2000/svg">
<path fill="white" d="M0,0 C480,40 960,40 1440,0 L1440,50 L0,50 Z"></path>
</svg>
</section>

40
src/components/Pages/Page.tsx
View File

@ -2,7 +2,7 @@ import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
import { RenderBlocks } from "@/components/Blocks/RenderBlocks";
import BlogDetail from "@/components/Blogs/BlogDetail";
import { fetchPageBySlug } from "@/services/payload/page";
import HeroOther from "@/components/HeroOther";
import Image from "next/image";
export interface PageProps {
slug: string | undefined;
@ -22,7 +22,43 @@ export default async function Page({ slug }: PageProps) {
return (
<>
<HeroOther title={page.title} img={page?.heroImg?.url ?? ""} />
<section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
{/* <!-- Background Shape --> */}
{!!page.heroImg?.url && (
<div className="absolute top-0 left-0 w-full h-full opacity-20">
<Image
src={page.heroImg.url}
width="0"
height="0"
sizes="100vw"
className="w-full"
alt={page.heroImg.alt}
/>
</div>
)}
{!page?.heroImg?.url && (
<div className="absolute top-0 left-0 w-full h-full opacity-20">
<Image
src="/assets/images/hero-default.webp"
width="0"
height="0"
sizes="100vw"
className="w-full"
alt=""
/>
</div>
)}
{/* <!-- End Background Shape --> */}
<div className="container position-relative pt-sm-40 text-center">
<div className="row">
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 className="hs-title-10 mb-10">{page.title}</h1>
</div>
</div>
</div>
</section>
<RenderBlocks blocks={page.layout} />
</>
);