# SmartBlog Writer

A complete static SaaS website and functional browser demo for **smartblogwriter.com**, founded by **Makuda Siddique**.

## Product concept

SmartBlog Writer is an **AI-assisted editorial workflow platform**. It helps content teams turn a topic into a clear assignment, structured first draft, and visible review process. The product is positioned around responsible, human-reviewed publishing rather than one-click bulk content.

**Tagline:** From search intent to a review-ready draft.

**Primary audience:** content teams, SEO specialists, agencies, founder-led brands, and independent publishers.

## What works in this package

- Responsive marketing website with 17 complete HTML pages
- Mobile navigation and desktop resources dropdown
- Light/dark theme with local preference saving
- Functional client-side content generator
- Variable template output based on user input
- Six content formats and five demo languages
- Copy, text download, reset, and regenerate controls
- Word and character count
- Loading state, form validation, and error messages
- localStorage document history
- Dashboard statistics, search, content-type/status filters, saved drafts, settings, and logout demo
- Monthly/annual pricing switch
- Accessible checkout-information modal
- FAQ accordion and FAQ search
- Testimonial carousel with clearly labeled illustrative feedback
- Contact, newsletter, login, and signup validation demos
- Password visibility controls
- Cookie preference banner
- Back-to-top control
- Unique metadata, canonical placeholders, Open Graph, Twitter Card, and structured data
- `sitemap.xml`, `robots.txt`, favicon, original SVG visuals, and Netlify security headers

## Folder structure

```text
smartblogwriter/
├── index.html
├── features.html
├── generator.html
├── pricing.html
├── about.html
├── blog.html
├── blog-post.html
├── contact.html
├── faq.html
├── privacy.html
├── terms.html
├── cookies.html
├── disclaimer.html
├── 404.html
├── login.html
├── signup.html
├── dashboard.html
├── sitemap.xml
├── robots.txt
├── _headers
├── README.md
└── assets/
    ├── css/
    │   ├── style.css
    │   └── dashboard.css
    ├── js/
    │   ├── main.js
    │   ├── generator.js
    │   └── dashboard.js
    └── images/
        ├── logo.svg
        ├── logo-light.svg
        ├── favicon.svg
        ├── og-image.svg
        └── dashboard-preview.svg
```

## Run locally

No installation or build step is required.

### Simple option

Open `index.html` directly in a modern browser. Most features work from a local file.

### Recommended option

Run a small local web server so navigation and browser APIs behave like a hosted website:

```bash
python -m http.server 8000
```

Then visit:

```text
http://localhost:8000
```

Run the command from inside the `smartblogwriter` folder.

## Upload to cPanel

1. Open **File Manager** in cPanel.
2. Open `public_html` for the main domain, or the document root for the selected addon domain/subdomain.
3. Upload the contents of the `smartblogwriter` folder. Do not upload an extra nested folder unless that is intentional.
4. Confirm that `index.html` is directly inside the web root.
5. Enable HTTPS in the hosting panel.
6. Open several pages and test the mobile navigation, generator, pricing switch, forms, and dashboard.
7. Configure the host to use `404.html` as the custom error page.

## Deploy to Netlify

### Drag and drop

1. Sign in to Netlify.
2. Open **Add new site → Deploy manually**.
3. Drag the complete `smartblogwriter` folder into the upload area.
4. Add the custom domain in **Domain management**.
5. Netlify will read the included `_headers` file.

### Git deployment

1. Commit the folder to a Git repository.
2. Import the repository into Netlify.
3. Leave the build command empty.
4. Set the publish directory to the folder containing `index.html`.

## Deploy to GitHub Pages

1. Create a repository and add all files.
2. Open **Settings → Pages**.
3. Select **Deploy from a branch**.
4. Choose the relevant branch and `/ (root)` folder.
5. Save and wait for the deployment URL.
6. For a custom domain, add it in Pages settings and configure the required DNS records.

The site uses relative internal paths, so it also works in a repository subdirectory. Canonical and Open Graph URLs currently use `https://smartblogwriter.com/`; update them when deploying under another permanent URL.

