Skip to content

Commit 20b657b

Browse files
denisdobra10denisdobra10
authored
feat: Add Custom Template CTA and FAQ sections to templates page
2 parents 4642580 + dbdeac6 commit 20b657b

7 files changed

Lines changed: 203 additions & 6 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@ docs/.vuepress/dist
1212
.phpunit.result.cache
1313
.php-cs-fixer.cache
1414
phpstan.neon
15+
.github/instructions

‎docs-v3/.data/content/contents.sqlite‎

44 KB
Binary file not shown.

‎docs-v3/app.config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default defineAppConfig({
2+
ui: {
3+
accordion: {
4+
slots: {
5+
item: 'border-b border-gray-200 dark:border-gray-700/50 last:border-b-0',
6+
trigger: 'py-4 text-left font-semibold text-gray-900 dark:text-white hover:text-blue-500 dark:hover:text-blue-400 transition-colors',
7+
content: 'text-gray-600 dark:text-gray-300 leading-relaxed',
8+
body: 'pb-4'
9+
}
10+
}
11+
}
12+
})

‎docs-v3/components/templates/CustomTemplateCTA.vue‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<template>
2+
<section class="py-16">
3+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
4+
<div class="relative overflow-hidden">
5+
<div class="relative bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm border border-gray-200 dark:border-gray-700/50 rounded-3xl p-8 md:p-12 lg:p-16">
6+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
7+
<!-- Content -->
8+
<div>
9+
<div class="inline-flex items-center px-3 py-1 bg-orange-500/10 border border-orange-500/20 rounded-full text-orange-500 text-sm font-medium mb-4">
10+
<WrenchScrewdriverIcon class="w-4 h-4 mr-2" />
11+
Custom Development
12+
</div>
13+
14+
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
15+
Need Something <span class="bg-gradient-to-r from-orange-500 to-amber-500 bg-clip-text text-transparent">Unique</span>?
16+
</h2>
17+
18+
<p class="text-lg text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
19+
Our team at BinarCode has built enterprise-grade Laravel applications for companies worldwide.
20+
We can create a custom template tailored specifically to your project requirements.
21+
</p>
22+
23+
<ul class="space-y-3 mb-8">
24+
<li v-for="benefit in benefits" :key="benefit" class="flex items-start gap-3">
25+
<CheckCircleIcon class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
26+
<span class="text-gray-700 dark:text-gray-300">{{ benefit }}</span>
27+
</li>
28+
</ul>
29+
30+
<div class="flex flex-col sm:flex-row gap-4">
31+
<AppButton
32+
variant="primary"
33+
size="md"
34+
href="https://www.binarcode.com/estimate-project"
35+
:icon="ChatBubbleLeftRightIcon"
36+
>
37+
Start a Conversation
38+
</AppButton>
39+
<AppButton
40+
variant="secondary"
41+
size="md"
42+
href="https://www.binarcode.com/recent-work"
43+
:icon="FolderOpenIcon"
44+
>
45+
View Our Work
46+
</AppButton>
47+
</div>
48+
</div>
49+
50+
<!-- Visual Element -->
51+
<div class="hidden lg:block">
52+
<div class="relative">
53+
<!-- Code Preview Card -->
54+
<TerminalWindow title="CustomRepository.php" :tilted="true">
55+
<pre class="text-sm font-mono overflow-hidden"><code class="text-gray-300"><span class="text-purple-400">class</span> <span class="text-yellow-400">CustomRepository</span> <span class="text-purple-400">extends</span> <span class="text-blue-400">Repository</span>
56+
{
57+
<span class="text-gray-500">// Your custom business logic</span>
58+
<span class="text-purple-400">public function</span> <span class="text-yellow-400">actions</span>(): array
59+
{
60+
<span class="text-purple-400">return</span> [
61+
<span class="text-orange-400">CustomAction</span>::<span class="text-purple-400">class</span>,
62+
<span class="text-orange-400">YourWorkflow</span>::<span class="text-purple-400">class</span>,
63+
];
64+
}
65+
}</code></pre>
66+
</TerminalWindow>
67+
68+
<!-- Floating Badge -->
69+
<div class="absolute -top-4 -right-4 bg-gradient-to-r from-orange-500 to-amber-500 text-white px-4 py-2 rounded-full text-sm font-bold shadow-lg z-10">
70+
100% Custom
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
</div>
78+
</section>
79+
</template>
80+
81+
<script setup lang="ts">
82+
import {
83+
WrenchScrewdriverIcon,
84+
CheckCircleIcon,
85+
ChatBubbleLeftRightIcon,
86+
FolderOpenIcon
87+
} from '@heroicons/vue/24/outline'
88+
import AppButton from '~/components/ui/AppButton.vue'
89+
import TerminalWindow from '~/components/website/TerminalWindow.vue'
90+
91+
const benefits = [
92+
'Architecture designed for your specific use case',
93+
'Custom integrations with your existing tools',
94+
'White-label ready with your branding',
95+
'Priority support and maintenance options',
96+
'Full source code ownership'
97+
]
98+
</script>

