Add Analytics package (#46)
* Add Analytics package Created a new analytics package with a manager to handle tracking of events and page views. The package includes a default provider that can be switched out and uses a NullAnalyticsService if no provider is registered. Additional types, scripts, and package configuration are also provided to support development. * Add marketing components for UI package Introduced new React components under "marketing" for the UI package. These include 'Pill', 'GradientSecondaryText', 'Hero', 'CtaButton', 'FeatureCard', 'FeatureGrid', 'FeatureShowcase', 'GradientText', 'Header', and 'SecondaryHero'. Updated 'package.json' to export these components. Replaced the implementation of 'Home', 'SiteHeader', and 'SiteFooter' with these components for cleaner code and better reusability.
This commit is contained in:
Giancarlo Buomprisco
committed by
GitHub
GitHub
parent
5ee7bacb2a
commit
86d82d889c
@@ -1,5 +1,4 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
import { Footer } from '@kit/ui/marketing';
|
||||
import { Trans } from '@kit/ui/trans';
|
||||
|
||||
import { AppLogo } from '~/components/app-logo';
|
||||
@@ -7,133 +6,53 @@ import appConfig from '~/config/app.config';
|
||||
|
||||
export function SiteFooter() {
|
||||
return (
|
||||
<footer className={'site-footer relative mt-auto w-full py-8 2xl:py-16'}>
|
||||
<div className={'container'}>
|
||||
<div className={'flex flex-col space-y-8 lg:flex-row lg:space-y-0'}>
|
||||
<div
|
||||
className={
|
||||
'flex w-full space-x-2 lg:w-4/12 xl:w-4/12' +
|
||||
' xl:space-x-6 2xl:space-x-8'
|
||||
}
|
||||
>
|
||||
<div className={'flex flex-col space-y-4'}>
|
||||
<div>
|
||||
<AppLogo className={'w-[85px] md:w-[95px]'} />
|
||||
</div>
|
||||
|
||||
<div className={'flex flex-col space-y-4'}>
|
||||
<div>
|
||||
<p className={'text-sm text-muted-foreground'}>
|
||||
<Trans i18nKey={'marketing:footerDescription'} />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={'flex text-xs text-muted-foreground'}>
|
||||
<p>
|
||||
<Trans
|
||||
i18nKey={'marketing:copyright'}
|
||||
values={{
|
||||
product: appConfig.name,
|
||||
year: new Date().getFullYear(),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
'flex flex-col space-y-8 lg:space-x-6 lg:space-y-0' +
|
||||
' w-full lg:flex-row lg:justify-end xl:space-x-16'
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<div className={'flex flex-col space-y-2.5'}>
|
||||
<FooterSectionHeading>
|
||||
<Trans i18nKey={'marketing:about'} />
|
||||
</FooterSectionHeading>
|
||||
|
||||
<FooterSectionList>
|
||||
<FooterLink>
|
||||
<Link href={'/blog'}>
|
||||
<Trans i18nKey={'marketing:blog'} />
|
||||
</Link>
|
||||
</FooterLink>
|
||||
<FooterLink>
|
||||
<Link href={'/contact'}>
|
||||
<Trans i18nKey={'marketing:contact'} />
|
||||
</Link>
|
||||
</FooterLink>
|
||||
</FooterSectionList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className={'flex flex-col space-y-2.5'}>
|
||||
<FooterSectionHeading>
|
||||
<Trans i18nKey={'marketing:product'} />
|
||||
</FooterSectionHeading>
|
||||
|
||||
<FooterSectionList>
|
||||
<FooterLink>
|
||||
<Link href={'/docs'}>
|
||||
<Trans i18nKey={'marketing:documentation'} />
|
||||
</Link>
|
||||
</FooterLink>
|
||||
</FooterSectionList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className={'flex flex-col space-y-2.5'}>
|
||||
<FooterSectionHeading>
|
||||
<Trans i18nKey={'marketing:legal'} />
|
||||
</FooterSectionHeading>
|
||||
|
||||
<FooterSectionList>
|
||||
<FooterLink>
|
||||
<Link href={'/terms-of-service'}>
|
||||
<Trans i18nKey={'marketing:termsOfService'} />
|
||||
</Link>
|
||||
</FooterLink>
|
||||
<FooterLink>
|
||||
<Link href={'/privacy-policy'}>
|
||||
<Trans i18nKey={'marketing:privacyPolicy'} />
|
||||
</Link>
|
||||
</FooterLink>
|
||||
<FooterLink>
|
||||
<Link href={'/cookie-policy'}>
|
||||
<Trans i18nKey={'marketing:cookiePolicy'} />
|
||||
</Link>
|
||||
</FooterLink>
|
||||
</FooterSectionList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
function FooterSectionHeading(props: React.PropsWithChildren) {
|
||||
return <span className={'font-heading'}>{props.children}</span>;
|
||||
}
|
||||
|
||||
function FooterSectionList(props: React.PropsWithChildren) {
|
||||
return <ul className={'flex flex-col space-y-2.5'}>{props.children}</ul>;
|
||||
}
|
||||
|
||||
function FooterLink(props: React.PropsWithChildren) {
|
||||
return (
|
||||
<li
|
||||
className={
|
||||
'text-sm text-muted-foreground hover:underline [&>a]:transition-colors'
|
||||
<Footer
|
||||
logo={<AppLogo className="w-[85px] md:w-[95px]" />}
|
||||
description={<Trans i18nKey="marketing:footerDescription" />}
|
||||
copyright={
|
||||
<Trans
|
||||
i18nKey="marketing:copyright"
|
||||
values={{
|
||||
product: appConfig.name,
|
||||
year: new Date().getFullYear(),
|
||||
}}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{props.children}
|
||||
</li>
|
||||
sections={[
|
||||
{
|
||||
heading: <Trans i18nKey="marketing:about" />,
|
||||
links: [
|
||||
{ href: '/blog', label: <Trans i18nKey="marketing:blog" /> },
|
||||
{ href: '/contact', label: <Trans i18nKey="marketing:contact" /> },
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: <Trans i18nKey="marketing:product" />,
|
||||
links: [
|
||||
{
|
||||
href: '/docs',
|
||||
label: <Trans i18nKey="marketing:documentation" />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: <Trans i18nKey="marketing:legal" />,
|
||||
links: [
|
||||
{
|
||||
href: '/terms-of-service',
|
||||
label: <Trans i18nKey="marketing:termsOfService" />,
|
||||
},
|
||||
{
|
||||
href: '/privacy-policy',
|
||||
label: <Trans i18nKey="marketing:privacyPolicy" />,
|
||||
},
|
||||
{
|
||||
href: '/cookie-policy',
|
||||
label: <Trans i18nKey="marketing:cookiePolicy" />,
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -84,7 +84,7 @@ function AuthButtons() {
|
||||
|
||||
<ArrowRightIcon
|
||||
className={
|
||||
'ml-1 h-4 w-4 transition-transform duration-500 group-hover:translate-x-1 hidden lg:block'
|
||||
'ml-1 hidden h-4 w-4 transition-transform duration-500 group-hover:translate-x-1 lg:block'
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import type { User } from '@supabase/supabase-js';
|
||||
|
||||
import { Header } from '@kit/ui/marketing';
|
||||
|
||||
import { AppLogo } from '~/components/app-logo';
|
||||
|
||||
import { SiteHeaderAccountSection } from './site-header-account-section';
|
||||
@@ -7,26 +9,10 @@ import { SiteNavigation } from './site-navigation';
|
||||
|
||||
export function SiteHeader(props: { user?: User | null }) {
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
'site-header sticky top-0 z-10 w-full bg-background/80 py-2 backdrop-blur-md dark:bg-background/50'
|
||||
}
|
||||
>
|
||||
<div className={'container'}>
|
||||
<div className="grid h-14 grid-cols-3 items-center">
|
||||
<div>
|
||||
<AppLogo />
|
||||
</div>
|
||||
|
||||
<div className={'order-first md:order-none'}>
|
||||
<SiteNavigation />
|
||||
</div>
|
||||
|
||||
<div className={'flex items-center justify-end space-x-1'}>
|
||||
<SiteHeaderAccountSection user={props.user ?? null} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Header
|
||||
logo={<AppLogo />}
|
||||
navigation={<SiteNavigation />}
|
||||
actions={<SiteHeaderAccountSection user={props.user ?? null} />}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user