Components | Astrae Design

Border Logo Grid

A border grid layout showcasing various logos for social proof.

Preview

Code

app/page.tsx

import CompanyLogos from "@/sections/company-logos";

const Home = () => {
    return (
        <div className=" bg-[#F6F6F6] min-h-screen w-full flex items-center justify-center">
            <CompanyLogos />
        </div>
    );
}

export default Home;

Installation

Initialized a project and installed the necessary dependencies to use this component.

1. Initialize a new Next.js project:

npx create-next-app@latest my-app

2. Install Framer Motion

npm install framer-motion --save

Add Company Logos Section

src/sections/company-logos.tsx

"use client"

import { companyLogos } from "@/constants";
import { motion } from "framer-motion";
import { Plus } from "lucide-react";
import Image from "next/image";


const CompanyLogos = () => {
    return (
        <section className=" w-full py-8 z-20 relative flex flex-col items-center mt-28">
            <h6 className=" font-medium opacity-80 text-base md:text-lg">Trusted by 24+ Startups and Businesses for Design and Development</h6>
            <div className=" max-w-6xl mx-auto w-full mt-8">
                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 w-full relative group">
                    {companyLogos.map((logo, index) => (
                        <div key={index} className={`w-full border bg-[#F6F6F6] py-4 flex items-center justify-center ${index === 0 ? 'xl:rounded-tl-xl' :
                            index === 5 ? 'xl:rounded-tr-xl' :
                                index === 18 ? 'xl:rounded-bl-xl' : ''
                            }`}>
                            <motion.div
                                className="relative flex items-center justify-center object-contain"
                                style={{
                                    width: `${logo.width}px`,
                                    height: `${logo.height}px`,
                                }}
                                initial={{ opacity: 0, y: 20 }}
                                whileInView={{ opacity: 1, y: 0 }}
                                transition={{
                                    duration: 0.5,
                                    delay: index * 0.1,
                                    ease: "easeOut"
                                }}
                                viewport={{ once: true, amount: 0.3 }}
                            >
                                <Image
                                    fill
                                    quality={100}
                                    src={`/companies/${logo.image}`}
                                    alt={logo.name}
                                    sizes={`${Math.max(logo.width, logo.height)}px`}
                                    className="object-contain"
                                />
                            </motion.div>
                        </div>
                    ))}
                    <div className=" w-full border py-2.5 px-2.5 xl:rounded-br-xl bg-[#F6F6F6]">
                        <div className=" text-sm md:text-[15px] bg-[#F6F6F6] border border-dashed hover:border-none hover:bg-[#002BBA] hover:text-white cursor-pointer border-[#002BBA] w-full h-full text-[#002BBA] font-medium gap-1 xl:rounded-lg flex items-center justify-center">
                            <p>Your Logo</p> <Plus className=" size-4" />
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}

export default CompanyLogos;

Add Constants

src/constants/index.ts

export const companyLogos = [
  {
    name: "Lexos",
    image: "logo-1.png",
    width: 116,
    height: 40,
  },
  {
    name: "InfoSignal",
    image: "logo-2.png",
    width: 140,
    height: 40,
  },
  {
    name: "Stakenet",
    image: "logo-3.png",
    width: 140,
    height: 40,
  },
  {
    name: "FetchTalent AI",
    image: "logo-4.png",
    width: 152,
    height: 40,
  },
  {
    name: "Toonly AI",
    image: "logo-5.png",
    width: 148,
    height: 40,
  },
  {
    name: "Atlas Labs",
    image: "logo-6.png",
    width: 125,
    height: 40,
  },
  {
    name: "Intero",
    image: "logo-7.png",
    width: 112,
    height: 40,
  },
  {
    name: "Skillura",
    image: "logo-8.png",
    width: 135,
    height: 40,
  },
  {
    name: "OnlyTool",
    image: "logo-9.png",
    width: 115,
    height: 40,
  },
  {
    name: "Textbook LM",
    image: "logo-10.png",
    width: 160,
    height: 40,
  },
  {
    name: "InfoSignal InfoBoard",
    image: "logo-11.png",
    width: 160,
    height: 40,
  },
  {
    name: "GenYSolutions",
    image: "logo-12.png",
    width: 88,
    height: 40,
  },
  {
    name: "VoiceAfrica",
    image: "logo-13.png",
    width: 140,
    height: 40,
  },
  {
    name: "Midas",
    image: "logo-14.png",
    width: 120,
    height: 40,
  },
  {
    name: "Astrae",
    image: "logo-15.png",
    width: 128,
    height: 40,
  },
  {
    name: "Refactor",
    image: "logo-16.png",
    width: 148,
    height: 40,
  },
  {
    name: "Fontsnatcher",
    image: "logo-17.png",
    width: 160,
    height: 40,
  },
  {
    name: "Hetzel",
    image: "logo-18.png",
    width: 160,
    height: 40,
  },
  {
    name: "Nova",
    image: "logo-19.png",
    width: 160,
    height: 40,
  },
  {
    name: "Lancershout",
    image: "logo-20.png",
    width: 164,
    height: 40,
  },
  {
    name: "Handle Delivery",
    image: "logo-21.png",
    width: 164,
    height: 40,
  },
  {
    name: "EZ Politix",
    image: "logo-22.png",
    width: 180,
    height: 40,
  },
  {
    name: "VOX-AI",
    image: "logo-23.png",
    width: 132,
    height: 40,
  },
];

Become an Astrae
Affiliate Today

Make referrals, and bring in clients. Keep 50% of your earnings paid out weekly.

Border Logo Grid

Preview

Code

Installation

Become an Astrae Affiliate Today

Become an Astrae
Affiliate Today