Skip to content

Commit

Permalink
adapt to mobile ui (#72)
Browse files Browse the repository at this point in the history 
Co-authored-by: yaobingxun <>
  • Loading branch information
@jackc3
jackc3 authored Jun 16, 2024
1 parent aeedc55 commit 6be92e4
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 43 deletions.
90 changes: 48 additions & 42 deletions apps/nextjs/src/app/[lang]/(marketing)/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,52 +35,54 @@ export default async function IndexPage({

return (
<>
<section className="h-[100vh] w-full">
<div className="flex h-full w-full justify-between px-[220px]">
<div className="flex flex-col pr-4 pt-28">
<Link href="https://document.saasfly.io" target="_blank">
<DocumentGuide>
{dict.marketing.introducing || "Introducing Saasfly"}
</DocumentGuide>
</Link>
<section className="xl:h-[100vh] w-full px-8 sm:px-48 xl:px-48 md:px-48">
<div className="grid grid-cols-1 xl:grid-cols-2 gap-10 pb-10 md:pb-40">
<div className="flex flex-col items-start">
<div className="flex flex-col pt-4 lg:pt-28 xl:pt-28 md:pt-28">
<Link href="https://document.saasfly.io" target="_blank">
<DocumentGuide>
{dict.marketing.introducing || "Introducing Saasfly"}
</DocumentGuide>
</Link>

<div className="mt-4 pr-12">
<h1 className="relative mb-6 max-w-4xl text-left text-3xl font-bold dark:text-zinc-100 md:text-7xl">
{dict.marketing.title ||
"Saasfly: A new SaaS player? Make things easier."}
</h1>
</div>
<div className="mt-6">
<h1 className="relative mb-6 max-w-4xl text-left text-4xl font-bold dark:text-zinc-100 sm:text-7xl md:text-7xl xl:text-7xl">
{dict.marketing.title ||
"Saasfly: A new SaaS player? Make things easier."}
</h1>
</div>

<div>
<span className="text-zinc-500 sm:text-xl">
{dict.marketing.sub_title ||
"Your complete All-in-One solution for building SaaS services."}
</span>
<TypewriterEffectSmooths />
</div>
<div>
<span className="text-zinc-500 sm:text-xl">
{dict.marketing.sub_title ||
"Your complete All-in-One solution for building SaaS services."}
</span>
<TypewriterEffectSmooths />
</div>

<div className="mt-8 flex">
<Link href={`${lang}/login`}>
<ShimmerButton>
<span className="z-10 w-36 whitespace-pre bg-gradient-to-b from-black from-30% to-gray-300/80 bg-clip-text text-center text-sm font-semibold leading-none tracking-tight text-white dark:from-white dark:to-slate-900/10 dark:text-transparent">
{dict.marketing.get_started}
</span>
</ShimmerButton>
</Link>
<div className="mt-6 flex sm:flex-row flex-col space-y-4 justify-center sm:space-y-0 sm:space-x-8 sm:justify-start mb-4 w-full">
<Link href={`${lang}/login`}>
<ShimmerButton className="flex justify-center mx-auto">
<span className="z-10 w-48 whitespace-pre bg-gradient-to-b from-black from-30% to-gray-300/80 bg-clip-text text-center text-sm font-semibold leading-none tracking-tight text-white dark:from-white dark:to-slate-900/10 dark:text-transparent">
{dict.marketing.get_started}
</span>
</ShimmerButton>
</Link>

<Link href="https://github.com/saasfly/saasfly" target="_blank">
<div className="ml-10 flex h-full items-center justify-center">
<Icons.GitHub className="mr-2 h-6 w-6" />
<span className="text-base font-semibold">
{dict.marketing.view_on_github || "View on GitHub"}
</span>
</div>
</Link>
<Link href="https://github.com/saasfly/saasfly" target="_blank">
<div className="flex h-full items-center justify-center">
<Icons.GitHub className="mr-2 h-6 w-6" />
<span className="text-base font-semibold">
{dict.marketing.view_on_github || "View on GitHub"}
</span>
</div>
</Link>
</div>
</div>
</div>

<div className="h-full w-full">
<div className="flex flex-col pl-[120px] pt-28">
<div className="h-full w-full hidden xl:block">
<div className="flex flex-col pt-28">
<Meteorss meteor={meteors_data} />
<div className="mt-4 flex w-full justify-between">
<XBlogArticle />
Expand All @@ -93,7 +95,7 @@ export default async function IndexPage({
</div>
</section>

<section className="h-[100vh] w-full">
<section className="h-[100vh] w-full hidden xl:block">
<div className="flex h-full w-full justify-between px-[220px]">
<div className="flex w-[60%] flex-col pr-4 pt-40">
<WobbleCardShow />
Expand All @@ -106,7 +108,7 @@ export default async function IndexPage({
</div>
</section>

<section className="h-[100vh] w-full">
<section className="h-[100vh] w-full hidden xl:block">
<div className="flex h-full w-full justify-between px-[220px]">
<div className="flex w-[60%] flex-col pr-4 pt-40">
<div className="px-[120px]">
Expand All @@ -116,7 +118,11 @@ export default async function IndexPage({
</div>
</section>

<section className="w-full">
<section className="w-full xl:hidden px-8">
<Questions />
</section>

<section className="w-full px-8 pt-10 sm:px-0 xl:px-0 md:px-0 sm:pt-0 xl:pt-0 md:pt-0">
<div className="flex h-full w-full flex-col items-center pb-[100px] pt-10">
<div>
<h1 className="mb-6 text-center text-3xl font-bold dark:text-zinc-100 md:text-5xl">
Expand Down
2 changes: 1 addition & 1 deletion apps/nextjs/src/components/comments.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const ReviewCard = ({

const Comments = () => {
return (
<div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-background py-20">
<div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-background py-4 sm:py-20 md:py-20 xl:py-20">
<Marquee pauseOnHover className="[--duration:20s]">
{firstRow.map((review) => (
<ReviewCard key={review.username} {...review} />
Expand Down

0 comments on commit 6be92e4

Please sign in to comment.