fix: 🐛 types

This commit is contained in:
amianthus
2026-04-16 18:02:34 +01:00
parent c45a4ca382
commit 2e5ab5ad98
6 changed files with 146 additions and 143 deletions

View File

@@ -7,7 +7,7 @@ function BlogHeading({
...props
}: {
as: ElementType;
children?: ReactNode;
children?: Iterable<ReactNode> | ReactNode;
} & ComponentPropsWithoutRef<"h1">) {
return (
<Tag {...props} className="scroll-mt-24">
@@ -50,7 +50,7 @@ export const mdxComponents = {
className="text-[#9564ff] hover:text-[#b08aff] underline underline-offset-2 transition-colors"
{...props}
>
{children}
{children as any}
</Link>
);
},

View File

@@ -137,7 +137,7 @@ export default function ElasticRecoil({ children }: LayoutProps) {
<div className="relative w-full overflow-hidden">
{showFooter && <AnimatedFooterImage />}
<motion.div style={{ y }} className="relative z-10 bg-black">
{children}
{children as any}
</motion.div>
</div>
);

View File

@@ -32,149 +32,147 @@ const footerColumns: any[] = [
export default function Footer() {
return (
<>
<footer
style={{
width: "calc(100% + var(--page-pad) * 2)",
marginLeft: "calc(var(--page-pad) * -1)",
paddingLeft: "var(--page-pad)",
paddingRight: "var(--page-pad)",
}}
className="mt-[50px] relative bg-[#000000] border-t border-[#292929] overflow-hidden text-[#FFFFFF99] grid"
>
<div className="col-start-1 row-start-1 flex flex-col z-10 w-full relative">
<div className="relative w-full flex flex-col justify-between min-h-[400px]">
<div className="absolute bottom-0 left-0 right-0 h-[300px] sm:h-[550px] lg:h-[400px] pointer-events-none opacity-70 bg-[url('/images/footer/footerbg.svg')] bg-cover sm:bg-contain bg-bottom bg-no-repeat z-0" />
<footer
style={{
width: "calc(100% + var(--page-pad) * 2)",
marginLeft: "calc(var(--page-pad) * -1)",
paddingLeft: "var(--page-pad)",
paddingRight: "var(--page-pad)",
}}
className="mt-[50px] relative bg-[#000000] border-t border-[#292929] overflow-hidden text-[#FFFFFF99] grid"
>
<div className="col-start-1 row-start-1 flex flex-col z-10 w-full relative">
<div className="relative w-full flex flex-col justify-between min-h-[400px]">
<div className="absolute bottom-0 left-0 right-0 h-[300px] sm:h-[550px] lg:h-[400px] pointer-events-none opacity-70 bg-[url('/images/footer/footerbg.svg')] bg-cover sm:bg-contain bg-bottom bg-no-repeat z-0" />
<div className="flex flex-col lg:flex-row justify-between pt-[32px] md:pt-24 pb-32 md:pb-16 pl-4.5 xl:pl-[90px] pr-4 sm:pr-8 lg:pr-12 gap-10 md:gap-16 lg:gap-8 relative z-10">
{/* Left Side: Logo and Description */}
<div className="flex flex-col max-w-sm">
<Link href="/" className="mb-3 md:mb-6 inline-block">
<Image
src="/images/navbar/autumnlogo.svg"
width={195}
height={48}
alt="Autumn"
className="brightness-0 invert w-[130px] h-[32px] md:w-[195px] md:h-[48px]"
/>
</Link>
<p className="text-[14px] md:text-[16px] leading-[18px] md:leading-[20px] tracking-[-2%] text-[#FFFFFF99] font-light">
Autumn is drop-in billing for AI companies.
</p>
</div>
<div className="flex flex-col lg:flex-row justify-between pt-[32px] md:pt-24 pb-32 md:pb-16 pl-4.5 xl:pl-[90px] pr-4 sm:pr-8 lg:pr-12 gap-10 md:gap-16 lg:gap-8 relative z-10">
{/* Left Side: Logo and Description */}
<div className="flex flex-col max-w-sm">
<Link href="/" className="mb-3 md:mb-6 inline-block">
<Image
src="/images/navbar/autumnlogo.svg"
width={195}
height={48}
alt="Autumn"
className="brightness-0 invert w-[130px] h-[32px] md:w-[195px] md:h-[48px]"
/>
</Link>
<p className="text-[14px] md:text-[16px] leading-[18px] md:leading-[20px] tracking-[-2%] text-[#FFFFFF99] font-light">
Autumn is drop-in billing for AI companies.
</p>
</div>
{/* Right Side: Columns */}
<div className="grid grid-cols-2 sm:grid-cols-3 gap-12 sm:gap-16 lg:gap-24">
{footerColumns.map((col, index) => (
<div key={index} className="flex flex-col">
<h3 className="flex items-center gap-2 text-white font-mono text-[14px] uppercase tracking-[-1%] mb-6">
<div className="w-[8px] h-[8px] bg-[#FFFFFF99]"></div>
{col.title}
</h3>
<ul className="flex flex-col gap-1">
{col.links.map((link, i) => (
<li key={i} className="group/strip">
<Link
href={link.href}
target="_blank"
className="group/strip flex items-center gap-3 text-[14px] font-mono uppercase tracking-[-1%] transition-colors duration-300"
>
<span className="w-1 h-1 bg-[#FFFFFF99] group-hover/strip:bg-white group-active/strip:bg-white transition-colors duration-300 shrink-0"></span>
{/* Right Side: Columns */}
<div className="grid grid-cols-2 sm:grid-cols-3 gap-12 sm:gap-16 lg:gap-24">
{footerColumns.map((col) => (
<div key={col.title} className="flex flex-col">
<h3 className="flex items-center gap-2 text-white font-mono text-[14px] uppercase tracking-[-1%] mb-6">
<div className="w-[8px] h-[8px] bg-[#FFFFFF99]"></div>
{col.title}
</h3>
<ul className="flex flex-col gap-1">
{col.links.map((link: { href: string; label: string }) => (
<li key={link.href} className="group/strip">
<Link
href={link.href}
target="_blank"
className="group/strip flex items-center gap-3 text-[14px] font-mono uppercase tracking-[-1%] transition-colors duration-300"
>
<span className="w-1 h-1 bg-[#FFFFFF99] group-hover/strip:bg-white group-active/strip:bg-white transition-colors duration-300 shrink-0"></span>
<span className="relative">
<span className="text-[#FFFFFF99]">
<span className="relative">
<span className="text-[#FFFFFF99]">
{link.label}
</span>
<span
className="absolute inset-y-0 left-0 w-0 group-hover/strip:w-full group-active/strip:w-full overflow-hidden transition-all duration-300 ease-in-out bg-white text-black font-normal pointer-events-none flex items-center"
aria-hidden="true"
>
<span className="whitespace-nowrap">
{link.label}
</span>
<span
className="absolute inset-y-0 left-0 w-0 group-hover/strip:w-full group-active/strip:w-full overflow-hidden transition-all duration-300 ease-in-out bg-white text-black font-normal pointer-events-none flex items-center"
aria-hidden="true"
>
<span className="whitespace-nowrap">
{link.label}
</span>
</span>
</span>
</Link>
</li>
))}
</ul>
</div>
))}
</div>
</span>
</Link>
</li>
))}
</ul>
</div>
))}
</div>
</div>
</div>
<div
className="relative block z-10 bg-black/40 backdrop-blur-md border-y border-[#292929]"
style={{
width: "calc(100% + var(--page-pad) * 2)",
marginLeft: "calc(var(--page-pad) * -1)",
paddingLeft: "var(--page-pad)",
paddingRight: "var(--page-pad)",
}}
>
<div className="max-w-[1400px] mx-auto flex flex-col md:flex-row justify-between items-stretch h-auto md:h-14 font-mono text-[10px] sm:text-[11px] tracking-[0.2em]">
{/* Social Left Box */}
<div className="flex flex-row md:flex-row border-b md:border-b-0 border-[#292929] w-full md:w-auto">
<div className="px-4 sm:px-8 py-4.5 md:py-0 border-r border-[#292929] tracking-[-2%] flex items-center justify-center md:justify-start text-[12px] md:text-[14px]">
SOCIAL
</div>
<div className="px-6 sm:px-8 py-4 md:py-0 flex items-center justify-center md:justify-start gap-3 sm:gap-4 md:border-r border-[#292929]">
<Link
href="https://www.linkedin.com/company/useautumn"
className="group/strip flex items-center text-[14px] tracking-[-2%] transition-colors duration-300"
>
<span className="relative">
<span className="text-[#FFFFFF99] group-hover/strip:text-[#ffffff] text-[12px] md:text-[14px] transition-colors duration-300">
LINKEDIN
</span>
<span
className="absolute inset-y-0 left-0 w-0 group-hover/strip:w-full group-active/strip:w-full overflow-hidden transition-all duration-300 ease-in-out bg-white text-black font-normal pointer-events-none flex items-center"
aria-hidden="true"
>
<span className="whitespace-nowrap">LINKEDIN</span>
</span>
</span>
</Link>
<div className="w-[5px] h-[5px] bg-[#FFFFFF]"></div>
<Link
href="https://x.com/autumnpricing"
className="group/strip flex items-center text-[14px] tracking-[-2%] transition-colors duration-300"
>
<span className="relative">
<span className="text-[#FFFFFF99] group-hover/strip:text-[#ffffff] transition-colors duration-300 text-[12px] md:text-[14px]">
TWITTER
</span>
<span
className="absolute inset-y-0 left-0 w-0 group-hover/strip:w-full group-active/strip:w-full overflow-hidden transition-all duration-300 ease-in-out bg-white text-black font-normal pointer-events-none flex items-center"
aria-hidden="true"
>
<span className="whitespace-nowrap">TWITTER</span>
</span>
</span>
</Link>
</div>
<div
className="relative block z-10 bg-black/40 backdrop-blur-md border-y border-[#292929]"
style={{
width: "calc(100% + var(--page-pad) * 2)",
marginLeft: "calc(var(--page-pad) * -1)",
paddingLeft: "var(--page-pad)",
paddingRight: "var(--page-pad)",
}}
>
<div className="max-w-[1400px] mx-auto flex flex-col md:flex-row justify-between items-stretch h-auto md:h-14 font-mono text-[10px] sm:text-[11px] tracking-[0.2em]">
{/* Social Left Box */}
<div className="flex flex-row md:flex-row border-b md:border-b-0 border-[#292929] w-full md:w-auto">
<div className="px-4 sm:px-8 py-4.5 md:py-0 border-r border-[#292929] tracking-[-2%] flex items-center justify-center md:justify-start text-[12px] md:text-[14px]">
SOCIAL
</div>
<div className="px-6 sm:px-8 py-4 md:py-0 flex items-center justify-center md:justify-start gap-3 sm:gap-4 md:border-r border-[#292929]">
<Link
href="https://www.linkedin.com/company/useautumn"
className="group/strip flex items-center text-[14px] tracking-[-2%] transition-colors duration-300"
>
<span className="relative">
<span className="text-[#FFFFFF99] group-hover/strip:text-[#ffffff] text-[12px] md:text-[14px] transition-colors duration-300">
LINKEDIN
</span>
<span
className="absolute inset-y-0 left-0 w-0 group-hover/strip:w-full group-active/strip:w-full overflow-hidden transition-all duration-300 ease-in-out bg-white text-black font-normal pointer-events-none flex items-center"
aria-hidden="true"
>
<span className="whitespace-nowrap">LINKEDIN</span>
</span>
</span>
</Link>
<div className="w-[5px] h-[5px] bg-[#FFFFFF]"></div>
<Link
href="https://x.com/autumnpricing"
className="group/strip flex items-center text-[14px] tracking-[-2%] transition-colors duration-300"
>
<span className="relative">
<span className="text-[#FFFFFF99] group-hover/strip:text-[#ffffff] transition-colors duration-300 text-[12px] md:text-[14px]">
TWITTER
</span>
<span
className="absolute inset-y-0 left-0 w-0 group-hover/strip:w-full group-active/strip:w-full overflow-hidden transition-all duration-300 ease-in-out bg-white text-black font-normal pointer-events-none flex items-center"
aria-hidden="true"
>
<span className="whitespace-nowrap">TWITTER</span>
</span>
</span>
</Link>
</div>
</div>
<div className="px-4.5 py-4 md:py-0 flex items-center justify-start md:justify-end text-center md:text-right text-[#FFFFFF99] text-[12px] md:text-[14px] tracking-[-2%] border-b md:border-b-0 border-[#292929] w-full md:w-auto">
Copyright © 2026 Autumn All rights reserved
<div className="hidden lg:flex gap-3 ml-[15px] h-[54px]">
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
</div>
<div className="px-4.5 py-4 md:py-0 flex items-center justify-start md:justify-end text-center md:text-right text-[#FFFFFF99] text-[12px] md:text-[14px] tracking-[-2%] border-b md:border-b-0 border-[#292929] w-full md:w-auto">
Copyright © 2026 Autumn All rights reserved
<div className="hidden lg:flex gap-3 ml-[15px] h-[54px]">
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
<div className="border-r border-[#292929]" />
</div>
</div>
</div>
</div>
</footer>
</>
</div>
</footer>
);
}

View File

@@ -1,11 +1,6 @@
"use client";
import { useEffect, useRef, useState } from "react";
import {
IconArrowLeft,
IconArrowRight,
IconQuotes,
PixelatedPattern,
} from "@/app/constant";
import { useCallback, useEffect, useRef, useState } from "react";
import { IconArrowLeft, IconArrowRight, IconQuotes } from "@/app/constant";
const testimonialsData = [
{
@@ -51,7 +46,7 @@ const Testimonials = () => {
const [canScrollLeft, setCanScrollLeft] = useState(false);
const [canScrollRight, setCanScrollRight] = useState(true);
const handleScroll = () => {
const handleScroll = useCallback(() => {
if (scrollRef.current) {
const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
setCanScrollLeft(scrollLeft > 0);
@@ -63,7 +58,7 @@ const Testimonials = () => {
progressRef.current.style.transform = `translateX(${progress}%)`;
}
}
};
}, []);
useEffect(() => {
if (videoRef.current) {
videoRef.current.playbackRate = 0.4;
@@ -74,7 +69,7 @@ const Testimonials = () => {
handleScroll();
window.addEventListener("resize", handleScroll);
return () => window.removeEventListener("resize", handleScroll);
}, []);
}, [handleScroll]);
const scrollByAmount = (amount: number) => {
if (scrollRef.current) {
@@ -97,6 +92,7 @@ const Testimonials = () => {
onClick={() => scrollByAmount(-400)}
disabled={!canScrollLeft}
className="group p-1.5 bg-transparent cursor-pointer flex items-center justify-center transition-all duration-300 border border-[#292929]"
type="button"
aria-label="Previous testimonials"
>
<IconArrowLeft
@@ -109,6 +105,7 @@ const Testimonials = () => {
onClick={() => scrollByAmount(400)}
disabled={!canScrollRight}
className="group p-1.5 bg-transparent cursor-pointer flex items-center justify-center transition-all duration-300 border border-[#292929]"
type="button"
aria-label="Next testimonials"
>
<IconArrowRight
@@ -170,6 +167,7 @@ const Testimonials = () => {
onClick={() => scrollByAmount(-400)}
disabled={!canScrollLeft}
className="p-1.5 bg-transparent flex items-center justify-center border border-[#292929]"
type="button"
aria-label="Previous testimonials"
>
<IconArrowLeft
@@ -182,6 +180,7 @@ const Testimonials = () => {
onClick={() => scrollByAmount(400)}
disabled={!canScrollRight}
className="p-1.5 bg-transparent flex items-center justify-center border border-[#292929]"
type="button"
aria-label="Next testimonials"
>
<IconArrowRight
@@ -202,7 +201,7 @@ const Testimonials = () => {
</div>
</div>
<style jsx global>{`
<style>{`
.hide-scrollbar::-webkit-scrollbar {
display: none;
}

View File

@@ -29,6 +29,7 @@
"@tailwindcss/postcss": "^4.2.2",
"@tailwindcss/typography": "^0.5.19",
"@types/react": "^19.2.14",
"@types/react-syntax-highlighter": "^15.5.13",
"eslint": "^10.2.0",
"eslint-config-next": "16.2.1",
"tailwindcss": "^4.2.2",

View File

@@ -127,6 +127,7 @@
"@tailwindcss/postcss": "^4.2.2",
"@tailwindcss/typography": "^0.5.19",
"@types/react": "^19.2.14",
"@types/react-syntax-highlighter": "^15.5.13",
"eslint": "^10.2.0",
"eslint-config-next": "16.2.1",
"tailwindcss": "^4.2.2",
@@ -2238,6 +2239,8 @@
"@types/react-dom": ["@types/react-dom@18.3.7", "", { "peerDependencies": { "@types/react": "^18.0.0" } }, "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ=="],
"@types/react-syntax-highlighter": ["@types/react-syntax-highlighter@15.5.13", "", { "dependencies": { "@types/react": "*" } }, "sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA=="],
"@types/responselike": ["@types/responselike@1.0.3", "", { "dependencies": { "@types/node": "*" } }, "sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw=="],
"@types/retry": ["@types/retry@0.12.0", "", {}, "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="],
@@ -6390,6 +6393,8 @@
"@types/pg/@types/node": ["@types/node@25.6.0", "", { "dependencies": { "undici-types": "~7.19.0" } }, "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ=="],
"@types/react-syntax-highlighter/@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="],
"@types/responselike/@types/node": ["@types/node@25.6.0", "", { "dependencies": { "undici-types": "~7.19.0" } }, "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ=="],
"@types/send/@types/node": ["@types/node@25.6.0", "", { "dependencies": { "undici-types": "~7.19.0" } }, "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ=="],