Design a mobile application called “Vende para Mim”, focused on the automatic and secure resale of event tickets. The app is primarily targeted at a young audience and should feature a clean, modern, and intuitive interface, completely eliminating the need for negotiation between buyers and sellers.
Below are the screens to be designed:
Displays the app logo and a light animation.
Tagline: “Automatic resale, no negotiation.”
Screen 1: Highlight ticket security and authenticity validation.
Screen 2: No need for chat or negotiation.
Screen 3: Secure payment with Pix and credit card.
Login with email, Google, or social media.
Buttons: “Create Account” and “Sign In”.
List of available tickets with filters (event, date, price).
Floating button: “+ Sell Ticket”.
Fields: Event name, date, ticket type, price.
Upload proof of purchase.
Show price graph based on market average.
Display all ticket info and “Buy Now” button.
Payment methods: Pix and credit card.
Display platform fee.
30-minute countdown timer to complete purchase.
Success message and purchase summary.
Tabs: Listed, Sold, Purchased.
Option to remove a ticket if not yet sold.
User info, saved payment methods, “Log Out” button.
List of alerts (ticket validated, sale completed, etc.).
Visual style guide:
Youthful, clean, modern.
Vibrant but not aggressive colors (inspired by fintech and event apps).
Simple, universal icons.
Clear, responsive typography.
App goal: To automate the resale of tickets with full security and no direct communication between users. The app must convey trust, simplicity, and a smooth experie
I'll design a comprehensive mobile application for "Vende para Mim" with all the screens you specified. This will be a modern, clean interface focused on automatic ticket resale with no negotiation needed.
I've created a comprehensive mobile application for "Vende para Mim" with all the requested screens and features. Here's what I've implemented:
The app successfully eliminates negotiation by using automated market pricing and provides a secure, trustworthy platform for young users to buy and sell event tickets.
Generate a clean and modern SVG layout for a mobile app interface called “Vende para Mim”, which allows users to automatically resell tickets without direct negotiation.
The design should reflect a young, secure, and user-friendly experience, with intuitive layout and vibrant, soft colors.
Create the SVG file structure for the following screen:
Screen: Ticket Listing Page
Header with event name and “Sell Ticket” button (top-right)
Input fields: Event name, date, ticket type (dropdown), price (number input)
Upload button for proof of ticket
Price guidance graph (horizontal bar or line chart placeholder)
“Publish Ticket” button at the bottom
SVG Requirements:
Must be cleanly structured, with named groups (<g> elements) and organized layers.
Use simple shapes (rect, text, circle, path) for layout — icons can be placeholders.
Dimensions: 375x812px (iPhone screen size).
Text labels should be editable (<text> elements).
Compatible for import into Figma.
Output only the raw SVG code, ready for copy-paste or saving as a .svg file.
<svg width="375" height="812" viewBox="0 0 375 812" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect width="375" height="812" fill="#FAFBFC"/>
<!-- Header -->
<g id="header">
<rect width="375" height="88" fill="#FFFFFF"/>
<rect x="0" y="87" width="375" height="1" fill="#E5E7EB"/>
<!-- Back Button -->
<g id="back-button">
<circle cx="32" cy="56" r="20" fill="#F3F4F6"/>
<path d="M28 56L36 48M28 56L36 64M28 56H36" stroke="#374151" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<!-- Header Title -->
<text x="187.5" y="61" text-anchor="middle" fill="#111827" font-family="system-ui" font-size="18" font-weight="600">Vender Ingresso</text>
</g>
<!-- Main Content -->
<g id="main-content">
<!-- Event Name Field -->
<g id="event-name-field" transform="translate(24, 112)">
<text x="0" y="0" fill="#374151" font-family="system-ui" font-size="14" font-weight="500">Nome do Evento</text>
<rect x="0" y="8" width="327" height="48" rx="8" fill="#FFFFFF" stroke="#D1D5DB" stroke-width="1"/>
<text x="16" y="37" fill="#9CA3AF" font-family="system-ui" font-size="16">Ex: Rock in Rio 2024</text>
</g>
<!-- Date and Time Fields -->
<g id="date-time-fields" transform="translate(24, 192)">
<!-- Date Field -->
<g id="date-field">
<text x="0" y="0" fill="#374151" font-family="system-ui" font-size="14" font-weight="500">Data</text>
<rect x="0" y="8" width="158" height="48" rx="8" fill="#FFFFFF" stroke="#D1D5DB" stroke-width="1"/>
<text x="16" y="37" fill="#9CA3AF" font-family="system-ui" font-size="16">15/09/2024</text>
<!-- Calendar Icon -->
<rect x="126" y="24" width="16" height="16" rx="2" fill="none" stroke="#9CA3AF" stroke-width="1.5"/>
<path d="M130 20V28M138 20V28" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round"/>
</g>
<!-- Time Field -->
<g id="time-field" transform="translate(169, 0)">
<text x="0" y="0" fill="#374151" font-family="system-ui" font-size="14" font-weight="500">Horário</text>
<rect x="0" y="8" width="158" height="48" rx="8" fill="#FFFFFF" stroke="#D1D5DB" stroke-width="1"/>
<text x="16" y="37" fill="#9CA3AF" font-family="system-ui" font-size="16">18:00</text>
<!-- Clock Icon -->
<circle cx="134" cy="32" r="8" fill="none" stroke="#9CA3AF" stroke-width="1.5"/>
<path d="M134 28V32L136 34" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round"/>
</g>
</g>
<!-- Ticket Type Field -->
<g id="ticket-type-field" transform="translate(24, 272)">
<text x="0" y="0" fill="#374151" font-family="system-ui" font-size="14" font-weight="500">Tipo do Ingresso</text>
<rect x="0" y="8" width="327" height="48" rx="8" fill="#FFFFFF" stroke="#D1D5DB" stroke-width="1"/>
<text x="16" y="37" fill="#9CA3AF" font-family="system-ui" font-size="16">Ex: Pista Premium, Camarote...</text>
<!-- Dropdown Arrow -->
<path d="M299 28L307 36L315 28" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<!-- Price Field -->
<g id="price-field" transform="translate(24, 352)">
<text x="0" y="0" fill="#374151" font-family="system-ui" font-size="14" font-weight="500">Preço Sugerido</text>
<rect x="0" y="8" width="327" height="48" rx="8" fill="#FFFFFF" stroke="#D1D5DB" stroke-width="1"/>
<text x="16" y="37" fill="#374151" font-family="system-ui" font-size="16" font-weight="500">R$</text>
<text x="40" y="37" fill="#9CA3AF" font-family="system-ui" font-size="16">450,00</text>
</g>
<!-- Price Guidance -->
<g id="price-guidance" transform="translate(24, 416)">
<rect x="0" y="0" width="327" height="72" rx="8" fill="#EFF6FF"/>
<!-- Trend Icon -->
<g transform="translate(16, 16)">
<path d="M4 12L8 8L12 12L20 4" stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 4H20V8" stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<text x="48" y="28" fill="#2563EB" font-family="system-ui" font-size="14" font-weight="500">Preço médio do mercado: R$ 420 - R$ 480</text>
<!-- Simple Price Chart -->
<g id="price-chart" transform="translate(16, 40)">
<rect x="0" y="0" width="295" height="16" rx="8" fill="#DBEAFE"/>
<rect x="60" y="2" width="120" height="12" rx="6" fill="#3B82F6"/>
<circle cx="100" cy="8" r="4" fill="#1D4ED8"/>
<text x="130" y="12" fill="#1D4ED8" font-family="system-ui" font-size="10" font-weight="600">R$ 450</text>
</g>
</g>
<!-- Upload Proof Section -->
<g id="upload-section" transform="translate(24, 512)">
<text x="0" y="0" fill="#374151" font-family="system-ui" font-size="14" font-weight="500">Comprovante de Compra</text>
<rect x="0" y="8" width="327" height="96" rx="8" fill="#FFFFFF" stroke="#D1D5DB" stroke-width="2" stroke-dasharray="8,8"/>
<!-- Upload Icon and Text -->
<g transform="translate(163.5, 32)">
<!-- Upload Icon -->
<path d="M0 16L8 8L16 16M8 8V24" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="-16" y="32" width="32" height="1" fill="none"/>
<text x="0" y="44" text-anchor="middle" fill="#6B7280" font-family="system-ui" font-size="14">Toque para enviar</text>
<text x="0" y="60" text-anchor="middle" fill="#6B7280" font-family="system-ui" font-size="14">foto ou PDF</text>
</g>
</g>
</g>
<!-- Bottom Section -->
<g id="bottom-section">
<!-- Divider -->
<rect x="0" y="720" width="375" height="1" fill="#E5E7EB"/>
<!-- Publish Button -->
<g id="publish-button" transform="translate(24, 744)">
<rect x="0" y="0" width="327" height="48" rx="24" fill="#2563EB"/>
<text x="163.5" y="31" text-anchor="middle" fill="#FFFFFF" font-family="system-ui" font-size="16" font-weight="600">Publicar Ingresso</text>
</g>
</g>
<!-- Status Bar (iOS) -->
<g id="status-bar">
<text x="24" y="20" fill="#000000" font-family="system-ui" font-size="14" font-weight="600">9:41</text>
<!-- Battery and Signal Icons -->
<g transform="translate(320, 12)">
<rect x="0" y="4" width="24" height="12" rx="2" fill="none" stroke="#000000" stroke-width="1"/>
<rect x="24" y="7" width="2" height="6" rx="1" fill="#000000"/>
<rect x="2" y="6" width="20" height="8" rx="1" fill="#000000"/>
</g>
<!-- Signal Bars -->
<g transform="translate(280, 12)">
<rect x="0" y="12" width="3" height="4" rx="1" fill="#000000"/>
<rect x="5" y="10" width="3" height="6" rx="1" fill="#000000"/>
<rect x="10" y="8" width="3" height="8" rx="1" fill="#000000"/>
<rect x="15" y="6" width="3" height="10" rx="1" fill="#000000"/>
</g>
<!-- WiFi Icon -->
<g transform="translate(260, 12)">
<path d="M1 11C5 7 11 7 15 11M4 14C6.5 11.5 9.5 11.5 12 14M7.5 16.5C8 16 9 16 9.5 16.5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</g>
</g>
</svg>