Figma to SwiftUI Code with ClaudeAI

import SwiftUI

struct SignupView: View {
    @State private var email: String = ""
    @State private var password: String = ""

    var body: some View {
        ZStack {
            // Background gradient
            LinearGradient(gradient: Gradient(colors: [Color.pink.opacity(0.3), Color.purple.opacity(0.3)]), startPoint: .topLeading, endPoint: .bottomTrailing)
                .edgesIgnoringSafeArea(.all)

            VStack(spacing: 20) {
                // Logo and Title
                VStack(spacing: 10) {
                    Image(systemName: "cpu")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 60, height: 60)
                        .foregroundColor(.black)

                    Text("IMAGINE\nWITH AIKO")
                        .font(.system(size: 24, weight: .bold))
                        .multilineTextAlignment(.center)
                }
                .padding(.top, 50)

                // Input fields
                VStack(spacing: 15) {
                    CustomTextField(placeholder: "Email address", text: $email)
                    CustomTextField(placeholder: "Password", text: $password, isSecure: true)
                }
                .padding(.top, 30)

                // Login link
                HStack {
                    Spacer()
                    Button(action: {
                        // Handle login action
                    }) {
                        Text("Already have an account? Log in")
                            .font(.footnote)
                            .foregroundColor(.blue)
                    }
                }

                // Continue button
                Button(action: {
                    // Handle continue action
                }) {
                    HStack {
                        Text("Continue")
                            .fontWeight(.semibold)
                        Image(systemName: "chevron.right")
                    }
                    .foregroundColor(.white)
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.blue)
                    .cornerRadius(10)
                }
                .padding(.top, 20)

                // Social sign-up buttons
                VStack(spacing: 15) {
                    SocialSignUpButton(title: "Sign up with Google", imageName: "g.circle.fill")
                    SocialSignUpButton(title: "Sign up with Apple", imageName: "apple.logo")
                }
                .padding(.top, 30)

                // Terms and Privacy
                HStack {
                    Button("Privacy policy") {
                        // Handle privacy policy action
                    }
                    Spacer()
                    Button("Terms of service") {
                        // Handle terms of service action
                    }
                }
                .font(.caption)
                .foregroundColor(.gray)
                .padding(.top, 20)
            }
            .padding(.horizontal, 30)
        }
    }
}

struct CustomTextField: View {
    let placeholder: String
    @Binding var text: String
    var isSecure: Bool = false

    var body: some View {
        Group {
            if isSecure {
                SecureField(placeholder, text: $text)
            } else {
                TextField(placeholder, text: $text)
            }
        }
        .padding()
        .background(Color.white)
        .cornerRadius(10)
        .shadow(color: Color.black.opacity(0.1), radius: 5, x: 0, y: 5)
    }
}

struct SocialSignUpButton: View {
    let title: String
    let imageName: String

    var body: some View {
        Button(action: {
            // Handle social sign-up action
        }) {
            HStack {
                Image(systemName: imageName)
                    .foregroundColor(.black)
                Text(title)
                    .foregroundColor(.black)
            }
            .frame(maxWidth: .infinity)
            .padding()
            .background(Color.white)
            .cornerRadius(10)
            .shadow(color: Color.black.opacity(0.1), radius: 5, x: 0, y: 5)
        }
    }
}

struct SignupView_Previews: PreviewProvider {
    static var previews: some View {
        SignupView()
    }
}

import SwiftUI

struct DiscoverView: View {
    @State private var selectedTab = "Top Picks"
    let tabs = ["Productivity", "Top Picks", "Lifestyle", "Education"]

    var body: some View {
        NavigationView {
            ScrollView {
                VStack(alignment: .leading, spacing: 20) {
                    TabBarView(tabs: tabs, selectedTab: $selectedTab)

                    FeaturedSection()

                    TrendingSection()
                }
                .padding()
            }
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: {}) {
                        Image(systemName: "line.horizontal.3")
                    }
                }
                ToolbarItem(placement: .principal) {
                    Text("Discover")
                        .font(.title2)
                        .fontWeight(.bold)
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {}) {
                        Image(systemName: "ellipsis")
                    }
                }
            }
        }
    }
}

