Added more pages and updated hero

hqasmei · Jul 14, 2024 · f923887 · f923887
1 parent 3ca8fec
commit f923887
Show file tree

Hide file tree

Showing 9 changed files with 147 additions and 77 deletions.
diff --git a/convex/_generated/api.d.ts b/convex/_generated/api.d.ts
@@ -19,6 +19,7 @@ import type * as favorites from "../favorites.js";
 import type * as http from "../http.js";
 import type * as portfolios from "../portfolios.js";
 import type * as submissions from "../submissions.js";
+import type * as templates from "../templates.js";
 import type * as uploads from "../uploads.js";
 import type * as users from "../users.js";
 import type * as util from "../util.js";
@@ -37,6 +38,7 @@ declare const fullApi: ApiFromModules<{
   http: typeof http;
   portfolios: typeof portfolios;
   submissions: typeof submissions;
+  templates: typeof templates;
   uploads: typeof uploads;
   users: typeof users;
   util: typeof util;

diff --git a/convex/schema.ts b/convex/schema.ts
@@ -32,4 +32,16 @@ export default defineSchema({
   })
     .index('by_userId', ['userId'])
     .index('by_portfolioId', ['portfolioId']),
+  templates: defineTable({
+    name: v.string(),
+    description: v.string(),
+    createdBy: v.string(),
+    image: v.id('_storage'),
+    technology: v.optional(v.array(v.string())),
+    link: v.string(),
+    tags: v.optional(v.array(v.string())),
+    isPaid: v.boolean(),
+  })
+    .index('by_name', ['name'])
+    .index('by_isPaid', ['isPaid']),
 });
diff --git a/convex/templates.ts b/convex/templates.ts
@@ -0,0 +1,34 @@
+import { ConvexError, v } from 'convex/values';
+
+import { mutation, query } from './_generated/server';
+
+export const getAllTemplates = query({
+  handler: async (ctx) => {
+    return await ctx.db.query('templates').collect();
+  },
+});
+
+export const createTemplate = mutation({
+  args: {
+    name: v.string(),
+    description: v.string(),
+    createdBy: v.string(),
+    image: v.id('_storage'),
+    technology: v.optional(v.array(v.string())),
+    link: v.string(),
+    tags: v.optional(v.array(v.string())),
+    isPaid: v.boolean(),
+  },
+  handler: async (ctx, args) => {
+    await ctx.db.insert('templates', {
+      name: args.name,
+      description: args.description,
+      createdBy: args.createdBy,
+      image: args.image,
+      technology: args.technology,
+      link: args.link,
+      tags: args.tags,
+      isPaid: args.isPaid,
+    });
+  },
+});
diff --git a/src/app/(unauthenticated)/(landing)/page.tsx b/src/app/(unauthenticated)/(landing)/page.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import GithubStars from '@/components/github-stars';
 import MaxWidthWrapper from '@/components/max-width-wrapper';
 import { SendEventOnLoad } from '@/components/send-event-on-load';
-import { Spotlight } from '@/components/spotlight';
 
 import Content from './_components/content';
 import Hero from './_components/hero';
