diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..00bba9b --- /dev/null +++ b/.gitignore @@ -0,0 +1,37 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local +.env + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/README.md b/README.md new file mode 100644 index 0000000..c403366 --- /dev/null +++ b/README.md @@ -0,0 +1,36 @@ +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx new file mode 100644 index 0000000..0a4d7be --- /dev/null +++ b/app/(auth)/layout.tsx @@ -0,0 +1,13 @@ + +export default function AuthLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( +
+ {children} +
+ + ) +} diff --git a/app/(auth)/sign-in/[[...sign-in]]/page.tsx b/app/(auth)/sign-in/[[...sign-in]]/page.tsx new file mode 100644 index 0000000..18ded7f --- /dev/null +++ b/app/(auth)/sign-in/[[...sign-in]]/page.tsx @@ -0,0 +1,5 @@ +import { SignIn } from '@clerk/nextjs' + +export default function Page() { + return +} \ No newline at end of file diff --git a/app/(auth)/sign-up/[[...sign-up]]/page.tsx b/app/(auth)/sign-up/[[...sign-up]]/page.tsx new file mode 100644 index 0000000..903a7d0 --- /dev/null +++ b/app/(auth)/sign-up/[[...sign-up]]/page.tsx @@ -0,0 +1,5 @@ +import { SignUp } from '@clerk/nextjs' + +export default function Page() { + return +} \ No newline at end of file diff --git a/app/(root)/analytics/page.tsx b/app/(root)/analytics/page.tsx new file mode 100644 index 0000000..dee0832 --- /dev/null +++ b/app/(root)/analytics/page.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +const AnalyticsPage = () => { + return ( +
AnalyticsPage
+ ) +} + +export default AnalyticsPage \ No newline at end of file diff --git a/app/(root)/customer/page.tsx b/app/(root)/customer/page.tsx new file mode 100644 index 0000000..5263820 --- /dev/null +++ b/app/(root)/customer/page.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +const CustomerPage = () => { + return ( +
CustomerPage
+ ) +} + +export default CustomerPage \ No newline at end of file diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx new file mode 100644 index 0000000..056a1fb --- /dev/null +++ b/app/(root)/layout.tsx @@ -0,0 +1,13 @@ +import Navbar from "@/components/shared/navbar" + +const RootLayout = ({children}:{children:React.ReactNode}) => { + return ( +
+ +
{children}
+ +
+ ) +} + +export default RootLayout \ No newline at end of file diff --git a/app/(root)/mission/page.tsx b/app/(root)/mission/page.tsx new file mode 100644 index 0000000..534eda1 --- /dev/null +++ b/app/(root)/mission/page.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +const MissionPage = () => { + return ( +
MissionPage
+ ) +} + +export default MissionPage \ No newline at end of file diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx new file mode 100644 index 0000000..392136b --- /dev/null +++ b/app/(root)/page.tsx @@ -0,0 +1,7 @@ +import Hero from "@/components/shared/hero" + +export default function Home() { + return ( + + ) +} diff --git a/app/favicon.ico b/app/favicon.ico new file mode 100644 index 0000000..718d6fe Binary files /dev/null and b/app/favicon.ico differ diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..1c0ac8a --- /dev/null +++ b/app/globals.css @@ -0,0 +1,87 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; +} + +@media (prefers-color-scheme: dark) { + :root { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; + } +} + +@layer base { + :root { + --background: 240 5% 6%; + --foreground: 60 5% 90%; + --primary: 240 0% 90%; + --primary-foreground: 60 0% 0%; + --secondary: 240 4% 15%; + --secondary-foreground: 60 5% 85%; + --accent: 240 0% 13%; + --accent-foreground: 60 0% 100%; + --destructive: 0 60% 50%; + --destructive-foreground: 0 0% 98%; + --muted: 240 5% 25%; + --muted-foreground: 60 5% 85%; + --card: 240 4% 10%; + --card-foreground: 60 5% 90%; + --popover: 240 5% 15%; + --popover-foreground: 60 5% 85%; + --border: 240 6% 20%; + --input: 240 6% 20%; + --ring: 240 5% 90%; + --chart-1: 359 2% 90%; + --chart-2: 240 1% 74%; + --chart-3: 240 1% 58%; + --chart-4: 240 1% 42%; + --chart-5: 240 2% 26%; + } + + .dark { + --background: 240 5% 6%; + --foreground: 60 5% 90%; + --primary: 240 0% 90%; + --primary-foreground: 60 0% 0%; + --secondary: 240 4% 15%; + --secondary-foreground: 60 5% 85%; + --accent: 240 0% 13%; + --accent-foreground: 60 0% 100%; + --destructive: 0 60% 50%; + --destructive-foreground: 0 0% 98%; + --muted: 240 5% 25%; + --muted-foreground: 60 5% 85%; + --card: 240 4% 10%; + --card-foreground: 60 5% 90%; + --popover: 240 5% 15%; + --popover-foreground: 60 5% 85%; + --border: 240 6% 20%; + --input: 240 6% 20%; + --ring: 240 5% 90%; + --chart-1: 359 2% 90%; + --chart-2: 240 1% 74%; + --chart-3: 240 1% 58%; + --chart-4: 240 1% 42%; + --chart-5: 240 2% 26%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } + @layer utilities { + .custom-shadow { + box-shadow: 0 0 7px 0px rgba(0, 0, 0, 0.25); /* Sadece alta gölge */ + } + } +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..c6d8da1 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,30 @@ +import type { Metadata } from 'next' +import { Inter } from 'next/font/google' +import './globals.css' + +const inter = Inter({ subsets: ['latin'] }) + +export const metadata: Metadata = { + title: 'Süslü Crm', + description: 'Generated by create next app', +} +import { ClerkProvider } from '@clerk/nextjs' +import { Providers } from '@/components/provider/provider' + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + + + + {children} + + + + + ) +} diff --git a/components.json b/components.json new file mode 100644 index 0000000..b4a3a74 --- /dev/null +++ b/components.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "app/globals.css", + "baseColor": "slate", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + } +} \ No newline at end of file diff --git a/components/provider/provider.tsx b/components/provider/provider.tsx new file mode 100644 index 0000000..7be2602 --- /dev/null +++ b/components/provider/provider.tsx @@ -0,0 +1,17 @@ +"use client" + +import { FC, ReactNode} from "react" + + +interface ProvidersProps { + children: ReactNode +} + +export const Providers: FC = ({ children }) => { + return ( +
+ + {children} +
+ ) +} \ No newline at end of file diff --git a/components/shared/hero.tsx b/components/shared/hero.tsx new file mode 100644 index 0000000..150ea68 --- /dev/null +++ b/components/shared/hero.tsx @@ -0,0 +1,101 @@ + +"use client" + +import * as React from "react" +import { Bar, BarChart, CartesianGrid, XAxis } from "recharts" + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/components/ui/chart" +import { Button } from "../ui/button" +import Link from "next/link" +import { TrendingUp } from "lucide-react" +export const description = "A multiple bar chart" + +const Hero = () => { + const chartData = [ + { month: "January", desktop: 80, mobile: 180 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 220, mobile: 360 }, + { month: "May", desktop: 209, mobile: 300 }, + { month: "June", desktop: 514, mobile: 500 }, + ] + const chartConfig = { + desktop: { + label: "Desktop", + color: "hsl(var(--chart-1))", + }, + mobile: { + label: "Mobile", + color: "hsl(var(--chart-2))", + }, + } satisfies ChartConfig + + + return ( +
+ +
+