## Change the website name

Search all files for:

```text
SmartBlog Writer
smartblogwriter.com
smartblogwriter.com LLC
```

Update:

- Visible brand copy in HTML files
- `<title>`, meta descriptions, canonical URLs, and schema blocks
- Footer copyright text
- `sitemap.xml` and `robots.txt`
- Logo SVG text in `assets/images/logo.svg` and `logo-light.svg`
- Open Graph artwork in `assets/images/og-image.svg`

## Change the founder name

Search all files for:

```text
Makuda Siddique
Makuda
```

The name appears on the About page, article byline and author schema, dashboard demo, and account presentation.

## Change contact email addresses

Search for:

```text
hello@smartblogwriter.com
security@smartblogwriter.com
privacy@smartblogwriter.com
legal@smartblogwriter.com
```

Update the relevant HTML pages and legal documents. Before launch, ensure each address exists and is monitored.

## Change pricing

Pricing cards and the comparison table are in `pricing.html`.

Each main price element uses:

```html
<strong data-monthly="39" data-yearly="31">$39</strong>
```

- `data-monthly` is the monthly price.
- `data-yearly` is the effective monthly price under annual billing.
- Update plan limits, user seats, features, support level, and CTA copy in the same file.
- Update the homepage pricing preview in `index.html` if the headline plans change.
- Validate prices against AI-model usage, infrastructure, payment fees, taxes, support, and customer research.

## Connect a real AI API securely

The current generator in `assets/js/generator.js` uses browser-based templates. It intentionally contains no provider key.

### Recommended architecture

```text
Browser form
    ↓ HTTPS POST
Your authenticated backend/API proxy
    ↓ provider SDK or REST API
OpenAI or another AI provider
```

The backend should:

1. Authenticate the user.
2. Validate and normalize every field.
3. Enforce plan limits and rate limits.
4. Apply safety and abuse controls appropriate to the product.
5. Keep the AI provider key in server-side environment variables.
6. Build the system and user prompts on the server.
7. Set timeouts and handle provider errors.
8. Return only the required generated output and usage information.
9. Avoid logging sensitive prompt content unless necessary and disclosed.
10. Save documents to a database only with clear retention and deletion controls.

Example front-end replacement pattern:

```js
const response = await fetch('/api/generate', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  credentials: 'include',
  body: JSON.stringify(formData)
});

if (!response.ok) {
  throw new Error('Generation failed');
}

const result = await response.json();
```

Never put an OpenAI, Anthropic, Google, or other private API key in `generator.js`, HTML, a public repository, or any browser-accessible environment variable.

## Connect production authentication

The login and signup forms currently validate locally and open the demo dashboard.

For production, use a proven authentication system or secure server implementation with:

- Verified email ownership
- Secure password hashing
- Session cookies marked `HttpOnly`, `Secure`, and appropriate `SameSite`
- CSRF protection where applicable
- Login throttling and abuse monitoring
- Password-reset and account-recovery flows
- Multi-factor authentication for higher-risk accounts
- Account deletion and data-export controls

## Connect payments

The pricing CTA opens an accessible information modal. It does not collect card data.

For production:

1. Create products and prices in a payment provider such as Stripe.
2. Create checkout sessions on your backend.
3. Redirect users to hosted checkout or use secure provider components.
4. Verify webhook signatures on the server.
5. Update subscription access only after verified payment events.
6. Add tax, cancellation, refund, failed-payment, and invoice handling.

Do not trust a plan name or price sent only by the browser.

## Connect the contact and newsletter forms

The current forms show a local success state and transmit nothing.

Replace the local handler with either:

- A secure server endpoint
- A reputable form service
- A marketing email platform API called from your backend

Add server-side validation, spam protection, consent records where required, rate limits, and accessible success/error responses.

## Demo versus production features

