Add files via upload

.env.local

@@ -0,0 +1,2 @@
+API_KEY=57a86002-4a1c-4303-8e9c-293c83c95ee0
+NEXT_PUBLIC_APP_ID=b133bf1c-de87-495f-a181-7072486cb517

components/PostListItem.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Link from 'next/link'
+
+interface PostListItemProps {
+  title: string
+  href: string
+  content: string
+}
+
+const PostListItem: React.FC<PostListItemProps> = ({ title, href, content }) => {
+  return (
+    <Link href={`/blog/post/${href}`}>
+      <a className="flex-1 block group py-4 text-gray-900 hover:bg-gray-50 transition-colors duration-300 p-6 -m-6 rounded">
+        <h3 className="font-bold text-2xl">{title}</h3>
+        <p className="mt-4 leading-6 text-lg">{content}</p>
+        <div className="flex items-center mt-4 text-cyan-500 group-hover:text-cyan-600 font-semibold">
+          <div className="mr-2 group-hover:mr-4 transition-all duration-300">Read More</div>
+          &raquo;
+        </div>
+      </a>
+    </Link>
+  )
+}
+
+export default PostListItem

components/errorNoHomePage.tsx

@@ -0,0 +1,15 @@
+const ErrorNoHomePage = () => {
+  return (
+    <div className="max-w-5xl mx-auto px-6 py-20 text-gray-600">
+      <h1 className="text-2xl text-red-600 font-semibold mb-8">
+        Warning: there is no page with a "home" slug.
+      </h1>
+      <p className="mb-6">
+        Please, create a page in the editor with a slug "home" that will be your
+        home page.
+      </p>
+    </div>
+  )
+}
+
+export default ErrorNoHomePage

components/errorNoKeys.tsx

@@ -0,0 +1,36 @@
+const ErrorNoKeys = () => {
+  return (
+    <div className="max-w-5xl mx-auto px-6 py-20 text-gray-600">
+      <h1 className="text-2xl text-red-600 font-semibold mb-8">
+        Warning: missing App credentials
+      </h1>
+      <p className="mb-6">
+        <code className="text-sm text-black bg-gray-100 px-1 py-1 rounded">
+          NEXT_PUBLIC_APP_ID
+        </code>{' '}
+        and{' '}
+        <code className="text-sm text-black bg-gray-100 px-1 py-1 rounded">
+          API_KEY
+        </code>{' '}
+        are not configured in your{' '}
+        <code className="text-sm text-black bg-gray-100 px-1 py-1 rounded">
+          .env.local
+        </code>{' '}
+        file.
+      </p>
+      <p className="mb-2">
+        Please create a{' '}
+        <code className="text-sm text-black bg-gray-100 px-1 py-1 rounded">
+          .env.local
+        </code>{' '}
+        file with:
+      </p>
+      <pre className="bg-gray-900 text-white px-4 py-3 rounded">
+        {`NEXT_PUBLIC_APP_ID=...
+API_KEY=...`}
+      </pre>
+    </div>
+  )
+}
+
+export default ErrorNoKeys

components/errorNoPage.tsx

@@ -0,0 +1,14 @@
+const ErrorNoPage = () => {
+  return (
+    <div className="max-w-5xl mx-auto px-6 py-20 text-gray-600">
+      <h1 className="text-2xl text-red-600 font-semibold mb-8">
+        Page not found
+      </h1>
+      <p className="mb-6">
+        React Bricks cannot find a page for the specified slug.
+      </p>
+    </div>
+  )
+}
+
+export default ErrorNoPage

components/footer.tsx

@@ -0,0 +1,24 @@
+const Footer = () => {
+  return (
+    <footer className="bg-gray-50 border-t py-12 h-32">
+      <div className="max-w-5xl mx-auto flex justify-between">
+        <div className="flex items-center space-x-4">
+          <img
+            src="/react-bricks-icon.svg"
+            alt="React Bricks"
+            className="w-8"
+          />
+          <div className="uppercase text-sm tracking-wider">Next.js website starter</div>
+        </div>
+        <div className="text-gray-500 text-sm">
+          © {new Date().getFullYear()}{' '}
+          <a href="https://reactbricks.com" className="hover:text-pink-600">
+            React Bricks
+          </a>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

components/header.tsx

@@ -0,0 +1,32 @@
+import Link from 'next/link'
+import React from 'react' //header code
+
+const Header: React.FC = () => (
+  <header className="bg-white sm:h-20 py-5 border-b sm:sticky top-0">
+    <div className="max-w-5xl mx-auto px-6">
+      <div className="w-full flex flex-col sm:flex-row justify-center sm:justify-between items-center">
+        <div className="flex flex-col sm:flex-row items-center mb-4 sm:mb-0">
+          <img src="/react-bricks-logo.svg" className="w-48" alt="React Bricks" />
+          <div className="sm:ml-8 flex space-x-5 text-center">
+            <Link href="/">
+              <a className="text-gray-500 hover:text-pink-700">Home</a>
+            </Link>
+            <Link href="/about-us">
+              <a className="text-gray-500 hover:text-pink-700">About us</a>
+            </Link>
+            <Link href="/blog">
+              <a className="text-gray-500 hover:text-pink-700">Blog</a>
+            </Link>
+          </div>
+        </div>
+        <Link href="/admin" prefetch={false}>
+          <a className="py-2 px-5 rounded text-white font-medium bg-cyan-500 hover:bg-cyan-600 hover:shadow-lg transition duration-200">
+            Edit content
+          </a>
+        </Link>
+      </div>
+    </div>
+  </header>
+)
+
+export default Header

components/layout.tsx

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react'
+
+interface LayoutProps {
+  children?: ReactNode
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  return (
+    <div className="flex flex-col h-screen justify-between font-content antialiased">    
+      <main className="mb-auto">{children}</main>    
+    </div>
+  )
+}
+
+export default Layout

css/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  i18n: {
+    locales: ['en'], // Add your languages here
+    defaultLocale: 'en',
+    localeDetection: false,
+  },
+}