revamp template

src/partials/misc/MiscCreateTeam.tsx

@@ -0,0 +1,40 @@
+import clsx from 'clsx';
+import { Link } from 'react-router-dom';
+import { ReactNode } from 'react';
+
+interface ICreateTeamProps {
+  className?: string;
+  image: ReactNode;
+  title: string;
+  subTitle: ReactNode;
+  engage: {
+    path: string;
+    btnColor: string;
+    label: string;
+  };
+}
+
+const MiscCreateTeam = ({ className, image, title, subTitle, engage }: ICreateTeamProps) => {
+  return (
+    <div className={clsx('card', className && className)}>
+      <div className="card-body flex flex-col place-content-center gap-5">
+        <div className="flex justify-center">{image}</div>
+
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-3 text-center">
+            <h2 className="text-1.5xl font-semibold text-gray-900">{title}</h2>
+            <p className="text-sm font-medium text-gray-700">{subTitle}</p>
+          </div>
+
+          <div className="flex justify-center">
+            <Link to={`${engage.path}`} className={`btn ${engage.btnColor}`}>
+              {engage.label}
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { MiscCreateTeam, type ICreateTeamProps };

src/partials/misc/MiscEngage.tsx

@@ -0,0 +1,37 @@
+import { Link } from 'react-router-dom';
+
+interface IEngageProps {
+  title: string;
+  description: string;
+  image: any;
+  more: {
+    url: string;
+    title: string;
+  };
+}
+
+const MiscEngage = ({ title, description, image, more }: IEngageProps) => {
+  return (
+    <div className="card">
+      <div className="card-body px-10 py-7.5 lg:pr-12.5">
+        <div className="flex flex-wrap md:flex-nowrap items-center gap-6 md:gap-10">
+          <div className="flex flex-col items-start gap-3">
+            <h2 className="text-1.5xl font-medium text-gray-900">{title}</h2>
+
+            <p className="text-sm text-gray-800 leading-5.5 mb-2.5">{description}</p>
+          </div>
+
+          {image}
+        </div>
+      </div>
+
+      <div className="card-footer justify-center">
+        <Link to={`${more.url}`} className="btn btn-link">
+          {more.title}
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export { MiscEngage, type IEngageProps };

src/partials/misc/MiscFaq.tsx

@@ -0,0 +1,59 @@
+import { Accordion, AccordionItem } from '@/components/accordion';
+
+interface IFaqItem {
+  title: string;
+  text: string;
+}
+interface IFaqItems extends Array<IFaqItem> {}
+
+const MiscFaq = () => {
+  const items: IFaqItems = [
+    {
+      title: 'How is pricing determined for each plan ?',
+      text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision. Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision. Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
+    },
+    {
+      title: 'What payment methods are accepted for subscriptions ?',
+      text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
+    },
+    {
+      title: 'Are there any hidden fees in the pricing ?',
+      text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
+    },
+    {
+      title: 'Is there a discount for annual subscriptions ?',
+      text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
+    },
+    {
+      title: 'Do you offer refunds on subscription cancellations ?',
+      text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
+    },
+    {
+      title: 'Can I add extra features to my current plan ?',
+      text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
+    }
+  ];
+
+  const generateItems = () => {
+    return (
+      <Accordion allowMultiple={false}>
+        {items.map((item, index) => (
+          <AccordionItem key={index} title={item.title}>
+            {item.text}
+          </AccordionItem>
+        ))}
+      </Accordion>
+    );
+  };
+
+  return (
+    <div className="card">
+      <div className="card-header">
+        <h3 className="card-title">FAQ</h3>
+      </div>
+      <div className="card-body py-3">{generateItems()}</div>
+    </div>
+  );
+};
+
+export { MiscFaq, type IFaqItem, type IFaqItems };

src/partials/misc/MiscHelp.tsx

@@ -0,0 +1,53 @@
+import { Fragment } from 'react';
+
+import { toAbsoluteUrl } from '@/utils';
+
+import { MiscEngage } from '.';
+
+const MiscHelp = () => {
+  return (
+    <div className="grid lg:grid-cols-2 gap-5 lg:gap-7.5">
+      <MiscEngage
+        title="Questions ?"
+        description="Visit our Help Center for detailed assistance on billing, payments, and subscriptions."
+        image={
+          <Fragment>
+            <img
+              src={toAbsoluteUrl('/media/illustrations/2.svg')}
+              className="dark:hidden max-h-[150px]"
+              alt=""
+            />
+            <img
+              src={toAbsoluteUrl('/media/illustrations/2-dark.svg')}
+              className="light:hidden max-h-[150px]"
+              alt=""
+            />
+          </Fragment>
+        }
+        more={{ title: 'Go to Help Center', url: '#' }}
+      />
+
+      <MiscEngage
+        title="Contact Support"
+        description="Need assistance? Contact our support team for prompt, personalized help your queries & concerns."
+        image={
+          <Fragment>
+            <img
+              src={toAbsoluteUrl('/media/illustrations/4.svg')}
+              className="dark:hidden max-h-[150px]"
+              alt=""
+            />
+            <img
+              src={toAbsoluteUrl('/media/illustrations/4-dark.svg')}
+              className="light:hidden max-h-[150px]"
+              alt=""
+            />
+          </Fragment>
+        }
+        more={{ title: 'Contact Support', url: 'https://devs.keenthemes.com/unresolved' }}
+      />
+    </div>
+  );
+};
+
+export { MiscHelp };

src/partials/misc/MiscHelp2.tsx

@@ -0,0 +1,53 @@
+import { Fragment } from 'react';
+
+import { toAbsoluteUrl } from '@/utils';
+
+import { MiscEngage } from '.';
+
+const MiscHelp2 = () => {
+  return (
+    <div className="grid lg:grid-cols-2 gap-5 lg:gap-7.5">
+      <MiscEngage
+        title="Questions ?"
+        description="Visit our Help Center for detailed assistance on billing, payments, and subscriptions."
+        image={
+          <Fragment>
+            <img
+              src={toAbsoluteUrl('/media/illustrations/29.svg')}
+              className="dark:hidden max-h-[150px]"
+              alt=""
+            />
+            <img
+              src={toAbsoluteUrl('/media/illustrations/29-dark.svg')}
+              className="light:hidden max-h-[150px]"
+              alt=""
+            />
+          </Fragment>
+        }
+        more={{ title: 'Go to Help Center', url: '#' }}
+      />
+
+      <MiscEngage
+        title="Contact Support"
+        description="Need assistance? Contact our support team for prompt, personalized help your queries & concerns."
+        image={
+          <Fragment>
+            <img
+              src={toAbsoluteUrl('/media/illustrations/31.svg')}
+              className="dark:hidden max-h-[150px]"
+              alt=""
+            />
+            <img
+              src={toAbsoluteUrl('/media/illustrations/31-dark.svg')}
+              className="light:hidden max-h-[150px]"
+              alt=""
+            />
+          </Fragment>
+        }
+        more={{ title: 'Contact Support', url: 'https://devs.keenthemes.com/unresolved' }}
+      />
+    </div>
+  );
+};
+
+export { MiscHelp2 };

src/partials/misc/MiscHighlightedPosts.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { KeenIcon } from '@/components';
+import { CommonHexagonBadge } from '../common';
+
+interface IHighlightedPostsItem {
+  icon: string;
+  title: string;
+  summary: string;
+  path: string;
+}
+interface IHighlightedPostsItems extends Array<IHighlightedPostsItem> {}
+
+interface IHighlightedPostsProps {
+  posts: IHighlightedPostsItem[];
+}
+
+const MiscHighlightedPosts = ({ posts }: IHighlightedPostsProps) => {
+  const renderItem = (post: IHighlightedPostsItem, index: number) => {
+    return (
+      <React.Fragment key={index}>
+        <div className="flex flex-col items-start gap-2.5">
+          <div className="mb-2.5">
+            <CommonHexagonBadge
+              stroke="stroke-brand-clarity"
+              fill="fill-brand-light"
+              size="size-[50px]"
+              badge={<KeenIcon icon={post.icon} className="text-1.5xl ps-px text-brand" />}
+            />
+          </div>
+
+          <Link
+            to={`${post.path}`}
+            className="text-base font-semibold text-gray-900 hover:text-primary"
+          >
+            {post.title}
+          </Link>
+
+          <p className="text-sm text-gray-700">{post.summary}</p>
+
+          <Link to={`${post.path}`} className="btn btn-link flex-none">
+            Learn more
+          </Link>
+        </div>
+
+        <span className="hidden [&:not(:last-child)]:block [&:not(:last-child)]:border-b border-b-gray-200"></span>
+      </React.Fragment>
+    );
+  };
+
+  return (
+    <div className="card">
+      <div className="card-body py-10 flex flex-col gap-5 lg:gap-7.5">
+        {posts.map((post, index) => {
+          return renderItem(post, index);
+        })}
+      </div>
+    </div>
+  );
+};
+
+export {
+  MiscHighlightedPosts,
+  type IHighlightedPostsItem,
+  type IHighlightedPostsItems,
+  type IHighlightedPostsProps
+};

src/partials/misc/MiscStarter.tsx

@@ -0,0 +1,38 @@
+import { Link } from 'react-router-dom';
+import { ReactNode } from 'react';
+
+interface IStarterProps {
+  image: ReactNode;
+  title: string;
+  subTitle: ReactNode;
+  engage: {
+    path: string;
+    btnColor: string;
+    label: string;
+  };
+}
+
+const MiscStarter = ({ image, title, subTitle, engage }: IStarterProps) => {
+  return (
+    <div className="card">
+      <div className="card-body flex flex-col items-center gap-2.5 py-7.5">
+        <div className="flex justify-center p-7.5 py-9">{image}</div>
+
+        <div className="flex flex-col gap-5 lg:gap-7.5">
+          <div className="flex flex-col gap-3 text-center">
+            <h2 className="text-1.5xl font-semibold text-gray-900">{title}</h2>
+            <p className="text-sm text-gray-800">{subTitle}</p>
+          </div>
+
+          <div className="flex justify-center mb-5">
+            <Link to={engage.path} className={`btn ${engage.btnColor}`}>
+              {engage.label}
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { MiscStarter, type IStarterProps };

src/partials/misc/index.ts

@@ -0,0 +1,7 @@
+export * from './MiscCreateTeam';
+export * from './MiscEngage';
+export * from './MiscFaq';
+export * from './MiscHelp';
+export * from './MiscHelp2';
+export * from './MiscHighlightedPosts';
+export * from './MiscStarter';