Add smooth scroll to pricing section from navbar link
Made-with: Cursor
This commit is contained in:
Ayush Rodrigues
@@ -1182,9 +1182,9 @@ export const faqData = [
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
question: "How long does integration take?",
|
||||
question: "How long would it take to go live?",
|
||||
answer:
|
||||
"Most teams go live in under an hour. Migrating from an existing billing system typically takes 1–2 weeks, depending on complexity. For Series A+ companies, we provide a forward deployed service to work with your team, dual-write to your internal system and Autumn, then smoothly migrate over. Minimal work needed on your part.",
|
||||
"If you're setting up payments for the first time, most teams go live in under an hour. Migrating from an existing billing system typically takes 1–2 weeks, depending on complexity.\n\n For Series A+ companies, we provide a forward deployed service to work with your team, dual-write to your internal system and Autumn, then smoothly migrate over. Minimal work needed on your part.",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
|
||||
@@ -98,13 +98,13 @@ body {
|
||||
--color-purple-light-1: #d4b0ff; /* verify */
|
||||
|
||||
/* --- Legacy Next.js scaffold (kept for compatibility) --------------------- */
|
||||
--background: #ffffff;
|
||||
--background: #000000;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--background: #000000;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,7 +73,7 @@ export default function RootLayout({ children }) {
|
||||
<html
|
||||
lang="en"
|
||||
suppressHydrationWarning
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased bg-black`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col">{children}</body>
|
||||
</html>
|
||||
|
||||
1252
apps/website/bun.lock
Normal file
1252
apps/website/bun.lock
Normal file
File diff suppressed because it is too large
Load Diff
@@ -25,14 +25,14 @@ import {
|
||||
import { DashboardIconPixel } from "./dashboard-icon-pixel";
|
||||
|
||||
const NAV_LINKS = [
|
||||
{ label: "Docs", href: "https://docs.useautumn.com/welcome", Icon: IconDocs },
|
||||
{ label: "Blog", href: "https://useautumn.com/blog", Icon: IconBlog },
|
||||
{ label: "Pricing", href: "#pricing", Icon: IconPricing },
|
||||
{
|
||||
label: "Discord",
|
||||
href: "https://discord.com/invite/STqxY92zuS",
|
||||
Icon: IconDiscord,
|
||||
},
|
||||
{ label: "Blog", href: "https://useautumn.com/blog", Icon: IconBlog },
|
||||
{ label: "Docs", href: "https://docs.useautumn.com/welcome", Icon: IconDocs },
|
||||
{ label: "Pricing", href: "#", Icon: IconPricing },
|
||||
];
|
||||
|
||||
const NavIconPixel = forwardRef(function NavIconPixel({ Icon }, ref) {
|
||||
@@ -97,10 +97,20 @@ const NavIconPixel = forwardRef(function NavIconPixel({ Icon }, ref) {
|
||||
|
||||
function NavLinkItem({ item }) {
|
||||
const iconRef = useRef(null);
|
||||
const isAnchor = item.href.startsWith("#");
|
||||
|
||||
const handleClick = (e) => {
|
||||
if (!isAnchor) return;
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(item.href);
|
||||
if (target) target.scrollIntoView({ behavior: "smooth" });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="nav-link">
|
||||
<Link
|
||||
href={item.href}
|
||||
onClick={handleClick}
|
||||
className="group inline-flex items-center py-2 text-[#FFFFFF99] hover:text-white transition-colors"
|
||||
onMouseEnter={() => iconRef.current?.restart()}
|
||||
onMouseLeave={() => iconRef.current?.reverse()}
|
||||
@@ -363,17 +373,26 @@ export default function Navbar() {
|
||||
>
|
||||
{/* Nav items */}
|
||||
<div className="flex flex-col">
|
||||
{NAV_LINKS.map((item) => (
|
||||
<Link
|
||||
key={item.label}
|
||||
href={item.href}
|
||||
target="_blank"
|
||||
className="flex items-center gap-4 px-4 py-3.5 border-b border-[#292929] active:bg-[#141414ea] text-[#ffffff99] hover:text-white active:text-white transition-colors text-sm tracking-[-1%]"
|
||||
>
|
||||
<item.Icon className="h-3.5 w-3.5 shrink-0" />
|
||||
<span>{item.label}</span>
|
||||
</Link>
|
||||
))}
|
||||
{NAV_LINKS.map((item) => {
|
||||
const isAnchor = item.href.startsWith("#");
|
||||
return (
|
||||
<Link
|
||||
key={item.label}
|
||||
href={item.href}
|
||||
target={isAnchor ? undefined : "_blank"}
|
||||
onClick={isAnchor ? (e) => {
|
||||
e.preventDefault();
|
||||
setMenuOpen(false);
|
||||
const target = document.querySelector(item.href);
|
||||
if (target) target.scrollIntoView({ behavior: "smooth" });
|
||||
} : undefined}
|
||||
className="flex items-center gap-4 px-4 py-3.5 border-b border-[#292929] active:bg-[#141414ea] text-[#ffffff99] hover:text-white active:text-white transition-colors text-sm tracking-[-1%]"
|
||||
>
|
||||
<item.Icon className="h-3.5 w-3.5 shrink-0" />
|
||||
<span>{item.label}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex flex-col mt-auto -mb-2.5">
|
||||
<div className="border-t border-[#292929] py-1.5" />
|
||||
|
||||
@@ -50,7 +50,7 @@ const plans = [
|
||||
export default function Pricing() {
|
||||
return (
|
||||
<>
|
||||
<div className="min-h-screen relative flex w-full lg:w-[calc(100%+calc(var(--page-pad)*2))] lg:-ml-(--page-pad) items-center justify-center lg:py-24 pb-3">
|
||||
<div id="pricing" className="min-h-screen relative flex w-full lg:w-[calc(100%+calc(var(--page-pad)*2))] lg:-ml-(--page-pad) items-center justify-center lg:py-24 pb-3">
|
||||
{/* Desktop Background */}
|
||||
<Image
|
||||
src="/images/pricing/pricing.webp"
|
||||
|
||||
@@ -10,11 +10,13 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@gsap/react": "^2.1.2",
|
||||
"gray-matter": "^4.0.3",
|
||||
"gsap": "^3.14.2",
|
||||
"lottie-react": "^2.4.1",
|
||||
"matter-js": "^0.20.0",
|
||||
"motion": "^12.38.0",
|
||||
"next": "16.2.1",
|
||||
"next-mdx-remote": "^6.0.0",
|
||||
"ngrok": "^5.0.0-beta.2",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4",
|
||||
@@ -22,6 +24,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.2.2",
|
||||
"@tailwindcss/typography": "^0.5.19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.2.1",
|
||||
"tailwindcss": "^4.2.2"
|
||||
|
||||
Reference in New Issue
Block a user