@@ -24,10 +23,9 @@ export default function Home() {
         <>
           <div className="flex flex-col items-center justify-center text-center pt-6 sm:pt-0">
             <div className="w-full flex flex-col gap-6 mb-8">
-              <Spotlight
-                className="-top-40 left-0 md:left-[300px] md:-top-20"
-                fill="white"
-              />
+              <div className="absolute inset-0 -z-10 h-full w-full bg-[size:6rem_4rem]">
+                <div className="absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(ellipse_600px_500px_at_50%_200px,#2b2b3b,transparent)]"></div>
+              </div>
               <GithubStars />
               <Hero />
               <Content />

diff --git a/src/app/(unauthenticated)/blog/page.tsx b/src/app/(unauthenticated)/blog/page.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+import React from 'react';
+
+import MaxWidthWrapper from '@/components/max-width-wrapper';
+
+export default function BlogPage() {
+  return (
+    <MaxWidthWrapper>
+      <span className="text-2xl md:text-4xl font-bold">Blog</span>
+      <div className="pb-6 pt-2 relative"></div>
+    </MaxWidthWrapper>
+  );
+}
diff --git a/src/app/(unauthenticated)/templates/page.tsx b/src/app/(unauthenticated)/templates/page.tsx
@@ -1,5 +1,67 @@
+'use client';
+
 import React from 'react';
 
+import Image from 'next/image';
+import Link from 'next/link';
+
+import MaxWidthWrapper from '@/components/max-width-wrapper';
+import { Badge } from '@/components/ui/badge';
+import { Card } from '@/components/ui/card';
+import { api } from '@/convex/_generated/api';
+import { Doc } from '@/convex/_generated/dataModel';
+import { getImageUrl } from '@/lib/get-image-url';
+import { useQuery } from 'convex/react';
+
+function TemplateCard({ template }: { template: Doc<'templates'> }) {
+  const imageUrl = getImageUrl(template.image);
+  return (
+    <Card className="w-full rounded-xl shadow-sm hover:shadow-xl relative border-t-0 group sm:dark:hover:border-muted-foreground duration-200 transition-all">
+      <div className="relative">
+        <Link href={template.link} target="_blank">
+          <div>
+            <div className="overflow-hidden rounded-xl border-t sm:dark:group-hover:border-muted-foreground duration-200 transition-all">
+              <Image
+                src={imageUrl}
+                alt={template.name}
+                width={400}
+                height={200}
+                priority
+                className="object-cover h-56 object-top w-full rounded-xl"
+              />
+            </div>
+          </div>
+          <div className="p-4 text-start">
+            <h3 className="text-xl font-bold">{template.name}</h3>
+
+            {template.tags && !template.tags.includes('') && (
+              <div className="flex gap-2 pt-2">
+                {template.tags.map((tag, idx) => (
+                  <Badge variant="secondary" key={idx}>
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            )}
+          </div>
+        </Link>
+      </div>
+    </Card>
+  );
+}
+
 export default function TemplatesPage() {
-  return <div>TemplatesPage</div>;
+  const getAllTemplates = useQuery(api.templates.getAllTemplates);
+  return (
+    <MaxWidthWrapper>
+      <span className="text-2xl md:text-4xl font-bold">Templates</span>
+      <div className="pb-6 pt-6 relative">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6">
+          {getAllTemplates?.map((template) => (
+            <TemplateCard key={template._id} template={template} />
+          ))}
+        </div>
+      </div>
+    </MaxWidthWrapper>
+  );
 }
diff --git a/src/app/_components/header.tsx b/src/app/_components/header.tsx
@@ -38,9 +38,10 @@ export function Header() {
       >
         <nav className="w-full h-16 items-center flex sm:container mx-auto  px-4">
           <div className="w-full items-center flex flex-row justify-between">
-            <div className="flex flex-row items-center gap-6">
+            <div className="flex flex-row items-center gap-8">
               <MainNav />
-              {session.isLoggedIn && pathname !== '/' && (
+
+              {session.isLoggedIn && pathname !== '/' ? (
                 <div className="hidden md:flex flex-row gap-4 text-sm">
                   <Link
                     href="/dashboard"
@@ -75,7 +76,22 @@ export function Header() {
                     </Link>
                   )}
                 </div>
-              )}
+              ) : null
+              // <div className="flex gap-4 items-center">
+              //   <Link
+              //     href="/blog"
+              //     className="text-muted-foreground hover:text-foreground  hover:duration-200 text-sm"
+              //   >
+              //     Blog
+              //   </Link>
+              //   <Link
+              //     href="/templates"
+              //     className="text-muted-foreground hover:text-foreground  hover:duration-200 text-sm"
+              //   >
+              //     Templates
+              //   </Link>
+              // </div>
+              }
             </div>
             <div className="flex flex-row items-center gap-2">
               <Button

diff --git a/src/components/spotlight.tsx b/src/components/spotlight.tsx
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -60,16 +60,6 @@ module.exports = {
           from: { height: 'var(--radix-accordion-content-height)' },
           to: { height: 0 },
         },
-        spotlight: {
-          '0%': {
-            opacity: 0,
-            transform: 'translate(-72%, -62%) scale(0.5)',
-          },
-          '100%': {
-            opacity: 1,
-            transform: 'translate(-50%,-40%) scale(1)',
-          },
-        },
         gradient: {
           to: {
             backgroundPosition: 'var(--bg-size) 0',
@@ -79,7 +69,6 @@ module.exports = {
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
-        spotlight: 'spotlight 2s ease .75s 1 forwards',
         gradient: 'gradient 8s linear infinite',
       },
     },