| Feature | Current package | Production requirement |
|---|---|---|
| Marketing pages | Complete | Final legal/business review |
| Responsive design | Complete | Cross-device QA |
| Template generator | Complete | Optional AI backend |
| Copy/download/reset/regenerate | Complete | None |
| Document history | Browser localStorage | Database for account sync |
| Dashboard filters/statistics | Complete demo | Real account data/API |
| Theme and cookie choice | Complete demo | Consent platform if optional tracking is added |
| Login/signup | Validation demo | Authentication service/backend |
| Pricing toggle | Complete | None |
| Checkout | Information modal | Payment provider + webhooks |
| Contact/newsletter | Validation demo | Secure form/email endpoint |
| Team seats and permissions | UI concept | Authorization model and database |
| Usage limits | UI/demo counter | Server-side metering and enforcement |
| SEO metadata | Included | Final production URLs and Search Console setup |

## Change colors and typography

Open `assets/css/style-v2.css` and edit the variables at the top:

```css
:root {
  --primary: #6252df;
  --accent: #42d6b0;
  --text: #17182b;
  --bg: #fbfcff;
  --font: Arial, Helvetica, sans-serif;
}
```

Dashboard-specific layout rules are in `assets/css/dashboard-v2.css`.

## SEO launch notes

Before launch:

- Replace canonical and Open Graph URLs if the final domain differs.
- Replace the SVG Open Graph image with a 1200×630 PNG if a platform does not render SVG previews.
- Submit `sitemap.xml` to relevant webmaster tools.
- Confirm `robots.txt` points to the correct sitemap.
- Verify every page title and description against final content.
- Add real article dates, categories, and author details.
- Add analytics only after configuring consent where required.
- Do not add fabricated ratings, awards, customer logos, or ranking claims.

## Accessibility notes

The package includes semantic landmarks, labels, keyboard navigation, focus styles, an accessible mobile menu, modal focus management, status announcements, and reduced-motion support.

Before launch, test with:

- Keyboard only
- Browser zoom at 200%
- VoiceOver, NVDA, or another screen reader
- Automated tools such as Lighthouse and axe
- Real mobile devices
- High-contrast and reduced-motion settings

## Legal review

The legal pages are original, general templates and clearly state that they require adaptation. Before launch, qualified counsel should review:

- The company’s jurisdiction and address requirements
- Actual AI providers and data flows
- Account, payment, refund, and cancellation practices
- Data retention and deletion
- Cookie and analytics technologies
- User-content rights and acceptable-use rules
- Liability limitations and dispute terms
- Privacy rights in each target market

## Pre-launch checklist

- [ ] Replace any generic company information required by the chosen jurisdiction.
- [ ] Confirm that every email address works.
- [ ] Review all legal pages with qualified counsel.
- [ ] Verify the final pricing and plan limits.
- [ ] Connect secure authentication.
- [ ] Connect a server-side AI proxy.
- [ ] Connect payment checkout and verified webhooks.
- [ ] Connect contact and newsletter forms.
- [ ] Add server-side rate limits and abuse controls.
- [ ] Test all links and custom 404 behavior.
- [ ] Test generator copy, download, reset, and regenerate.
- [ ] Test dashboard history after refresh.
- [ ] Test pricing monthly/annual switching.
- [ ] Test forms with valid and invalid data.
- [ ] Test mobile navigation, dashboard sidebar, and modal with a keyboard.
- [ ] Test dark and light modes.
- [ ] Test at common mobile, tablet, laptop, and desktop sizes.
- [ ] Check browser console for errors.
- [ ] Run Lighthouse and an accessibility audit.
- [ ] Confirm no private API key is included in public files.
- [ ] Replace illustrative testimonials with verified, permissioned customer feedback—or remove them.
- [ ] Replace sample service targets and product limits with approved operational commitments.
- [ ] Back up the final release and tag it in version control.

## License and content ownership

This website package was created as an original project for smartblogwriter.com. Review third-party service terms before integrating external providers. The SVG visuals in this package are original and self-contained.


## Font rendering fix (v2)

This package uses a defensive Arial/Helvetica font stack and cache-busted asset filenames (`*-v2`) to prevent a corrupted or locally overridden Inter font from turning text into icon-like symbols. When replacing an earlier upload, upload the complete folder and clear any server/CDN cache.