Skip to content

Commit f0a4676

Browse files
jaminwebdevjaminwebdev
committed
marketing elements
1 parent 983a126 commit f0a4676

File tree

9 files changed

+1229
-2
lines changed

9 files changed

+1229
-2
lines changed

‎src/lib/components/marketing/sections/MarketingFeatures.svelte‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<script>
2+
import PillSubheading from '../../PillSubheading.svelte';
3+
</script>
4+
5+
<section class="py-24">
6+
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
7+
<div class="mb-14 text-center">
8+
<PillSubheading>Features</PillSubheading>
9+
<h2 class="py-5 text-center">Revolutionary Features</h2>
10+
<p class="mx-auto max-w-md md:max-w-2xl">
11+
Provides advanced features like time tracking, integrating with third party apps (calendar /
12+
Google drive), creating subtasks.
13+
</p>
14+
</div>
15+
<div
16+
class="flex flex-wrap items-center justify-center gap-x-5 gap-y-8 md:flex-wrap lg:flex-row lg:flex-nowrap lg:justify-between lg:gap-x-8 lg:gap-y-0"
17+
>
18+
<div
19+
class="group relative w-full text-center max-md:mx-auto max-md:max-w-sm md:w-2/5 lg:w-1/4"
20+
>
21+
<div
22+
class="mx-auto mb-5 flex h-20 w-20 cursor-pointer items-center justify-center rounded-lg bg-indigo-50 transition-all duration-500 group-hover:bg-indigo-600"
23+
>
24+
<svg
25+
class="stroke-indigo-600 transition-all duration-500 group-hover:stroke-white"
26+
width="30"
27+
height="30"
28+
viewBox="0 0 30 30"
29+
fill="none"
30+
xmlns="http://www.w3.org/2000/svg"
31+
>
32+
<path
33+
d="M10 27.5L15 25M15 25V21.25M15 25L20 27.5M8.75 14.375L12.5998 11.0064C13.1943 10.4862 14.1163 10.6411 14.5083 11.327L15.4917 13.048C15.8837 13.7339 16.8057 13.8888 17.4002 13.3686L21.25 10M2.5 2.5H27.5M26.25 2.5V13.25C26.25 17.0212 26.25 18.9069 25.0784 20.0784C23.9069 21.25 22.0212 21.25 18.25 21.25H11.75C7.97876 21.25 6.09315 21.25 4.92157 20.0784C3.75 18.9069 3.75 17.0212 3.75 13.25V2.5"
34+
stroke=""
35+
stroke-width="2"
36+
stroke-linecap="round"
37+
stroke-linejoin="round"
38+
></path>
39+
</svg>
40+
</div>
41+
<h4 class="mb-3 text-lg font-medium">Revolutionary Projectview</h4>
42+
<p class="text-sm font-normal">
43+
plan and structure work how you want. Quickly organizing tasks.
44+
</p>
45+
</div>
46+
<div
47+
class="group relative w-full text-center max-md:mx-auto max-md:max-w-sm md:w-2/5 lg:w-1/4"
48+
>
49+
<div
50+
class="mx-auto mb-5 flex h-20 w-20 cursor-pointer items-center justify-center rounded-lg bg-pink-50 transition-all duration-500 group-hover:bg-pink-600"
51+
>
52+
<svg
53+
class="stroke-pink-600 transition-all duration-500 group-hover:stroke-white"
54+
width="30"
55+
height="30"
56+
viewBox="0 0 30 30"
57+
fill="none"
58+
xmlns="http://www.w3.org/2000/svg"
59+
>
60+
<path
61+
d="M2.5 7.5C2.5 4.73858 4.73858 2.5 7.5 2.5C10.2614 2.5 12.5 4.73858 12.5 7.5C12.5 10.2614 10.2614 12.5 7.5 12.5C4.73858 12.5 2.5 10.2614 2.5 7.5Z"
62+
stroke=""
63+
stroke-width="2"
64+
></path>
65+
<path
66+
d="M2.5 22.5C2.5 20.143 2.5 18.9645 3.23223 18.2322C3.96447 17.5 5.14298 17.5 7.5 17.5C9.85702 17.5 11.0355 17.5 11.7678 18.2322C12.5 18.9645 12.5 20.143 12.5 22.5C12.5 24.857 12.5 26.0355 11.7678 26.7678C11.0355 27.5 9.85702 27.5 7.5 27.5C5.14298 27.5 3.96447 27.5 3.23223 26.7678C2.5 26.0355 2.5 24.857 2.5 22.5Z"
67+
stroke=""
68+
stroke-width="2"
69+
></path>
70+
<path
71+
d="M17.5 7.5C17.5 5.14298 17.5 3.96447 18.2322 3.23223C18.9645 2.5 20.143 2.5 22.5 2.5C24.857 2.5 26.0355 2.5 26.7678 3.23223C27.5 3.96447 27.5 5.14298 27.5 7.5C27.5 9.85702 27.5 11.0355 26.7678 11.7678C26.0355 12.5 24.857 12.5 22.5 12.5C20.143 12.5 18.9645 12.5 18.2322 11.7678C17.5 11.0355 17.5 9.85702 17.5 7.5Z"
72+
stroke=""
73+
stroke-width="2"
74+
></path>
75+
<path
76+
d="M17.5 22.5C17.5 19.7386 19.7386 17.5 22.5 17.5C25.2614 17.5 27.5 19.7386 27.5 22.5C27.5 25.2614 25.2614 27.5 22.5 27.5C19.7386 27.5 17.5 25.2614 17.5 22.5Z"
77+
stroke=""
78+
stroke-width="2"
79+
></path>
80+
</svg>
81+
</div>
82+
<h4 class="mb-3 text-lg font-medium capitalize">App Integrations</h4>
83+
<p class="text-sm font-normal">
84+
Bring all your tools and data together. Also join with hundreds of other apps.
85+
</p>
86+
</div>
87+
<div
88+
class="group relative w-full text-center max-md:mx-auto max-md:max-w-sm md:w-2/5 lg:w-1/4"
89+
>
90+
<div
91+
class="mx-auto mb-5 flex h-20 w-20 cursor-pointer items-center justify-center rounded-lg bg-teal-50 transition-all duration-500 group-hover:bg-teal-600"
92+
>
93+
<svg
94+
class="stroke-teal-600 transition-all duration-500 group-hover:stroke-white"
95+
width="30"
96+
height="30"
97+
viewBox="0 0 30 30"
98+
fill="none"
99+
xmlns="http://www.w3.org/2000/svg"
100+
>
101+
<path
102+
d="M3.75 26.25H26.25M6.25 22.875C4.86929 22.875 3.75 21.8676 3.75 20.625V12.75C3.75 11.5074 4.86929 10.5 6.25 10.5C7.63071 10.5 8.75 11.5074 8.75 12.75V20.625C8.75 21.8676 7.63071 22.875 6.25 22.875ZM15 22.875C13.6193 22.875 12.5 21.8676 12.5 20.625V9.375C12.5 8.13236 13.6193 7.125 15 7.125C16.3807 7.125 17.5 8.13236 17.5 9.375V20.625C17.5 21.8676 16.3807 22.875 15 22.875ZM23.75 22.875C22.3693 22.875 21.25 21.8676 21.25 20.625V6C21.25 4.75736 22.3693 3.75 23.75 3.75C25.1307 3.75 26.25 4.75736 26.25 6V20.625C26.25 21.8676 25.1307 22.875 23.75 22.875Z"
103+
stroke=""
104+
stroke-width="2"
105+
stroke-linecap="round"
106+
></path>
107+
</svg>
108+
</div>
109+
<h4 class="mb-3 text-lg font-medium capitalize">Data Reporting</h4>
110+
<p class="text-sm font-normal">
111+
Get real time insight into progress and allows teams to track their work habits
112+
</p>
113+
</div>
114+
<div
115+
class="group relative w-full text-center max-md:mx-auto max-md:max-w-sm md:w-2/5 lg:w-1/4"
116+
>
117+
<div
118+
class="mx-auto mb-5 flex h-20 w-20 cursor-pointer items-center justify-center rounded-lg bg-orange-50 transition-all duration-500 group-hover:bg-orange-600"
119+
>
120+
<svg
121+
class="stroke-orange-600 transition-all duration-500 group-hover:stroke-white"
122+
width="30"
123+
height="30"
124+
viewBox="0 0 30 30"
125+
fill="none"
126+
xmlns="http://www.w3.org/2000/svg"
127+
>
128+
<path
129+
d="M15.4167 12.0833V21.25M5.41667 21.25V20.8333C5.41667 19.262 5.41667 18.4763 5.90482 17.9882C6.39298 17.5 7.17865 17.5 8.75 17.5H22.0833C23.6547 17.5 24.4404 17.5 24.9285 17.9882C25.4167 18.4763 25.4167 19.262 25.4167 20.8333V21.25M15.4167 9.16667C13.8453 9.16667 13.0596 9.16667 12.5715 8.67851C12.0833 8.19036 12.0833 7.40468 12.0833 5.83333C12.0833 4.26198 12.0833 3.47631 12.5715 2.98816C13.0596 2.5 13.8453 2.5 15.4167 2.5C16.988 2.5 17.7737 2.5 18.2618 2.98816C18.75 3.47631 18.75 4.26198 18.75 5.83333C18.75 7.40468 18.75 8.19036 18.2618 8.67851C17.7737 9.16667 16.988 9.16667 15.4167 9.16667ZM7.08333 25.8333C7.08333 26.7538 6.33714 27.5 5.41667 27.5C4.49619 27.5 3.75 26.7538 3.75 25.8333C3.75 24.9129 4.49619 24.1667 5.41667 24.1667C6.33714 24.1667 7.08333 24.9129 7.08333 25.8333ZM17.0833 25.8333C17.0833 26.7538 16.3371 27.5 15.4167 27.5C14.4962 27.5 13.75 26.7538 13.75 25.8333C13.75 24.9129 14.4962 24.1667 15.4167 24.1667C16.3371 24.1667 17.0833 24.9129 17.0833 25.8333ZM27.0833 25.8333C27.0833 26.7538 26.3371 27.5 25.4167 27.5C24.4962 27.5 23.75 26.7538 23.75 25.8333C23.75 24.9129 24.4962 24.1667 25.4167 24.1667C26.3371 24.1667 27.0833 24.9129 27.0833 25.8333Z"
130+
stroke=""
131+
stroke-width="2"
132+
stroke-linecap="round"
133+
></path>
134+
</svg>
135+
</div>
136+
<h4 class="mb-3 text-lg font-medium capitalize">Workflow Builder</h4>
137+
<p class="text-sm font-normal">
138+
Automated processes to coordinate your teams and increase communication.
139+
</p>
140+
</div>
141+
</div>
142+
</div>
143+
</section>

