Skip to content

Commit

Permalink
added darkmode
Browse files Browse the repository at this point in the history
  • Loading branch information
@alok-mishra143
alok-mishra143 committed Oct 19, 2024
1 parent f9f76c1 commit 034a112
Show file tree
Hide file tree
Showing 8 changed files with 4,145 additions and 5,119 deletions.
8,607 changes: 3,801 additions & 4,806 deletions pnpm-lock.yaml
View file

Large diffs are not rendered by default.

Binary file added public/noise.webp
View file
Binary file not shown.
44 changes: 22 additions & 22 deletions src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import "./globals.css";
import { cn } from "@/lib/utils";
import Navbar from "@/components/Navbar";
import { ClerkProvider, UserButton } from "@clerk/nextjs";
import { ThemeProvider } from "..//components/ThemeProvider"
import { ThemeProvider } from "..//components/ThemeProvider";
import Footer from "@/components/Footer";

const inter = Inter({ subsets: ["latin"] });
Expand All @@ -21,30 +21,30 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body className={cn('min-h-screen font-sans antialiased grainy',inter.className)}>
<body
className={cn("min-h-screen font-sans antialiased ", inter.className)}
>
<ClerkProvider
appearance={{
// baseTheme: dark,
variables: {
colorPrimary: "#3371ff",
fontSize:'16px'
},
}}
appearance={{
// baseTheme: dark,
variables: {
colorPrimary: "#3371ff",
fontSize: "16px",
},
}}
>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<Navbar />
{children}
<Footer />
</ThemeProvider>
</ClerkProvider>

<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
<Navbar />
{children}
<Footer />
</ThemeProvider>
</ClerkProvider>
</body>
</html>

);
}
275 changes: 133 additions & 142 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,168 +4,159 @@ import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { buttonVariants } from "@/components/ui/button";
import FAQ from "@/components/FAQ";
import Noise from "@/components/noise";

