simple friends page for nextjs and shipfa.st

config.json

const config = {
  // REQUIRED
  appName: "App Name comes here",
}

layout.js

// No "use client" directive since this will be server-side
const FriendsLayout = ({ children }) => {
    return (
      <>
        {children}
      </>
    );
  };
  
 export default FriendsLayout; 

page.jsx

import Image from 'next/image';
import Link from 'next/link';
import { ArrowLeft } from 'lucide-react';
import { Button } from '@/components/ui/button';
import logo from '@/app/icon.png';
import Footer from '@/components/Footer';

import config  from '@/config';

const friendsData = [
  {
    id: "globeflix",
    title: "GlobeFlix",
    description:
      "GlobeFlix addresses the problem of different catalogues across distinct countries on streaming platforms by allowing users to find the intersection of movies / TV series between two countries, while offering search tools to find something users want to watch.",
    websiteUrl: "https://www.globeflix.app/",
  },
  {
    id: "influencerfarm",
    title: "InfluencerFarm.io",
    description:
      "Make scroll-stopping pictures and video with our AI influencer Generator. Scale your social media, slash costs, and own a consistent, on-brand virtual face without the hassle.",
    websiteUrl: "https://influencerfarm.io/",
  },
  {
    id: "toonstyleai",
    title: "Toon Style AI",
    description:
      "Toon Style AI transforms your photos into the styles of legendary animation studios. No complicated prompts, no hidden costs.",
    websiteUrl: "https://www.toonstyleai.app/",
  },
];

function SimpleHeader() {
  return (
    <header className="flex items-center justify-between px-4 py-3 border-b bg-base-200 w-full">
      <Link href="/" className="flex items-center gap-2">
        <Image src={logo} alt="WedPicsQR logo" width={32} height={32} />
        <span className="font-bold text-lg">{config.appName}</span>
      </Link>
      <Link href="/" className="btn btn-sm btn-outline">Back</Link>
    </header>
  );
}

export default function FriendsPage() {
  return (
    <div className="w-full px-0 py-0">
      <SimpleHeader />
      <div className="px-4 py-8 w-full">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-slate-800 mb-4">Friends of {config.appName}</h1>
          <p className="text-xl text-slate-500 max-w-2xl mx-auto">
            This page is dedicated to friends of {config.appName}, which consists of other creators who are also building awesome
            products. Check out their projects below!
          </p>
        </div>

        <div className="space-y-6 w-full">
          {friendsData.map((friend) => (
            <div key={friend.id} className="bg-slate-50 rounded-lg p-6 shadow-sm max-w-2xl mx-auto">
              <h2 className="text-2xl font-bold text-slate-800 mb-2">{friend.title}</h2>
              <p className="text-slate-600 mb-6">{friend.description}</p>
              <div className="flex justify-end">
                <a href={friend.websiteUrl} target="_blank" rel="noopener noreferrer">
                  <Button className="bg-blue-500 hover:bg-blue-600 text-white">Visit Website</Button>
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
      <Footer />
    </div>
  );
}