@indirecttek/essentials-engine 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ContactForm.astro +106 -0
- package/dist/components/Hero.astro +39 -0
- package/dist/components/Navbar.astro +31 -0
- package/dist/components/ServicesGrid.astro +30 -0
- package/dist/index.ts +20 -0
- package/dist/layouts/EssentialsLayout.astro +42 -0
- package/dist/types.ts +52 -0
- package/package.json +44 -0
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
---
|
|
2
|
+
import type { SiteConfig } from "../types";
|
|
3
|
+
|
|
4
|
+
export interface Props {
|
|
5
|
+
config: SiteConfig;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const { config } = Astro.props;
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
<section id="contact" class="px-4 md:px-8 py-16 md:py-24">
|
|
12
|
+
<div class="max-w-3xl mx-auto">
|
|
13
|
+
<h2 class="text-3xl md:text-4xl font-bold text-[color:var(--color-primary)] text-center mb-4">
|
|
14
|
+
Contact Us
|
|
15
|
+
</h2>
|
|
16
|
+
<p class="text-center text-[color:var(--color-foreground)] opacity-80 mb-8 md:mb-12">
|
|
17
|
+
Get in touch with {config.businessName} today
|
|
18
|
+
</p>
|
|
19
|
+
<form class="space-y-6">
|
|
20
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
21
|
+
<div>
|
|
22
|
+
<label
|
|
23
|
+
for="name"
|
|
24
|
+
class="block text-sm font-medium text-[color:var(--color-foreground)] mb-2"
|
|
25
|
+
>
|
|
26
|
+
Name
|
|
27
|
+
</label>
|
|
28
|
+
<input
|
|
29
|
+
type="text"
|
|
30
|
+
id="name"
|
|
31
|
+
name="name"
|
|
32
|
+
required
|
|
33
|
+
class="w-full px-4 py-3 border border-[color:var(--color-secondary)] rounded-md focus:outline-none focus:ring-2 focus:ring-[color:var(--color-primary)] bg-[color:var(--color-background)] text-[color:var(--color-foreground)]"
|
|
34
|
+
placeholder="Your name"
|
|
35
|
+
/>
|
|
36
|
+
</div>
|
|
37
|
+
<div>
|
|
38
|
+
<label
|
|
39
|
+
for="email"
|
|
40
|
+
class="block text-sm font-medium text-[color:var(--color-foreground)] mb-2"
|
|
41
|
+
>
|
|
42
|
+
Email
|
|
43
|
+
</label>
|
|
44
|
+
<input
|
|
45
|
+
type="email"
|
|
46
|
+
id="email"
|
|
47
|
+
name="email"
|
|
48
|
+
required
|
|
49
|
+
class="w-full px-4 py-3 border border-[color:var(--color-secondary)] rounded-md focus:outline-none focus:ring-2 focus:ring-[color:var(--color-primary)] bg-[color:var(--color-background)] text-[color:var(--color-foreground)]"
|
|
50
|
+
placeholder="your@email.com"
|
|
51
|
+
/>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
<div>
|
|
55
|
+
<label
|
|
56
|
+
for="phone"
|
|
57
|
+
class="block text-sm font-medium text-[color:var(--color-foreground)] mb-2"
|
|
58
|
+
>
|
|
59
|
+
Phone
|
|
60
|
+
</label>
|
|
61
|
+
<input
|
|
62
|
+
type="tel"
|
|
63
|
+
id="phone"
|
|
64
|
+
name="phone"
|
|
65
|
+
class="w-full px-4 py-3 border border-[color:var(--color-secondary)] rounded-md focus:outline-none focus:ring-2 focus:ring-[color:var(--color-primary)] bg-[color:var(--color-background)] text-[color:var(--color-foreground)]"
|
|
66
|
+
placeholder="(555) 123-4567"
|
|
67
|
+
/>
|
|
68
|
+
</div>
|
|
69
|
+
<div>
|
|
70
|
+
<label
|
|
71
|
+
for="message"
|
|
72
|
+
class="block text-sm font-medium text-[color:var(--color-foreground)] mb-2"
|
|
73
|
+
>
|
|
74
|
+
Message
|
|
75
|
+
</label>
|
|
76
|
+
<textarea
|
|
77
|
+
id="message"
|
|
78
|
+
name="message"
|
|
79
|
+
rows="5"
|
|
80
|
+
required
|
|
81
|
+
class="w-full px-4 py-3 border border-[color:var(--color-secondary)] rounded-md focus:outline-none focus:ring-2 focus:ring-[color:var(--color-primary)] bg-[color:var(--color-background)] text-[color:var(--color-foreground)] resize-none"
|
|
82
|
+
placeholder="How can we help you?"
|
|
83
|
+
></textarea>
|
|
84
|
+
</div>
|
|
85
|
+
<button
|
|
86
|
+
type="submit"
|
|
87
|
+
class="w-full bg-[color:var(--color-primary)] text-[color:var(--color-background)] py-3 md:py-4 rounded-md font-semibold text-lg hover:opacity-90 transition-opacity"
|
|
88
|
+
>
|
|
89
|
+
Send Message
|
|
90
|
+
</button>
|
|
91
|
+
</form>
|
|
92
|
+
<div class="mt-12 text-center space-y-2 text-[color:var(--color-foreground)] opacity-80">
|
|
93
|
+
<p>
|
|
94
|
+
<a href={`tel:${config.contactInfo.phone}`} class="hover:text-[color:var(--color-primary)]">
|
|
95
|
+
{config.contactInfo.phone}
|
|
96
|
+
</a>
|
|
97
|
+
</p>
|
|
98
|
+
<p>
|
|
99
|
+
<a href={`mailto:${config.contactInfo.email}`} class="hover:text-[color:var(--color-primary)]">
|
|
100
|
+
{config.contactInfo.email}
|
|
101
|
+
</a>
|
|
102
|
+
</p>
|
|
103
|
+
<p>{config.contactInfo.address}</p>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</section>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
---
|
|
2
|
+
import type { SiteConfig } from "../types";
|
|
3
|
+
|
|
4
|
+
export interface Props {
|
|
5
|
+
config: SiteConfig;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const { config } = Astro.props;
|
|
9
|
+
const { heroSection } = config;
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
<section class="relative overflow-hidden">
|
|
13
|
+
<div class="max-w-7xl mx-auto px-4 md:px-8 py-16 md:py-24">
|
|
14
|
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
|
|
15
|
+
<div class="space-y-6">
|
|
16
|
+
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-[color:var(--color-primary)] leading-tight">
|
|
17
|
+
{heroSection.headline}
|
|
18
|
+
</h1>
|
|
19
|
+
<p class="text-lg md:text-xl text-[color:var(--color-foreground)] opacity-80">
|
|
20
|
+
{heroSection.subheadline}
|
|
21
|
+
</p>
|
|
22
|
+
<a
|
|
23
|
+
href="#contact"
|
|
24
|
+
class="inline-block bg-[color:var(--color-accent)] text-[color:var(--color-foreground)] px-6 py-3 md:px-8 md:py-4 rounded-md font-semibold text-lg hover:opacity-90 transition-opacity"
|
|
25
|
+
>
|
|
26
|
+
{heroSection.callToActionLabel}
|
|
27
|
+
</a>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="relative">
|
|
30
|
+
<img
|
|
31
|
+
src={heroSection.imageUrl}
|
|
32
|
+
alt={heroSection.imageAlt}
|
|
33
|
+
class="w-full h-auto rounded-lg shadow-xl object-cover aspect-[4/3]"
|
|
34
|
+
loading="eager"
|
|
35
|
+
/>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
</section>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
---
|
|
2
|
+
import type { SiteConfig } from "../types";
|
|
3
|
+
|
|
4
|
+
export interface Props {
|
|
5
|
+
config: SiteConfig;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const { config } = Astro.props;
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
<nav class="bg-[color:var(--color-primary)] text-[color:var(--color-background)] px-4 py-4 md:px-8">
|
|
12
|
+
<div class="max-w-7xl mx-auto flex items-center justify-between">
|
|
13
|
+
<a href="/" class="text-xl md:text-2xl font-bold hover:opacity-90 transition-opacity">
|
|
14
|
+
{config.businessName}
|
|
15
|
+
</a>
|
|
16
|
+
<div class="flex items-center gap-4 md:gap-6">
|
|
17
|
+
<a
|
|
18
|
+
href={`tel:${config.contactInfo.phone}`}
|
|
19
|
+
class="text-sm md:text-base font-medium hover:opacity-90 transition-opacity"
|
|
20
|
+
>
|
|
21
|
+
{config.contactInfo.phone}
|
|
22
|
+
</a>
|
|
23
|
+
<a
|
|
24
|
+
href="#contact"
|
|
25
|
+
class="hidden md:inline-block bg-[color:var(--color-accent)] text-[color:var(--color-foreground)] px-4 py-2 rounded-md font-medium hover:opacity-90 transition-opacity"
|
|
26
|
+
>
|
|
27
|
+
Contact Us
|
|
28
|
+
</a>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</nav>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
---
|
|
2
|
+
import type { SiteConfig } from "../types";
|
|
3
|
+
|
|
4
|
+
export interface Props {
|
|
5
|
+
config: SiteConfig;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const { config } = Astro.props;
|
|
9
|
+
const { services } = config;
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
<section class="px-4 md:px-8 py-16 md:py-24 bg-[color:var(--color-secondary)]">
|
|
13
|
+
<div class="max-w-7xl mx-auto">
|
|
14
|
+
<h2 class="text-3xl md:text-4xl font-bold text-[color:var(--color-primary)] text-center mb-12">
|
|
15
|
+
Our Services
|
|
16
|
+
</h2>
|
|
17
|
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
|
18
|
+
{services.map((service) => (
|
|
19
|
+
<div class="bg-[color:var(--color-background)] p-6 md:p-8 rounded-lg shadow-md hover:shadow-lg transition-shadow">
|
|
20
|
+
<h3 class="text-xl md:text-2xl font-semibold text-[color:var(--color-primary)] mb-3">
|
|
21
|
+
{service.name}
|
|
22
|
+
</h3>
|
|
23
|
+
<p class="text-[color:var(--color-foreground)] opacity-80 leading-relaxed">
|
|
24
|
+
{service.description}
|
|
25
|
+
</p>
|
|
26
|
+
</div>
|
|
27
|
+
))}
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</section>
|
package/dist/index.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// Types
|
|
2
|
+
export type {
|
|
3
|
+
Service,
|
|
4
|
+
HeroSection,
|
|
5
|
+
Theme,
|
|
6
|
+
ContactInfo,
|
|
7
|
+
AnalyticsConfig,
|
|
8
|
+
SEOConfig,
|
|
9
|
+
ImageSearchHints,
|
|
10
|
+
SiteConfig,
|
|
11
|
+
} from "./types";
|
|
12
|
+
|
|
13
|
+
// Layout
|
|
14
|
+
export { default as EssentialsLayout } from "./layouts/EssentialsLayout.astro";
|
|
15
|
+
|
|
16
|
+
// Components
|
|
17
|
+
export { default as Navbar } from "./components/Navbar.astro";
|
|
18
|
+
export { default as Hero } from "./components/Hero.astro";
|
|
19
|
+
export { default as ServicesGrid } from "./components/ServicesGrid.astro";
|
|
20
|
+
export { default as ContactForm } from "./components/ContactForm.astro";
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
---
|
|
2
|
+
import type { SiteConfig } from "../types";
|
|
3
|
+
import Navbar from "../components/Navbar.astro";
|
|
4
|
+
import Hero from "../components/Hero.astro";
|
|
5
|
+
import ServicesGrid from "../components/ServicesGrid.astro";
|
|
6
|
+
import ContactForm from "../components/ContactForm.astro";
|
|
7
|
+
|
|
8
|
+
export interface Props {
|
|
9
|
+
config: SiteConfig;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const { config } = Astro.props;
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
<html lang="en">
|
|
16
|
+
<head>
|
|
17
|
+
<meta charset="UTF-8" />
|
|
18
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
+
<title>{config.seo.title}</title>
|
|
20
|
+
<meta name="description" content={config.seo.description} />
|
|
21
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
22
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
23
|
+
</head>
|
|
24
|
+
<body
|
|
25
|
+
style={`--color-primary: ${config.theme.primary}; --color-secondary: ${config.theme.secondary}; --color-accent: ${config.theme.accent}; --color-background: ${config.theme.background}; --color-foreground: ${config.theme.foreground};`}
|
|
26
|
+
class="bg-[color:var(--color-background)] text-[color:var(--color-foreground)] min-h-screen"
|
|
27
|
+
>
|
|
28
|
+
<Navbar config={config} />
|
|
29
|
+
<main class="space-y-16 md:space-y-24">
|
|
30
|
+
<Hero config={config} />
|
|
31
|
+
<ServicesGrid config={config} />
|
|
32
|
+
<ContactForm config={config} />
|
|
33
|
+
</main>
|
|
34
|
+
<footer class="bg-[color:var(--color-primary)] text-[color:var(--color-background)] px-4 md:px-8 py-8">
|
|
35
|
+
<div class="max-w-7xl mx-auto text-center">
|
|
36
|
+
<p class="opacity-90">
|
|
37
|
+
© {new Date().getFullYear()} {config.businessName}. All rights reserved.
|
|
38
|
+
</p>
|
|
39
|
+
</div>
|
|
40
|
+
</footer>
|
|
41
|
+
</body>
|
|
42
|
+
</html>
|
package/dist/types.ts
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
export interface Service {
|
|
2
|
+
name: string;
|
|
3
|
+
description: string;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
export interface HeroSection {
|
|
7
|
+
headline: string;
|
|
8
|
+
subheadline: string;
|
|
9
|
+
imageUrl: string;
|
|
10
|
+
imageAlt: string;
|
|
11
|
+
callToActionLabel: string;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export interface Theme {
|
|
15
|
+
primary: string;
|
|
16
|
+
secondary: string;
|
|
17
|
+
accent: string;
|
|
18
|
+
background: string;
|
|
19
|
+
foreground: string;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export interface ContactInfo {
|
|
23
|
+
phone: string;
|
|
24
|
+
email: string;
|
|
25
|
+
address: string;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export interface AnalyticsConfig {
|
|
29
|
+
enableTracking: boolean;
|
|
30
|
+
mixpanelToken?: string;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export interface SEOConfig {
|
|
34
|
+
title: string;
|
|
35
|
+
description: string;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export interface ImageSearchHints {
|
|
39
|
+
hero: string;
|
|
40
|
+
services: string[];
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export interface SiteConfig {
|
|
44
|
+
businessName: string;
|
|
45
|
+
theme: Theme;
|
|
46
|
+
contactInfo: ContactInfo;
|
|
47
|
+
heroSection: HeroSection;
|
|
48
|
+
services: Service[];
|
|
49
|
+
analytics: AnalyticsConfig;
|
|
50
|
+
seo: SEOConfig;
|
|
51
|
+
imageSearchHints?: ImageSearchHints;
|
|
52
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@indirecttek/essentials-engine",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"types": "./dist/types.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"types": "./dist/types.d.ts",
|
|
10
|
+
"import": "./dist/index.js"
|
|
11
|
+
},
|
|
12
|
+
"./components/*": "./dist/components/*",
|
|
13
|
+
"./layouts/*": "./dist/layouts/*"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist"
|
|
17
|
+
],
|
|
18
|
+
"scripts": {
|
|
19
|
+
"build": "rm -rf dist && cp -r src dist",
|
|
20
|
+
"dev": "astro dev"
|
|
21
|
+
},
|
|
22
|
+
"peerDependencies": {
|
|
23
|
+
"astro": "^4.0.0 || ^5.0.0",
|
|
24
|
+
"tailwindcss": "^3.0.0 || ^4.0.0"
|
|
25
|
+
},
|
|
26
|
+
"devDependencies": {
|
|
27
|
+
"astro": "^5.0.0",
|
|
28
|
+
"tailwindcss": "^4.0.0",
|
|
29
|
+
"typescript": "^5.0.0"
|
|
30
|
+
},
|
|
31
|
+
"keywords": [
|
|
32
|
+
"astro",
|
|
33
|
+
"astro-component",
|
|
34
|
+
"tailwindcss",
|
|
35
|
+
"marketing",
|
|
36
|
+
"white-label",
|
|
37
|
+
"component-library"
|
|
38
|
+
],
|
|
39
|
+
"license": "MIT",
|
|
40
|
+
"repository": {
|
|
41
|
+
"type": "git",
|
|
42
|
+
"url": "https://github.com/indirecttek/essentials-engine.git"
|
|
43
|
+
}
|
|
44
|
+
}
|