struct TabBarView: View {
    let tabs: [String]
    @Binding var selectedTab: String

    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 20) {
                ForEach(tabs, id: \.self) { tab in
                    Text(tab)
                        .fontWeight(selectedTab == tab ? .bold : .regular)
                        .foregroundColor(selectedTab == tab ? .primary : .secondary)
                        .onTapGesture {
                            selectedTab = tab
                        }
                }
            }
        }
    }
}

struct FeaturedSection: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 15) {
            HStack {
                Text("Featured")
                    .font(.title2)
                    .fontWeight(.bold)
                Spacer()
                Image(systemName: "chevron.right")
                    .foregroundColor(.secondary)
            }

            HStack(spacing: 15) {
                FeaturedItemView(
                    icon: "photo",
                    title: "Image Generator",
                    description: "AI tool creates images from descriptions",
                    color: .red
                )

                FeaturedItemView(
                    icon: "video",
                    title: "Video Generator",
                    description: "Transform images into captivating videos",
                    color: .purple
                )
            }
        }
    }
}

struct FeaturedItemView: View {
    let icon: String
    let title: String
    let description: String
    let color: Color

    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            ZStack {
                RoundedRectangle(cornerRadius: 15)
                    .fill(color.opacity(0.2))
                    .frame(height: 100)

                Image(systemName: icon)
                    .foregroundColor(.white)
                    .padding(10)
                    .background(Color.black.opacity(0.5))
                    .clipShape(Circle())
            }

            Text(title)
                .font(.headline)

            Text(description)
                .font(.caption)
                .foregroundColor(.secondary)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding()
        .background(Color.white)
        .cornerRadius(15)
        .shadow(color: .black.opacity(0.1), radius: 5, x: 0, y: 2)
    }
}

struct TrendingSection: View {
    let trendingItems = [
        TrendingItem(title: "Remote Work", description: "Best practices for remote work, tools, and maintaining productivity.", color: .orange),
        TrendingItem(title: "Pop Culture", description: "Latest in movies, music, and celebrity news.", color: .blue),
        TrendingItem(title: "Social Media Trends", description: "Viral content, platform updates, and influencer marketing.", color: .purple),
        TrendingItem(title: "Gaming", description: "Trends in video games, eSports, and game development.", color: .green)
    ]

    var body: some View {
        VStack(alignment: .leading, spacing: 15) {
            HStack {
                Text("Trending")
                    .font(.title2)
                    .fontWeight(.bold)
                Spacer()
                Image(systemName: "chevron.right")
                    .foregroundColor(.secondary)
            }

            ForEach(Array(trendingItems.enumerated()), id: \.element.title) { index, item in
                TrendingItemView(item: item, index: index + 1)
            }
        }
    }
}

struct TrendingItem: Identifiable {
    let id = UUID()
    let title: String
    let description: String
    let color: Color
}

struct TrendingItemView: View {
    let item: TrendingItem
    let index: Int

    var body: some View {
        HStack(spacing: 15) {
            RoundedRectangle(cornerRadius: 10)
                .fill(item.color)
                .frame(width: 50, height: 50)

            VStack(alignment: .leading, spacing: 5) {
                Text(item.title)
                    .font(.headline)
                Text(item.description)
                    .font(.caption)
                    .foregroundColor(.secondary)
            }

            Spacer()

            Text("\(index)")
                .font(.title2)
                .fontWeight(.bold)
                .foregroundColor(.secondary)
        }
        .padding(.vertical, 5)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        DiscoverView()
    }
}

import SwiftUI

struct ImageGeneratorView: View {
    @State private var userInput: String = ""
    @State private var selectedStyle: ImageStyle?

