Make it logical and smooth and converting the img attached is the website logo
v0 Prompt for Lapetus Website
Build a futuristic, dark-mode personal/agency website called Lapetus with a clean and bold design. The site should reflect a techy, premium aesthetic using the following color palette:
Midnight Black #121212 (called "Lapetus Black")
Navy Blue #000080
Crimson Red #DC143C
Soft Gray #A8A8A8
Pure White #FFFFFF
Use Neue Kaine as the primary font across all text. Prioritize visual contrast, minimalism, and interactive animations (e.g., hover effects, animated transitions). Use Tailwind CSS with ShadCN components. Site must be responsive and optimized for both desktop and mobile. Build it as a React project.
Pages and Components
- Home Page Bold hero section with: Agency name: Lapetus Slogan: “We Make It Happen” Subtext: Short dynamic description of services (media management, editing, graphic design) CTA button: “Book a Meeting” (scrolls to contact or links to form) Featured services grid (three cards): Graphic Design (logos, branding, social posts) Media Management (OnlyFans content uploads, scheduling, team ops) Editing (photo/video, feed cleaning, motion design) Mini portfolio showcase (carousel or grid of thumbnails) Testimonials section (scrollable or grid) Footer with logo, social links, and email: najd.benhmida@gmail.com
- Services Page Detailed list of services under categories: Graphic Design: logo design, branding, social media, infographics Media Management: Infloww Vault Pro, OF account structure, backups Editing: photo retouch, video trimming, motion graphics Tiered pricing section (Basic, Pro, Custom)
- Portfolio Page Grid or masonry layout Each project includes: Image thumbnail Title Short description Optional filters by category
- About Page Short paragraph about Najd (editable) Mission and process Optional: profile image
- Updates/Blog Page Blog-style posts with: Date Title Tags Optional thumbnail Admin-editable only
- Testimonials Page Cards or quote-style layout Names, quotes, optional avatars/logos
- Contact Page Contact form (submits to najd.benhmida@gmail.com) Name Email Message Project Type (dropdown) Budget (dropdown) Preferred contact method (email/phone) Option to add Calendly or external booking link later Admin Dashboard Route: lapetus.online/Najd Auth-protected with secure login Admin capabilities: Add/edit blog posts Add/edit portfolio projects Add/edit testimonials Update pricing View contact submissions Extra Features Smooth scroll animations Dark-glassmorphism or neon glow effects on buttons/cards (futuristic touch) Sticky nav bar with dynamic shadow Floating “Book Now” button (optional) SEO-friendly meta tags for branding Let me know if you'd like me to also help with suggested text/content for the home or about sections, or if you want a visual mockup before you start building.
I'll create a futuristic, dark-mode website for Lapetus with a clean, bold design using the provided logo and color palette. Let's start with the core structure and components.
I've created a futuristic, dark-mode website for Lapetus with a clean and bold design that incorporates the provided logo. The site features:
Modern Design Elements:
- Dark theme with the specified color palette (Midnight Black, Navy Blue, Crimson Red, Soft Gray, Pure White)
- Smooth animations and hover effects
- Responsive layout for all devices
Key Pages:
- Home page with hero section, services grid, portfolio showcase, and testimonials
- Services page with detailed service descriptions and pricing tiers
- Portfolio page with filterable project grid
- About page with company story, mission, and team
- Contact page with form submission functionality
Brand Integration:
- The provided logo is prominently featured throughout the site
- Consistent use of the crimson red accent color for buttons and interactive elements
- Clean typography with proper spacing and hierarchy
The website is built with Next.js, Tailwind CSS, and ShadCN components as requested. The design emphasizes visual contrast and minimalism while incorporating interactive elements like hover effects and animated transitions.
I'll create a protected admin dashboard for managing content on the Lapetus website. This will include authentication, a dashboard layout, and interfaces for managing blog posts, portfolio projects, testimonials, and viewing contact submissions.
I've created a comprehensive admin dashboard for the Lapetus website that allows you to manage all your content in one place. The dashboard includes:
Authentication System
- Secure login page at
/najd/login - Protected routes that require authentication
- Simple logout functionality
Dashboard Layout
- Clean, modern interface with a sidebar navigation
- Mobile-responsive design with a bottom navigation bar on small screens
- Overview dashboard with key statistics
Content Management
Blog Posts Management
- View all blog posts in a table format
- Add new posts with title, excerpt, content, and status
- Edit and delete existing posts
Portfolio Management
- Grid view of all portfolio projects
- Add new projects with title, category, description, and image
- Edit and delete existing projects
Testimonials Management
- Grid view of client testimonials
- Add new testimonials with client name, company, rating, and text
- Edit and delete existing testimonials
Contact Form Submissions
- View all contact form submissions
- Track submission status (New, Responded, Archived)
- View detailed information for each submission
Features
- Consistent dark theme matching the main website
- Interactive dialogs for adding, editing, and deleting content
- Status tracking for contact submissions
- Responsive design that works on all devices
To access the admin dashboard, navigate to /najd/login and use the following credentials:
- Username: najd
- Password: admin123
This implementation provides a secure, user-friendly interface for managing all aspects of your website content.