v1.0
This commit is contained in:
303
src/ui/page/page-Teach.tsx
Normal file
303
src/ui/page/page-Teach.tsx
Normal file
@@ -0,0 +1,303 @@
|
||||
import Image from "next/image";
|
||||
import IconHowItWorks from "/public/icons/IconHowItWorks.svg";
|
||||
export default function PageTeach() {
|
||||
return (
|
||||
<section
|
||||
id="how-it-works"
|
||||
className="content-visibility-auto scroll-m-20 w-full mt-24 space-y-8"
|
||||
>
|
||||
<div className="space-y-4 mb-14">
|
||||
<div className="mx-auto text-green-200 border border-[#c8eed6]/25 shadow-lg shadow-[#4add80]/10 w-fit font-medium text-sm rounded-full bg-gradient-to-b from-[#737b88]/20 to-[#191b1e]/20 p-[1.5px]">
|
||||
<div className="bg-[#15171a]/50 flex items-center space-x-1 py-1 px-2 rounded-full ">
|
||||
<Image
|
||||
alt="typeframes.ai logo"
|
||||
fetchPriority="high"
|
||||
width={17}
|
||||
height={16}
|
||||
decoding="async"
|
||||
style={{ color: "transparent" }}
|
||||
src={IconHowItWorks}
|
||||
/>
|
||||
<span>How it works</span>
|
||||
</div>
|
||||
</div>
|
||||
<h2 className='text-white font-["Euclid_Circular_A"] text-3xl lg:text-4xl xl:text-5xl text-center w-11/12 max-w-3xl text-pretty mx-auto'>
|
||||
Creating TikTok content has never been that easy
|
||||
</h2>
|
||||
</div>
|
||||
<div className="gradient-bg rounded-lg px-4 sm:px-6 md:px-8 pb-8 border border-[#252629] text-neutral-dark">
|
||||
<div className="rounded-lg rounded-t-none border border-t-0 border-[#353e3b] divide-y lg:divide-y-0 lg:divide-x divide-[#353e3b] grid lg:grid-cols-2">
|
||||
<div className="p-4 sm:p-6 lg:p-8 pt-0 lg:pb-14 my-auto">
|
||||
<div className="my-6 md:mb-8 overflow-hidden relative flex items-center justify-center size-12 rounded-xl border border-[#353e3b]">
|
||||
<span className='font-bold text-2xl font-["Euclid_Circular_A"]'>
|
||||
1
|
||||
</span>
|
||||
<span className='absolute blur-xl bg-white font-bold text-2xl font-["Euclid_Circular_A"]'>
|
||||
1
|
||||
</span>
|
||||
</div>
|
||||
<h4 className='text-white font-medium text-2xl font-["Euclid_Circular_A"]'>
|
||||
Find what goes viral
|
||||
</h4>
|
||||
<p className="mt-4 mb-8 text-balance">
|
||||
AI will find the best content for you that you can
|
||||
easily repurpose into TikTok videos.
|
||||
</p>
|
||||
<ul className="*:flex *:items-start *:space-x-1.5 space-y-4 lg:space-y-3 *:text-[#eafff2] *:text-sm">
|
||||
<li>
|
||||
<div className="min-w-5 min-h-5">
|
||||
<Image
|
||||
alt="typeframes.ai logo"
|
||||
fetchPriority="high"
|
||||
width={20}
|
||||
height={20}
|
||||
decoding="async"
|
||||
style={{ color: "transparent" }}
|
||||
src={IconHowItWorks}
|
||||
/>
|
||||
</div>
|
||||
<span>Search with complex queries</span>
|
||||
</li>
|
||||
<li>
|
||||
<div className="min-w-5 min-h-5">
|
||||
<Image
|
||||
alt="typeframes.ai logo"
|
||||
fetchPriority="high"
|
||||
width={20}
|
||||
height={20}
|
||||
decoding="async"
|
||||
style={{ color: "transparent" }}
|
||||
src={IconHowItWorks}
|
||||
/>
|
||||
</div>
|
||||
<span>
|
||||
Get full video transcript to fuel your next
|
||||
script
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<div className="min-w-5 min-h-5">
|
||||
<Image
|
||||
alt="typeframes.ai logo"
|
||||
fetchPriority="high"
|
||||
width={20}
|
||||
height={20}
|
||||
decoding="async"
|
||||
style={{ color: "transparent" }}
|
||||
src={IconHowItWorks}
|
||||
/>
|
||||
</div>
|
||||
<span>Use advanced search</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="relative pl-4 sm:pl-6 lg:pl-8 pt-6 lg:pt-8">
|
||||
<div className="relative h-64 sm:h-96 lg:h-full w-full">
|
||||
{/* <Image
|
||||
alt="from text to video in typeframes.ai"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
layout="fill"
|
||||
className="ml-auto aspect-video overflow-hidden rounded-tl-xl rounded-br-xl object-cover object-top"
|
||||
sizes="100vw"
|
||||
srcSet="/images/tth_search.jpg"
|
||||
/> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="gradient-bg rounded-lg px-4 sm:px-6 md:px-8 pb-8 border border-[#252629] text-neutral-dark">
|
||||
<div className="rounded-lg rounded-t-none border border-t-0 border-[#353e3b] divide-y lg:divide-y-0 lg:divide-x divide-[#353e3b] grid lg:grid-cols-2">
|
||||
<div className="p-4 sm:p-6 lg:p-8 pt-0 lg:pb-14 my-auto lg:order-last lg:border-l border-[#353e3b]">
|
||||
<div className="my-6 md:mb-8 overflow-hidden relative flex items-center justify-center size-12 rounded-xl border border-[#353e3b]">
|
||||
<span className='font-bold text-2xl font-["Euclid_Circular_A"]'>
|
||||
2
|
||||
</span>
|
||||
<span className='absolute blur-xl bg-white font-bold text-2xl font-["Euclid_Circular_A"]'>
|
||||
1
|
||||
</span>
|
||||
</div>
|
||||
<h4 className='text-white font-medium text-2xl font-["Euclid_Circular_A"]'>
|
||||
Generate scripts in seconds
|
||||
</h4>
|
||||
<p className="mt-4 mb-8 text-balance">
|
||||
Our AI understands what makes videos go viral and
|
||||
use the same proven methods to write scripts for
|
||||
you.
|
||||
</p>
|
||||
<ul className="*:flex *:items-start *:space-x-1.5 space-y-4 lg:space-y-3 *:text-[#eafff2] *:text-sm">
|
||||
<li>
|
||||
<div className="min-w-5 min-h-5">
|
||||
<Image
|
||||
alt="typeframes.ai logo"
|
||||
fetchPriority="high"
|
||||
width={20}
|
||||
height={20}
|
||||
decoding="async"
|
||||
style={{ color: "transparent" }}
|
||||
src={IconHowItWorks}
|
||||
/>
|
||||
</div>
|
||||
<span>Ask it what you want to talk about</span>
|
||||
</li>
|
||||
<li>
|
||||
<div className="min-w-5 min-h-5">
|
||||
<Image
|
||||
alt="typeframes.ai logo"
|
||||
fetchPriority="high"
|
||||
width={20}
|
||||
height={20}
|
||||
decoding="async"
|
||||
style={{ color: "transparent" }}
|
||||
src={IconHowItWorks}
|
||||
/>
|
||||
</div>
|
||||
<span>
|
||||
The AI will find relevant content to get
|
||||
inspired by
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<div className="min-w-5 min-h-5">
|
||||
<Image
|
||||
alt="typeframes.ai logo"
|
||||
fetchPriority="high"
|
||||
width={20}
|
||||
height={20}
|
||||
decoding="async"
|
||||
style={{ color: "transparent" }}
|
||||
src={IconHowItWorks}
|
||||
/>
|
||||
</div>
|
||||
<span>
|
||||
Drop any link and it will be automatically
|
||||
parsed and formatted for a video
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="relative pr-4 sm:pr-6 lg:pr-8 pt-6 lg:pt-8">
|
||||
<div className="relative h-64 sm:h-96 lg:h-full w-full">
|
||||
{/* <Image
|
||||
alt="from text to video in typeframes.ai"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
layout="fill"
|
||||
className="ml-auto aspect-video overflow-hidden rounded-tr-xl rounded-bl-xl object-cover object-top"
|
||||
sizes="100vw"
|
||||
srcSet="/images/tth_script.jpg"
|
||||
/> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="gradient-bg rounded-lg px-4 sm:px-6 md:px-8 pb-8 border border-[#252629] text-neutral-dark">
|
||||
<div className="rounded-lg rounded-t-none border border-t-0 border-[#353e3b] divide-y lg:divide-y-0 lg:divide-x divide-[#353e3b] grid lg:grid-cols-2">
|
||||
<div className="p-4 sm:p-6 lg:p-8 pt-0 lg:pb-14 my-auto">
|
||||
<div className="my-6 md:my-8 overflow-hidden relative flex items-center justify-center size-12 rounded-xl border border-[#353e3b]">
|
||||
<span className='font-bold text-2xl font-["Euclid_Circular_A"]'>
|
||||
3
|
||||
</span>
|
||||
<span className='absolute blur-xl bg-white font-bold text-2xl font-["Euclid_Circular_A"]'>
|
||||
1
|
||||
</span>
|
||||
</div>
|
||||
<h4 className='text-white font-medium text-2xl font-["Euclid_Circular_A"]'>
|
||||
Viral-First Video Creation
|
||||
</h4>
|
||||
<p className="mt-4 mb-8">
|
||||
Create perfect videos for social media, grab
|
||||
attention, and grow your business.
|
||||
</p>
|
||||
<ul className="*:flex *:items-start *:space-x-1.5 space-y-4 lg:space-y-3 *:text-[#eafff2] *:text-sm">
|
||||
<li>
|
||||
<div className="min-w-5 min-h-5">
|
||||
<Image
|
||||
alt="typeframes.ai logo"
|
||||
fetchPriority="high"
|
||||
width={20}
|
||||
height={20}
|
||||
decoding="async"
|
||||
style={{ color: "transparent" }}
|
||||
src={IconHowItWorks}
|
||||
/>
|
||||
</div>
|
||||
<span>
|
||||
Create vertical videos from any content,
|
||||
ready to be published
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<div className="min-w-5 min-h-5">
|
||||
<Image
|
||||
alt="typeframes.ai logo"
|
||||
fetchPriority="high"
|
||||
width={20}
|
||||
height={20}
|
||||
decoding="async"
|
||||
style={{ color: "transparent" }}
|
||||
src={IconHowItWorks}
|
||||
/>
|
||||
</div>
|
||||
<span>
|
||||
Generate voice, add animations and create
|
||||
super engaging content
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<div className="min-w-5 min-h-5">
|
||||
<Image
|
||||
alt="typeframes.ai logo"
|
||||
fetchPriority="high"
|
||||
width={20}
|
||||
height={20}
|
||||
decoding="async"
|
||||
style={{ color: "transparent" }}
|
||||
src={IconHowItWorks}
|
||||
/>
|
||||
</div>
|
||||
<span>
|
||||
Create automations, typeframes.ai will watch
|
||||
your blog, a subreddit, Twitter or Linkedin
|
||||
account and create content automatically
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="relative pl-4 sm:pl-6 lg:pl-8 pt-6 lg:pt-8">
|
||||
<div className="relative h-64 sm:h-96 lg:h-full w-full">
|
||||
{/* <Image
|
||||
alt="from text to video in typeframes.ai"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
layout="fill"
|
||||
className="ml-auto aspect-video overflow-hidden rounded-tl-xl rounded-br-xl object-cover object-top"
|
||||
sizes="100vw"
|
||||
srcSet="/images/tth_editor.jpg"
|
||||
/> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx-auto flex flex-col items-center space-y-4 py-8">
|
||||
{/* <Image
|
||||
alt="typeframes.ai logo"
|
||||
loading="lazy"
|
||||
width={154}
|
||||
height={30}
|
||||
decoding="async"
|
||||
srcSet="/images/typeframes_logo_rec_light.png 1x, /images/typeframes_logo_rec_light.png 2x"
|
||||
src="/images/typeframes_logo_rec_light.png"
|
||||
/> */}
|
||||
<p className="text-neutral-dark">
|
||||
Your shortcut to effortless video story telling.
|
||||
</p>
|
||||
<div className="btn-tf-primary-container mx-auto lg:mx-0">
|
||||
<a className="btn-tf btn-tf-primary" href="/create">
|
||||
Create Videos Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
119
src/ui/page/page-expect.tsx
Normal file
119
src/ui/page/page-expect.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export default function PageExpect() {
|
||||
const t = useTranslations("pageExpect");
|
||||
return (
|
||||
<div className="content-visibility-auto text-neutral-dark rounded-lg px-4 sm:px-6 md:px-8 border border-[#252629] w-full gradient-bg mt-24">
|
||||
<div className="border-x border-[#353e3b]">
|
||||
<div className="space-y-12 overflow-hidden border-x border-b rounded-b-xl border-[#353e3b] py-12 lg:py-24">
|
||||
<div className="space-y-4">
|
||||
<div className="mx-auto text-green-200 border border-[#c8eed6]/25 shadow-lg shadow-[#4add80]/10 w-fit font-medium text-sm rounded-full bg-gradient-to-b from-[#737b88]/20 to-[#191b1e]/20 p-[1.5px]">
|
||||
<div className="bg-[#15171a]/50 flex items-center space-x-1 py-1 px-2 rounded-full">
|
||||
{/* <IconWhatToExpect
|
||||
width={17}
|
||||
height={16}
|
||||
/> */}
|
||||
<span>{t("whatToExpect")}</span>
|
||||
</div>
|
||||
</div>
|
||||
<h2 className='text-white font-["Euclid_Circular_A"] text-3xl lg:text-4xl xl:text-5xl text-center w-11/12 max-w-3xl text-pretty mx-auto'>
|
||||
{t("heading")}
|
||||
</h2>
|
||||
<p className="text-center w-[90%] max-w-xl mx-auto text-balance">
|
||||
{t("description")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center relative">
|
||||
<div className="bg-white outline w-1/2 md:max-w-[300px] absolute hidden sm:block sm:-left-1/4 md:right-1/4 mx-auto outline-[6px] outline-[#636363]/25 rounded-xl object-cover">
|
||||
<video
|
||||
className="content-visibility-auto bg-white shadow-2xl rounded-[13px] border border-base-200"
|
||||
playsInline
|
||||
loop
|
||||
muted
|
||||
autoPlay
|
||||
src="./video/create-tiktok-video/en/demo_image.webm"
|
||||
preload="auto"
|
||||
></video>
|
||||
</div>
|
||||
<div className="bg-white outline w-5/6 md:w-3/4 md:max-w-[450px] relative z-10 mx-auto outline-[6px] outline-[#636363]/25 rounded-xl object-cover">
|
||||
<video
|
||||
className="content-visibility-auto bg-white shadow-2xl rounded-[13px] border border-base-200"
|
||||
playsInline
|
||||
loop
|
||||
muted
|
||||
autoPlay
|
||||
src="./video/\music-to-video/cn/demo_image.webm"
|
||||
preload="auto"
|
||||
></video>
|
||||
</div>
|
||||
<div className="bg-white outline w-1/2 md:max-w-[300px] absolute hidden sm:block sm:-right-1/4 md:left-1/4 -z-0 mx-auto outline-[6px] outline-[#636363]/25 rounded-xl object-cover">
|
||||
<video
|
||||
className="content-visibility-auto bg-white shadow-2xl rounded-[13px] border border-base-200"
|
||||
playsInline
|
||||
loop
|
||||
muted
|
||||
autoPlay
|
||||
src="https://cdn.tfrv.xyz/renders/gjcIDd3JXNbmRF7DcHp7/HH0T7EVxK75TtVr4cYiM-1721573984672.mp4"
|
||||
preload="auto"
|
||||
></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="diagonal-pattern border-[#353e3b]">
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 border border-[#353e3b] rounded-xl w-[90%] lg:w-[80%] mx-auto divide-y md:divide-x lg:divide-y-0 divide-[#353e3b]">
|
||||
<div className="bg-[#1f2425] px-5 py-7 rounded-t-xl md:rounded-l-xl md:rounded-bl-none lg:rounded-bl-xl md:rounded-tr-none">
|
||||
<div className="relative w-full ">
|
||||
{/* <Image alt="easy to use" loading="lazy" width={500} height={300} decoding="async" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" style={{ color: 'transparent', width: '100%', height: 'auto' }} srcSet="/images/easy-to-use.png 1x, /images/easy-to-use.png 2x" src="/images/easy-to-use.png" /> */}
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<h5 className="text-white font-medium">
|
||||
{t("easyToUse.title")}
|
||||
</h5>
|
||||
<p className="text-sm">
|
||||
{t("easyToUse.description")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[#1f2425] px-5 py-7 rounded-none md:rounded-tr-xl lg:rounded-tr-none">
|
||||
<div className="relative w-full ">
|
||||
{/* <Image alt="customisable templates" loading="lazy" width={500} height={300} decoding="async" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" style={{ color: 'transparent', width: '100%', height: 'auto' }} srcSet="/images/customisable-templates.png 1x, /images/customisable-templates.png 2x" src="/images/customisable-templates.png" /> */}
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<h5 className="text-white font-medium">
|
||||
{t("customisableTemplates.title")}
|
||||
</h5>
|
||||
<p className="text-sm">
|
||||
{t("customisableTemplates.description")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[#1f2425] px-5 py-7 lg:rounded-r-xl md:rounded-tr-none rounded-b-xl lg:rounded-bl-none md:col-span-2 lg:col-span-1 md:grid md:grid-cols-2 md:place-items-center lg:block">
|
||||
<div className="relative w-full ">
|
||||
{/* <Image alt="high quality exports" loading="lazy" width={500} height={300} decoding="async" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" style={{ color: 'transparent', width: '100%', height: 'auto' }} srcSet="/images/high-quality-exports.png 1x, /images/high-quality-exports.png 2x" src="/images/high-quality-exports.png" /> */}
|
||||
</div>
|
||||
<div className="space-y-3 md:pl-6 lg:pl-0">
|
||||
<h5 className="text-white font-medium">
|
||||
{t("highQualityExports.title")}
|
||||
</h5>
|
||||
<p className="text-sm">
|
||||
{t("highQualityExports.description")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-x border-t rounded-t-xl border-[#353e3b] mx-auto flex flex-col items-center space-y-5 py-12 lg:py-24">
|
||||
{/* <Image alt="typeframes.ai logo" loading="lazy" width={154} height={30} decoding="async" srcSet="/images/typeframes_logo_rec_light.png 1x, /images/typeframes_logo_rec_light.png 2x" src="/images/typeframes_logo_rec_light.png" /> */}
|
||||
<p className="text-neutral-dark max-w-lg w-[95%] mx-auto text-center text-pretty">
|
||||
{t("aiPowered")}
|
||||
</p>
|
||||
<div className="btn-tf-primary-container mx-auto lg:mx-0">
|
||||
<a className="btn-tf btn-tf-primary" href="/create">
|
||||
{t("createVideosNow")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
449
src/ui/page/page-faqs.tsx
Normal file
449
src/ui/page/page-faqs.tsx
Normal file
@@ -0,0 +1,449 @@
|
||||
export default function PageFaqs() {
|
||||
return (
|
||||
<article className="content-visibility-auto rounded-lg px-4 sm:px-6 md:px-8 border border-[#252629] w-full bg-[#15171a]">
|
||||
<div className="w-full relative border-x border-[#353e3b]">
|
||||
<div className="absolute z-0 w-full h-full grid lg:grid-cols-2 gap-8 items-center">
|
||||
<section className="-z-0 absolute w-full h-full col-span-2 grid grid-cols-2 place-content-between">
|
||||
<div className="bg-[#4BDE81] rounded-full w-1 h-1 my-8 outline outline-8 outline-[#15171A] -mx-[2.5px] "></div>
|
||||
<div className="bg-[#4BDE81] rounded-full w-1 h-1 my-8 outline outline-8 outline-[#15171A] -mx-[2px] place-self-end"></div>
|
||||
<div className="bg-[#4BDE81] rounded-full w-1 h-1 my-8 outline outline-8 outline-[#15171A] -mx-[2.5px] "></div>
|
||||
<div className="bg-[#4BDE81] rounded-full w-1 h-1 my-8 outline outline-8 outline-[#15171A] -mx-[2px] place-self-end"></div>
|
||||
</section>
|
||||
</div>
|
||||
<div className="relative z-10 w-[95%] lg:w-2/3 mx-auto py-12 lg:py-24">
|
||||
<div className="space-y-4 mb-14">
|
||||
<div className="mx-auto text-green-200 border border-[#c8eed6]/25 shadow-lg shadow-[#4add80]/10 w-fit font-medium text-sm rounded-full bg-gradient-to-b from-[#737b88]/20 to-[#191b1e]/20 p-[1.5px]">
|
||||
<div className="bg-[#15171a]/50 flex items-center space-x-1 py-1 px-2 rounded-full">
|
||||
<svg
|
||||
width="17"
|
||||
height="16"
|
||||
viewBox="0 0 17 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.834 12.2868H9.16732L6.20064 14.2601C5.76064 14.5535 5.16732 14.2402 5.16732 13.7068V12.2868C3.16732 12.2868 1.83398 10.9535 1.83398 8.95349V4.95345C1.83398 2.95345 3.16732 1.62012 5.16732 1.62012H11.834C13.834 1.62012 15.1673 2.95345 15.1673 4.95345V8.95349C15.1673 10.9535 13.834 12.2868 11.834 12.2868Z"
|
||||
stroke="#BEFFD6"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M8.49923 7.57324V7.43327C8.49923 6.97993 8.77924 6.73992 9.05924 6.54659C9.33258 6.35992 9.60588 6.11993 9.60588 5.67993C9.60588 5.0666 9.11256 4.57324 8.49923 4.57324C7.88589 4.57324 7.39258 5.0666 7.39258 5.67993"
|
||||
stroke="#BEFFD6"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M8.49635 9.16634H8.50235"
|
||||
stroke="#BEFFD6"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
<span className="">FAQs</span>
|
||||
</div>
|
||||
</div>
|
||||
<h2 className='text-white font-["Euclid_Circular_A"] text-3xl lg:text-4xl xl:text-5xl text-center w-11/12 max-w-3xl text-pretty mx-auto'>
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="bg-[#1c1e21] rounded-xl flex flex-col justify-center px-6 md:pt-10 space-y-2 transition-all py-4 lg:py-3">
|
||||
<div className="flex items-start justify-between lg:pt-2 ">
|
||||
<h5 className="faq-question text-white font-medium hover:cursor-pointer my-auto">
|
||||
How can typeframes.ai transform my content
|
||||
creation game?
|
||||
</h5>
|
||||
<div className="relative flex items-center justify-center h-fit">
|
||||
<span className="cursor-pointer text-xl text-green-400 transition-all rotate-45">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 256 256"
|
||||
height="18"
|
||||
width="18"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span className="absolute blur-md bg-green-300/50 font-bold text-xs top-1/2 pointer-event-none h-2 w-2"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-neutral-dark text-sm transition-all duration-200 max-h-[20rem] whitespace-pre-line">
|
||||
typeframes.ai is your secret weapon for
|
||||
creating irresistible vertical videos in a
|
||||
snap. Our AI-powered platform analyzes
|
||||
millions of viral videos to craft scripts
|
||||
and generate stunning visuals that are
|
||||
optimized for maximum impact. Whether you're
|
||||
creating product demos, explainer videos, or
|
||||
social media ads, typeframes.ai helps you
|
||||
produce content that consistently captivates
|
||||
your audience.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[#1c1e21] rounded-xl flex flex-col justify-center px-6 md:pt-10 space-y-2 transition-all py-4 lg:py-3">
|
||||
<div className="flex items-start justify-between lg:pt-2 ">
|
||||
<h5 className="faq-question text-white font-medium hover:cursor-pointer my-auto">
|
||||
I'm not a video editing pro. Can I still use
|
||||
typeframes.ai?
|
||||
</h5>
|
||||
<div className="relative flex items-center justify-center h-fit">
|
||||
<span className="cursor-pointer text-xl text-green-400 transition-all rotate-0">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 256 256"
|
||||
height="18"
|
||||
width="18"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span className="absolute blur-md bg-green-300/50 font-bold text-xs top-1/2 pointer-event-none h-2 w-2"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-neutral-dark text-sm transition-all duration-200 max-h-0 overflow-hidden whitespace-pre-line">
|
||||
Absolutely! typeframes.ai is designed with
|
||||
creators like you in mind. Our intuitive
|
||||
interface and AI-driven tools make it a
|
||||
breeze to produce professional-grade videos,
|
||||
even if you've never edited before. Simply
|
||||
input your text or link, and let our AI work
|
||||
its magic. It's like having a video editing
|
||||
genius at your fingertips!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[#1c1e21] rounded-xl flex flex-col justify-center px-6 md:pt-10 space-y-2 transition-all py-4 lg:py-3">
|
||||
<div className="flex items-start justify-between lg:pt-2 ">
|
||||
<h5 className="faq-question text-white font-medium hover:cursor-pointer my-auto">
|
||||
What kind of content can I create with
|
||||
typeframes.ai?
|
||||
</h5>
|
||||
<div className="relative flex items-center justify-center h-fit">
|
||||
<span className="cursor-pointer text-xl text-green-400 transition-all rotate-0">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 256 256"
|
||||
height="18"
|
||||
width="18"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span className="absolute blur-md bg-green-300/50 font-bold text-xs top-1/2 pointer-event-none h-2 w-2"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-neutral-dark text-sm transition-all duration-200 max-h-0 overflow-hidden whitespace-pre-line">
|
||||
The possibilities are endless! Whether you
|
||||
want to repurpose a blog post, turn a
|
||||
podcast into a video, create a viral TikTok
|
||||
from scratch, or produce engaging product
|
||||
demos and explainer videos, typeframes.ai
|
||||
has you covered. Our AI can generate scripts
|
||||
from any text or URL, find the perfect viral
|
||||
hooks, and even create videos automatically
|
||||
from your favorite content sources. If you
|
||||
can dream it, typeframes.ai can help you
|
||||
create it.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[#1c1e21] rounded-xl flex flex-col justify-center px-6 md:pt-10 space-y-2 transition-all py-4 lg:py-3">
|
||||
<div className="flex items-start justify-between lg:pt-2 ">
|
||||
<h5 className="faq-question text-white font-medium hover:cursor-pointer my-auto">
|
||||
How much control do I have over the
|
||||
AI-generated content?
|
||||
</h5>
|
||||
<div className="relative flex items-center justify-center h-fit">
|
||||
<span className="cursor-pointer text-xl text-green-400 transition-all rotate-0">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 256 256"
|
||||
height="18"
|
||||
width="18"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span className="absolute blur-md bg-green-300/50 font-bold text-xs top-1/2 pointer-event-none h-2 w-2"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-neutral-dark text-sm transition-all duration-200 max-h-0 overflow-hidden whitespace-pre-line">
|
||||
While our AI is incredibly powerful, you
|
||||
always remain in the driver's seat.
|
||||
typeframes.ai provides a foundation of
|
||||
high-quality, engaging content that you can
|
||||
then customize to your heart's content. From
|
||||
adding a professional sounding voice-over
|
||||
and branding elements to fine-tuning the
|
||||
visuals and pacing, our platform empowers
|
||||
you to create videos that are authentically
|
||||
yours.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[#1c1e21] rounded-xl flex flex-col justify-center px-6 md:pt-10 space-y-2 transition-all py-4 lg:py-3">
|
||||
<div className="flex items-start justify-between lg:pt-2 ">
|
||||
<h5 className="faq-question text-white font-medium hover:cursor-pointer my-auto">
|
||||
How can typeframes.ai help me grow my
|
||||
audience and business?
|
||||
</h5>
|
||||
<div className="relative flex items-center justify-center h-fit">
|
||||
<span className="cursor-pointer text-xl text-green-400 transition-all rotate-0">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 256 256"
|
||||
height="18"
|
||||
width="18"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span className="absolute blur-md bg-green-300/50 font-bold text-xs top-1/2 pointer-event-none h-2 w-2"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-neutral-dark text-sm transition-all duration-200 max-h-0 overflow-hidden whitespace-pre-line">
|
||||
typeframes.ai is your partner in audience
|
||||
growth and business success. Our AI is
|
||||
trained on millions of viral videos, so it
|
||||
knows exactly what makes content
|
||||
irresistible. From attention-grabbing hooks
|
||||
to mesmerizing visuals, typeframes.ai helps
|
||||
you create videos that demand to be watched
|
||||
and shared. Our users have reported an
|
||||
average of 600% increase in video
|
||||
engagement, 200% monthly growth in their
|
||||
businesses, and a staggering 10,000+ videos
|
||||
created in just 8 minutes each. Rest
|
||||
assured, your content creation success is
|
||||
our #1 incentive.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[#1c1e21] rounded-xl flex flex-col justify-center px-6 md:pt-10 space-y-2 transition-all py-4 lg:py-3">
|
||||
<div className="flex items-start justify-between lg:pt-2 ">
|
||||
<h5 className="faq-question text-white font-medium hover:cursor-pointer my-auto">
|
||||
Is my data safe with typeframes.ai?
|
||||
</h5>
|
||||
<div className="relative flex items-center justify-center h-fit">
|
||||
<span className="cursor-pointer text-xl text-green-400 transition-all rotate-0">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 256 256"
|
||||
height="18"
|
||||
width="18"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span className="absolute blur-md bg-green-300/50 font-bold text-xs top-1/2 pointer-event-none h-2 w-2"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-neutral-dark text-sm transition-all duration-200 max-h-0 overflow-hidden whitespace-pre-line">
|
||||
Absolutely. We take data privacy and
|
||||
security very seriously. typeframes.ai
|
||||
employs industry-standard encryption and
|
||||
security measures to protect your content
|
||||
and personal information. We never share
|
||||
your data with third parties without your
|
||||
explicit consent. With typeframes.ai, you
|
||||
can focus on creating amazing videos while
|
||||
we take care of keeping your data safe and
|
||||
sound.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[#1c1e21] rounded-xl flex flex-col justify-center px-6 md:pt-10 space-y-2 transition-all py-4 lg:py-3">
|
||||
<div className="flex items-start justify-between lg:pt-2 ">
|
||||
<h5 className="faq-question text-white font-medium hover:cursor-pointer my-auto">
|
||||
How much time and effort can typeframes.ai
|
||||
save me?
|
||||
</h5>
|
||||
<div className="relative flex items-center justify-center h-fit">
|
||||
<span className="cursor-pointer text-xl text-green-400 transition-all rotate-0">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 256 256"
|
||||
height="18"
|
||||
width="18"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span className="absolute blur-md bg-green-300/50 font-bold text-xs top-1/2 pointer-event-none h-2 w-2"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-neutral-dark text-sm transition-all duration-200 max-h-0 overflow-hidden whitespace-pre-line">
|
||||
typeframes.ai is like having a full video
|
||||
production team at your beck and call, 24/7.
|
||||
Our AI handles the heavy lifting, from
|
||||
researching viral trends to generating
|
||||
scripts and visuals. What used to take hours
|
||||
or even days can now be accomplished in
|
||||
minutes. And with our Automations feature,
|
||||
you can even set typeframes.ai to create
|
||||
videos for you on autopilot. It's the
|
||||
ultimate time-saver for busy creators who
|
||||
don't want to compromise on quality!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[#1c1e21] rounded-xl flex flex-col justify-center px-6 md:pt-10 space-y-2 transition-all py-4 lg:py-3">
|
||||
<div className="flex items-start justify-between lg:pt-2 ">
|
||||
<h5 className="faq-question text-white font-medium hover:cursor-pointer my-auto">
|
||||
How does typeframes.ai stay ahead of the
|
||||
curve in video creation?
|
||||
</h5>
|
||||
<div className="relative flex items-center justify-center h-fit">
|
||||
<span className="cursor-pointer text-xl text-green-400 transition-all rotate-0">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 256 256"
|
||||
height="18"
|
||||
width="18"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span className="absolute blur-md bg-green-300/50 font-bold text-xs top-1/2 pointer-event-none h-2 w-2"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-neutral-dark text-sm transition-all duration-200 max-h-0 overflow-hidden whitespace-pre-line">
|
||||
Our team of video experts and AI engineers
|
||||
are constantly pushing the boundaries of
|
||||
what's possible. We stay on top of the
|
||||
latest trends, platform updates, and best
|
||||
practices to ensure that typeframes.ai
|
||||
remains the cutting-edge tool for creating
|
||||
irresistible videos. As the digital
|
||||
landscape evolves, so does typeframes.ai,
|
||||
giving you a competitive edge in your
|
||||
content creation game.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[#1c1e21] rounded-xl flex flex-col justify-center px-6 md:pt-10 space-y-2 transition-all py-4 lg:py-3">
|
||||
<div className="flex items-start justify-between lg:pt-2 ">
|
||||
<h5 className="faq-question text-white font-medium hover:cursor-pointer my-auto">
|
||||
What if I need help or have questions?
|
||||
</h5>
|
||||
<div className="relative flex items-center justify-center h-fit">
|
||||
<span className="cursor-pointer text-xl text-green-400 transition-all rotate-0">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 256 256"
|
||||
height="18"
|
||||
width="18"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span className="absolute blur-md bg-green-300/50 font-bold text-xs top-1/2 pointer-event-none h-2 w-2"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-neutral-dark text-sm transition-all duration-200 max-h-0 overflow-hidden whitespace-pre-line">
|
||||
We're here for you every step of the way!
|
||||
Our friendly support team, made up of video
|
||||
experts and creators like you, is always
|
||||
ready to answer your questions, provide
|
||||
guidance, and help you get the most out of
|
||||
typeframes.ai. We're not just a software
|
||||
company – we're a community of passionate
|
||||
creators dedicated to helping you succeed.
|
||||
Consider us your personal video creation
|
||||
cheerleaders!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[#1c1e21] rounded-xl flex flex-col justify-center px-6 md:pt-10 space-y-2 transition-all py-4 lg:py-3">
|
||||
<div className="flex items-start justify-between lg:pt-2 ">
|
||||
<h5 className="faq-question text-white font-medium hover:cursor-pointer my-auto">
|
||||
Can I try typeframes.ai for free?
|
||||
</h5>
|
||||
<div className="relative flex items-center justify-center h-fit">
|
||||
<span className="cursor-pointer text-xl text-green-400 transition-all rotate-0">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 256 256"
|
||||
height="18"
|
||||
width="18"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span className="absolute blur-md bg-green-300/50 font-bold text-xs top-1/2 pointer-event-none h-2 w-2"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-neutral-dark text-sm transition-all duration-200 max-h-0 overflow-hidden whitespace-pre-line">
|
||||
<div>
|
||||
While theres no free version of
|
||||
typeframes.ai, we do offer a suite of{" "}
|
||||
<a href="/tools" className="underline">
|
||||
AI-powered mini-tools
|
||||
</a>{" "}
|
||||
that you can take for a spin.Get a taste
|
||||
of the magic by creating clips from
|
||||
YouTube videos, generating AI avatar
|
||||
videos, and more. And when youre ready
|
||||
to unleash the full power of
|
||||
typeframes.ai, our flexible pricing
|
||||
plans make it easy to find the perfect
|
||||
fit for your needs and budget. Trust us,
|
||||
once you experience the typeframes.ai
|
||||
difference, youll wonder how you ever
|
||||
created content without it!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
37
src/ui/page/page-footer.tsx
Normal file
37
src/ui/page/page-footer.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import { useTranslations } from "next-intl";
|
||||
export default function PageFooter() {
|
||||
const t = useTranslations("pageFooter");
|
||||
return (
|
||||
<footer className="content-visibility-auto bg-[#15171A] border-t border-[#252629] w-full">
|
||||
<section className="mx-auto max-w-screen-2xl py-16 px-4 sm:px-6 md:px-16 text-sm space-y-8">
|
||||
{/* 这里可以添加您的其他 footer 内容 */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="text-center text-gray-300 text-sm">
|
||||
© {new Date().getFullYear()}{" "}
|
||||
<span>{t("companyName")}</span> |{" "}
|
||||
<span>{t("companyNameEn")}</span>
|
||||
</div>
|
||||
<div className="text-center text-gray-300 text-sm mt-2">
|
||||
<a href={t("domain1")} target="_blank" rel="noopener noreferrer">
|
||||
{t("domain1")}
|
||||
</a>{" "}
|
||||
|{" "}
|
||||
<a href={t("domain2")} target="_blank" rel="noopener noreferrer">
|
||||
{t("domain2")}
|
||||
</a>
|
||||
</div>
|
||||
<div className="text-center text-gray-300 text-sm mt-2">
|
||||
{t("icpNumber")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col-reverse md:flex-row justify-between mt-8">
|
||||
{/* 其他内容 */}
|
||||
<div className="text-[#BEFFD6] underline underline-offset-2 space-x-3">
|
||||
<a href="/terms">{t("termsOfService")}</a>
|
||||
<a href="/terms">{t("privacyPolicy")}</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
64
src/ui/page/page-header.tsx
Normal file
64
src/ui/page/page-header.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import Image from "next/image";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import logoImage from "/public/images/logo.png";
|
||||
import Link from "next/link";
|
||||
export default function PageHeader() {
|
||||
const t = useTranslations("pageHeader");
|
||||
return (
|
||||
<div className="max-w-screen-2xl box-border bg-opacity-0 z-[99] absolute px-4 md:px-16 lg:px-20 top-0 w-screen flex justify-center ">
|
||||
<div
|
||||
className="relative w-full px-4 flex items-center justify-between"
|
||||
style={{ height: "96px" }}
|
||||
>
|
||||
<Link href="/">
|
||||
<Image
|
||||
alt="typeframes.ai logo"
|
||||
fetchPriority="high"
|
||||
width={150}
|
||||
height={30}
|
||||
decoding="async"
|
||||
style={{ color: "transparent" }}
|
||||
src={logoImage}
|
||||
/>
|
||||
</Link>
|
||||
<div
|
||||
id="navbar"
|
||||
className="flex items-center justify-end gap-8"
|
||||
>
|
||||
<div
|
||||
id="navlinks"
|
||||
className="text-[#BEC0C7] text-base font-medium invisible absolute top-full left-0 z-20 w-full origin-top-right -translate-y-4 bg-[#101215] flex-col flex-wrap justify-end gap-6 p-6 shadow-2xl shadow-gray-600/10 transition-all duration-300 dark:border-gray-700 dark:bg-gray-800 dark:shadow-none lg:visible lg:relative lg:flex lg:w-auto lg:translate-y-0 lg:scale-100 lg:flex-row lg:items-center lg:gap-0 lg:border-none lg:bg-transparent lg:p-0 lg:opacity-100 lg:shadow-none lg:peer-checked:translate-y-0 dark:lg:bg-transparent"
|
||||
>
|
||||
<div className="lg:pr-4 lg:ml-8">
|
||||
<ul className="divide-y lg:divide-y-0 divide-white/5 gap-8 py-4 lg:hover:bg-transparent lg:hover:pl-0 tracking-wide lg:flex lg:space-y-0 lg:text-sm lg:items-center">
|
||||
<li>
|
||||
<Link
|
||||
className="btn-tf btn-tf-secondary lg:flex"
|
||||
href="/create"
|
||||
>
|
||||
{t("button")}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/* <button
|
||||
aria-label="hamburger"
|
||||
id="hamburger"
|
||||
className="relative -mr-6 p-6 lg:hidden"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="m-auto h-0.5 w-5 rounded bg-sky-50 transition duration-300 dark:bg-gray-300"
|
||||
></div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="m-auto mt-1.5 h-0.5 w-5 rounded bg-sky-50 transition duration-300 dark:bg-gray-300"
|
||||
></div>
|
||||
</button> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
74
src/ui/page/page-intro.tsx
Normal file
74
src/ui/page/page-intro.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import { useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
import starsImage from "/public/images/stars.avif";
|
||||
|
||||
export default function PageIntro() {
|
||||
const t = useTranslations("pageIntro");
|
||||
|
||||
return (
|
||||
<article className="rounded-lg px-4 sm:px-6 md:px-8 border border-[#252629] w-full gradient-bg lg:bg-none lg:bg-[#171B1C]">
|
||||
<div className="w-full relative border-x border-[#353e3b] md:px-8 py-[7.5%] grid lg:grid-cols-2 gap-4 xl:gap-8 items-start">
|
||||
<section className="space-y-6 mt-12 lg:mt-0 pl-4 xl:pl-8 flex-2">
|
||||
<h1 className='xl:min-w-[520px] text-4xl sm:text-[47px] xl:text-6xl 2xl:text-7xl lg:text-left leading-[50px] text-center font-["Euclid_Circular_A"] text-white'>
|
||||
{t("heading")}{" "}
|
||||
<span className="font-medium from-[#45EC82] from-[0.16%] via-[#7079F3] via-[47.81%] to-[#75CEFC] to-100% bg-gradient-to-r bg-clip-text text-transparent">
|
||||
{t("highlightedText")}
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-neutral-dark text-sm 2xl:text-base text-center lg:text-left mx-auto lg:mx-0 leading-normal">
|
||||
{t("description.line1")}
|
||||
<br />
|
||||
{t("description.line2")}
|
||||
<br />
|
||||
{t("description.line3")}
|
||||
</p>
|
||||
<div className="btn-tf-primary-container w-fit mx-auto lg:mx-0">
|
||||
<a className="btn-tf btn-tf-primary" href="/projects">
|
||||
{t("startForFree")}
|
||||
</a>
|
||||
</div>
|
||||
<div className="space-y-5 flex flex-col items-center lg:items-start">
|
||||
<div className="space-y-2 flex flex-col items-center lg:items-start">
|
||||
<Image
|
||||
alt="ratings"
|
||||
loading="lazy"
|
||||
width={88}
|
||||
height={16}
|
||||
decoding="async"
|
||||
className="object-contain"
|
||||
src={starsImage}
|
||||
/>
|
||||
<article className="flex items-center flex-col w-full mt-20 space-y-2">
|
||||
<div className="mt-0 flex flex-col justify-center items-center">
|
||||
<div className="flex gap-4 flex-col items-center md:flex-row md:items-end">
|
||||
<div className="text-info text-sm italic">
|
||||
{t("ratings")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="invisible lg:visible absolute lg:relative space-y-5 w-full flex flex-col justify-center">
|
||||
<div className="flex justify-center">
|
||||
<div className="flex w-auto h-[600px]">
|
||||
<video
|
||||
className="content-visibility-auto bg-white shadow-2xl rounded-[13px] border border-base-200"
|
||||
playsInline
|
||||
loop
|
||||
muted
|
||||
autoPlay
|
||||
src="https://cdn.tfrv.xyz/renders/gjcIDd3JXNbmRF7DcHp7/7FnJlEDbR1qYD35MGZ6U-1716820116050.mp4"
|
||||
preload="auto"
|
||||
></video>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center text-sm text-neutral-dark">
|
||||
{t("madeWithLove")}
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
110
src/ui/page/page-remark.tsx
Normal file
110
src/ui/page/page-remark.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export default function PageRemark() {
|
||||
const t = useTranslations("pageRemark");
|
||||
return (
|
||||
<section className="content-visibility-auto text-neutral-dark mt-24 relative -left-[10%] lg:-left-16 flex w-[120%] lg:w-[110%] justify-center items-center mx-auto">
|
||||
<div className="relative w-[10%] lg:w-[50%] mr-auto space-y-2">
|
||||
<div className="rfm-marquee-container">
|
||||
<div className="rfm-marquee">
|
||||
<div className="rfm-initial-child-container">
|
||||
<div className="rfm-child">
|
||||
{/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="rotate-180 mx-auto aspect-auto rounded-t-xl object-cover object-center" src="/images/purple-right-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rfm-marquee">
|
||||
<div className="rfm-child">
|
||||
{/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="rotate-180 mx-auto aspect-auto rounded-t-xl object-cover object-center" src="/images/purple-right-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rfm-marquee-container">
|
||||
<div className="rfm-marquee">
|
||||
<div className="rfm-initial-child-container">
|
||||
<div className="rfm-child">
|
||||
{/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" src="/images/green-left-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rfm-marquee">
|
||||
<div className="rfm-child">
|
||||
{/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" src="/images/green-left-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rfm-marquee-container">
|
||||
<div className="rfm-marquee">
|
||||
<div className="rfm-initial-child-container">
|
||||
<div className="rfm-child">
|
||||
{/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover w-1/2 object-right" src="/images/blue-left-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rfm-marquee">
|
||||
<div className="rfm-child">
|
||||
{/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover w-1/2 object-right" src="/images/blue-left-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-5 py-4 flex flex-col items-center w-[80%] lg:w-full border-x border-[#1a1b1e]">
|
||||
<h2 className='text-white font-["Euclid_Circular_A"] text-3xl lg:text-4xl xl:text-5xl text-center w-11/12 text-balance mx-auto'>
|
||||
{t("heading")}
|
||||
</h2>
|
||||
<p className="text-center w-[95%] mx-auto text-balance">
|
||||
{t("description")}
|
||||
</p>
|
||||
<div className="btn-tf-primary-container mx-auto lg:mx-0">
|
||||
<a className="btn-tf btn-tf-primary" href="/create">
|
||||
{t("createVideosNow")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative w-[10%] lg:w-[50%] ml-auto space-y-2">
|
||||
<div className="rfm-marquee-container">
|
||||
<div className="rfm-marquee">
|
||||
<div className="rfm-initial-child-container">
|
||||
<div className="rfm-child">
|
||||
{/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover w-1/2 object-right" src="/images/blue-right-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rfm-marquee">
|
||||
<div className="rfm-child">
|
||||
{/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover w-1/2 object-right" src="/images/blue-right-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rfm-marquee-container">
|
||||
<div className="rfm-marquee">
|
||||
<div className="rfm-initial-child-container">
|
||||
<div className="rfm-child">
|
||||
{/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" src="/images/green-right-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rfm-marquee">
|
||||
<div className="rfm-child">
|
||||
{/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" src="/images/green-right-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rfm-marquee-container">
|
||||
<div className="rfm-marquee">
|
||||
<div className="rfm-initial-child-container">
|
||||
<div className="rfm-child">
|
||||
{/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" src="/images/purple-right-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rfm-marquee">
|
||||
<div className="rfm-child">
|
||||
{/* <img alt="easy to use" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" src="/images/purple-right-neon-line.svg" style={{ color: 'transparent', width: '100%', height: 'auto' }} /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
44
src/ui/page/page-statis.tsx
Normal file
44
src/ui/page/page-statis.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { useTranslations } from "next-intl";
|
||||
export default function PageStatis() {
|
||||
const t = useTranslations("pageStatis");
|
||||
|
||||
return (
|
||||
<article className="gradient-bg rounded-lg px-4 sm:px-6 md:px-8 pb-8 border border-[#252629] mt-4">
|
||||
<div className="rounded-b-xl h-8 sm:h-10 border border-t-0 border-[#353E3B]"></div>
|
||||
<section className="-mt-3 lg:pt-10 py-8 rounded-lg rounded-t-none border border-t-0 border-[#353e3b] divide-y sm:divide-x sm:divide-y-0 divide-[#353e3b] grid sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="text-center sm:px-8 lg:px-12 mx-8 sm:mx-0 py-10 sm:py-4 space-y-2">
|
||||
<h2 className='font-["Euclid_Circular_A"] text-3xl font-bold bg-gradient-to-tr from-[#5AE88F] from-25% to-[#78CDF9] to-60% bg-clip-text text-transparent'>
|
||||
{t("creatorsUsing.number")}
|
||||
</h2>
|
||||
<p className="text-neutral-dark text-sm">
|
||||
{t("creatorsUsing.description")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center sm:px-8 lg:px-12 mx-8 sm:mx-0 py-10 sm:py-4 space-y-2">
|
||||
<h2 className='font-["Euclid_Circular_A"] text-3xl font-bold bg-gradient-to-tr from-[#5AE88F] from-25% to-[#78CDF9] to-60% bg-clip-text text-transparent'>
|
||||
{t("videoEngagement.percentage")}
|
||||
</h2>
|
||||
<p className="text-neutral-dark text-sm">
|
||||
{t("videoEngagement.description")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center sm:px-8 lg:px-12 mx-8 sm:mx-0 py-10 sm:py-4 space-y-2">
|
||||
<h2 className='font-["Euclid_Circular_A"] text-3xl font-bold bg-gradient-to-tr from-[#5AE88F] from-25% to-[#78CDF9] to-60% bg-clip-text text-transparent'>
|
||||
{t("videosMade.number")}
|
||||
</h2>
|
||||
<p className="text-neutral-dark text-sm">
|
||||
{t("videosMade.description")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center sm:px-8 lg:px-12 mx-8 sm:mx-0 py-10 sm:py-4 space-y-2">
|
||||
<h2 className='font-["Euclid_Circular_A"] text-3xl font-bold bg-gradient-to-tr from-[#5AE88F] from-25% to-[#78CDF9] to-60% bg-clip-text text-transparent'>
|
||||
{t("monthlyGrowth.percentage")}
|
||||
</h2>
|
||||
<p className="text-neutral-dark text-sm">
|
||||
{t("monthlyGrowth.description")}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
368
src/ui/page/page-tools.tsx
Normal file
368
src/ui/page/page-tools.tsx
Normal file
@@ -0,0 +1,368 @@
|
||||
export default function PageTools() {
|
||||
return (
|
||||
<article className="mt-8 content-visibility-auto relative text-neutral-dark rounded-lg px-4 sm:px-6 md:px-8 border border-[#252629] w-full bg-[#15171a] mb-6">
|
||||
<div className="h-px w-full bg-[#353e3b] top-4 sm:top-6 md:top-8 absolute -z-0 left-0"></div>
|
||||
<div className="h-px w-full bg-[#353e3b] bottom-4 sm:bottom-6 md:bottom-8 absolute z-0 left-0"></div>
|
||||
<div className="w-full relative border-x border-[#353e3b]">
|
||||
<div className="absolute z-0 w-full h-full grid lg:grid-cols-2 gap-8 items-center">
|
||||
<section className="z-0 absolute w-full h-full col-span-2 grid grid-cols-2 place-content-between">
|
||||
<div className="bg-[#4BDE81] rounded-full w-1 h-1 my-4 sm:my-6 md:my-8 outline outline-8 outline-[#15171A] -mx-[2.5px] "></div>
|
||||
<div className="bg-[#4BDE81] rounded-full w-1 h-1 my-4 sm:my-6 md:my-8 outline outline-8 outline-[#15171A] -mx-[2px] place-self-end"></div>
|
||||
<div className="bg-[#4BDE81] rounded-full w-1 h-1 my-4 sm:my-6 md:my-8 outline outline-8 outline-[#15171A] -mx-[2.5px] "></div>
|
||||
<div className="bg-[#4BDE81] rounded-full w-1 h-1 my-4 sm:my-6 md:my-8 outline outline-8 outline-[#15171A] -mx-[2px] place-self-end"></div>
|
||||
</section>
|
||||
</div>
|
||||
<div className="relative z-20 mx-auto py-12 lg:py-24">
|
||||
<div className="space-y-4">
|
||||
<div className="mx-auto text-green-200 border border-[#c8eed6]/25 shadow-lg shadow-[#4add80]/10 w-fit font-medium text-sm rounded-full bg-gradient-to-b from-[#737b88]/20 to-[#191b1e]/20 p-[1.5px]">
|
||||
<div className="bg-[#15171a]/50 flex items-center space-x-1 py-1 px-2 rounded-full ">
|
||||
{/* <IconTools width={17} height={16} /> */}
|
||||
<span className="text-sm">Tools</span>
|
||||
</div>
|
||||
</div>
|
||||
<h2 className='text-white font-["Euclid_Circular_A"] text-3xl lg:text-4xl xl:text-5xl text-center w-11/12 max-w-3xl text-pretty mx-auto'>
|
||||
Easily create TikTok videos with pre-made tools
|
||||
</h2>
|
||||
<p className="text-center w-[90%] max-w-lg mx-auto text-pretty">
|
||||
Pick the right tool, provides your input, and youll
|
||||
create a video in no time - customize it however you
|
||||
want.
|
||||
</p>
|
||||
</div>
|
||||
<div className="diagonal-pattern w-full border-y border-[#353e3b] my-12">
|
||||
<div className="*:p-1.5 *:bg-transparent *:h-full border-x border-[#353e3b] bg-[#15171a] grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 w-[90%] md:w-[85%] lg:w-[75%] sm:divide-x divide-y divide-[#353e3b] mx-auto">
|
||||
<div>
|
||||
<div className="bg-[#1c1e21] rounded p-6 h-full">
|
||||
<div className="relative w-10 ">
|
||||
{/* <img alt="youtube" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto object-cover" style={{ color: 'transparent', width: '100%', height: 'auto' }} srcSet="/images/youtube.png 1x, /images/youtube.png 2x" src="/images/youtube.png" /> */}
|
||||
</div>
|
||||
<h4 className="text-white text-lg font-medium mt-4">
|
||||
Create clips from YouTube
|
||||
</h4>
|
||||
<p>
|
||||
Convert your YouTube video into a short
|
||||
vertical
|
||||
</p>
|
||||
<a
|
||||
className="btn-tf-sm btn-tf-secondary font-medium flex items-center mt-12 w-fit"
|
||||
href="/tools/create-short-video-clip"
|
||||
>
|
||||
Try it out
|
||||
<svg
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="ml-2"
|
||||
>
|
||||
<path
|
||||
d="M9.61914 4.45312L13.6658 8.49979L9.61914 12.5465"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M2.33398 8.5H13.554"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="bg-[#1c1e21] rounded p-6 h-full">
|
||||
<div className="relative w-10 ">
|
||||
{/* <img alt="tiktok" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto object-cover" style={{ color: 'transparent', width: '100%', height: 'auto' }} srcSet="/images/tiktok.png 1x, /images/tiktok.png 2x" src="/images/tiktok.png" /> */}
|
||||
</div>
|
||||
<h4 className="text-white text-lg font-medium mt-4">
|
||||
Create TikTok videos
|
||||
</h4>
|
||||
<p>Convert your text into a TikTok video</p>
|
||||
<a
|
||||
className="btn-tf-sm btn-tf-secondary font-medium flex items-center mt-12 w-fit"
|
||||
href="/tools/create-tiktok-video"
|
||||
>
|
||||
Try it out
|
||||
<svg
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="ml-2"
|
||||
>
|
||||
<path
|
||||
d="M9.61914 4.45312L13.6658 8.49979L9.61914 12.5465"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M2.33398 8.5H13.554"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="bg-[#1c1e21] rounded p-6 h-full">
|
||||
<div className="relative w-10 ">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 256 256"
|
||||
className="mx-auto text-white"
|
||||
height="40"
|
||||
width="40"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M160,40a32,32,0,1,0-32,32A32,32,0,0,0,160,40ZM128,56a16,16,0,1,1,16-16A16,16,0,0,1,128,56Zm90.34,78.05L173.17,82.83a32,32,0,0,0-24-10.83H106.83a32,32,0,0,0-24,10.83L37.66,134.05a20,20,0,0,0,28.13,28.43l16.3-13.08L65.55,212.28A20,20,0,0,0,102,228.8l26-44.87,26,44.87a20,20,0,0,0,36.41-16.52L173.91,149.4l16.3,13.08a20,20,0,0,0,28.13-28.43Zm-11.51,16.77a4,4,0,0,1-5.66,0c-.21-.2-.42-.4-.65-.58L165,121.76A8,8,0,0,0,152.26,130L175.14,217a7.72,7.72,0,0,0,.48,1.35,4,4,0,1,1-7.25,3.38,6.25,6.25,0,0,0-.33-.63L134.92,164a8,8,0,0,0-13.84,0L88,221.05a6.25,6.25,0,0,0-.33.63,4,4,0,0,1-2.26,2.07,4,4,0,0,1-5-5.45,7.72,7.72,0,0,0,.48-1.35L103.74,130A8,8,0,0,0,91,121.76L55.48,150.24c-.23.18-.44.38-.65.58a4,4,0,1,1-5.66-5.65c.12-.12.23-.24.34-.37L94.83,93.41a16,16,0,0,1,12-5.41h42.34a16,16,0,0,1,12,5.41l45.32,51.39c.11.13.22.25.34.37A4,4,0,0,1,206.83,150.82Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 className="text-white text-lg font-medium mt-4">
|
||||
Create An AI avatar Video
|
||||
</h4>
|
||||
<p>
|
||||
Generate a vertical video with a talking
|
||||
avatar
|
||||
</p>
|
||||
<a
|
||||
className="btn-tf-sm btn-tf-secondary font-medium flex items-center mt-12 w-fit"
|
||||
href="/tools/create-avatar-video"
|
||||
>
|
||||
Try it out
|
||||
<svg
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="ml-2"
|
||||
>
|
||||
<path
|
||||
d="M9.61914 4.45312L13.6658 8.49979L9.61914 12.5465"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M2.33398 8.5H13.554"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="bg-[#1c1e21] rounded p-6 h-full">
|
||||
<div className="relative w-10 ">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 24 24"
|
||||
className="mx-auto text-white"
|
||||
height="40"
|
||||
width="40"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M11.0526 7.8154L11.8042 4.27941C12.0339 3.19898 13.0959 2.50929 14.1764 2.73894L17.3725 3.4183C17.8351 2.90546 18.5509 2.64644 19.275 2.80035C20.3554 3.03 21.0451 4.09204 20.8155 5.17247C20.5858 6.2529 19.5238 6.94259 18.4434 6.71294C17.7193 6.55903 17.1707 6.03124 16.9567 5.3746L13.7605 4.69523L13.0943 7.82978C14.8789 7.96683 16.6522 8.56079 18.2581 9.52961C19.0892 9.06763 20.0992 8.99337 21.007 9.36091C22.1731 9.833 22.9531 10.9459 22.9991 12.2031L22.9996 12.2241C23.0151 13.2277 22.559 14.1657 21.792 14.7742C21.7899 14.8178 21.7871 14.859 21.7836 14.8971C21.7836 18.8949 17.3341 21.9267 11.9852 21.9267C6.65232 21.9267 2.27693 18.9027 2.27987 14.9738C2.27523 14.9134 2.27162 14.853 2.26905 14.7926C1.46701 14.1873 0.984722 13.2277 1.00037 12.1962C1.01955 10.9317 1.78341 9.79777 2.94804 9.30491C3.85909 8.91936 4.881 8.98299 5.72371 9.44381C7.3578 8.46653 9.15777 7.91241 11.0526 7.8154ZM20.3385 13.341C20.7466 13.1382 21.003 12.7207 21.0001 12.2656C20.9789 11.8005 20.6887 11.3897 20.2565 11.2147C19.821 11.0384 19.3226 11.1343 18.9837 11.4597L18.3991 12.0207L17.729 11.5652C16.1137 10.4672 14.2771 9.8397 12.4995 9.80134L11.493 9.80123C9.61791 9.8295 7.84136 10.4002 6.25552 11.4757L5.59246 11.9254L5.00897 11.3764C4.66501 11.0528 4.16243 10.9627 3.7275 11.1468C3.29257 11.3308 3.0073 11.7543 3 12.2265C2.99298 12.6987 3.26526 13.1307 3.69441 13.3278L4.32738 13.6186L4.27399 14.3132C4.261 14.482 4.261 14.6516 4.27693 14.8971C4.27693 17.6071 7.63313 19.9267 11.9852 19.9267C16.3561 19.9267 19.7836 17.5913 19.7865 14.8205C19.7995 14.6516 19.7995 14.482 19.7865 14.3132L19.7348 13.6411L20.3385 13.341ZM6.95075 13.4999C6.95075 12.6715 7.62232 11.9999 8.45075 11.9999C9.27918 11.9999 9.95075 12.6715 9.95075 13.4999C9.95075 14.3283 9.27918 14.9999 8.45075 14.9999C8.05292 14.9999 7.67139 14.8419 7.39009 14.5606C7.10878 14.2793 6.95075 13.8977 6.95075 13.4999ZM13.9507 13.4999C13.9507 12.6715 14.6223 11.9999 15.4507 11.9999C16.2792 11.9999 16.9507 12.6715 16.9507 13.4999C16.9507 14.3283 16.2792 14.9999 15.4507 14.9999C15.0529 14.9999 14.6714 14.8419 14.3901 14.5606C14.1088 14.2793 13.9507 13.8977 13.9507 13.4999ZM11.9665 18.6028C10.5693 18.6028 9.19993 18.2329 8.08503 17.3928C7.94659 17.2241 7.95868 16.9779 8.11299 16.8236C8.2673 16.6693 8.51349 16.6572 8.68218 16.7956C9.62697 17.4886 10.805 17.7856 11.9507 17.7856C13.0965 17.7856 14.2813 17.5112 15.235 16.8271C15.3473 16.7176 15.5095 16.6763 15.6604 16.7188C15.8114 16.7613 15.9282 16.8811 15.9669 17.0331C16.0055 17.1851 15.9517 17.3346 15.8479 17.4556C15.1638 18.2531 13.3636 18.6028 11.9665 18.6028Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 className="text-white text-lg font-medium mt-4">
|
||||
Turn Audio into Video
|
||||
</h4>
|
||||
<p>
|
||||
Make engaging videos from your podcasts,
|
||||
interviews, or any audio content
|
||||
</p>
|
||||
<a
|
||||
className="btn-tf-sm btn-tf-secondary font-medium flex items-center mt-12 w-fit"
|
||||
href="/tools/audio-to-video"
|
||||
>
|
||||
Try it out
|
||||
<svg
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="ml-2"
|
||||
>
|
||||
<path
|
||||
d="M9.61914 4.45312L13.6658 8.49979L9.61914 12.5465"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M2.33398 8.5H13.554"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="bg-[#1c1e21] rounded p-6 h-full">
|
||||
<div className="relative w-10 ">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="currentColor"
|
||||
stroke-width="0"
|
||||
viewBox="0 0 24 24"
|
||||
className="mx-auto text-white"
|
||||
height="40"
|
||||
width="40"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M11.0526 7.8154L11.8042 4.27941C12.0339 3.19898 13.0959 2.50929 14.1764 2.73894L17.3725 3.4183C17.8351 2.90546 18.5509 2.64644 19.275 2.80035C20.3554 3.03 21.0451 4.09204 20.8155 5.17247C20.5858 6.2529 19.5238 6.94259 18.4434 6.71294C17.7193 6.55903 17.1707 6.03124 16.9567 5.3746L13.7605 4.69523L13.0943 7.82978C14.8789 7.96683 16.6522 8.56079 18.2581 9.52961C19.0892 9.06763 20.0992 8.99337 21.007 9.36091C22.1731 9.833 22.9531 10.9459 22.9991 12.2031L22.9996 12.2241C23.0151 13.2277 22.559 14.1657 21.792 14.7742C21.7899 14.8178 21.7871 14.859 21.7836 14.8971C21.7836 18.8949 17.3341 21.9267 11.9852 21.9267C6.65232 21.9267 2.27693 18.9027 2.27987 14.9738C2.27523 14.9134 2.27162 14.853 2.26905 14.7926C1.46701 14.1873 0.984722 13.2277 1.00037 12.1962C1.01955 10.9317 1.78341 9.79777 2.94804 9.30491C3.85909 8.91936 4.881 8.98299 5.72371 9.44381C7.3578 8.46653 9.15777 7.91241 11.0526 7.8154ZM20.3385 13.341C20.7466 13.1382 21.003 12.7207 21.0001 12.2656C20.9789 11.8005 20.6887 11.3897 20.2565 11.2147C19.821 11.0384 19.3226 11.1343 18.9837 11.4597L18.3991 12.0207L17.729 11.5652C16.1137 10.4672 14.2771 9.8397 12.4995 9.80134L11.493 9.80123C9.61791 9.8295 7.84136 10.4002 6.25552 11.4757L5.59246 11.9254L5.00897 11.3764C4.66501 11.0528 4.16243 10.9627 3.7275 11.1468C3.29257 11.3308 3.0073 11.7543 3 12.2265C2.99298 12.6987 3.26526 13.1307 3.69441 13.3278L4.32738 13.6186L4.27399 14.3132C4.261 14.482 4.261 14.6516 4.27693 14.8971C4.27693 17.6071 7.63313 19.9267 11.9852 19.9267C16.3561 19.9267 19.7836 17.5913 19.7865 14.8205C19.7995 14.6516 19.7995 14.482 19.7865 14.3132L19.7348 13.6411L20.3385 13.341ZM6.95075 13.4999C6.95075 12.6715 7.62232 11.9999 8.45075 11.9999C9.27918 11.9999 9.95075 12.6715 9.95075 13.4999C9.95075 14.3283 9.27918 14.9999 8.45075 14.9999C8.05292 14.9999 7.67139 14.8419 7.39009 14.5606C7.10878 14.2793 6.95075 13.8977 6.95075 13.4999ZM13.9507 13.4999C13.9507 12.6715 14.6223 11.9999 15.4507 11.9999C16.2792 11.9999 16.9507 12.6715 16.9507 13.4999C16.9507 14.3283 16.2792 14.9999 15.4507 14.9999C15.0529 14.9999 14.6714 14.8419 14.3901 14.5606C14.1088 14.2793 13.9507 13.8977 13.9507 13.4999ZM11.9665 18.6028C10.5693 18.6028 9.19993 18.2329 8.08503 17.3928C7.94659 17.2241 7.95868 16.9779 8.11299 16.8236C8.2673 16.6693 8.51349 16.6572 8.68218 16.7956C9.62697 17.4886 10.805 17.7856 11.9507 17.7856C13.0965 17.7856 14.2813 17.5112 15.235 16.8271C15.3473 16.7176 15.5095 16.6763 15.6604 16.7188C15.8114 16.7613 15.9282 16.8811 15.9669 17.0331C16.0055 17.1851 15.9517 17.3346 15.8479 17.4556C15.1638 18.2531 13.3636 18.6028 11.9665 18.6028Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 className="text-white text-lg font-medium mt-4">
|
||||
Turn a Reddit post into a Video
|
||||
</h4>
|
||||
<p>
|
||||
Make engaging videos from your podcasts,
|
||||
interviews, or any audio content
|
||||
</p>
|
||||
<a
|
||||
className="btn-tf-sm btn-tf-secondary font-medium flex items-center mt-12 w-fit"
|
||||
href="/tools/audio-to-video"
|
||||
>
|
||||
Try it out
|
||||
<svg
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="ml-2"
|
||||
>
|
||||
<path
|
||||
d="M9.61914 4.45312L13.6658 8.49979L9.61914 12.5465"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M2.33398 8.5H13.554"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="bg-[#1c1e21] rounded p-6 h-full">
|
||||
<div className="relative w-10 ">
|
||||
{/* <img alt="twitter/x" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" className="mx-auto aspect-auto object-cover" style={{ color: 'transparent', width: '100%', height: 'auto' }} srcSet="/images/x-logo-white.png 1x, /images/x-logo-white.png 2x" src="/images/x-logo-white.png" /> */}
|
||||
</div>
|
||||
<h4 className="text-white text-lg font-medium mt-4">
|
||||
Tweet/X to Video
|
||||
</h4>
|
||||
<p>Convert your tweets to video</p>
|
||||
<a
|
||||
className="btn-tf-sm btn-tf-secondary font-medium flex items-center mt-12 w-fit"
|
||||
href="/tools/tweet-to-video"
|
||||
>
|
||||
Try it out
|
||||
<svg
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="ml-2"
|
||||
>
|
||||
<path
|
||||
d="M9.61914 4.45312L13.6658 8.49979L9.61914 12.5465"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M2.33398 8.5H13.554"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
className="btn-tf btn-tf-secondary font-normal flex items-center mx-auto w-fit"
|
||||
href="/tools"
|
||||
>
|
||||
See all tools
|
||||
<svg
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="ml-2"
|
||||
>
|
||||
<path
|
||||
d="M9.61914 4.45312L13.6658 8.49979L9.61914 12.5465"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M2.33398 8.5H13.554"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user