[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_161":162,"_163":164},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_121":-5,"_20":122,"_22":123,"_124":125,"_126":127,"_26":128,"_24":129,"_130":-5,"_131":-5,"_132":51,"_133":134,"_135":42,"_136":-5,"_137":-5,"_138":139},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","prashamtrivedi","name","bhaavsynthlandipgpage","branchName","main","version","path","main.tsx","project",{"_32":68,"_13":14,"_43":69,"_70":-5,"_71":42,"_72":73,"_74":73,"_75":-5,"_76":-5,"_77":78,"_79":35,"_80":42,"_81":-5,"_82":-5,"_83":65,"_84":85,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":91,"_92":91,"_93":94,"_95":94,"_96":94,"_97":91,"_98":91,"_99":100,"_101":102,"_103":104,"_105":51},"tree",[54,55],"file",{"_32":33,"_13":19,"_34":35,"_36":-5,"_37":38,"_39":40,"_41":42,"_43":44,"_17":45,"_46":47,"_48":49,"_50":51,"_52":-5,"_18":53},"contents",[],"upstream","pull","ahead","behind","id","e0a2a444-1e74-11f0-8471-569c3dd06744","fileId","e05803da-1e74-11f0-8471-569c3dd06744","parentId","branchId","e055b238-1e74-11f0-8471-569c3dd06744","branchVersion",18,"latest",true,"createdAt",["D",1743519941352],17,"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\nfunction App() {\n const [darkMode, setDarkMode] = useState(false);\n const [email, setEmail] = useState(\"\");\n const [submitStatus, setSubmitStatus] = useState(\"\");\n const [language, setLanguage] = useState(\"en\");\n\n useEffect(() => {\n const isDarkMode = localStorage.getItem(\"darkMode\") === \"true\";\n setDarkMode(isDarkMode);\n document.body.classList.toggle(\"dark-mode\", isDarkMode);\n }, []);\n\n const toggleDarkMode = () => {\n const newDarkMode = !darkMode;\n setDarkMode(newDarkMode);\n localStorage.setItem(\"darkMode\", newDarkMode);\n document.body.classList.toggle(\"dark-mode\", newDarkMode);\n };\n\n const toggleLanguage = () => {\n setLanguage(language === \"en\" ? \"gu\" : \"en\");\n };\n\n const handleEmailSubmit = async (e) => {\n e.preventDefault();\n try {\n const response = await fetch(\"/submit-email\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ email, language }),\n });\n if (response.ok) {\n setSubmitStatus(language === \"en\" ? \"Thank you for your interest!\" : \"તમારી રુચિ બદલ આભાર!\");\n setEmail(\"\");\n } else {\n setSubmitStatus(\n language === \"en\" ? \"An error occurred. Please try again.\" : \"એક ભૂલ આવી. કૃપા કરીને ફરી પ્રયાસ કરો.\",\n );\n }\n } catch (error) {\n setSubmitStatus(\n language === \"en\" ? \"An error occurred. Please try again.\" : \"એક ભૂલ આવી. કૃપા કરીને ફરી પ્રયાસ કરો.\",\n );\n }\n };\n\n const content = {\n en: {\n nav: {\n features: \"Features\",\n howItWorks: \"How It Works\",\n models: \"AI Models\",\n getStarted: \"Get Started\",\n },\n hero: {\n title: \"Generate High-Quality Gujarati Content with AI\",\n subtitle:\n \"Leverage the power of Claude and Gemini to create engaging, SEO-friendly blog posts in Gujarati with natural language flow.\",\n cta: \"Start Creating\",\n learnMore: \"Learn More\",\n },\n features: {\n title: \"Why Choose Our Generator?\",\n cards: [\n {\n title: \"Multiple AI Models\",\n description: \"Choose between Claude, Gemini, or a hybrid approach that combines the best of both models.\",\n },\n {\n title: \"Natural Gujarati\",\n description: \"Content that reads naturally in Gujarati, not like machine translations.\",\n },\n {\n title: \"Iterative Improvement\",\n description: \"Multiple improvement cycles ensure high-quality content that meets your evaluation criteria.\",\n },\n {\n title: \"Image Prompts\",\n description: \"Automatically generates detailed image prompts to complement your content.\",\n },\n {\n title: \"Transparent Process\",\n description: \"Track the generation process and see how your content is created step by step.\",\n },\n {\n title: \"Style Guide Support\",\n description: \"Custom style guides and evaluation frameworks ensure content meets your standards.\",\n },\n ],\n },\n howItWorks: {\n title: \"How It Works\",\n steps: [\n { title: \"Enter Your Topic\", description: \"Specify the topic for your Gujarati blog post.\" },\n { title: \"Upload Style Guide\", description: \"Provide your custom style guide and evaluation framework.\" },\n { title: \"Choose AI Model\", description: \"Select Claude, Gemini, or hybrid mode for the best results.\" },\n {\n title: \"Configure Options\",\n description: \"Set improvement iterations, thinking tokens, and additional instructions.\",\n },\n {\n title: \"Generate Content\",\n description: \"Get your high-quality Gujarati blog post with matching image prompts.\",\n },\n ],\n },\n models: {\n title: \"AI Models Comparison\",\n claude: {\n title: \"Anthropic Claude\",\n features: [\n \"Advanced reasoning capabilities\",\n \"Optional \\\"thinking\\\" mode\",\n \"High-quality content generation\",\n \"Token usage tracking\",\n \"Cost estimation\",\n ],\n },\n gemini: {\n title: \"Google Gemini\",\n features: [\n \"Fast processing\",\n \"Strong multilingual capabilities\",\n \"Efficient content generation\",\n \"Good image prompt creation\",\n \"Streamlined evaluation\",\n ],\n },\n hybrid: {\n title: \"Hybrid Mode\",\n features: [\n \"Uses both Claude and Gemini\",\n \"Compares outputs from both models\",\n \"Combines the best aspects\",\n \"Advanced content evaluation\",\n \"Detailed comparison reasoning\",\n ],\n },\n },\n getStarted: {\n title: \"Ready to Create Engaging Gujarati Content?\",\n subtitle: \"Sign up to stay informed about our AI-powered Gujarati content generator.\",\n cta: \"Stay Informed\",\n },\n footer: {\n description: \"AI-powered Gujarati blog post generator with support for multiple AI models.\",\n features: [\n \"Multiple AI Models\",\n \"Natural Gujarati\",\n \"Iterative Improvement\",\n \"Image Prompts\",\n \"Style Guide Support\",\n ],\n },\n },\n gu: {\n nav: {\n features: \"વિશેષતાઓ\",\n howItWorks: \"કેવી રીતે કામ કરે છે\",\n models: \"AI મોડેલ્સ\",\n getStarted: \"શરૂ કરો\",\n },\n hero: {\n title: \"AI સાથે ઉચ્ચ-ગુણવત્તાવાળી ગુજરાતી સામગ્રી બનાવો\",\n subtitle:\n \"ક્લોડ અને જેમિની ની શક્તિનો ઉપયોગ કરીને, કુદરતી ભાષા પ્રવાહ સાથે આકર્ષક, SEO-મૈત્રીપૂર્ણ ગુજરાતી બ્લોગ પોસ્ટ્સ બનાવો.\",\n cta: \"સર્જન શરૂ કરો\",\n learnMore: \"વધુ જાણો\",\n },\n features: {\n title: \"અમારું જનરેટર શા માટે પસંદ કરવું?\",\n cards: [\n {\n title: \"બહુવિધ AI મોડેલ્સ\",\n description: \"ક્લોડ, જેમિની, અથવા બંને મોડેલ્સના શ્રેષ્ઠ પાસાઓને જોડતી હાઇબ્રિડ પદ્ધતિ વચ્ચે પસંદગી કરો.\",\n },\n {\n title: \"કુદરતી ગુજરાતી\",\n description: \"મશીન અનુવાદ જેવું નહીં, પણ કુદરતી રીતે વાંચી શકાય તેવી ગુજરાતી સામગ્રી.\",\n },\n {\n title: \"ક્રમિક સુધારણા\",\n description: \"અનેક સુધારણા ચક્રો તમારા મૂલ્યાંકન માપદંડોને પૂરા કરતી ઉચ્ચ-ગુણવત્તાની સામગ્રી સુનિશ્ચિત કરે છે.\",\n },\n {\n title: \"છબી પ્રોમ્પ્ટ્સ\",\n description: \"તમારી સામગ્રીને પૂરક બનાવવા માટે આપમેળે વિગતવાર છબી પ્રોમ્પ્ટ્સ બનાવે છે.\",\n },\n {\n title: \"પારદર્શક પ્રક્રિયા\",\n description: \"સર્જન પ્રક્રિયાને ટ્રૅક કરો અને તમારી સામગ્રી કેવી રીતે બનાવવામાં આવે છે તે પગલે પગલે જુઓ.\",\n },\n {\n title: \"શૈલી માર્ગદર્શિકા સમર્થન\",\n description: \"કસ્ટમ શૈલી માર્ગદર્શિકાઓ અને મૂલ્યાંકન માળખાં સામગ્રી તમારા ધોરણોને પૂરા કરે છે તેની ખાતરી કરે છે.\",\n },\n ],\n },\n howItWorks: {\n title: \"કેવી રીતે કામ કરે છે\",\n steps: [\n { title: \"તમારો વિષય દાખલ કરો\", description: \"તમારી ગુજરાતી બ્લોગ પોસ્ટ માટે વિષય સ્પષ્ટ કરો.\" },\n { title: \"શૈલી માર્ગદર્શિકા અપલોડ કરો\", description: \"તમારી કસ્ટમ શૈલી માર્ગદર્શિકા અને મૂલ્યાંકન માળખું પ્રદાન કરો.\" },\n { title: \"AI મોડેલ પસંદ કરો\", description: \"શ્રેષ્ઠ પરિણામો માટે ક્લોડ, જેમિની, અથવા હાઇબ્રિડ મોડ પસંદ કરો.\" },\n { title: \"વિકલ્પો કોન્ફિગર કરો\", description: \"સુધારણા પુનરાવર્તનો, વિચારણા ટોકન્સ, અને વધારાની સૂચનાઓ સેટ કરો.\" },\n { title: \"સામગ્રી બનાવો\", description: \"મેચિંગ છબી પ્રોમ્પ્ટ્સ સાથે તમારી ઉચ્ચ-ગુણવત્તાની ગુજરાતી બ્લોગ પોસ્ટ મેળવો.\" },\n ],\n },\n models: {\n title: \"AI મોડેલ્સની તુલના\",\n claude: {\n title: \"એન્થ્રોપિક ક્લોડ\",\n features: [\n \"ઉન્નત તર્ક ક્ષમતાઓ\",\n \"વૈકલ્પિક \\\"વિચારણા\\\" મોડ\",\n \"ઉચ્ચ-ગુણવત્તાની સામગ્રી સર્જન\",\n \"ટોકન વપરાશ ટ્રેકિંગ\",\n \"ખર્ચ અંદાજ\",\n ],\n },\n gemini: {\n title: \"ગૂગલ જેમિની\",\n features: [\n \"ઝડપી પ્રક્રિયા\",\n \"મજબૂત બહુભાષી ક્ષમતાઓ\",\n \"કાર્યક્ષમ સામગ્રી સર્જન\",\n \"સારી છબી પ્રોમ્પ્ટ રચના\",\n \"સરળીકૃત મૂલ્યાંકન\",\n ],\n },\n hybrid: {\n title: \"હાઇબ્રિડ મોડ\",\n features: [\n \"ક્લોડ અને જેમિની બંનેનો ઉપયોગ કરે છે\",\n \"બંને મોડેલ્સના આઉટપુટની તુલના કરે છે\",\n \"શ્રેષ્ઠ પાસાઓને જોડે છે\",\n \"ઉન્નત સામગ્રી મૂલ્યાંકન\",\n \"વિગતવાર તુલના તર્ક\",\n ],\n },\n },\n getStarted: {\n title: \"આકર્ષક ગુજરાતી સામગ્રી બનાવવા માટે તૈયાર છો?\",\n subtitle: \"અમારા AI-સંચાલિત ગુજરાતી સામગ્રી જનરેટર વિશે માહિતગાર રહેવા માટે સાઇન અપ કરો.\",\n cta: \"માહિતગાર રહો\",\n },\n footer: {\n description: \"બહુવિધ AI મોડેલ્સ માટે સમર્થન સાથે AI-સંચાલિત ગુજરાતી બ્લોગ પોસ્ટ જનરેટર.\",\n features: [\n \"બહુવિધ AI મોડેલ્સ\",\n \"કુદરતી ગુજરાતી\",\n \"ક્રમિક સુધારણા\",\n \"છબી પ્રોમ્પ્ટ્સ\",\n \"શૈલી માર્ગદર્શિકા સમર્થન\",\n ],\n },\n },\n };\n\n return (\n

