NorthSeaEntry

NorthSeaEntry is a production-ready Astro + Tailwind marketing and storefront site for an offshore careers advisory brand. It is built for Netlify deployment, Netlify Forms lead capture, and Stripe Checkout-based product and service payments.

Stack

• Astro 5
• Tailwind CSS
• TypeScript
• Netlify Forms
• Netlify Functions
• Stripe Checkout
• Astro Content Collections for the blog/resources section

Included pages

• /
• /how-it-works/
• /products/
• /services/
• /offshore-roles/
• /about/
• /resources/
• /resources/[slug]/
• /contact/
• /brand-system/
• /checkout/success/
• /checkout/cancel/
• /contact-success/
• /services-success/
• /lead-magnet-success/
• /legal/privacy-policy/
• /legal/terms-and-conditions/
• /legal/disclaimer/
• /legal/refund-policy/
• /legal/company-details/

Project structure

src/
  components/        Reusable UI primitives and marketing components
  content/blog/      CMS-ready markdown articles
  data/              Product, service, brand, FAQ, and role data
  layouts/           Shared site layout
  lib/               SEO and content helpers
  pages/             Astro routes
  styles/            Global Tailwind layer and brand tokens
netlify/functions/   Stripe checkout session function
public/              Brand assets and downloadable lead magnet preview
private-fulfillment/ Protected paid product files and source packs

Repository notes

• The public repository excludes node_modules, build output, local Netlify state, test artifacts, and the private-fulfillment/ directory.
• Keep paid product ZIPs, private source packs, and generated fulfilment artifacts outside the public Git history.
• If you need to run the private fulfilment workflow locally, recreate private-fulfillment/ outside the published repository before generating product packs.

Local development

1. Use Node 20. The project was verified with Node 20.20.1.

2. Install dependencies:

corepack enable
pnpm install

3. Copy the example environment file:

cp .env.example .env

4. Add your Stripe secret key. If you want webhook handling, also add your Stripe webhook signing secret.

5. Start the site:

pnpm dev

6. Build for production:

pnpm build

7. If you update paid product files, rebuild the protected product packs:

zsh scripts/build-fulfillment-packs.sh

Environment variables

Core:

• SITE_URL
• STRIPE_SECRET_KEY
• STRIPE_WEBHOOK_SECRET
• DELIVERY_SIGNING_SECRET

Tracking:

• PUBLIC_GA4_ID
• PUBLIC_META_PIXEL_ID
• PUBLIC_TIKTOK_PIXEL_ID

Transactional email:

• RESEND_API_KEY
• RESEND_FROM_EMAIL
• RESEND_REPLY_TO
• ORDER_ALERT_EMAIL

Stripe setup

The checkout flow is handled in netlify/functions/create-checkout.ts. Webhook scaffolding lives in netlify/functions/stripe-webhook.ts. Verified delivery endpoints live in:

• netlify/functions/checkout-session-status.ts
• netlify/functions/digital-delivery.ts
• netlify/functions/download-deliverable.ts

Full manual Stripe checklist:

• docs/stripe-setup.md

How it works:

• Product and service metadata live in src/data/catalog.ts.
• The browser sends only a sku.
• Attribution data such as UTM parameters and click IDs are captured client-side and attached to checkout metadata server-side.
• The server resolves amount, currency, and title from the internal catalog.
• Checkout buttons post the selected SKU to the Netlify Function.
• The function creates a Stripe Checkout session and redirects the customer.
• Checkout buttons also support an async JSON flow for cleaner loading and error handling before redirect.
• Successful Stripe events are recorded into a Netlify order queue for fulfilment tracking.
• Paid sessions can trigger customer fulfilment emails and internal order alerts if Resend is configured.
• Verified product orders can open a protected delivery page that issues signed download links.
• Missing Stripe configuration gracefully falls back to /checkout/cancel/.

Important:

• The current integration does not require a Stripe publishable key.
• Checkout is created server-side, so only the secret key and webhook secret are required.
• Signed delivery links require DELIVERY_SIGNING_SECRET.
• Tracking scripts require the PUBLIC_* IDs because they run in the browser.
• Transactional emails require Resend configuration.

Test mode:

1. Put the test secret key in STRIPE_SECRET_KEY.
2. Put the Stripe webhook signing secret in STRIPE_WEBHOOK_SECRET if you want webhook testing.
3. Set DELIVERY_SIGNING_SECRET so protected product links can be issued.
4. Use Stripe test cards during checkout.
5. Optional but recommended: set the PUBLIC_* analytics IDs in Netlify and verify pageview/purchase events.
6. Optional but recommended: set the Resend variables so paid customers receive fulfilment emails automatically.

Production mode:

1. Replace the test secret key with the live secret key in Netlify.
2. Replace the test webhook secret with the live webhook secret in Netlify.
3. Set a strong production value for DELIVERY_SIGNING_SECRET.
4. Confirm success and cancel URLs match the production domain.
5. Add production analytics IDs for GA4, Meta Pixel, and TikTok Pixel if you use paid or social traffic measurement.
6. Add production Resend credentials and verify the sending domain if you want automatic order/service emails.
7. Replace the placeholder files in private-fulfillment/products/ with the real PDFs, ZIPs, or document packs before launch.
8. Review refund and service fulfilment policy wording before launch.

Netlify setup

This project is already configured for Netlify via netlify.toml.

Deployment steps:

1. Push the project to Git.
2. Create a new Netlify site from the repo.
3. Set the build command to pnpm build.
4. Set the publish directory to dist.
5. Add all environment variables from .env.example.
6. Enable form notifications or connect the forms to your preferred workflow.
7. If you use transactional email, verify the Resend sender domain before expecting live delivery.

Netlify features used:

• Static page hosting
• Netlify Forms for contact, service enquiries, and lead magnet capture
• Netlify Functions for Stripe checkout, verified delivery, and download issuing
• Browser-side analytics and pixel loading through env-driven scripts
• Webhook-based transactional email and internal order alerts through Resend
• Production headers for basic hardening and asset caching

Content and CMS readiness

The blog lives in src/content/blog/ and uses Astro Content Collections. That makes it straightforward to:

• keep using markdown files
• migrate later to MDX
• swap the content source for a headless CMS
• add more SEO landing pages without changing the component system

Brand and storefront notes

Included brand assets and documentation:

• public/favicon.svg
• public/brand/logo-mark.svg
• public/brand/logo-lockup.svg
• public/brand/social-preview.svg
• /brand-system/ page for palette, CTA bank, logo concept, and A/B homepage copy

The site is intentionally positioned as a serious offshore careers platform:

• no fake statistics
• no employment guarantees
• no urgency gimmicks
• no fabricated testimonials

Pre-launch checklist

• Replace placeholder company details in src/data/site.ts and legal pages.
• Replace placeholder social links in src/data/site.ts.
• Review live USD pricing before launch.
• Replace all placeholder delivery files in private-fulfillment/products/ with the real paid assets.
• If you edit source packs in private-fulfillment/source-packs/, rebuild the ZIPs with zsh scripts/build-fulfillment-packs.sh.
• Review refund, privacy, and terms wording with appropriate legal guidance.
• Connect Netlify form notifications and optional transactional email delivery automation.
• Set the analytics IDs and verify purchase events fire on /checkout/success/.
• Test a full paid flow with a real delivery email before driving meaningful traffic.
• Replace testimonial placeholders with verified customer proof if available.