export default function Home() {
return (
<>
<MaxWidthWrapper className="mb-12 mt-28 sm:mt-40 flex flex-col items-center justify-center text-center">
<div className="mx-auto mb-4 flex max-w-fit items-center justify-center space-x-2 overflow-hidden rounded-full border border-gray-200 bg-white px-7 py-2 shadow-md backdrop-blur transition-all hover:border-gray-300 hover:bg-white/50">
<p className="text-sm font-semibold text-gray-700">
FlashFathom AI is now public!
<div className="relative w-full h-full overflow-hidden">
<Noise />
<div className="z-10">
<MaxWidthWrapper className="mb-12 mt-28 sm:mt-40 flex flex-col items-center justify-center text-center">
<div className="mx-auto mb-4 flex max-w-fit items-center justify-center space-x-2 overflow-hidden rounded-full border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800 px-7 py-2 shadow-md backdrop-blur transition-all hover:border-gray-300 hover:bg-white/50 dark:hover:bg-gray-700">
<p className="text-sm font-semibold text-gray-700 dark:text-gray-300">
FlashFathom AI is now public!
</p>
</div>
<h1 className="max-w-4xl text-5xl font-bold md:text-6xl lg:text-7xl text-gray-900 dark:text-gray-100">
Flashcards instantly{" "}
<span className="text-purple-600">wisdom,</span> endlessly.
</h1>
<p className="mt-5 max-w-prose text-zinc-700 dark:text-zinc-300 sm:text-lg">
FlashFathom AI lets you create powerful flashcards in seconds. Just
upload your notes and start mastering concepts faster, with AI that
helps you understand more deeply.
</p>
</div>
<h1 className="max-w-4xl text-5xl font-bold md:text-6xl lg:text-7xl">
Flashcards instantly <span className="text-purple-600">wisdom,</span>{" "}
endlessly.
</h1>
<p className="mt-5 max-w-prose text-zinc-700 sm:text-lg">
FlashFathom AI lets you create powerful flashcards in seconds. Just
upload your notes and start mastering concepts faster, with AI that
helps you understand more deeply.
</p>

<Link
className={`bg-purple-700 hover:bg-purple-500 text-white px-4 py-2 rounded ${buttonVariants(
{
size: "lg",
className: "mt-5",
}
)}`}
href="/generate"
>
Get started <ArrowRight className="ml-2 h-5 w-5" />
</Link>
</MaxWidthWrapper>

{/* value proposition section */}
<div>
<div className="relative isolate">
<div
aria-hidden="true"
className="pointer-events-none absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
<Link
className={`bg-purple-700 hover:bg-purple-500 text-white dark:bg-purple-600 dark:hover:bg-purple-500 px-4 py-2 rounded ${buttonVariants(
{
size: "lg",
className: "mt-5",
}
)}`}
href="/generate"
>
Get started <ArrowRight className="ml-2 h-5 w-5" />
</Link>
</MaxWidthWrapper>

{/* value proposition section */}
<div>
<div className="relative isolate">
<div
style={{
clipPath:
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
}}
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
/>
</div>
aria-hidden="true"
className="pointer-events-none absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
>
<div
style={{
clipPath:
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
}}
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
/>
</div>

<div>
<div className="mx-auto max-w-6xl px-6 lg:px-8">
<div className="mt-16 flow-root sm:mt-24">
<div className="-m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
<Image
src="/FlashCard-Generate.png"
alt="product preview"
width={1364}
height={866}
quality={100}
className="rounded-md bg-white p-2 sm:p-8 md:p-20 shadow-2xl ring-1 ring-gray-900/10"
/>
<div>
<div className="mx-auto max-w-6xl px-6 lg:px-8">
<div className="mt-16 flow-root sm:mt-24">
<div className="-m-2 rounded-xl bg-gray-900/5 dark:bg-gray-800 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
<Image
src="/FlashCard-Generate.png"
alt="product preview"
width={1364}
height={866}
quality={100}
className="rounded-md bg-white dark:bg-gray-900 p-2 sm:p-8 md:p-20 shadow-2xl ring-1 ring-gray-900/10"
/>
</div>
</div>
</div>
</div>
</div>

<div
aria-hidden="true"
className="pointer-events-none absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
>
<div
style={{
clipPath:
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
}}
className="relative left-[calc(50%-13rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-36rem)] sm:w-[72.1875rem]"
/>
</div>
</div>
</div>

{/* Feature section */}
<div className="mx-auto mb-32 mt-32 max-w-5xl sm:mt-56">
<div className="mb-12 px-6 lg:px-8">
<div className="mx-auto max-w-2xl sm:text-center">
<h2 className="mt-2 font-bold text-4xl text-gray-900 sm:text-5xl">
Start creating flashcards in seconds
</h2>
<p className="mt-4 text-lg text-gray-600">
Creating flashcards from your PDF files has never been easier than
with FlashFathom AI
</p>
aria-hidden="true"
className="pointer-events-none absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
>
<div
style={{
clipPath:
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
}}
className="relative left-[calc(50%-13rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-36rem)] sm:w-[72.1875rem]"
/>
</div>
</div>
</div>

{/* steps */}
<ol className="my-8 space-y-4 pt-8 md:flex md:space-x-12 md:space-y-0">
<li className="md:flex-1">
<div className="flex flex-col space-y-2 border-l-4 border-zinc-300 py-2 pl-4 md:border-l-0 md:border-t-2 md:pb-0 md:pl-0 md:pt-4">
<span className="text-sm font-medium text-purple-600">
Step 1
</span>
<span className="text-xl font-semibold">
Sign up for an account
</span>
<span className="mt-2 text-zinc-700">
Either starting out with a free plan or choose our{" "}
<Link
href="/pricing"
className="text-purple-700 underline underline-offset-2"
>
pro plan
</Link>
.
</span>
</div>
</li>
<li className="md:flex-1">
<div className="flex flex-col space-y-2 border-l-4 border-zinc-300 py-2 pl-4 md:border-l-0 md:border-t-2 md:pb-0 md:pl-0 md:pt-4">
<span className="text-sm font-medium text-purple-600">
Step 2
</span>
<span className="text-xl font-semibold">
Upload your PDF file
</span>
<span className="mt-2 text-zinc-700">
We&apos;ll process your file and make it ready for you to create
flashcards with it.
</span>
</div>
</li>
<li className="md:flex-1">
<div className="flex flex-col space-y-2 border-l-4 border-zinc-300 py-2 pl-4 md:border-l-0 md:border-t-2 md:pb-0 md:pl-0 md:pt-4">
<span className="text-sm font-medium text-purple-600">
Step 3
</span>
<span className="text-xl font-semibold">
Start creating flashcards by typing
</span>
<span className="mt-2 text-zinc-700">
It&apos;s that simple. Try out FlashFathom AI today
</span>
</div>
</li>
</ol>
{/* Feature section */}

<div className="mx-auto max-w-6xl px-6 lg:px-8">
<div className="mt-16 flow-root sm:mt-24">
<div className="-m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
<Image
src="/file-upload-preview.jpg"
alt="uploading preview"
width={1419}
height={732}
quality={100}
className="rounded-md bg-white p-2 sm:p-8 md:p-20 shadow-2xl ring-1 ring-gray-900/10"
/>
<div className="mx-auto mb-32 mt-32 max-w-5xl sm:mt-56 overflow-hidden">
<div className="mb-12 px-6 lg:px-8">
<div className="mx-auto max-w-2xl sm:text-center">
<h2 className="mt-2 font-bold text-4xl text-gray-900 dark:text-gray-100 sm:text-5xl">
Start creating flashcards in seconds
</h2>
<p className="mt-4 text-lg text-gray-600 dark:text-gray-300">
Creating flashcards from your PDF files has never been easier
than with FlashFathom AI
</p>
</div>
</div>

{/* steps */}
<ol className="my-8 space-y-4 pt-8 md:flex md:space-x-12 md:space-y-0">
<li className="md:flex-1">
<div className="flex flex-col space-y-2 border-l-4 border-zinc-300 dark:border-zinc-600 py-2 pl-4 md:border-l-0 md:border-t-2 md:pb-0 md:pl-0 md:pt-4">
<span className="text-sm font-medium text-purple-600">
Step 1
</span>
<span className="text-xl font-semibold">
Sign up for an account
</span>
<span className="mt-2 text-zinc-700 dark:text-zinc-400">
Either starting out with a free plan or choose our{" "}
<Link
href="/pricing"
className="text-purple-700 underline underline-offset-2 dark:text-purple-400"
>
pro plan
</Link>
</span>
</div>
</li>
<li className="md:flex-1">
<div className="flex flex-col space-y-2 border-l-4 border-zinc-300 dark:border-zinc-600 py-2 pl-4 md:border-l-0 md:border-t-2 md:pb-0 md:pl-0 md:pt-4">
<span className="text-sm font-medium text-purple-600">
Step 2
</span>
<span className="text-xl font-semibold">
Upload your PDF file
</span>
<span className="mt-2 text-zinc-700 dark:text-zinc-400">
We&apos;ll process your file and make it ready for you to
create flashcards with it.
</span>
</div>
</li>
<li className="md:flex-1">
<div className="flex flex-col space-y-2 border-l-4 border-zinc-300 dark:border-zinc-600 py-2 pl-4 md:border-l-0 md:border-t-2 md:pb-0 md:pl-0 md:pt-4">
<span className="text-sm font-medium text-purple-600">
Step 3
</span>
<span className="text-xl font-semibold">
Start creating flashcards by typing
</span>
<span className="mt-2 text-zinc-700 dark:text-zinc-400">
It&apos;s that simple. Try out FlashFathom AI today
</span>
</div>
</li>
</ol>
</div>
<div className="overflow-hidden">
<FAQ />
</div>
</div>
<FAQ />
</>
</div>
);
}
Loading

0 comments on commit 034a112

Please sign in to comment.