    var body: some View {
        NavigationView {
            VStack(spacing: 0) {
                // Header
                headerView

                ScrollView {
                    VStack(alignment: .leading, spacing: 20) {
                        // AI Tool Description
                        descriptionView

                        // AI Assistant Message
                        assistantMessageView

                        // Image Style Selector
                        imageStyleSelectorView

                        // User Input
                        userInputView

                        // Generated Image
                        generatedImageView
                    }
                    .padding()
                }
            }
            .navigationBarHidden(true)
            .background(Color(UIColor.systemGroupedBackground))
        }
    }

    // MARK: - Subviews

    private var headerView: some View {
        ZStack(alignment: .bottom) {
            Rectangle()
                .fill(LinearGradient(gradient: Gradient(colors: [.red, .orange]), startPoint: .topLeading, endPoint: .bottomTrailing))
                .frame(height: 200)

            HStack {
                Text("Image Generator")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                    .padding(.leading)
                Spacer()
            }
            .padding(.bottom)
        }
    }

    private var descriptionView: some View {
        HStack(spacing: 15) {
            Image(systemName: "photo")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 30, height: 30)
                .padding(10)
                .background(Color.gray.opacity(0.2))
                .clipShape(Circle())

            Text("AI tool creates images from descriptions")
                .font(.headline)
        }
    }

    private var assistantMessageView: some View {
        HStack(alignment: .top, spacing: 15) {
            Image(systemName: "circle.fill")
                .resizable()
                .frame(width: 30, height: 30)
                .foregroundColor(.purple)

            Text("Hello! I'm here to transform your descriptions into stunning visuals. Tell me what you envision, and I'll create it for you. Please keep your message under 1000 characters.")
                .font(.subheadline)
        }
        .padding()
        .background(Color.white)
        .cornerRadius(10)
    }

    private var imageStyleSelectorView: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text("Choose Your Image Style")
                .font(.headline)

            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 10) {
                    ForEach(ImageStyle.allCases, id: \.self) { style in
                        ImageStyleButton(style: style, isSelected: selectedStyle == style) {
                            selectedStyle = style
                        }
                    }
                }
            }
        }
    }

    private var userInputView: some View {
        HStack {
            Image(systemName: "person.circle")
                .resizable()
                .frame(width: 30, height: 30)

            Text("Create an isometric house")
                .font(.subheadline)
                .foregroundColor(.gray)
        }
    }

    private var generatedImageView: some View {
        VStack(spacing: 10) {
            Rectangle()
                .fill(Color.gray.opacity(0.2))
                .aspectRatio(1, contentMode: .fit)
                .cornerRadius(10)

            HStack {
                Button(action: {
                    // Add action for the plus button
                }) {
                    Image(systemName: "plus")
                        .foregroundColor(.pink)
                }

                Spacer()

                Text("Ask Aiko...")
                    .font(.subheadline)
                    .foregroundColor(.gray)

                Spacer()

                Button(action: {
                    // Add action for the microphone button
                }) {
                    Image(systemName: "mic")
                        .foregroundColor(.pink)
                }
            }
            .padding()
            .background(Color.white)
            .cornerRadius(25)
        }
    }
}

// MARK: - Supporting Views and Models

struct ImageStyleButton: View {
    let style: ImageStyle
    let isSelected: Bool
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            Rectangle()
                .fill(style.color)
                .frame(width: 60, height: 60)
                .cornerRadius(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(isSelected ? Color.blue : Color.clear, lineWidth: 3)
                )
        }
    }
}

enum ImageStyle: CaseIterable {
    case red, blue, purple, black

    var color: Color {
        switch self {
        case .red: return .red
        case .blue: return .blue
        case .purple: return .purple
        case .black: return .black
        }
    }
}

// MARK: - Preview

struct ImageGeneratorView_Previews: PreviewProvider {
    static var previews: some View {
        ImageGeneratorView()
    }
}