‎src/lib/components/marketing/sections/MarketingFooter.svelte‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
<script>
2+
import Container from '@/lib/components/Container.svelte';
3+
import SiteLogo from '@/lib/components/SiteLogo.svelte';
4+
import Button from '../../ui/button/button.svelte';
5+
</script>
6+
7+
<footer class="pt-4 sm:pt-6 lg:pt-8">
8+
<Container>
9+
<div class="mx-auto max-w-screen-2xl px-4 md:px-8">
10+
<div
11+
class="flex flex-col items-center justify-between gap-2 border-t border-b py-6 md:flex-row"
12+
>
13+
<div class="mb-3 text-center md:mb-0 md:text-left">
14+
<span class="font-bold tracking-widest">Newsletter</span>
15+
<p>Subscribe to our newsletter</p>
16+
</div>
17+
18+
<form class="flex w-full gap-2 md:max-w-md">
19+
<input
20+
placeholder="Email"
21+
class="w-full flex-1 rounded border bg-gray-50 px-3 py-2 placeholder-gray-500 ring-indigo-300 transition duration-100 outline-none focus:ring"
22+
/>
23+
24+
<Button size="lg">Send</Button>
25+
</form>
26+
</div>
27+
</div>
28+
29+
<div class="pt-12">
30+
<div class="mx-auto max-w-screen-2xl px-4 md:px-8">
31+
<div class="mb-16 grid grid-cols-2 gap-12 md:grid-cols-4 lg:grid-cols-6 lg:gap-8">
32+
<div class="col-span-full lg:col-span-2">
33+
<!-- logo - start -->
34+
<div class="mb-4 lg:-mt-2">
35+
<SiteLogo />
36+
</div>
37+
<!-- logo - end -->
38+
39+
<p class="mb-6 sm:pr-8">
40+
Filler text is dummy text which has no meaning however looks very similar to real text
41+
</p>
42+
43+
<!-- social - start -->
44+
<div class="flex gap-4">
45+
<a
46+
href="/#"
47+
target="_blank"
48+
class="text-primary hover:text-muted-foreground transition duration-100"
49+
aria-label="instagram"
50+
>
51+
<svg
52+
class="h-5 w-5"
53+
width="24"
54+
height="24"
55+
viewBox="0 0 24 24"
56+
fill="currentColor"
57+
xmlns="http://www.w3.org/2000/svg"
58+
>
59+
<path
60+
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"
61+
/>
62+
</svg>
63+
</a>
64+
65+
<a
66+
href="/#"
67+
target="_blank"
68+
class="text-primary hover:text-muted-foreground transition duration-100"
69+
aria-label="twitter"
70+
>
71+
<svg
72+
class="h-5 w-5"
73+
width="24"
74+
height="24"
75+
viewBox="0 0 24 24"
76+
fill="currentColor"
77+
xmlns="http://www.w3.org/2000/svg"
78+
>
79+
<path
80+
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
81+
/>
82+
</svg>
83+
</a>
84+
85+
<a
86+
href="/#"
87+
target="_blank"
88+
class="text-primary hover:text-muted-foreground transition duration-100"
89+
aria-label="linkedin"
90+
>
91+
<svg
92+
class="h-5 w-5"
93+
width="24"
94+
height="24"
95+
viewBox="0 0 24 24"
96+
fill="currentColor"
97+
xmlns="http://www.w3.org/2000/svg"
98+
>
99+
<path
100+
d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
101+
/>
102+
</svg>
103+
</a>
104+
105+
<a
106+
href="/#"
107+
target="_blank"
108+
class="text-primary hover:text-muted-foreground transition duration-100"
109+
aria-label="github"
110+
>
111+
<svg
112+
class="h-5 w-5"
113+
width="24"
114+
height="24"
115+
viewBox="0 0 24 24"
116+
fill="currentColor"
117+
xmlns="http://www.w3.org/2000/svg"
118+
>
119+
<path
120+
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
121+
/>
122+
</svg>
123+
</a>
124+
</div>
125+
</div>
126+
127+
<div>
128+
<div class="mb-4 font-bold tracking-widest uppercase">Products</div>
129+
<nav class="flex flex-col gap-4">
130+
<div>
131+
<a href="/#" class=" hover:text-muted-foreground transition duration-100"
132+
>Overview</a
133+
>
134+
</div>
135+
136+
<div>
137+
<a href="/#" class=" hover:text-muted-foreground transition duration-100"
138+
>Solutions</a
139+
>
140+
</div>
141+
142+
<div>
143+
<a href="/#" class=" hover:text-muted-foreground transition duration-100">Pricing</a
144+
>
145+
</div>
146+
147+
<div>
148+
<a href="/#" class=" hover:text-muted-foreground transition duration-100"
149+
>Customers</a
150+
>
151+
</div>
152+
</nav>
153+
</div>
154+
155+
<div>
156+
<div class="mb-4 font-bold tracking-widest uppercase">Company</div>
157+
158+
<nav class="flex flex-col gap-4">
159+
<div>
160+
<a href="/#" class=" hover:text-muted-foreground transition duration-100">About</a>
161+
</div>
162+
163+
<div>
164+
<a href="/#" class=" hover:text-muted-foreground transition duration-100"
165+
>Investor Relations</a
166+
>
167+
</div>
168+
169+
<div>
170+
<a href="/#" class=" hover:text-muted-foreground transition duration-100">Jobs</a>
171+
</div>
172+
173+
<div>
174+
<a href="/#" class=" hover:text-muted-foreground transition duration-100">Press</a>
175+
</div>
176+
177+
<div>
178+
<a href="/#" class=" hover:text-muted-foreground transition duration-100">Blog</a>
179+
</div>
180+
</nav>
181+
</div>
182+
183+
<div>
184+
<div class="mb-4 font-bold tracking-widest uppercase">Support</div>
185+
186+
<nav class="flex flex-col gap-4">
187+
<div>
188+
<a href="/#" class=" hover:text-muted-foreground transition duration-100">Contact</a
189+
>
190+
</div>
191+
192+
<div>
193+
<a href="/#" class=" hover:text-muted-foreground transition duration-100"
194+
>Documentation</a
195+
>
196+
</div>
197+
198+
<div>
199+
<a href="/#" class=" hover:text-muted-foreground transition duration-100">Chat</a>
200+
</div>
201+
202+
<div>
203+
<a href="/#" class=" hover:text-muted-foreground transition duration-100">FAQ</a>
204+
</div>
205+
</nav>
206+
</div>
207+
208+
<div>
209+
<div class="mb-4 font-bold tracking-widest uppercase">Legal</div>
210+
211+
<nav class="flex flex-col gap-4">
212+
<div>
213+
<a href="/#" class=" hover:text-muted-foreground transition duration-100"
214+
>Terms of Service</a
215+
>
216+
</div>
217+
218+
<div>
219+
<a href="/#" class=" hover:text-muted-foreground transition duration-100"
220+
>Privacy Policy</a
221+
>
222+
</div>
223+
224+
<div>
225+
<a href="/#" class=" hover:text-muted-foreground transition duration-100"
226+
>Cookie settings</a
227+
>
228+
</div>
229+
</nav>
230+
</div>
231+
</div>
232+
233+
<div class="border-t py-8 text-center text-sm text-gray-400">
234+
© 2025 - HeBuildsWebsites
235+
</div>
236+
</div>
237+
</div>
238+
</Container>
239+
</footer>

0 commit comments

Comments
 (0)