\n BhaavSynth\n

\n \n

\n\n

{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",false,"label",[19],{"_32":60,"_13":61,"_34":62,"_36":-5,"_37":38,"_39":63,"_41":42,"_43":64,"_17":65,"_46":24,"_48":-5,"_50":51,"_52":-5,"_57":66,"_18":67},{"_32":33,"_13":19,"_34":35,"_36":-5,"_37":38,"_39":40,"_41":42,"_43":56,"_17":45,"_46":47,"_48":-5,"_50":51,"_52":-5,"_57":58,"_18":59},["D",1743519941352],"children",[],[19],"e0581b5e-1e74-11f0-8471-569c3dd06744","README.md","e0581c08-1e74-11f0-8471-569c3dd06744",1,["D",1743172424615],0,[],[61],"e055702a-1e74-11f0-8471-569c3dd06744",["D",1745214777719],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","1591349e-125d-4fb7-930d-cf293627961f","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","4d7791fe-1f5b-4867-8b6e-34823c16ee48","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_120":116},"org",{"_11":12,"_114":-5,"_115":116,"_77":78,"_117":118,"_119":51},"branch",{"_17":40,"_13":16,"_32":38,"_106":68,"_107":-5,"_108":-5,"_109":-5,"_110":-5,"_111":-5,"_112":14,"_113":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaUF5OXE3VlcwNVRwRU9wSTRmcE1DZ0FSM1UifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_32":68,"_13":14,"_43":157,"_70":-5,"_71":42,"_72":73,"_74":73,"_75":-5,"_76":-5,"_77":78,"_79":35,"_80":42,"_81":-5,"_82":-5,"_83":65,"_84":85,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":91,"_92":91,"_93":94,"_95":94,"_96":94,"_97":91,"_98":91,"_99":158,"_101":159,"_103":160,"_105":51},[151,152],"files",[151,152],"counts",{"_141":65,"_142":65,"_143":65,"_144":145,"_146":147},[],{"_32":33,"_13":19,"_34":35,"_36":-5,"_37":38,"_39":40,"_41":42,"_43":44,"_17":45,"_46":47,"_48":49,"_50":51,"_52":-5,"_18":140},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],"pulls","branches","forks","envVars",{"_148":65,"_150":65},"connections",{"_148":65,"_149":65},"count","unfilledCount","emptyCount",{"_32":60,"_13":61,"_34":62,"_36":-5,"_37":38,"_39":63,"_41":42,"_43":64,"_17":65,"_46":24,"_48":-5,"_50":51,"_52":-5,"_57":155,"_18":156},{"_32":33,"_13":19,"_34":35,"_36":-5,"_37":38,"_39":40,"_41":42,"_43":56,"_17":45,"_46":47,"_48":-5,"_50":51,"_52":-5,"_57":153,"_18":154},[],[19],[],[61],["D",1745214777719],{"_11":12,"_120":116},{"_11":12,"_114":-5,"_115":116,"_77":78,"_117":118,"_119":51},{"_17":40,"_13":16,"_32":38,"_106":68,"_107":-5,"_108":-5,"_109":-5,"_110":-5,"_111":-5,"_112":14,"_113":12},"ctx",{"_99":-5,"_194":195,"_137":196,"_197":198,"_199":200,"_201":51,"_202":51,"_203":51,"_204":42,"_205":-5,"_206":-7,"_207":-7,"_208":65,"_209":51,"_210":51,"_211":-5},"ENV",{"_165":166,"_167":168,"_169":16,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","db46cea2d909ccbd011cfec0e4ddfe291f419728","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","aiChatModels",[212,213,214,215,216],[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","navCollapsed","currentOrgId",{"_217":240,"_52":241,"_220":242,"_75":243,"_223":42,"_224":42,"_225":226,"_227":42},{"_217":236,"_52":237,"_220":238,"_75":239,"_223":42,"_224":42,"_225":226,"_227":51},{"_217":232,"_52":233,"_220":234,"_75":235,"_223":42,"_224":42,"_225":226,"_227":51},{"_217":228,"_52":229,"_220":230,"_75":231,"_223":42,"_224":42,"_225":226,"_227":51},{"_217":218,"_52":219,"_220":221,"_75":222,"_223":42,"_224":42,"_225":226,"_227":51},"value","fable","Claude Fable 5.1","shortLabel","Fable","Most capable; 2× Opus pricing","imageInput","thinking","contextWindowSize",1000000,"isDefault","opus55","Claude Opus 5.5","Opus","Highly capable for complex work","sonnet55","Claude Sonnet 5.5","Sonnet","Balanced speed and capability","haiku55","Claude Haiku 5.5","Haiku 5.5","Fast; good for straightforward edits","deepseekflash","DeepSeek V4.1 Flash","DeepSeek Flash","Smart and very cheap"]