feature - added whatsnew
This commit is contained in:
James Wyndham
parent
044daa830f
commit
5810cc112b
|
|
@ -51,7 +51,7 @@ const PostPage = async (props: any) => {
|
|||
className="h-full flex-grow flex flex-col bg-base-100 max-w-screen"
|
||||
>
|
||||
<Background>
|
||||
<div className="flex flex-col h-full w-full md:max-w-3xl md:mx-auto max-w-screen">
|
||||
<div className="flex flex-col h-full w-full md:max-w-3xl md:mx-auto max-w-screen mb-8">
|
||||
<Spacer className="pt-32" />
|
||||
<BlogContent post={post} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ export default function PricingPage() {
|
|||
<Payment type="one_time" />
|
||||
<Spacer className="mt-auto" />
|
||||
<Newsletter />
|
||||
<Spacer className="mb-8" />
|
||||
<Footer />
|
||||
</Background>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
import Footer from "@/components/Footer";
|
||||
import Background from "@/components/Utilities/Background";
|
||||
import Spacer from "@/components/Utilities/Spacer";
|
||||
import FormLeftDescriptionRightContactUs from "@/sections/ContactUs/FormLeftDescriptionRightContactUs";
|
||||
import SolidBackgrondIcon from "@/sections/IconsSections/SolidBackgrondIcon";
|
||||
import PageHeader from "@/sections/PageHeader";
|
||||
import React from "react";
|
||||
|
||||
const page = () => {
|
||||
return (
|
||||
<div className="flex flex-col h-full w-full bg-base-100 ">
|
||||
<Background>
|
||||
<PageHeader
|
||||
title="What's New"
|
||||
subtitle={
|
||||
<>
|
||||
{" "}
|
||||
<h2 className="text-base-content text-2xl font-medium content text-center max-w-6xl mx-auto px-6">
|
||||
Take a look at all the cool features we've built.
|
||||
</h2>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<SolidBackgrondIcon />
|
||||
<Spacer className="mt-auto" />
|
||||
<Footer />
|
||||
</Background>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
|
@ -2,27 +2,240 @@
|
|||
import React from "react";
|
||||
import { title } from "@/constants";
|
||||
import Logo from "@/components/Logo";
|
||||
import Link from "next/link";
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
<div className="py-12 mx-auto w-full from-base-100/70 bg-gradient-to-t">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6" data-aos="fade-up">
|
||||
{/* Bottom area */}
|
||||
<div className="flex items-center justify-center">
|
||||
{/* Social links */}
|
||||
<ul className="flex md:order-1 md:mb-0 justify-center text-base-content fill-base-content">
|
||||
<li>
|
||||
<Logo />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<footer className="w-full py-10 px-4 sm:px-6 lg:px-8 mx-auto bg-base-100">
|
||||
{/* Grid */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6 mb-10">
|
||||
<div className="col-span-full hidden lg:col-span-1 lg:flex lg:flex-col lg:items-center">
|
||||
<Link
|
||||
className="flex-none text-xl font-semibold "
|
||||
href="#"
|
||||
aria-label="Brand"
|
||||
>
|
||||
<Logo href="#" />
|
||||
</Link>
|
||||
<p className="mt-3 text-xs sm:text-sm text-base-content">
|
||||
© {new Date().getFullYear()} {title + " "}
|
||||
</p>
|
||||
</div>
|
||||
{/* End Col */}
|
||||
<div>
|
||||
<h4 className="text-xs font-semibold text-primary uppercase">
|
||||
Product
|
||||
</h4>
|
||||
<div className="mt-3 grid space-y-3 text-sm">
|
||||
<p>
|
||||
<Link
|
||||
className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
|
||||
href="/pricing"
|
||||
>
|
||||
Pricing
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
{/* Copyrights note */}
|
||||
<div className="text-base-content text-xs text-center mt-2">
|
||||
© {new Date().getFullYear()} {title}
|
||||
<p>
|
||||
<Link
|
||||
className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
|
||||
href="/blogs/documentation"
|
||||
>
|
||||
Docs
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Col */}
|
||||
<div>
|
||||
<h4 className="text-xs font-semibold text-primary uppercase">
|
||||
Company
|
||||
</h4>
|
||||
<div className="mt-3 grid space-y-3 text-sm">
|
||||
<p>
|
||||
<Link
|
||||
className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
|
||||
href="/blogs"
|
||||
>
|
||||
Blog
|
||||
</Link>
|
||||
</p>
|
||||
<p>
|
||||
<Link
|
||||
className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
|
||||
href="#"
|
||||
>
|
||||
Customers
|
||||
</Link>
|
||||
<span className="inline text-secondary">
|
||||
— Under Construction
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Col */}
|
||||
<div>
|
||||
<h4 className="text-xs font-semibold text-primary uppercase">
|
||||
Resources
|
||||
</h4>
|
||||
<div className="mt-3 grid space-y-3 text-sm">
|
||||
<p>
|
||||
<Link
|
||||
className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
|
||||
href="https://discord.gg/YpR5QVAa3Z"
|
||||
>
|
||||
Community
|
||||
</Link>
|
||||
</p>
|
||||
<p>
|
||||
<Link
|
||||
className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
|
||||
href="#"
|
||||
>
|
||||
Help & Support
|
||||
</Link>
|
||||
<span className="inline text-secondary">
|
||||
— Under Construction
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<Link
|
||||
className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
|
||||
href="/whatsnew"
|
||||
>
|
||||
What's New
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Col */}
|
||||
<div>
|
||||
<h4 className="text-xs font-semibold text-primary uppercase">
|
||||
Developers
|
||||
</h4>
|
||||
<div className="mt-3 grid space-y-3 text-sm">
|
||||
<p>
|
||||
<Link
|
||||
className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
|
||||
href="#"
|
||||
>
|
||||
Roadmap
|
||||
</Link>
|
||||
<span className="inline text-secondary">
|
||||
— Under Construction
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<Link
|
||||
className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
|
||||
href="https://github.com/mrwyndham/pocketbase-stripe"
|
||||
>
|
||||
GitHub
|
||||
</Link>{" "}
|
||||
</p>
|
||||
</div>
|
||||
{/* <h4 className="mt-7 text-xs font-semibold text-primary uppercase">
|
||||
Industries
|
||||
</h4>
|
||||
<div className="mt-3 grid space-y-3 text-sm">
|
||||
<p>
|
||||
<Link
|
||||
className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
|
||||
href="#"
|
||||
>
|
||||
Financial Services
|
||||
</Link>
|
||||
</p>
|
||||
<p>
|
||||
<Link
|
||||
className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
|
||||
href="#"
|
||||
>
|
||||
Education
|
||||
</Link>
|
||||
</p>
|
||||
</div> */}
|
||||
</div>
|
||||
{/* End Col */}
|
||||
</div>
|
||||
{/* End Grid */}
|
||||
<div className="pt-5 mt-5 border-t border-base-content/40 ">
|
||||
<div className="sm:flex sm:justify-between sm:items-center">
|
||||
<div className="flex items-center gap-x-3">
|
||||
<div className="space-x-4 text-sm ms-4">
|
||||
<Link
|
||||
className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
|
||||
href="#"
|
||||
>
|
||||
Terms
|
||||
</Link>
|
||||
<Link
|
||||
className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
|
||||
href="#"
|
||||
>
|
||||
Privacy
|
||||
</Link>
|
||||
<Link
|
||||
className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
|
||||
href="#"
|
||||
>
|
||||
Status
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="mt-3 sm:hidden">
|
||||
<Link
|
||||
className="flex-none text-xl font-semibold "
|
||||
href="#"
|
||||
aria-label="Brand"
|
||||
>
|
||||
<Logo href="#" />
|
||||
</Link>
|
||||
<p className="mt-1 text-xs sm:text-sm text-base-content">
|
||||
© {new Date().getFullYear()} {title + " "}
|
||||
</p>
|
||||
</div>
|
||||
{/* Social Brands */}
|
||||
<div className="space-x-4">
|
||||
<Link
|
||||
className="inline-flex justify-center items-center size-10 text-center text-base-content hover:bg-base-content/80 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white transition "
|
||||
href="https://discord.gg/YpR5QVAa3Z"
|
||||
>
|
||||
<svg
|
||||
width={16}
|
||||
height={16}
|
||||
viewBox="0 0 24 24"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link
|
||||
className="inline-flex justify-center items-center size-10 text-center text-base-content hover:bg-base-content/80 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white transition "
|
||||
href="https://github.com/mrwyndham/pocketbase-stripe"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 size-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={16}
|
||||
height={16}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
{/* End Social Brands */}
|
||||
</div>
|
||||
{/* End Col */}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.share
|
|||
import pb from "@/lib/pocketbase";
|
||||
import { useTheme } from "next-themes";
|
||||
import Link from "next/link";
|
||||
import Icon from "@/components/Icon/Icon";
|
||||
import Icon from "@/components/Icons/Icon";
|
||||
|
||||
interface HeaderProps {
|
||||
isUserLoggedIn: boolean;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,21 @@
|
|||
import React from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import Link, { LinkProps } from "next/link";
|
||||
import Image, { ImageProps } from "next/image";
|
||||
|
||||
interface LogoProps {
|
||||
label?: string;
|
||||
className?: string;
|
||||
imageProps?: ImageProps;
|
||||
}
|
||||
|
||||
function Logo({ label, className }: LogoProps) {
|
||||
function Logo({ imageProps, ...props }: LogoProps & LinkProps) {
|
||||
return (
|
||||
<Link
|
||||
href={
|
||||
label !== undefined
|
||||
? "https://www.youtube.com/channel/UCZzzsJK5koyqUnP4x4oXnqw"
|
||||
: "/"
|
||||
className={
|
||||
props.className ?? " flex flex-row items-center justify-center"
|
||||
}
|
||||
className={className ?? "" + " flex flex-row items-center justify-center"}
|
||||
target={label !== undefined ? "_blank" : ""}
|
||||
{...props}
|
||||
>
|
||||
{/* <Image className="absolute hover:rotate-[360deg] transition duration-1000 ease-in-out" src={logoArrow} alt="Logo"/> */}
|
||||
|
||||
|
|
@ -27,14 +25,8 @@ function Logo({ label, className }: LogoProps) {
|
|||
alt="Follow us on Twitter"
|
||||
width={40}
|
||||
height={40}
|
||||
{...imageProps}
|
||||
/>
|
||||
{label !== undefined ? (
|
||||
<span className="invisible absolute left-[50%] top-[-40px] translate-x-[-50%] p-1 rounded-lg font-bold bg-gray-800 text-fuchsia-400 group-hover:visible">
|
||||
{label}
|
||||
</span>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from "react";
|
||||
import Icon from "@/components/Icon/Icon";
|
||||
import Icon from "@/components/Icons/Icon";
|
||||
import { useTheme } from "next-themes";
|
||||
import colors from "@/utils/colors";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import React, { Dispatch, SetStateAction } from "react";
|
||||
import Icon from "@/components/Icon/Icon";
|
||||
import Icon from "@/components/Icons/Icon";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import { signUpValidationSchema } from "@/utils/form";
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
import Logo from "@/components/Logo";
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Icon from "@/components/Icon/Icon";
|
||||
import Icon from "@/components/Icons/Icon";
|
||||
|
||||
function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
|
||||
const [checked, setChecked] = useState<boolean>();
|
||||
|
|
@ -37,7 +37,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
|
|||
{/* Site branding */}
|
||||
<div className="shrink-0 mr-4">
|
||||
{/* Logo */}
|
||||
<Logo className="group relative cursor-pointer" />
|
||||
<Logo href="/" className="group relative cursor-pointer" />
|
||||
</div>
|
||||
{/* Navbar menu content here */}
|
||||
<li>
|
||||
|
|
@ -50,11 +50,11 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
|
|||
Blogs
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
{/* <li>
|
||||
<Link href="/contact" onClick={handleClick}>
|
||||
Contact
|
||||
</Link>
|
||||
</li>
|
||||
</li> */}
|
||||
{isUserLoggedIn ? (
|
||||
<li>
|
||||
<Link href="/account" onClick={handleClick}>
|
||||
|
|
@ -80,7 +80,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
|
|||
{/* Sidebar content here */}
|
||||
<div className="shrink-0 m-3">
|
||||
{/* Logo */}
|
||||
<Logo className="group relative cursor-pointer" />
|
||||
<Logo href="/" className="group relative cursor-pointer" />
|
||||
</div>
|
||||
<li>
|
||||
<Link href="/pricing">Pricing</Link>
|
||||
|
|
@ -88,9 +88,9 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
|
|||
<li>
|
||||
<Link href="/blogs">Blogs</Link>
|
||||
</li>
|
||||
<li>
|
||||
{/* <li>
|
||||
<Link href="/contact">Contact</Link>
|
||||
</li>
|
||||
</li> */}
|
||||
{isUserLoggedIn ? (
|
||||
<li>
|
||||
<Link href="/account" onClick={handleClick}>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Price, Product, SourceModal } from "@/types";
|
|||
import { createCheckoutSession, isAuthenticated } from "@/app/actions";
|
||||
import { toast } from "react-toastify";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Icon from "@/components/Icon/Icon";
|
||||
import Icon from "@/components/Icons/Icon";
|
||||
|
||||
export default function PriceCard({
|
||||
product,
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ const Background = ({ children }: { children: ReactNode }) => {
|
|||
<div
|
||||
className="h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed min-h-screen flex flex-col"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(rgba(${backgroundColor?.r}, ${backgroundColor?.g}, ${backgroundColor?.b}, 0.7), rgba(135, 80, 156, 0.05)), url(/images/circuit.svg)`,
|
||||
backgroundImage: `linear-gradient(rgba(${backgroundColor?.r}, ${backgroundColor?.g}, ${backgroundColor?.b}, 0.8), rgba(135, 80, 156, 0.05)), url(/images/circuit.svg)`,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,342 @@
|
|||
import React from "react";
|
||||
|
||||
function RightAlignedBorderBottom() {
|
||||
return (
|
||||
<>
|
||||
{/* FAQ */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* Grid */}
|
||||
<div className="grid md:grid-cols-5 gap-10">
|
||||
<div className="md:col-span-2">
|
||||
<div className="max-w-xs">
|
||||
<h2 className="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">
|
||||
Frequently
|
||||
<br />
|
||||
asked questions
|
||||
</h2>
|
||||
<p className="mt-1 hidden md:block text-gray-600 dark:text-gray-400">
|
||||
Answers to the most frequently asked questions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Col */}
|
||||
<div className="md:col-span-3">
|
||||
{/* Accordion */}
|
||||
<div className="hs-accordion-group divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<div
|
||||
className="hs-accordion pb-3 active"
|
||||
id="hs-basic-with-title-and-arrow-stretched-heading-one"
|
||||
>
|
||||
<button
|
||||
className="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-one"
|
||||
>
|
||||
Can I cancel at anytime?
|
||||
<svg
|
||||
className="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m6 9 6 6 6-6" />
|
||||
</svg>
|
||||
<svg
|
||||
className="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m18 15-6-6-6 6" />
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
id="hs-basic-with-title-and-arrow-stretched-collapse-one"
|
||||
className="hs-accordion-content w-full overflow-hidden transition-[height] duration-300"
|
||||
aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-one"
|
||||
>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Yes, you can cancel anytime no questions are asked while you
|
||||
cancel but we would highly appreciate if you will give us
|
||||
some feedback.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="hs-accordion pt-6 pb-3"
|
||||
id="hs-basic-with-title-and-arrow-stretched-heading-two"
|
||||
>
|
||||
<button
|
||||
className="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-two"
|
||||
>
|
||||
My team has credits. How do we use them?
|
||||
<svg
|
||||
className="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m6 9 6 6 6-6" />
|
||||
</svg>
|
||||
<svg
|
||||
className="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m18 15-6-6-6 6" />
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
id="hs-basic-with-title-and-arrow-stretched-collapse-two"
|
||||
className="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
|
||||
aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-two"
|
||||
>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Once your team signs up for a subscription plan. This is
|
||||
where we sit down, grab a cup of coffee and dial in the
|
||||
details.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="hs-accordion pt-6 pb-3"
|
||||
id="hs-basic-with-title-and-arrow-stretched-heading-three"
|
||||
>
|
||||
<button
|
||||
className="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-three"
|
||||
>
|
||||
How does Preline's pricing work?
|
||||
<svg
|
||||
className="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m6 9 6 6 6-6" />
|
||||
</svg>
|
||||
<svg
|
||||
className="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m18 15-6-6-6 6" />
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
id="hs-basic-with-title-and-arrow-stretched-collapse-three"
|
||||
className="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
|
||||
aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-three"
|
||||
>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Our subscriptions are tiered. Understanding the task at hand
|
||||
and ironing out the wrinkles is key.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="hs-accordion pt-6 pb-3"
|
||||
id="hs-basic-with-title-and-arrow-stretched-heading-four"
|
||||
>
|
||||
<button
|
||||
className="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-four"
|
||||
>
|
||||
How secure is Preline?
|
||||
<svg
|
||||
className="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m6 9 6 6 6-6" />
|
||||
</svg>
|
||||
<svg
|
||||
className="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m18 15-6-6-6 6" />
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
id="hs-basic-with-title-and-arrow-stretched-collapse-four"
|
||||
className="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
|
||||
aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-four"
|
||||
>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Protecting the data you trust to Preline is our first
|
||||
priority. This part is really crucial in keeping the project
|
||||
in line to completion.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="hs-accordion pt-6 pb-3"
|
||||
id="hs-basic-with-title-and-arrow-stretched-heading-five"
|
||||
>
|
||||
<button
|
||||
className="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-five"
|
||||
>
|
||||
How do I get access to a theme I purchased?
|
||||
<svg
|
||||
className="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m6 9 6 6 6-6" />
|
||||
</svg>
|
||||
<svg
|
||||
className="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m18 15-6-6-6 6" />
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
id="hs-basic-with-title-and-arrow-stretched-collapse-five"
|
||||
className="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
|
||||
aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-five"
|
||||
>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
If you lose the link for a theme you purchased, don't
|
||||
panic! We've got you covered. You can login to your
|
||||
account, tap your avatar in the upper right corner, and tap
|
||||
Purchases. If you didn't create a login or can't
|
||||
remember the information, you can use our handy Redownload
|
||||
page, just remember to use the same email you originally
|
||||
made your purchases with.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="hs-accordion pt-6 pb-3"
|
||||
id="hs-basic-with-title-and-arrow-stretched-heading-six"
|
||||
>
|
||||
<button
|
||||
className="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-six"
|
||||
>
|
||||
Upgrade License Type
|
||||
<svg
|
||||
className="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m6 9 6 6 6-6" />
|
||||
</svg>
|
||||
<svg
|
||||
className="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m18 15-6-6-6 6" />
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
id="hs-basic-with-title-and-arrow-stretched-collapse-six"
|
||||
className="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
|
||||
aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-six"
|
||||
>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
There may be times when you need to upgrade your license
|
||||
from the original type you purchased and we have a solution
|
||||
that ensures you can apply your original purchase cost to
|
||||
the new license purchase.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Accordion */}
|
||||
</div>
|
||||
{/* End Col */}
|
||||
</div>
|
||||
{/* End Grid */}
|
||||
</div>
|
||||
{/* End FAQ */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default RightAlignedBorderBottom;
|
||||
|
|
@ -0,0 +1,257 @@
|
|||
import React from "react";
|
||||
|
||||
function VerticalTabsWithOverlappingBackground() {
|
||||
return (
|
||||
<>
|
||||
{/* Features */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
{/* Tab Nav */}
|
||||
<nav
|
||||
className="max-w-6xl mx-auto grid sm:flex gap-y-px sm:gap-y-0 sm:gap-x-4"
|
||||
aria-label="Tabs"
|
||||
role="tablist"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="hs-tab-active:bg-gray-100 hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-gray-100 p-3 md:p-5 rounded-xl dark:hs-tab-active:bg-white/[.05] dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 active"
|
||||
id="tabs-with-card-item-1"
|
||||
data-hs-tab="#tabs-with-card-1"
|
||||
aria-controls="tabs-with-card-1"
|
||||
role="tab"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 hidden sm:block size-7 hs-tab-active:text-blue-600 text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" />
|
||||
<path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" />
|
||||
<path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" />
|
||||
<path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" />
|
||||
<path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" />
|
||||
</svg>
|
||||
<span className="mt-5">
|
||||
<span className="hs-tab-active:text-blue-600 block font-semibold text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-gray-200">
|
||||
All-in-one workspace
|
||||
</span>
|
||||
<span className="hidden lg:block mt-2 text-gray-800 dark:text-gray-200">
|
||||
Create a business, whether you’ve got a fresh idea.
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="hs-tab-active:bg-gray-100 hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-gray-100 p-3 md:p-5 rounded-xl dark:hs-tab-active:bg-white/[.05] dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
id="tabs-with-card-item-2"
|
||||
data-hs-tab="#tabs-with-card-2"
|
||||
aria-controls="tabs-with-card-2"
|
||||
role="tab"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 hidden sm:block size-7 hs-tab-active:text-blue-600 text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m12 14 4-4" />
|
||||
<path d="M3.34 19a10 10 0 1 1 17.32 0" />
|
||||
</svg>
|
||||
<span className="mt-5">
|
||||
<span className="hs-tab-active:text-blue-600 block font-semibold text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-gray-200">
|
||||
Automation on a whole new level
|
||||
</span>
|
||||
<span className="hidden lg:block mt-2 text-gray-800 dark:text-gray-200">
|
||||
Use automation to scale campaigns profitably and save time doing
|
||||
it.
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="hs-tab-active:bg-gray-100 hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-gray-100 p-3 md:p-5 rounded-xl dark:hs-tab-active:bg-white/[.05] dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
id="tabs-with-card-item-3"
|
||||
data-hs-tab="#tabs-with-card-3"
|
||||
aria-controls="tabs-with-card-3"
|
||||
role="tab"
|
||||
>
|
||||
<svg
|
||||
className="flex-shrink-0 hidden sm:block size-7 hs-tab-active:text-blue-600 text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
|
||||
<path d="M5 3v4" />
|
||||
<path d="M19 17v4" />
|
||||
<path d="M3 5h4" />
|
||||
<path d="M17 19h4" />
|
||||
</svg>
|
||||
<span className="mt-5">
|
||||
<span className="hs-tab-active:text-blue-600 block font-semibold text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-gray-200">
|
||||
Solving problems for every team
|
||||
</span>
|
||||
<span className="hidden lg:block mt-2 text-gray-800 dark:text-gray-200">
|
||||
One tool for your company to share knowledge and ship projects.
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</nav>
|
||||
{/* End Tab Nav */}
|
||||
{/* Tab Content */}
|
||||
<div className="mt-12 md:mt-16">
|
||||
<div
|
||||
id="tabs-with-card-1"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tabs-with-card-item-1"
|
||||
>
|
||||
{/* Devices */}
|
||||
<div className="max-w-[1140px] lg:pb-32 relative">
|
||||
{/* Mobile Device */}
|
||||
<figure className="hidden absolute bottom-0 start-0 z-[2] max-w-full w-60 h-auto mb-20 ms-20 lg:block">
|
||||
<div className="p-1.5 bg-gray-100 rounded-3xl shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(45_55_75_/_20%),_0_2rem_4rem_-2rem_rgb(45_55_75_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(45_55_75_/_20%)] dark:bg-gray-700 dark:shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(0_0_0_/_20%),_0_2rem_4rem_-2rem_rgb(0_0_0_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(0_0_0_/_20%)]">
|
||||
<img
|
||||
className="max-w-full h-auto rounded-[1.25rem]"
|
||||
src="../assets/img/mockups/img9.jpg"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
</figure>
|
||||
{/* End Mobile Device */}
|
||||
{/* Browser Device */}
|
||||
<figure className="ms-auto me-20 relative z-[1] max-w-full w-[50rem] h-auto rounded-b-lg shadow-[0_2.75rem_3.5rem_-2rem_rgb(45_55_75_/_20%),_0_0_5rem_-2rem_rgb(45_55_75_/_15%)] dark:shadow-[0_2.75rem_3.5rem_-2rem_rgb(0_0_0_/_20%),_0_0_5rem_-2rem_rgb(0_0_0_/_15%)]">
|
||||
<div className="relative flex items-center max-w-[50rem] bg-white border-b border-gray-100 rounded-t-lg py-2 px-24 dark:bg-gray-800 dark:border-gray-700">
|
||||
<div className="flex space-x-1 absolute top-2/4 start-4 -translate-y-1">
|
||||
<span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
|
||||
<span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
|
||||
<span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
|
||||
</div>
|
||||
<div className="flex justify-center items-center size-full bg-gray-200 text-[.25rem] text-gray-800 rounded-sm sm:text-[.5rem] dark:bg-gray-700 dark:text-gray-200">
|
||||
www.preline.co
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-800 rounded-b-lg">
|
||||
<img
|
||||
className="max-w-full h-auto rounded-b-lg"
|
||||
src="../assets/img/mockups/img8.jpg"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
</figure>
|
||||
{/* End Browser Device */}
|
||||
</div>
|
||||
{/* End Devices */}
|
||||
</div>
|
||||
<div
|
||||
id="tabs-with-card-2"
|
||||
className="hidden"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tabs-with-card-item-2"
|
||||
>
|
||||
{/* Devices */}
|
||||
<div className="max-w-[1140px] lg:pb-32 relative">
|
||||
{/* Mobile Device */}
|
||||
<figure className="hidden absolute bottom-0 start-0 z-[2] max-w-full w-60 h-auto mb-20 ms-20 lg:block">
|
||||
<div className="p-1.5 bg-gray-700 rounded-3xl shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(0_0_0_/_20%),_0_2rem_4rem_-2rem_rgb(0_0_0_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(0_0_0_/_20%)]">
|
||||
<img
|
||||
className="max-w-full h-auto rounded-[1.25rem]"
|
||||
src="../assets/img/mockups/img11.jpg"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
</figure>
|
||||
{/* End Mobile Device */}
|
||||
{/* Browser Device */}
|
||||
<figure className="ms-auto me-20 relative z-[1] max-w-full w-[50rem] h-auto rounded-b-lg shadow-shadow-[0_2.75rem_3.5rem_-2rem_rgb(0_0_0_/_20%),_0_0_5rem_-2rem_rgb(0_0_0_/_15%)]">
|
||||
<div className="relative flex items-center max-w-[50rem] bg-gray-800 border-b border-gray-700 rounded-t-lg py-2 px-24">
|
||||
<div className="flex space-x-1 absolute top-2/4 start-4 -translate-y-1">
|
||||
<span className="size-2 bg-gray-700 rounded-full" />
|
||||
<span className="size-2 bg-gray-700 rounded-full" />
|
||||
<span className="size-2 bg-gray-700 rounded-full" />
|
||||
</div>
|
||||
<div className="flex justify-center items-center size-full bg-gray-700 text-[.25rem] text-gray-200 rounded-sm sm:text-[.5rem]">
|
||||
www.preline.co
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-800 rounded-b-lg">
|
||||
<img
|
||||
className="max-w-full h-auto rounded-b-lg"
|
||||
src="../assets/img/mockups/img10.jpg"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
</figure>
|
||||
{/* End Browser Device */}
|
||||
</div>
|
||||
{/* End Devices */}
|
||||
</div>
|
||||
<div
|
||||
id="tabs-with-card-3"
|
||||
className="hidden"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tabs-with-card-item-3"
|
||||
>
|
||||
{/* Devices */}
|
||||
<div className="max-w-[1140px] lg:pb-32 relative">
|
||||
{/* Mobile Device */}
|
||||
<figure className="hidden absolute bottom-0 start-0 z-[2] max-w-full w-60 h-auto mb-20 ms-20 lg:block">
|
||||
<div className="p-1.5 bg-gray-100 rounded-3xl shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(45_55_75_/_20%),_0_2rem_4rem_-2rem_rgb(45_55_75_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(45_55_75_/_20%)] dark:bg-gray-700 dark:shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(0_0_0_/_20%),_0_2rem_4rem_-2rem_rgb(0_0_0_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(0_0_0_/_20%)]">
|
||||
<img
|
||||
className="max-w-full h-auto rounded-[1.25rem]"
|
||||
src="../assets/img/mockups/img13.jpg"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
</figure>
|
||||
{/* End Mobile Device */}
|
||||
{/* Browser Device */}
|
||||
<figure className="ms-auto me-20 relative z-[1] max-w-full w-[50rem] h-auto rounded-b-lg shadow-[0_2.75rem_3.5rem_-2rem_rgb(45_55_75_/_20%),_0_0_5rem_-2rem_rgb(45_55_75_/_15%)] dark:shadow-[0_2.75rem_3.5rem_-2rem_rgb(0_0_0_/_20%),_0_0_5rem_-2rem_rgb(0_0_0_/_15%)]">
|
||||
<div className="relative flex items-center max-w-[50rem] bg-white border-b border-gray-100 rounded-t-lg py-2 px-24 dark:bg-gray-800 dark:border-gray-700">
|
||||
<div className="flex space-x-1 absolute top-2/4 start-4 -translate-y-1">
|
||||
<span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
|
||||
<span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
|
||||
<span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
|
||||
</div>
|
||||
<div className="flex justify-center items-center size-full bg-gray-200 text-[.25rem] text-gray-800 rounded-sm sm:text-[.5rem] dark:bg-gray-700 dark:text-gray-200">
|
||||
www.preline.co
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-800 rounded-b-lg">
|
||||
<img
|
||||
className="max-w-full h-auto rounded-b-lg"
|
||||
src="../assets/img/mockups/img12.jpg"
|
||||
alt="Image Description"
|
||||
/>
|
||||
</div>
|
||||
</figure>
|
||||
{/* End Browser Device */}
|
||||
</div>
|
||||
{/* End Devices */}
|
||||
</div>
|
||||
</div>
|
||||
{/* End Tab Content */}
|
||||
</div>
|
||||
{/* End Features */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default VerticalTabsWithOverlappingBackground;
|
||||
|
|
@ -1,258 +0,0 @@
|
|||
import React from "react";
|
||||
import iconClipboard from "@/images/icon-clipboard.svg";
|
||||
import iconClock from "@/images/icon-clock.svg";
|
||||
import iconLink from "@/images/icon-link.svg";
|
||||
import iconUsDollar from "@/images/icon-us-dollar.svg";
|
||||
import iconUser from "@/images/icon-user.svg";
|
||||
import iconVector from "@/images/icon-vector.svg";
|
||||
import Image from "next/image";
|
||||
|
||||
const FeaturesBlocks = () => {
|
||||
return (
|
||||
<section>
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div className="py-8 md:py-10">
|
||||
{/* Section header */}
|
||||
<div className="max-w-3xl mx-auto text-center pb-6 md:pb-8">
|
||||
<h2 className="mb-4 text-black dark:text-white">
|
||||
Say Goodbye To Manual Data Entry With Sign365.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Items */}
|
||||
<div
|
||||
className="max-w-sm mx-auto grid gap-8 md:grid-cols-2 lg:grid-cols-3 lg:gap-16 items-start md:max-w-2xl lg:max-w-none"
|
||||
data-aos-id-blocks
|
||||
>
|
||||
{/* 1st item */}
|
||||
<div
|
||||
className="relative flex flex-col items-center"
|
||||
data-aos="fade-up"
|
||||
data-aos-anchor="[data-aos-id-blocks]"
|
||||
>
|
||||
<div className="relative flex items-center justify-center mb-4">
|
||||
<svg
|
||||
className="w-16 h-16"
|
||||
viewBox="0 0 64 64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<rect
|
||||
className="fill-current text-pink-550"
|
||||
width="64"
|
||||
height="64"
|
||||
rx="32"
|
||||
/>
|
||||
</svg>
|
||||
<Image
|
||||
className="absolute w-[50%]"
|
||||
src={iconClipboard}
|
||||
alt="Enter Data Once"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-2xl mb-2 text-center text-black dark:text-white">
|
||||
Enter Data Once
|
||||
</h3>
|
||||
<p className="text-lg text-black dark:text-gray-200 text-center">
|
||||
Say goodbye to manual data entry with Sign365's offline
|
||||
forms. Enter data once and let our app do the rest. We'll
|
||||
send the information to your business systems, saving you time
|
||||
and effort.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 2nd item */}
|
||||
<div
|
||||
className="relative flex flex-col items-center"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="200"
|
||||
data-aos-anchor="[data-aos-id-blocks]"
|
||||
>
|
||||
<div className="relative flex items-center justify-center mb-4">
|
||||
<svg
|
||||
className="w-16 h-16"
|
||||
viewBox="0 0 64 64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<rect
|
||||
className="fill-current text-pink-550"
|
||||
width="64"
|
||||
height="64"
|
||||
rx="32"
|
||||
/>
|
||||
</svg>
|
||||
<Image
|
||||
className="absolute w-[50%]"
|
||||
src={iconLink}
|
||||
alt="Connect To Over 1000 Apps"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-xl text-black mb-2 text-center dark:text-white">
|
||||
Connect To Over 1000 Apps
|
||||
</h3>
|
||||
<p className="text-lg text-black dark:text-gray-200 text-center">
|
||||
Sign365 can submit information to over 1000 apps. Whether you
|
||||
use Salesforce, Hubspot, or any other business app, Sign365 has
|
||||
got you covered.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 3rd item */}
|
||||
<div
|
||||
className="relative flex flex-col items-center"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="400"
|
||||
data-aos-anchor="[data-aos-id-blocks]"
|
||||
>
|
||||
<div className="relative flex items-center justify-center mb-4">
|
||||
<svg
|
||||
className="w-16 h-16"
|
||||
viewBox="0 0 64 64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<rect
|
||||
className="fill-current text-pink-550"
|
||||
width="64"
|
||||
height="64"
|
||||
rx="32"
|
||||
/>
|
||||
</svg>
|
||||
<Image
|
||||
className="absolute w-[40%]"
|
||||
src={iconClock}
|
||||
alt="Start Time Saving"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-2xl mb-2 text-center text-black dark:text-white">
|
||||
Start Time Saving
|
||||
</h3>
|
||||
<p className="text-lg text-black dark:text-gray-200 text-center">
|
||||
With Sign365, you'll save valuable time that you can then
|
||||
invest in other aspects of your business. Our offline forms
|
||||
collect and send your data, so you can complete more tasks
|
||||
faster.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 4th item */}
|
||||
<div
|
||||
className="relative flex flex-col items-center"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="600"
|
||||
data-aos-anchor="[data-aos-id-blocks]"
|
||||
>
|
||||
<div className="relative flex items-center justify-center mb-4">
|
||||
<svg
|
||||
className="w-16 h-16"
|
||||
viewBox="0 0 64 64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<rect
|
||||
className="fill-current text-pink-550"
|
||||
width="64"
|
||||
height="64"
|
||||
rx="32"
|
||||
/>
|
||||
</svg>
|
||||
<Image
|
||||
className="absolute w-[40%]"
|
||||
src={iconUsDollar}
|
||||
alt="Start Saving Money"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-2xl mb-2 text-center text-black dark:text-white">
|
||||
Start Saving Money
|
||||
</h3>
|
||||
<p className="text-lg text-black dark:text-gray-200 text-center">
|
||||
Sign365's offline forms can help you save money on staffing
|
||||
and data entry costs. By automating your data collection, you
|
||||
can reduce labor costs and increase profits.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 5th item */}
|
||||
<div
|
||||
className="relative flex flex-col items-center"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="800"
|
||||
data-aos-anchor="[data-aos-id-blocks]"
|
||||
>
|
||||
<div className="relative flex items-center justify-center mb-4">
|
||||
<svg
|
||||
className="w-16 h-16"
|
||||
viewBox="0 0 64 64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<rect
|
||||
className="fill-current text-pink-550"
|
||||
width="64"
|
||||
height="64"
|
||||
rx="32"
|
||||
/>
|
||||
</svg>
|
||||
<Image
|
||||
className="absolute w-[40%]"
|
||||
src={iconVector}
|
||||
alt="Your Forms Your Way"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-2xl mb-2 text-center text-black dark:text-white">
|
||||
Your Forms Your Way
|
||||
</h3>
|
||||
<p className="text-lg text-black dark:text-gray-200 text-center">
|
||||
With Sign365, you have full control over your offline forms.
|
||||
Create forms that for your business needs and customise them to
|
||||
match your brand. Get started with Sign365 today and start
|
||||
collecting data the way you want.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 6th item */}
|
||||
<div
|
||||
className="relative flex flex-col items-center"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="1000"
|
||||
data-aos-anchor="[data-aos-id-blocks]"
|
||||
>
|
||||
<div className="relative flex items-center justify-center mb-4">
|
||||
<svg
|
||||
className="w-16 h-16"
|
||||
viewBox="0 0 64 64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<rect
|
||||
className="fill-current text-pink-550"
|
||||
width="64"
|
||||
height="64"
|
||||
rx="32"
|
||||
/>
|
||||
</svg>
|
||||
<Image
|
||||
className="absolute w-[40%]"
|
||||
src={iconUser}
|
||||
alt="Collect Customer Info"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-2xl mb-2 text-center text-black dark:text-white">
|
||||
Collect Customer Info
|
||||
</h3>
|
||||
<p className="text-lg text-black dark:text-gray-200 text-center">
|
||||
Sign365's offline digital forms capture accurate and secure
|
||||
customer information. You can customise your forms to send
|
||||
information where you need it. Ensuring you have the insights to
|
||||
make informed business decisions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeaturesBlocks;
|
||||
|
|
@ -47,7 +47,7 @@ const WaitingListWithImageHero = () => {
|
|||
<div className="h-screen w-full bg-clip flex items-center justify-center">
|
||||
<div className="text-center py-8 px-4 sm:px-6 lg:px-8 bg-base-100 rounded-xl shadow-lg">
|
||||
<h1 className=" text-3xl sm:text-6xl text-base-content font-heading whitespace-nowrap flex flex-row justify-center pb-6 gap-x-3">
|
||||
<Logo />
|
||||
<Logo href="/" />
|
||||
{title}
|
||||
</h1>
|
||||
{typeof window !== "undefined" &&
|
||||
|
|
|
|||
|
|
@ -0,0 +1,116 @@
|
|||
import React from "react";
|
||||
|
||||
function SolidBackgrondIcon() {
|
||||
return (
|
||||
<>
|
||||
{/* Icon Blocks */}
|
||||
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 items-center gap-2">
|
||||
{/* Icon Block */}
|
||||
<a
|
||||
className="group flex flex-col justify-center bg-base-300 rounded-xl p-4 md:p-7 "
|
||||
href="#"
|
||||
>
|
||||
<div className="flex justify-center items-center size-12 bg-primary rounded-xl">
|
||||
<svg
|
||||
className="flex-shrink-0 size-6 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect width={10} height={14} x={3} y={8} rx={2} />
|
||||
<path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4" />
|
||||
<path d="M8 18h.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
|
||||
Stripe Payments
|
||||
</h3>
|
||||
<p className="mt-1 text-base-content ">
|
||||
We have built stripe payments for 1 off and reoccuring payments
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/* End Icon Block */}
|
||||
{/* Icon Block */}
|
||||
<a
|
||||
className="group flex flex-col justify-center bg-base-300 rounded-xl p-4 md:p-7 "
|
||||
href="#"
|
||||
>
|
||||
<div className="flex justify-center items-center size-12 bg-primary rounded-xl">
|
||||
<svg
|
||||
className="flex-shrink-0 size-6 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M20 7h-9" />
|
||||
<path d="M14 17H5" />
|
||||
<circle cx={17} cy={17} r={3} />
|
||||
<circle cx={7} cy={7} r={3} />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
|
||||
Theming
|
||||
</h3>
|
||||
<p className="mt-1 text-base-content ">
|
||||
All our components include intuative theming with a js utility
|
||||
class that uses your themes colors programmatically
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/* End Icon Block */}
|
||||
{/* Icon Block */}
|
||||
<a
|
||||
className="group flex flex-col justify-center bg-base-300 rounded-xl p-4 md:p-7 "
|
||||
href="#"
|
||||
>
|
||||
<div className="flex justify-center items-center size-12 bg-primary rounded-xl">
|
||||
<svg
|
||||
className="flex-shrink-0 size-6 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
|
||||
Documentation
|
||||
</h3>
|
||||
<p className="mt-1 text-base-content ">
|
||||
Every component and plugin is well documented
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/* End Icon Block */}
|
||||
</div>
|
||||
</div>
|
||||
{/* End Icon Blocks */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default SolidBackgrondIcon;
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
function LoadingModal() {
|
||||
return (
|
||||
<div className="flex flex-col items-center pl-5 pr-5 text-center md:text-xl">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-primary"
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||
fill="currentFill"
|
||||
/>
|
||||
</svg>
|
||||
<p className="m-1">Loading...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LoadingModal;
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,16 +0,0 @@
|
|||
import React from "react";
|
||||
import CheckBox from "@/images/check-box.svg";
|
||||
import Image from "next/image";
|
||||
|
||||
function SuccessModal() {
|
||||
return (
|
||||
<div className="flex flex-col items-center pl-5 pr-5 text-center md:text-xl">
|
||||
<Image className=" w-[90px] md:w-[130px] p-5" src={CheckBox} alt={""} />
|
||||
<p>Thanks for Signing Up!</p>
|
||||
<p>We Hope You Are Excited To See</p>
|
||||
<p>Sign365 In Action</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SuccessModal;
|
||||
|
|
@ -87,7 +87,7 @@ const config: Config = {
|
|||
dark: {
|
||||
primary: "#FD5469",
|
||||
"primary-content": "#fff",
|
||||
secondary: "#002eff",
|
||||
secondary: "#FD40FF",
|
||||
"secondary-content": "#fff",
|
||||
accent: "#006cff",
|
||||
neutral: "#060206",
|
||||
|
|
|
|||
Loading…
Reference in New Issue