I'll create a Next.js application that resembles the Cognizo.ai website with a dark theme and purple accents. Let's build this using the App Router and shadcn/ui components.
I've created a Next.js application that closely resembles the Cognizo.ai website from the screenshot. Here's what I've implemented:
- Dark Theme with Purple Accents: The design uses a dark background with purple gradient effects similar to the original site.
- Header Section: Contains the logo and navigation buttons for "Book a demo" and "Get a report".
- Hero Section: Features the main headline "Optimize your brand for AI sea" with a description and a form to enter a website URL.
Dashboard Demo: A detailed recreation of the analytics dashboard shown in the screenshot, including:
- Navigation sidebar
- Brand information for Nike
- Time period filters
- Three main metrics cards (Visibility, Position, Sentiment) with visualizations
- Opportunity cards at the bottom
- Features Section: Added a section highlighting key features with icons and descriptions.
- CTA Section: A call-to-action section encouraging users to get started.
- Footer: Simple footer with logo, links, and copyright information.
The implementation uses:
- Next.js App Router
- Tailwind CSS for styling
- shadcn/ui components for UI elements
- Lucide React for icons
- Responsive design that works on mobile and desktop
To run this project, you would:
- Create a new Next.js project
- Install shadcn/ui and its dependencies
- Copy these files into your project structure
- Run the development server with
npm run dev
The design is fully responsive and maintains the modern, professional look of the original Cognizo website.
How to Run This Application Locally
Here's a step-by-step guide to set up and run the Cognizo clone application on your local machine:
Prerequisites
Make sure you have the following installed:
- Node.js (version 18.17 or later)
- npm or yarn or pnpm
Step 1: Create a new Next.js project
npx create-next-app cognizo-cloneWhen prompted, select the following options:
- Would you like to use TypeScript? → Yes
- Would you like to use ESLint? → Yes
- Would you like to use Tailwind CSS? → Yes
- Would you like to use
src/directory? → No - Would you like to use App Router? → Yes
- Would you like to customize the default import alias (@/)? → Yes (keep the default @/)
Step 2: Navigate to your project directory
cd cognizo-cloneStep 3: Install shadcn/ui and its dependencies
npx shadcn@latest initWhen prompted, select the following options:
- Would you like to use TypeScript? → Yes
- Which style would you like to use? → Default
- Which color would you like to use as base color? → Slate
- Where is your global CSS file? → app/globals.css
- Do you want to use CSS variables? → Yes
- Are you using a custom tailwind prefix? → No
- Where is your tailwind.config.js located? → tailwind.config.ts
- Configure the import alias for components? → @/components
- Configure the import alias for utils? → @/lib/utils
- Are you using React Server Components? → Yes
- Write configuration to components.json? → Yes
Step 4: Install required shadcn/ui components
npx shadcn@latest add button card input progress tabsStep 5: Install Lucide React for icons
npm install lucide-reactStep 6: Replace the files with our code
- Replace the content of
app/page.tsxwith the code from ourapp/page.tsxfile - Replace the content of
app/layout.tsxwith the code from ourapp/layout.tsxfile - Replace the content of
app/globals.csswith the code from ourapp/globals.cssfile - Create a new file
components/dashboard-demo.tsxand add our dashboard component code - Make sure your
tailwind.config.tsmatches our configuration
Step 7: Start the development server
npm run devNow you can open your browser and navigate to http://localhost:3000 to see the application running.
Project Structure
Your project should have the following structure:
cognizo-clone/
├── app/
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── components/
│ ├── dashboard-demo.tsx
│ ├── theme-provider.tsx
│ └── ui/
│ ├── button.tsx
│ ├── card.tsx
│ ├── input.tsx
│ ├── progress.tsx
│ └── tabs.tsx
├── lib/
│ └── utils.ts
├── public/
├── tailwind.config.ts
└── package.jsonTroubleshooting
If you encounter any issues:
- Missing components: Make sure you've installed all the required shadcn/ui components
- Styling issues: Check that your
globals.cssandtailwind.config.tsare correctly set up - TypeScript errors: You might need to install additional type definitions with
npm install @types/node @types/react @types/react-dom
Let me know if you need any clarification or run into any issues!