‎docs-v3/components/templates/TemplatesFAQ.vue‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<section class="py-16">
3+
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
4+
<!-- Section Header -->
5+
<div class="text-center mb-12">
6+
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
7+
Frequently Asked <span class="bg-gradient-to-r from-blue-500 to-cyan-500 bg-clip-text text-transparent">Questions</span>
8+
</h2>
9+
<p class="text-gray-600 dark:text-gray-400">
10+
Everything you need to know about our templates
11+
</p>
12+
</div>
13+
14+
<!-- FAQ Accordion -->
15+
<div class="bg-white/50 dark:bg-gray-900/30 backdrop-blur-sm border border-gray-200 dark:border-gray-700/50 rounded-2xl p-6">
16+
<UAccordion :items="faqItems" />
17+
</div>
18+
19+
<!-- Contact CTA -->
20+
<div class="mt-10 text-center">
21+
<p class="text-gray-600 dark:text-gray-400 mb-4">
22+
Still have questions?
23+
</p>
24+
<a
25+
href="https://github.com/BinarCode/laravel-restify/discussions"
26+
target="_blank"
27+
rel="noopener noreferrer"
28+
class="inline-flex items-center text-blue-500 hover:text-blue-600 font-medium transition-colors"
29+
>
30+
<ChatBubbleLeftRightIcon class="w-5 h-5 mr-2" />
31+
Ask in GitHub Discussions
32+
<ArrowTopRightOnSquareIcon class="w-4 h-4 ml-1" />
33+
</a>
34+
</div>
35+
</div>
36+
</section>
37+
</template>
38+
39+
<script setup lang="ts">
40+
import {
41+
ChatBubbleLeftRightIcon,
42+
ArrowTopRightOnSquareIcon
43+
} from '@heroicons/vue/24/outline'
44+
45+
const faqItems = [
46+
{
47+
label: 'What happens after I purchase a template?',
48+
content: 'After purchase, you\'ll receive immediate access to download the template along with complete documentation. You\'ll also get access to our private Discord channel for support and future updates based on your plan\'s security update period.'
49+
},
50+
{
51+
label: 'Can I use the template for multiple projects?',
52+
content: 'Yes! Each template license allows you to use it on unlimited personal projects. For commercial projects where you\'re building for clients, each client project requires a separate license. The Free Starter Kit can be used on unlimited projects without restrictions.'
53+
},
54+
{
55+
label: 'Do I need Laravel Restify installed separately?',
56+
content: 'No, the templates come with Laravel Restify already integrated and configured. Everything is set up and ready to go. You just need to run the installation commands and you\'re ready to start building.'
57+
},
58+
{
59+
label: 'What\'s included in the security updates?',
60+
content: 'Security updates include patches for any vulnerabilities discovered in the template code, dependency updates, and compatibility fixes for new Laravel and PHP versions. The duration varies by plan: 3 months for Starter, 6 months for Essential, 1 year for Pro, and lifetime for Premium.'
61+
},
62+
{
63+
label: 'Can I request custom features or modifications?',
64+
content: 'Absolutely! We offer custom template development services. Click the "Get Custom Template" button to start a conversation about your specific requirements. We\'ve built enterprise-grade solutions for companies worldwide.'
65+
},
66+
{
67+
label: 'Is there a refund policy?',
68+
content: 'Yes, we offer a 14-day money-back guarantee. If the template doesn\'t meet your expectations or doesn\'t work as documented, contact us for a full refund. The Free Starter Kit is, of course, always free.'
69+
},
70+
{
71+
label: 'What\'s the difference between MCP Server and MCP Client?',
72+
content: 'The MCP Server exposes your Laravel data through the Model Context Protocol, allowing AI agents (like Claude) to interact with your application. The MCP Client is a pre-built chat interface that connects to AI models and can use your MCP tools to query and modify data intelligently.'
73+
}
74+
]
75+
</script>

‎docs-v3/components/website/TerminalWindow.vue‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
<template>
2-
<div class="bg-gray-900 backdrop-blur-lg border border-gray-700/50 rounded-2xl overflow-hidden shadow-2xl flex flex-col h-full">
2+
<div
3+
class="bg-gray-900 backdrop-blur-lg border border-gray-700/50 rounded-2xl overflow-hidden shadow-2xl flex flex-col h-full"
4+
:class="[
5+
tilted ? 'transform rotate-2 hover:rotate-0 transition-transform duration-500' : ''
6+
]"
7+
>
38
<!-- Terminal Header -->
49
<div class="flex items-center justify-between p-4 md:p-6 border-b border-gray-700/50 bg-gray-800/80">
510
<div class="flex items-center space-x-3">
@@ -39,11 +44,13 @@ interface Props {
3944
title?: string
4045
command?: string
4146
copyable?: boolean
47+
tilted?: boolean
4248
}
4349
4450
const props = withDefaults(defineProps<Props>(), {
4551
title: 'terminal',
46-
copyable: false
52+
copyable: false,
53+
tilted: false
4754
})
4855
4956
const copied = ref(false)

‎docs-v3/pages/templates/index.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@
1212
/>
1313
</div>
1414

15-
<TemplatesCustomCta />
15+
<!-- Custom Template CTA -->
16+
<CustomTemplateCTA />
17+
18+
<!-- FAQ Section -->
19+
<TemplatesFAQ />
1620
</div>
1721
</div>
1822
</NuxtLayout>
@@ -21,7 +25,8 @@
2125
<script setup lang="ts">
2226
import TemplatesHeader from '~/components/templates/TemplatesHeader.vue'
2327
import TemplateCard from '~/components/templates/TemplateCard.vue'
24-
import TemplatesCustomCta from '~/components/templates/TemplatesCustomCta.vue'
28+
import CustomTemplateCTA from '~/components/templates/CustomTemplateCTA.vue'
29+
import TemplatesFAQ from '~/components/templates/TemplatesFAQ.vue'
2530
2631
useHead({
2732
title: 'Templates - Laravel Restify',
@@ -149,8 +154,7 @@ const templates: Template[] = [
149154
],
150155
primaryAction: {
151156
label: 'Get Early Access Today 🚀',
152-
href: '#',
153-
disabled: true
157+
href: 'https://restifytemplates.com/checkout/premium',
154158
},
155159
docsHref: 'https://restifytemplates.com/documentation/premium'
156160
}

0 commit comments

Comments
 (0)