اعمل لي صوره احترافيه فيها ايقونات السوشل ميديا ويوزر حسابي في @azarer في الانتستجرام و ايقونه الايميل و ايقونه الموقع
Generated Prompt
## APPLICATION OVERVIEW This project is a minimalist landing page designed to showcase social media icons, an Instagram handle (@azarer), an email icon, and a website icon. The primary goal is to create a clean and professional visual presence that enhances user engagement and promotes social connections. ## CORE FEATURES 1. **Hero Section**: A prominent area at the top displaying the Instagram handle and a call-to-action to connect on social media. 2. **Social Media Icons**: Clean, clickable icons for various social media platforms including Instagram, email, and a website link. 3. **Contact Information**: A dedicated area for users to find contact details easily, including email and website links. 4. **Responsive Design**: The landing page adapts seamlessly across devices, providing an optimal viewing experience on mobile, tablet, and desktop. 5. **Visual Hierarchy**: Clear distinction between sections using whitespace and typography for better readability and user experience. ## DESIGN SPECIFICATIONS - **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography - **Color Mode**: Light theme with dark text on light backgrounds - **Primary Color**: #1978E5 (accent for buttons, links, highlights) - **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements - **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs - **Layout**: The layout will feature a top hero section, followed by a section for social media icons, and a footer for contact information, all arranged vertically with ample spacing. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Not required for this simple landing page ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript. 2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components. 3. **Create Layout**: Develop the main layout structure with a hero section, social icons section, and footer using Tailwind CSS for styling. 4. **Add Fonts**: Import Inter font from Google Fonts and apply it to the headings and body text. 5. **Design Social Icons**: Create social media icons using SVG or Font Awesome, styled with Tailwind classes. 6. **Implement Responsiveness**: Use Tailwind classes to ensure the design is responsive across different screen sizes. 7. **Test**: Conduct thorough testing on multiple devices and browsers to ensure functionality and responsiveness. ## USER EXPERIENCE Users will land on a clean page where they can immediately see the call-to-action to follow the Instagram account. Clicking on the social media icons will redirect them to their respective pages. The overall experience will be smooth, with intuitive navigation and clear visual cues guiding users towards their next actions. The minimalist design will keep distractions to a minimum, allowing users to focus on connecting through social media.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
