feat(website): initial port of bigcapital website as starting point

package.json

@@ -5,6 +5,7 @@
     "dev": "lerna run dev",
     "build": "lerna run build",
     "dev:webapp": "lerna run dev --scope \"@bigcapital/webapp\"",
+    "dev:website": "lerna run dev --scope \"@bigcapital/website\"",
     "build:webapp": "lerna run build --scope \"@bigcapital/webapp\"",
     "dev:server": "lerna run dev --scope \"@bigcapital/server\"",
     "build:server": "lerna run build --scope \"@bigcapital/server\"",

packages/website/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

packages/website/.gitignore

@@ -0,0 +1,36 @@
+# 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
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

packages/website/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.

packages/website/next.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    domains: ['gravatar.com'],
+  },
+};
+
+export default nextConfig;

packages/website/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@bigcapital/website",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@material-tailwind/react": "^2.1.9",
+    "classnames": "^2.5.1",
+    "dayjs": "^1.11.10",
+    "gravatar-url": "^4.0.1",
+    "gray-matter": "^4.0.3",
+    "next": "14.2.2",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-wow": "^1.0.0",
+    "remark": "^15.0.1",
+    "remark-html": "^16.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/react-wow": "^1.0.6",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.2",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

packages/website/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

packages/website/public/blog/early-adopter-plan.md

@@ -0,0 +1,28 @@
+---
+title: 'The Early Adopters Plan'
+subtitle: 'Join the Bigcapital early adopter plan to shape the future of accounting!'
+date: '2024-05-06'
+author: Ahmed Bouhuolia
+authorEmail: [email protected]
+picture: /early-adopter-plan.png
+---
+
+A few days ago we launched the **Bigcapital Cloud** service, and the early adopter plan to attract the first group of beta users who are willing to collaborate and refine the product. As we want to be a highly community-driven product, we’re looking for 200 early adopters to get more deep feedback on what we built and feature requests to reach to the product can satisfy the market, although we’ve built all the major features and reports that any accountant or business owner needs but we highly believe in tiny details, little tweaks or new report can make user’s life easier.
+
+Being an early adopter has no specific requirement like being active or contributor to the codebase or giving feedback constantly, you can do that also by using the Bigcapital CE self-hosted, it’s free and has no obligation, but we believe since you subscribed early you’re part of early adopter users and your feedback and features requests will be always in priority.
+
+### The Early Adopter Plan Includes
+- You’ll get access to all features of all plans.
+- You’ll get the ability to create other 3 organization accounts under the same email.
+- Priority support on Discord and email.
+- It's a **$29 one-time** payment for a year.
+
+*The early adopter will be replaced with another monthly plan without full-features once the 200 seats run out but the subscripted users will reserve their privileges and support for a year.*
+
+### Community-Driven Development
+
+As we continue to develop Bigcapital, we cannot breathe without your feedback and ideas. Here are three ways you can share your thoughts with us:
+
+- Join on [Discord Server](https://discord.com/invite/c8nPBJafeb).
+- Email use directly: [[email protected]](mail:[email protected])
+- [Schedule a 30-minute call with our team.](https://cal.com/ahmed-bouhuolia-ekk3ph/30min)

packages/website/src/app/blog/[id]/layout.tsx

@@ -0,0 +1,13 @@
+interface BlogLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function PostLayout({ children }: BlogLayoutProps) {
+  return (
+    <div
+      className={'space-y-8 pb-8 pt-4 md:py-16 mx-auto w-full max-w-[750px]'}
+    >
+      {children}
+    </div>
+  );
+}

packages/website/src/app/blog/[id]/page.css

@@ -0,0 +1,41 @@
+
+.content p{
+  @apply mb-4;
+}
+
+.content ul {
+  @apply mb-4;
+  list-style: disc;
+  margin-left: 1.2rem;
+}
+
+.content ul li{
+  @apply mb-2 mt-2;
+}
+
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5,
+.content h6 {
+    @apply font-bold mt-8 mb-6 text-[#252c53];
+    letter-spacing: -0.5px;
+}
+
+.content h1{
+    @apply text-4xl;    
+}
+
+.content h2 {
+    @apply text-3xl
+}
+
+.content h3 {
+    @apply text-2xl
+}
+
+.content a{
+  text-decoration: underline;
+  color: #375DEE;
+}

packages/website/src/app/blog/[id]/page.tsx

@@ -0,0 +1,74 @@
+import { getPostData } from '@/lib/posts';
+import Image from 'next/image';
+import './page.css';
+
+export default async function Page() {
+  const postData = await getPostData('ssg-ssr');
+
+  return (
+    <div>
+      <div
+        className={'text-[#79818b] text-sm animate__animated animate__fadeIn'}
+      >
+        <time dateTime={postData.date}>{postData.formattedDate}</time>
+      </div>
+
+      <div>
+        <h1
+          className={
+            'font-extrabold font-styling font-display mt-1.5 mb-2.5 text-[2rem] md:text-[2.2rem] tracking-tight leading-[120%] text-[#242c51] animate__animated animate__fadeIn'
+          }
+        >
+          {postData.title}
+        </h1>
+        <p
+          className={
+            'animate__animated animate__fadeIn text-[1.2rem] text-[#6b7280]'
+          }
+        >
+          {postData.subtitle}
+        </p>
+
+        <div className="animate__animated animate__fadeIn mx-auto mb-6 mt-4 flex flex-row items-center gap-2">
+          <span className="relative block flex-shrink-0 overflow-hidden rounded-full">
+            <Image
+              alt={postData.author}
+              width="40"
+              height="40"
+              src={postData.avatar}
+            />
+          </span>
+
+          <div className="flex flex-col gap-[2px]">
+            <span className="sans text-sm leading-[1.6] text-slate-11 font-normal">
+              {postData.author}
+            </span>
+
+            <span className={'text-xs muted text-[#6b7280]'}>
+              CEO, Founder
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className={'animate__animated animate__fadeIn mb-6'}>
+        <Image
+          src={postData.picture}
+          height={700}
+          width={1050}
+          className={
+            'w-full border border-darkblue-50 object-cover rounded lg:rounded-lg'
+          }
+          alt=""
+        />
+      </div>
+
+      <div
+        className={
+          'content mx-auto text-darkblue-800 leading-relaxed animate__animated animate__fadeIn'
+        }
+        dangerouslySetInnerHTML={{ __html: postData.contentHtml }}
+      ></div>
+    </div>
+  );
+}

packages/website/src/app/blog/layout.tsx

@@ -0,0 +1,13 @@
+import { Metadata } from 'next';
+
+interface BlogLayoutProps {
+  children: React.ReactNode;
+}
+
+export const metadata: Metadata = {
+  title: 'Bigcapital | Blog',
+};
+
+export default function BlogLayout({ children }: BlogLayoutProps) {
+  return <div className={'container mx-auto px-4 pt-9 pb-20'}>{children}</div>;
+}