BigOSofts AI Creation
<section id="ai-workspace-section">
<style>
/* Scope all styles to avoid interfering with the rest of your site */
#ai-workspace-section {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: #f8fafc;
color: #1e293b;
line-height: 1.6;
}
/* Container sizing: 60% on desktop, responsive down to 100% on mobile */
.ai-container {
width: 100%;
margin: 0 auto;
max-width: 100%;
}
/* Header Styles */
.ai-header {
text-align: left;
margin-bottom: 50px;
animation: fadeInDown 0.8s ease-out;
}
.ai-header h2 {
font-size: 1.5rem;
font-weight: 600;
color: #334155;
margin-bottom: 15px;
}
.ai-header p {
font-size: 1.1rem;
color: #64748b;
max-width: 80%;
}
/* Tool Cards */
.ai-tool-card {
background: #ffffff;
border-radius: 16px;
padding: 40px;
margin-bottom: 40px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
transition: transform 0.3s ease, box-shadow 0.3s ease;
animation: fadeInUp 0.8s ease-out both;
}
.ai-tool-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* Staggered Animations */
.ai-tool-card:nth-child(2) { animation-delay: 0.2s; }
.ai-tool-card:nth-child(3) { animation-delay: 0.4s; }
.ai-tool-card:nth-child(4) { animation-delay: 0.6s; }
.tool-badge {
display: inline-block;
padding: 6px 14px;
background: #e0e7ff;
color: #4f46e5;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 20px;
}
.ai-tool-card h3 {
font-size: 1.75rem;
margin-top: 0;
margin-bottom: 15px;
color: #0f172a;
}
.tool-description {
font-size: 1.05rem;
color: #475569;
margin-bottom: 25px;
}
/* List styling */
.ai-list {
list-style-type: none;
padding: 0;
margin-bottom: 25px;
}
.ai-list li {
position: relative;
padding-left: 28px;
margin-bottom: 10px;
color: #334155;
font-weight: 500;
}
.ai-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
color: #10b981;
font-weight: bold;
font-size: 1.1rem;
}
/* Terminal/Code Block Styles */
.ai-code-window {
background: #1e1e1e;
border-radius: 10px;
overflow: hidden;
margin-bottom: 25px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.ai-code-header {
background: #2d2d2d;
padding: 10px 15px;
display: flex;
align-items: center;
border-bottom: 1px solid #000;
}
.ai-mac-dots {
display: flex;
gap: 6px;
}
.ai-mac-dots span {
width: 12px;
height: 12px;
border-radius: 50%;
}
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }
.ai-code-title {
color: #a0a0a0;
font-size: 0.85rem;
margin-left: 15px;
font-family: monospace;
}
.ai-code-content {
padding: 20px;
margin: 0;
color: #e6e6e6;
font-family: 'Fira Code', 'Courier New', Courier, monospace;
font-size: 0.9rem;
line-height: 1.5;
max-height: 300px;
overflow-y: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
/* Custom Scrollbar for code blocks */
.ai-code-content::-webkit-scrollbar { width: 8px; }
.ai-code-content::-webkit-scrollbar-track { background: #1e1e1e; }
.ai-code-content::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
.ai-code-content::-webkit-scrollbar-thumb:hover { background: #777; }
/* Image Grids and Placeholders */
.ai-image-label {
font-weight: 600;
color: #475569;
margin-bottom: 15px;
display: block;
border-bottom: 2px solid #e2e8f0;
padding-bottom: 8px;
}
.ai-grid-4 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 30px;
}
.ai-grid-4 img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
border: 1px solid #e2e8f0;
transition: transform 0.2s;
}
.ai-grid-4 img:hover {
transform: scale(1.02);
}
.ai-single-image {
width: 100%;
border-radius: 12px;
box-shadow: 0 6px 12px rgba(0,0,0,0.1);
margin-bottom: 25px;
border: 1px solid #e2e8f0;
}
/* Keyframe Animations */
@keyframes fadeInDown {
0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Mobile Responsiveness */
@media (max-width: 992px) {
.ai-container { width: 85%; }
}
@media (max-width: 768px) {
.ai-container { width: 100%; }
.ai-header h1 { font-size: 2rem; }
.ai-tool-card { padding: 25px; }
.ai-grid-4 { grid-template-columns: 1fr; } /* Stack images on very small screens */
}
</style>
<div class="ai-container">
<!-- HEADER -->
<header class="ai-header">
<br/>
<h2>Your AI creation workspace.</h2>
<p>Turn a rough brief into a presentation or polished Word document. Select a workspace to get started.</p>
</header>
<!-- TOOL 1: SLIDE MAKER -->
<div class="ai-tool-card">
<span class="tool-badge">Tool 1</span>
<h3>Slide Maker</h3>
<p class="tool-description">
It can build beautiful slides from your prompt and place any image exactly according to your instruction where the image is placed.
</p>
<!-- Demo Prompt Box -->
<div class="ai-code-window">
<div class="ai-code-header">
<div class="ai-mac-dots">
<span class="dot-red"></span><span class="dot-yellow"></span><span class="dot-green"></span>
</div>
<span class="ai-code-title">Demo Prompt: Modern Poultry Farming (Bengali)</span>
</div>
<pre class="ai-code-content"><code>"Create a 36-slide, 16:9 PowerPoint (.pptx) presentation in Bengali (বাংলা), titled "বাংলাদেশে আধুনিক পোল্ট্রি ফার্মিং" (Modern Poultry Farming in Bangladesh), subtitled "সঠিক ব্যবস্থাপনায় লাভজনক ও টেকসই পোল্ট্রি ব্যবসা" / "উদ্যোক্তা ও খামার ব্যবস্থাপনা নির্দেশিকা".
Slide-by-slide content:
Title slide — Title: "বাংলাদেশে আধুনিক পোল্ট্রি ফার্মিং"; subtitle: "সঠিক ব্যবস্থাপনায় লাভজনক ও টেকসই পোল্ট্রি ব্যবসা"; footer line: "উদ্যোক্তা ও খামার ব্যবস্থাপনা নির্দেশিকা".
পোল্ট্রি ফার্মিং কী? — 4-step numbered flow with icons and ">" connectors:
🐥 মুরগি পালন — উন্নত জাতের সুস্থ মুরগি ও বাচ্চা সংগ্রহ
🌾 সুষম খাবার — পুষ্টিকর ফিড ও বিশুদ্ধ পানি নিশ্চিতকরণ
🥚 উৎপাদন — ডিম ও মাংসের উৎপাদন বৃদ্ধি করা
🚚 বাজারজাতকরণ — পাইকারি ও খুচরা বাজারে বিক্রয়
বাংলাদেশে পোল্ট্রি শিল্পের গুরুত্ব — 4 icon rows:
🍗 প্রাণিজ প্রোটিনের প্রধান উৎস ও জাতীয় পুষ্টি নিরাপত্তা
👨🌾 গ্রামীণ কর্মসংস্থান সৃষ্টি ও নারীদের স্বাবলম্বীকরণ
🏭 ফিড, হ্যাচারি, পরিবহন ও রিটেইল খাতের বিকাশ
💼 ক্ষুদ্র ও মাঝারি উদ্যোক্তাদের জন্য লাভজনক ব্যবসার সুযোগ
পোল্ট্রি ফার্মিংয়ের প্রধান ধরন — 4 cards:
🍗 Broiler (ব্রয়লার) — প্রধান পণ্য: মাংস; উদ্দেশ্য: দ্রুত ওজন বৃদ্ধি ও মাংস উৎপাদন
🥚 Layer (লেয়ার) — প্রধান পণ্য: ডিম; উদ্দেশ্য: দীর্ঘমেয়াদী নিয়মিত ডিম উৎপাদন
🐓 Sonali (সোনালী) — প্রধান পণ্য: মাংস ও ডিম; উদ্দেশ্য: দেশীয় স্বাদ ও স্থানীয় বাজার
🐣 Breeder (ব্রিডার) — প্রধান পণ্য: একদিনের বাচ্চা; উদ্দেশ্য: হ্যাচারিতে বাচ্চা সরবরাহ
Broiler বনাম Layer তুলনা — comparison table (columns: বিষয় | Broiler | Layer):
| প্রধান পণ্য | মাংস | ডিম |
| উৎপাদন Cycle | তুলনামূলক ছোট (৩০-৩৫ দিন) | দীর্ঘ (৭২-৮০ সপ্তাহ) |
| Feed Objective | দ্রুত weight gain | Egg production ও স্বাস্থ্য |
| Revenue Style | Batch-based এককালীন আয় | Regular/continuous দৈনিক আয় |
| Management Focus | Growth-focused | Egg & health-focused |
[Note: Prompt continues for 36 slides covering Farm Location, Poultry Shed Design, Ventilation, Target Temperature, Chick Management, Feed Management, Biosecurity, Disease Risk, Vaccination, Daily Routine, Business Plan, Startup Cost, Break-even Analysis, Heat Stress, Sustainable Farming, and top 10 Tips for Entrepreneurs]..."</code></pre>
</div>
<span class="ai-image-label">Output can be generated in 4 different color palettes at a time:</span>
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/cfe70eb2-6271-41a4-8162-c553749c7fac.JPG" alt="color variant" class="ai-single-image" />
<span class="ai-image-label">Generated Slide in Different Layout in Different Color Variants:</span>
<div class="ai-grid-4">
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/a2f97e6e-3384-44a7-b27f-4fd949ba2e3f.JPG" alt="Slide variant 1" />
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/8612422c-2f12-4e5b-af71-4dd66672d727.JPG" alt="Slide variant 2" />
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/f58e5c9d-cdde-441c-b058-2acff3f96aeb.JPG" alt="Slide variant 3" />
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/fe6c901f-862d-49e6-9bd3-d85ec370e2c8.JPG" alt="Slide variant 4" />
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/69ea226b-a350-4a5c-9b83-edf431f7ba8a.JPG" alt="Slide variant 5" />
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/04b90b32-1b86-4525-9c01-23f8c81cd6ef.JPG" alt="Slide variant 6" />
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/7e3486f8-8ec9-4021-b9b2-2374466115b6.JPG" alt="Slide variant 7" />
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/17bab7a3-cdc3-469c-b3c2-ebbdfade43ce.JPG" alt="Slide variant 8" />
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/61e92629-9b57-4b88-a1d8-0a990ebece13.JPG" alt="Slide variant 9" />
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/
5b8cecdb-0808-44fc-93b9-1f1ef4f7c193.JPG" alt="Slide variant 10" />
</div>
</div>
<!-- TOOL 2: DOCUMENT MAKER -->
<div class="ai-tool-card">
<span class="tool-badge">Tool 2</span>
<h3>Document Maker</h3>
<p class="tool-description">
You can generate any document from the prompt and use images to place on the document. Choose from a variety of document types:
</p>
<ul class="ai-list">
<li>Any Report Writing</li>
<li>Any Application</li>
<li>Any CV writing</li>
<li>Any Business Proposal writing</li>
</ul>
<!-- Demo Prompt 1 -->
<div class="ai-code-window">
<div class="ai-code-header">
<div class="ai-mac-dots">
<span class="dot-red"></span><span class="dot-yellow"></span><span class="dot-green"></span>
</div>
<span class="ai-code-title">Prompt 1: Professional CV generation</span>
</div>
<pre class="ai-code-content"><code>"Generate a professional CV document for the following person. Use a two-column layout with a dark navy left sidebar and a clean white right content area.
Personal Details:
Full Name: Alexandra Chen
Job Title: Senior Full-Stack Engineer
Email: alexandra.chen@email.com
Phone: +1 (555) 847-2291
Location: San Francisco, CA, USA
LinkedIn: linkedin.com/in/alexandrachen
Professional Summary: Results-driven Senior Full-Stack Engineer with 8+ years of experience designing and scaling high-performance web applications...
Work Experience:
Senior Full-Stack Engineer — Google LLC (2021 – Present)
- Led a team of 9 engineers to rebuild the Google Photos sharing pipeline...
Skills: JavaScript, TypeScript, React, Node.js, AWS, Kubernetes..."</code></pre>
</div>
<span class="ai-image-label">Output CV Variations:</span>
<div class="ai-grid-4">
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/52b1ba6c-c7f5-400b-b7bf-6d3a3d1a9ddf.JPG" alt="CV Output 1" />
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/0dab4fa8-c4c4-477c-9b46-08cac510abdb.JPG" alt="CV Output 2" />
</div>
<!-- Demo Prompt 2 -->
<div class="ai-code-window" style="margin-top: 40px;">
<div class="ai-code-header">
<div class="ai-mac-dots">
<span class="dot-red"></span><span class="dot-yellow"></span><span class="dot-green"></span>
</div>
<span class="ai-code-title">Prompt 2: Formal Administrative Register (Bengali)</span>
</div>
<pre class="ai-code-content"><code>"নিচের তথ্য দিয়ে বাংলায় একটি পেশাদার formal_administrative_register DOCX প্রতিবেদন তৈরি করো।
শিরোনাম: প্রাত্যহিক ভিজিল্যান্স রিপোর্ট ২০২৬
উপ-শিরোনাম: তারিখ: ০৪ আগস্ট ২০২৬ | মিরপুর ক্যান্টনমেন্ট পাবলিক স্কুল ও কলেজ
বিষয়: দৈনিক শৃঙ্খলা ও উপস্থিতি পরিদর্শন প্রতিবেদন
১. ভিজিল্যান্সের উদ্দেশ্য
- সময়মতো স্কুল ও কলেজে শিক্ষার্থীদের উপস্থিতি নিশ্চিতকরণ
- শৃঙ্খলা, আচার-আচরণ ও পোশাকের বিষয়ে সচেতনতা তৈরি
- ক্লাসরুমে অবাঞ্ছিত মোবাইল ফোন তল্লাশি...
২. পরিদর্শন দলের পরিচিতি (টেবিল)
৩. কার্যক্রমের বিবরণ
৪. দেরিকৃত শিক্ষার্থীদের তালিকা (টেবিল)
৫. বিভিন্ন শ্রেণিকক্ষ পরিদর্শন ও শৃঙ্খলার তথ্য
৬. সামগ্রিক পরিসংখ্যান
৭. সুপারিশমালা
৮. স্বাক্ষর অংশ"</code></pre>
</div>
<span class="ai-image-label">Output Administrative Docs:</span>
<div class="ai-grid-4">
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/cd05d028-c804-439a-af8e-b789264cbd03.JPG" alt="Doc format 1" />
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/9c0b985a-c73a-48fe-a2f9-d33574c6e201.JPG" alt="Doc format 2" />
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/dba78de9-99b7-4723-b935-d557b7010f28.JPG" alt="Doc format 3" />
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/8bc5450b-fbd9-4323-93ea-9c6978d6760c.JPG" alt="Doc format 4" />
</div>
</div>
<!-- TOOL 3: DATA EXTRACTOR -->
<div class="ai-tool-card">
<span class="tool-badge">Tool 3</span>
<h3>Data Extractor</h3>
<p class="tool-description">
You can extract data from any PDF and image according to your instruction. AI can formulate and organize your data based on your specific requirements.
</p>
<span class="ai-image-label">User Interface:</span>
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/0d39a697-5261-4f73-875b-da6617b08933.JPG" alt="Data Extractor Interface" class="ai-single-image" />
<span class="ai-image-label">Output Data Formats:</span>
<div class="ai-grid-4">
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/eb427784-8bb7-47df-915c-c98ef55ee5d7.JPG" alt="Data Output 1" />
<img src="https://bigosofts-backend-akdt.onrender.com/uploads/2026/08/55f3654a-3591-4c7e-909b-168029483219.JPG" alt="Data Output 2" />
</div>
</div>
</div>
</section>
