{content[language].hero.title}

{content[language].hero.subtitle}

\n {content[language].hero.cta}\n {content[language].hero.learnMore}\n

\n 📝 {language === \"en\" ? \"Topic: AI in Healthcare\" : \"વિષય: આરોગ્યસંભાળમાં AI\"}\n

💾 {language === \"en\" ? \"Output: blog_post\" : \"આઉટપુટ: બ્લોગ_પોસ્ટ\"}

🔄 {language === \"en\" ? \"Iterations: 3\" : \"પુનરાવર્તનો: 3\"}

⏱️ {language === \"en\" ? \"Execution time: 42.78s\" : \"અમલીકરણ સમય: 42.78s\"}

\n ✅ {language === \"en\" ? \"Blog post generated!\" : \"બ્લોગ પોસ્ટ બનાવવામાં આવી!\"}\n

\n\n

{content[language].features.title}

\n {content[language].features.cards.map((card, index) => (\n

{[\"🤖\", \"🇮🇳\", \"🔄\", \"🎨\", \"📊\", \"📝\"][index]}

{card.title}

{card.description}

\n ))}\n

\n\n

{content[language].howItWorks.title}

\n {content[language].howItWorks.steps.map((step, index) => (\n

{index + 1}

{step.title}

{step.description}

\n ))}\n

\n\n

{content[language].models.title}

\n {[\"claude\", \"gemini\", \"hybrid\"].map((model) => (\n

{model === \"claude\" ? \"🧠\" : model === \"gemini\" ? \"🌐\" : \"🤝\"}

{content[language].models[model].title}

{feature}

\n ))}\n

\n\n

{content[language].getStarted.title}

{content[language].getStarted.subtitle}

\n\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n\n if (request.method === \"POST\" && url.pathname === \"/submit-email\") {\n const { email, language } = await request.json();\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const { email: sendEmail } = await import(\"https://esm.town/v/std/email\");\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n const KEY = \"bhaavsynthlandipgpage\";\n const SCHEMA_VERSION = 1;\n\n // Save email to database\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_signups_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n email TEXT NOT NULL,\n signup_date DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n await sqlite.execute(\n `\n INSERT INTO ${KEY}_signups_${SCHEMA_VERSION} (email) VALUES (?)\n `,\n [email],\n );\n\n // Send notification to admin\n await sendEmail({\n subject: \"New BhaavSynth Signup\",\n html: `

New signup: ${email}

`,\n });\n\n const emailContent = {\n en: {\n subject: \"Welcome to BhaavSynth\",\n html: `\n

નમસ્તે! Welcome to the BhaavSynth Community!

We're thrilled to have you on board. Your interest in AI-powered Gujarati content creation is a testament to the exciting future of language technology.

As we fine-tune our algorithms and expand our capabilities, we'd love to hear about your own experiences with AI:

Do you have a unique AI workflow you've developed?
Have you encountered any challenges in generating Gujarati content with AI?
What features would you love to see in an AI-powered Gujarati writing assistant?

We're genuinely curious about your insights! If you'd like to share, please send your thoughts to aiwithus@prashamhtrivedi.in. Your input could shape the future of GujaratiGPT!

Stay tuned for updates, and get ready to revolutionize your Gujarati content creation process.

આભાર (Thank you),
The GujaratiGPT Team

\n We're excited to see how AI will contribute to the rich tradition of Gujarati literature and journalism!\n

\n `,\n },\n gu: {\n subject: \"GujaratiGPT માં આપનું સ્વાગત છે\",\n html: `\n

નમસ્તે! GujaratiGPT સમુદાયમાં આપનું સ્વાગત છે!

અમે આપને અમારી સાથે જોડાયેલા જોઈને ખૂબ જ આનંદિત છીએ. AI-સંચાલિત ગુજરાતી સામગ્રી નિર્માણમાં આપની રુચિ ભાષા તકનીકના રોમાંચક ભવિષ્યનું પ્રમાણ છે.

જેમ જેમ અમે અમારા એલ્ગોરિધમ્સને સુધારીએ છીએ અને અમારી ક્ષમતાઓનું વિસ્તરણ કરીએ છીએ, અમે AI સાથેના તમારા અનુભવો વિશે જાણવા માંગીએ છીએ:

શું તમે કોઈ અનન્ય AI વર્કફ્લો વિકસાવ્યો છે?
શું તમને AI દ્વારા ગુજરાતી સામગ્રી બનાવવામાં કોઈ પડકારોનો સામનો કરવો પડ્યો છે?
AI-સંચાલિત ગુજરાતી લેખન સહાયકમાં તમે કઈ સુવિધાઓ જોવા માંગો છો?

અમે તમારી ઇનસાઇટ્સ વિશે ખરેખર કુતૂહલ ધરાવીએ છીએ! જો તમે શેર કરવા માંગતા હો, તો કૃપા કરીને તમારા વિચારો aiwithus@prashamhtrivedi.in પર મોકલો. તમારું ઇનપુટ GujaratiGPT ના ભવિષ્યને આકાર આપી શકે છે!

અપડેટ્સ અમારા આગામી ઇમેઇલ્સ જોતા રહો, અને તમારી ગુજરાતી સામગ્રી નિર્માણ પ્રક્રિયામાં ક્રાંતિ લાવવા માટે તૈયાર રહો.

આભાર,
GujaratiGPT ટીમ

\n અમે AI ગુજરાતી સાહિત્ય અને પત્રકારત્વની સમૃદ્ધ પરંપરામાં કેવું યોગદાન આપશે તે જોવા માટે ઉત્સાહિત છીએ!\n

\n `,\n },\n };\n\n // Translate the email content to Gujarati if it doesn't exist\n\n // Send welcome email to user in the appropriate language\n await sendEmail({\n to: email,\n subject: emailContent[language].subject,\n html: emailContent[language].html,\n });\n\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // ... rest of the code remains unchanged\n\n return new Response(\n `\n \n \n GujaratiGPT - AI-Powered Gujarati Blog Post Generator\n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\n:root {\n --primary: #5C6BC0;\n --primary-dark: #3F51B5;\n --secondary: #FF9800;\n --text: #333;\n --text-light: #666;\n --background: #fff;\n --background-alt: #f8f9fa;\n --success: #4CAF50;\n --border: #e0e0e0;\n --shadow: rgba(0, 0, 0, 0.1);\n\n /* Dark mode colors */\n --primary-dark-mode: #7986CB;\n --primary-dark-dark-mode: #5C6BC0;\n --secondary-dark-mode: #FFB74D;\n --text-dark-mode: #E0E0E0;\n --text-light-dark-mode: #BDBDBD;\n --background-dark-mode: #121212;\n --background-alt-dark-mode: #1E1E1E;\n --success-dark-mode: #66BB6A;\n --border-dark-mode: #333;\n --shadow-dark-mode: rgba(255, 255, 255, 0.1);\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \n \"Helvetica Neue\", Arial, sans-serif;\n line-height: 1.6;\n color: var(--text);\n background-color: var(--background);\n transition: background-color 0.3s ease, color 0.3s ease;\n}\n\nbody.dark-mode {\n --primary: var(--primary-dark-mode);\n --primary-dark: var(--primary-dark-dark-mode);\n --secondary: var(--secondary-dark-mode);\n --text: var(--text-dark-mode);\n --text-light: var(--text-light-dark-mode);\n --background: var(--background-dark-mode);\n --background-alt: var(--background-alt-dark-mode);\n --success: var(--success-dark-mode);\n --border: var(--border-dark-mode);\n --shadow: var(--shadow-dark-mode);\n}\n\n.container {\n max-width: 100%;\n overflow-x: hidden;\n}\n\n/* Header Styles */\n.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.5rem 10%;\n background-color: var(--background);\n box-shadow: 0 2px 10px var(--shadow);\n position: sticky;\n top: 0;\n z-index: 1000;\n transition: background-color 0.3s ease, box-shadow 0.3s ease;\n}\n\n.logo {\n font-size: 1.8rem;\n font-weight: 700;\n color: var(--primary);\n}\n\n.logo-text {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.nav {\n display: flex;\n gap: 2rem;\n align-items: center;\n}\n\n.nav a {\n text-decoration: none;\n color: var(--text);\n font-weight: 500;\n transition: color 0.3s ease;\n}\n\n.nav a:hover {\n color: var(--primary);\n}\n\n.dark-mode-toggle, .language-toggle {\n background: none;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n transition: transform 0.3s ease;\n}\n\n.dark-mode-toggle:hover, .language-toggle:hover {\n transform: scale(1.1);\n}\n\n.language-toggle {\n font-size: 1rem;\n padding: 0.5rem 1rem;\n background-color: var(--primary);\n color: white;\n border-radius: 4px;\n}\n\n/* Hero Section */\n.hero {\n display: flex;\n min-height: 80vh;\n padding: 4rem 10%;\n background: linear-gradient(to right, var(--background), var(--background-alt));\n transition: background 0.3s ease;\n}\n\n.hero-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 2rem;\n}\n\n.hero h1 {\n font-size: 3rem;\n font-weight: 800;\n line-height: 1.2;\n background: linear-gradient(135deg, var(--primary), var(--primary-dark));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.hero-subtitle {\n font-size: 1.25rem;\n color: var(--text-light);\n max-width: 600px;\n}\n\n.cta-container {\n display: flex;\n gap: 1rem;\n margin-top: 1rem;\n}\n\n.cta-button {\n display: inline-block;\n padding: 0.75rem 2rem;\n background-color: var(--primary);\n color: white;\n font-weight: 600;\n text-decoration: none;\n border-radius: 4px;\n transition: all 0.3s ease;\n}\n\n.cta-button:hover {\n background-color: var(--primary-dark);\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(63, 81, 181, 0.3);\n}\n\n.cta-button.large {\n padding: 1rem 3rem;\n font-size: 1.1rem;\n}\n\n.secondary-button {\n display: inline-block;\n padding: 0.75rem 2rem;\n background-color: transparent;\n color: var(--primary);\n font-weight: 600;\n text-decoration: none;\n border: 2px solid var(--primary);\n border-radius: 4px;\n transition: all 0.3s ease;\n}\n\n.secondary-button:hover {\n background-color: rgba(92, 107, 192, 0.1);\n transform: translateY(-2px);\n}\n\n.hero-image {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.hero-graphic {\n max-width: 100%;\n transform: perspective(1000px) rotateY(-10deg);\n transition: transform 0.3s ease;\n box-shadow: 0 10px 30px var(--shadow);\n border-radius: 8px;\n overflow: hidden;\n}\n\n.hero-graphic:hover {\n transform: perspective(1000px) rotateY(0deg);\n}\n\n.code-block {\n background-color: #1e1e1e;\n padding: 2rem;\n border-radius: 8px;\n font-family: monospace;\n color: #e0e0e0;\n}\n\n.code-line {\n margin: 0.75rem 0;\n font-size: 1rem;\n}\n\n.code-line.success {\n color: var(--success);\n}\n\n/* Features Section */\n.features {\n padding: 6rem 10%;\n background-color: var(--background);Certainly! Here's the continuation of the CSS code:\n\n text-align: center;\n transition: background-color 0.3s ease;\n}\n\n.features h2 {\n font-size: 2.5rem;\n margin-bottom: 3rem;\n position: relative;\n display: inline-block;\n color: var(--text);\n}\n\n.features h2:after {\n content: \"\";\n display: block;\n width: 80px;\n height: 4px;\n background: var(--primary);\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n border-radius: 2px;\n}\n\n.features-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.feature-card {\n background-color: var(--background-alt);\n padding: 2rem;\n border-radius: 8px;\n transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n\n.feature-card:hover {\n transform: translateY(-10px);\n box-shadow: 0 10px 20px var(--shadow);\n}\n\n.feature-icon {\n font-size: 3rem;\n margin-bottom: 1.5rem;\n}\n\n.feature-card h3 {\n font-size: 1.5rem;\n margin-bottom: 1rem;\n color: var(--text);\n}\n\n.feature-card p {\n color: var(--text-light);\n}\n\n/* How It Works Section */\n.how-it-works {\n padding: 6rem 10%;\n background-color: var(--background-alt);\n text-align: center;\n transition: background-color 0.3s ease;\n}\n\n.how-it-works h2 {\n font-size: 2.5rem;\n margin-bottom: 3rem;\n position: relative;\n display: inline-block;\n color: var(--text);\n}\n\n.how-it-works h2:after {\n content: \"\";\n display: block;\n width: 80px;\n height: 4px;\n background: var(--primary);\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n border-radius: 2px;\n}\n\n.steps {\n max-width: 800px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n}\n\n.step {\n display: flex;\n gap: 2rem;\n text-align: left;\n align-items: center;\n}\n\n.step-number {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 60px;\n height: 60px;\n background-color: var(--primary);\n color: white;\n font-size: 1.5rem;\n font-weight: 700;\n border-radius: 50%;\n flex-shrink: 0;\n}\n\n.step-content {\n flex: 1;\n}\n\n.step-content h3 {\n font-size: 1.5rem;\n margin-bottom: 0.5rem;\n color: var(--text);\n}\n\n.step-content p {\n color: var(--text-light);\n}\n\n/* Models Section */\n.models {\n padding: 6rem 10%;\n background-color: var(--background);\n text-align: center;\n transition: background-color 0.3s ease;\n}\n\n.models h2 {\n font-size: 2.5rem;\n margin-bottom: 3rem;\n position: relative;\n display: inline-block;\n color: var(--text);\n}\n\n.models h2:after {\n content: \"\";\n display: block;\n width: 80px;\n height: 4px;\n background: var(--primary);\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n border-radius: 2px;\n}\n\n.models-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.model-card {\n background-color: var(--background-alt);\n padding: 2rem;\n border-radius: 8px;\n transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;\n height: 100%;\n}\n\n.model-card:hover {\n transform: translateY(-10px);\n box-shadow: 0 10px 20px var(--shadow);\n}\n\n.model-card.highlight {\n background: linear-gradient(to bottom right, var(--background), var(--background-alt));\n border: 2px solid var(--primary);\n}\n\n.model-icon {\n font-size: 3rem;\n margin-bottom: 1.5rem;\n}\n\n.model-card h3 {\n font-size: 1.5rem;\n margin-bottom: 1.5rem;\n color: var(--text);\n}\n\n.model-features {\n list-style-type: none;\n text-align: left;\n}\n\n.model-features li {\n margin: 0.75rem 0;\n position: relative;\n padding-left: 1.5rem;\n color: var(--text-light);\n}\n\n.model-features li:before {\n content: \"✓\";\n color: var(--primary);\n position: absolute;\n left: 0;\n}\n\n/* Get Started Section */\n.get-started {\n padding: 6rem 10%;\n background: linear-gradient(135deg, var(--primary), var(--primary-dark));\n text-align: center;\n color: white;\n}\n\n.get-started h2 {\n font-size: 2.5rem;\n margin-bottom: 1.5rem;\n}\n\n.get-started p {\n max-width: 600px;\n margin: 0 auto 2rem;\n font-size: 1.25rem;\n}\n\n.email-form {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-bottom: 1rem;\n}\n\n.email-form input[type=\"email\"] {\n padding: 1rem;\n font-size: 1rem;\n border: none;\n border-radius: 4px;\n width: 300px;\n max-width: 100%;\n}\n\n.submit-status {\n margin-top: 1rem;\n font-weight: bold;\n}\n\n/* Footer Styles */\n.footer {\n background-color: var(--background-alt);\n color: var(--text);\n padding: 4rem 10% 2rem;\n transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 3rem;\n margin-bottom: 3rem;\n}\n\n.footer-section h3 {\n font-size: 1.5rem;\n margin-bottom: 1.5rem;\n position: relative;\n color: var(--text);\n}\n\n.footer-section h3:after {\n content: \"\";\n display: block;\n width: 40px;\n height: 3px;\n background: var(--primary);\n position: absolute;\n bottom: -10px;\n left: 0;\n border-radius: 1.5px;\n}\n\n.footer-section p {\n margin-bottom: 1.5rem;\n color: var(--text-light);\n}\n\n.footer-section ul {\n list-style-type: none;\n}\n\n.footer-section li {\n margin: 0.5rem 0;\n}\n\n.footer-section a {\n color: var(--text-light);\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\n.footer-section a:hover {\n color: var(--primary);\n}\n\n.source-link {\n display: inline-block;\n margin-top: 1rem;\n padding: 0.5rem 1rem;\n border: 1px solid var(--secondary);\n border-radius: 4px;\n color: var(--secondary) !important;\n transition: all 0.3s ease;\n}\n\n.source-link:hover {\n background-color: rgba(255, 152, 0, 0.1);\n}\n\n.copyright {\n text-align: center;\n padding-top: 2rem;\n border-top: 1px solid var(--border);\n font-size: 0.9rem;\n color: var(--text-light);\n}\n\n/* Responsive Styles */\n@media (max-width: 1024px) {\n .hero {\n flex-direction: column;\n gap: 3rem;\n }\n \n .hero-content {\n text-align: center;\n align-items: center;\n }\n \n .step {\n flex-direction: column;\n text-align: center;\n gap: 1rem;\n }\n\n .email-form {\n flex-direction: column;\n align-items: center;\n }\n\n .email-form input[type=\"email\"] {\n width: 100%;\n max-width: 300px;\n }\n}\n\n@media (max-width: 768px) {\n .header {\n flex-direction: column;\n gap: 1rem;\n padding: 1rem 5%;\n }\n \n .nav {\n gap: 1rem;\n flex-wrap: wrap;\n justify-content: center;\n }\n \n .hero {\n padding: 3rem 5%;\n }\n \n .hero h1 {\n font-size: 2.5rem;\n }\n \n .features, \n .how-it-works, \n .models, \n .get-started {\n padding: 4rem 5%;\n }\n \n .footer {\n padding: 3rem 5% 2rem;\n }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/prashamtrivedi/bhaavsynthlandipgpage/code/main.tsx","extension","actionData","errors"]