+ Shape the Future with Your Data! +

+ Analyze your data to optimize your business processes and strengthen your strategic decisions.
Discover growth opportunities with meaningful charts and reports. + +
+
+ + + Bar Chart - Multiple + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + +
+
+ ) +} + + + +export default Hero \ No newline at end of file diff --git a/components/shared/navbar.tsx b/components/shared/navbar.tsx new file mode 100644 index 0000000..1af3aa7 --- /dev/null +++ b/components/shared/navbar.tsx @@ -0,0 +1,71 @@ +import Link from "next/link"; +import Image from "next/image"; +import { + ClerkLoaded, + ClerkLoading, + SignedIn, + SignedOut, + UserButton, +} from "@clerk/nextjs"; + + +const Navbar = () => { + + return ( +
+ {/* LEFT */} +
+ + CRM + +
+ {/* CENTER */} +
+ {/* LINKS */} +
+ + + Customer + + + + Mission + + + + Analytics + +
+ +
+ {/* RIGHT */} +
+ +
+ + + +
+ People +
+
+ Message +
+
+ notifications +
+ + + +
+ Login + Register +
+ + +
+
+ ); +}; + +export default Navbar; \ No newline at end of file diff --git a/components/ui/button.tsx b/components/ui/button.tsx new file mode 100644 index 0000000..65d4fcd --- /dev/null +++ b/components/ui/button.tsx @@ -0,0 +1,57 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", + { + variants: { + variant: { + default: + "bg-primary text-primary-foreground shadow hover:bg-primary/90", + destructive: + "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", + outline: + "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", + secondary: + "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-9 px-4 py-2", + sm: "h-8 rounded-md px-3 text-xs", + lg: "h-10 rounded-md px-8", + icon: "h-9 w-9", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +) + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean +} + +const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button" + return ( + + ) + } +) +Button.displayName = "Button" + +export { Button, buttonVariants } diff --git a/components/ui/card.tsx b/components/ui/card.tsx new file mode 100644 index 0000000..77e9fb7 --- /dev/null +++ b/components/ui/card.tsx @@ -0,0 +1,76 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +const Card = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +Card.displayName = "Card" + +const CardHeader = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +CardHeader.displayName = "CardHeader" + +const CardTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)) +CardTitle.displayName = "CardTitle" + +const CardDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)) +CardDescription.displayName = "CardDescription" + +const CardContent = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)) +CardContent.displayName = "CardContent" + +const CardFooter = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +CardFooter.displayName = "CardFooter" + +export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } diff --git a/components/ui/chart.tsx b/components/ui/chart.tsx new file mode 100644 index 0000000..0510f5b --- /dev/null +++ b/components/ui/chart.tsx @@ -0,0 +1,370 @@ +"use client" + +import * as React from "react" +import * as RechartsPrimitive from "recharts" +import { + NameType, + Payload, + ValueType, +} from "recharts/types/component/DefaultTooltipContent" + +import { cn } from "@/lib/utils" + +// Format: { THEME_NAME: CSS_SELECTOR } +const THEMES = { light: "", dark: ".dark" } as const + +export type ChartConfig = { + [k in string]: { + label?: React.ReactNode + icon?: React.ComponentType + } & ( + | { color?: string; theme?: never } + | { color?: never; theme: Record } + ) +} + +type ChartContextProps = { + config: ChartConfig +} + +const ChartContext = React.createContext(null) + +function useChart() { + const context = React.useContext(ChartContext) + + if (!context) { + throw new Error("useChart must be used within a ") + } + + return context +} + +const ChartContainer = React.forwardRef< + HTMLDivElement, + React.ComponentProps<"div"> & { + config: ChartConfig + children: React.ComponentProps< + typeof RechartsPrimitive.ResponsiveContainer + >["children"] + } +>(({ id, className, children, config, ...props }, ref) => { + const uniqueId = React.useId() + const chartId = `chart-${id || uniqueId.replace(/:/g, "")}` + + return ( + +
+ + + {children} + +
+ + ) +}) +ChartContainer.displayName = "Chart" + +const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { + const colorConfig = Object.entries(config).filter( + ([_, config]) => config.theme || config.color + ) + + if (!colorConfig.length) { + return null + } + + return ( +