content writing

app/about/page.tsx

@@ -1,34 +1,37 @@
 const people = [
   {
-    name: "Jane Cooper",
-    role: "Paradigm Representative",
-    imageUrl:
-      "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
-    linkedinUrl: "#",
+    name: "Sam Antonis",
+    role: "Lead Developer",
+    imageUrl: "/Sam.jpg",
+    linkedinUrl: "https://www.linkedin.com/in/sam-antonis-296144186/",
   },
   {
-    name: "Jane Cooper",
-    role: "Paradigm Representative",
+    name: "Nick Eliaerts",
+    role: "Junior Developer",
     imageUrl:
       "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
-    linkedinUrl: "#",
+    linkedinUrl: "https://www.linkedin.com/in/nick-eliaerts-76b8574a/",
   },
   {
-    name: "Jane Cooper",
-    role: "Paradigm Representative",
-    imageUrl:
-      "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
-    linkedinUrl: "#",
+    name: "Britt Van Damme",
+    role: "Ecommerce Specialist",
+    imageUrl: "/Britt.jpg",
+    linkedinUrl: "https://www.linkedin.com/in/britt-van-damme/",
+  },
+  {
+    name: "Silke Joosens",
+    role: "Designer",
+    imageUrl: "/Silke.jpg",
+    linkedinUrl: "https://www.linkedin.com/in/silkejoosens/",
   },
 ]
 
 export default async function About() {
   return (
     <section>
-      <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
+      <div className="p-2 mx-auto grid max-w-screen-xl text-center">
         <div className="mx-auto place-self-center">
-          {" "}
-          <div className="py-24 sm:py-32">
+          <div className="pb-4 pt-24">
             <div className="mx-auto max-w-7xl px-6 text-center lg:px-8">
               <div className="mx-auto max-w-2xl">
                 <h2 className="text-3xl font-bold tracking-tight text-primary-800 sm:text-4xl">Meet our team</h2>
@@ -38,18 +41,16 @@ export default async function About() {
               </div>
               <ul
                 role="list"
-                className="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-8"
+                className="l mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none  lg:grid-cols-4 lg:gap-8"
               >
-                {people.map((person) => (
-                  <li key={person.name} className="rounded-2xl bg-primary-800 px-8 py-10">
-                    <img className="mx-auto h-48 w-48 rounded-full md:h-56 md:w-56" src={person.imageUrl} alt="" />
-                    <h3 className="mt-6 text-base font-semibold leading-7 tracking-tight text-primary-50">
-                      {person.name}
-                    </h3>
-                    <p className="text-sm leading-6 text-primary-50">{person.role}</p>
+                {people.map(({ name, imageUrl, role, linkedinUrl }) => (
+                  <li key={name} className="rounded-2xl bg-primary-800 px-8 py-10">
+                    <img className="mx-auto h-48 w-48 rounded-full md:h-56 md:w-56" src={imageUrl} alt={name} />
+                    <h3 className="mt-6 text-base font-semibold leading-7 tracking-tight text-primary-50">{name}</h3>
+                    <p className="text-sm leading-6 text-primary-50">{role}</p>
                     <ul role="list" className="mt-6 flex justify-center gap-x-6">
                       <li>
-                        <a href={person.linkedinUrl} className="text-primary-50 hover:text-primary-50">
+                        <a href={linkedinUrl} className="text-primary-50 hover:text-primary-50">
                           <span className="sr-only">LinkedIn</span>
                           <svg className="h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
                             <path

app/api/chat/route.ts

@@ -1,27 +0,0 @@
-import { OpenAIStream, StreamingTextResponse } from 'ai'
-import { Configuration, OpenAIApi } from 'openai-edge'
-
-// Create an OpenAI API client (that's edge friendly!)
-const config = new Configuration({
-    apiKey: process.env.OPENAI_API_KEY
-})
-const openai = new OpenAIApi(config)
-
-// IMPORTANT! Set the runtime to edge
-export const runtime = 'edge'
-
-export async function POST(req: Request) {
-    // Extract the `messages` from the body of the request
-    const { messages } = await req.json()
-
-    // Ask OpenAI for a streaming chat completion given the prompt
-    const response = await openai.createChatCompletion({
-        model: 'gpt-3.5-turbo',
-        stream: true,
-        messages
-    })
-    // Convert the response into a friendly text-stream
-    const stream = OpenAIStream(response)
-    // Respond with the stream
-    return new StreamingTextResponse(stream)
-}

app/contact/page.tsx

@@ -38,9 +38,9 @@ export default function Contact() {
                   <BuildingOffice2Icon className="h-7 w-6 text-primary-800" aria-hidden="true" />
                 </dt>
                 <dd>
-                  Ticheltij 16
+                  Kammenstraat 57
                   <br />
-                  Westmalle, 2390, Antwerpen
+                  2000, Antwerpen
                 </dd>
               </div>
               <div className="flex gap-x-4">

app/layout.tsx

@@ -35,7 +35,7 @@ export default function RootLayout({
         <NextUiProvider>
           <div className="flex min-h-screen flex-col justify-between bg-primary-50">
             <Navbar />
-            <main className="mb-auto h-auto">{children}</main>
+            <main className="mb-auto h-[calc(100%-160px)]">{children}</main>
             <Footer />
           </div>
         </NextUiProvider>

app/page.tsx

@@ -3,7 +3,7 @@ import Link from "next/link"
 export default async function Web() {
   return (
     <section>
-      <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
+      <div className="mx-auto grid max-w-screen-xl p-2 pt-8 text-center">
         <div className="mx-auto place-self-center">
           <div className="relative">
             <div className="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">

app/projects/page.tsx

@@ -1,22 +0,0 @@
-import { getProjects } from "../actions"
-
-export default async function Projects() {
-  const projects = await getProjects()
-
-  return (
-    <section>
-      <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
-        <div className="mx-auto place-self-center">
-          {projects.map((project) => (
-            <div
-              key={project.id}
-              className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl"
-            >
-              {project.name}
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}

app/services/page.tsx

@@ -0,0 +1,59 @@
+import { BuildingStorefrontIcon, CloudArrowUpIcon, LightBulbIcon, PaintBrushIcon } from "@heroicons/react/24/solid"
+
+const features = [
+  {
+    name: "Web & E-commerce",
+    description:
+      "Elevating businesses online with tailored solutions from basic websites to full custom E-commerce stores and expert Shopify development.",
+    icon: BuildingStorefrontIcon,
+  },
+  {
+    name: "Branding & design",
+    description: "Crafting captivating identities through design, our services breathe life into brands.",
+    icon: PaintBrushIcon,
+  },
+  {
+    name: "Cloud based setup",
+    description: "Taking software to new heights by placing it all on the cloud's limitless expanse.",
+    icon: CloudArrowUpIcon,
+  },
+  {
+    name: "Your idea here",
+    description:
+      "Experience a warm welcome at our place, savor a cup of coffee, and share your vision – together, we'll uncover the perfect solution for you",
+    icon: LightBulbIcon,
+  },
+]
+
+export default async function Projects() {
+  return (
+    <section>
+      <div className="mx-auto grid max-w-screen-xl p-4 text-center">
+        <div className="mx-auto place-self-center">
+          <div className="pb-4 pt-24">
+            <div className="mx-auto max-w-7xl px-6 lg:px-8">
+              <div className="mx-auto max-w-2xl lg:text-center">
+                <p className="mt-2 text-3xl font-bold tracking-tight text-primary-800 sm:text-4xl">
+                  Everything to build your online presence
+                </p>
+              </div>
+              <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
+                <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
+                  {features.map((feature) => (
+                    <div key={feature.name} className="relative flex flex-col pl-16">
+                      <div className="mx-auto mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-primary-800">
+                        <feature.icon className="h-6 w-6 text-white" aria-hidden="true" />
+                      </div>
+                      <dt className="text-base font-semibold leading-7 text-primary-800">{feature.name}</dt>
+                      <dd className="mt-2 text-base leading-7 text-primary-800">{feature.description}</dd>
+                    </div>
+                  ))}
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

components/Chat/Chat.tsx

@@ -1,23 +0,0 @@
-"use client"
-import { useChat } from "ai/react"
-
-export default function Chat() {
-  const { messages, input, handleInputChange, handleSubmit } = useChat()
-
-  return (
-    <div>
-      {messages.map((m) => (
-        <div key={m.id}>
-          {m.role}: {m.content}
-        </div>
-      ))}
-
-      <form onSubmit={handleSubmit}>
-        <label>
-          Say something...
-          <input value={input} onChange={handleInputChange} />
-        </label>
-      </form>
-    </div>
-  )
-}

components/Footer/Footer.tsx

@@ -1,9 +1,13 @@
-import Image from "next/image";
+import Image from "next/image"
 
 export default function Footer() {
   return (
-    <footer className="flex justify-center bg-primary-800 p-4 text-primary-100">
-      <Image width={250} height={250} className="block h-8 w-auto" src="/Isacon logo RGB_1.png" alt="Isacon" />
+    <footer className="flex flex-col bg-primary-800 p-4 text-primary-100">
+      <div className="grid mx-auto text-center gap-1">
+        <Image width={250} height={250} className="block mx-auto h-8 w-auto" src="/Isacon logo RGB_1.png" alt="Isacon" />
+        <div>+32496799751</div>
+        <div>Kammenstraat 57, 2000 Antwerpen</div>
+      </div>
     </footer>
   )
 }

components/Navbar/Navbar.tsx

@@ -30,9 +30,9 @@ export default function Nav() {
       current: currentRoute === "/about",
     },
     {
-      label: "Projects",
-      href: "/projects",
-      current: currentRoute === "/projects",
+      label: "Services",
+      href: "/services",
+      current: currentRoute === "/services",
     },
     {
       label: "Contact",
@@ -67,7 +67,11 @@ export default function Nav() {
       <NavbarContent className="hidden gap-4 md:flex" justify="center">
         {menuItems.map((item) => (
           <NavbarItem key={item.href} isActive={item.current}>
-            <Link href={item.href} aria-current={item.current ? "page" : undefined}>
+            <Link
+              className={item.current ? "border-b-2 border-b-primary-50" : ""}
+              href={item.href}
+              aria-current={item.current ? "page" : undefined}
+            >
               {item.label}
             </Link>
           </NavbarItem>