Skip to content

Commit 5650468

Browse files
olexandrbigolexandrbig
committed
Merge branch 'form'
* form: can help? form
2 parents 56a5f11 + 6e0af2e commit 5650468

File tree

7 files changed

+137
-6
lines changed

7 files changed

+137
-6
lines changed

‎CNAME‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
swift-android.com

‎app/globals.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,15 @@
5757
}
5858
}
5959

60+
.bg{
61+
background-color: var(--background);
62+
}
63+
64+
65+
.bg-foreground{
66+
background-color: var(--foreground);
67+
}
68+
6069
.border-ios{
6170
border: 2px solid var(--ios);
6271
border-radius: var(--border-radius);

‎app/page.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,20 @@ export default function Home() {
1212
<div
1313
className="grid grid-rows-[1fr] items-center justify-items-center p-8 font-(family-name:--font-geist-sans)">
1414

15-
<main className="flex flex-col gap-8 row-start-1 items-center sm:items-start">
16-
<div>
15+
<main className="flex flex-col row-start-1 items-center sm:items-start text-center">
16+
<div className="mb-8 w-full">
1717
<TextChangeWidth/>
1818
<h1 className="dynamic-title">Swift For Android</h1>
1919
</div>
2020
<Image
21-
className="dark m-auto"
21+
className="dark m-auto mb-8"
2222
src={`${basePath}/logo-swift.png`}
2323
alt="App logo"
2424
width={200}
2525
height={20}
2626
priority
2727
/>
28-
<ol className="list-inside text-sm text-center sm:text-left font-(family-name:--font-geist-mono) m-auto">
28+
<ol className="mb-8 list-inside text-sm text-center sm:text-left font-(family-name:--font-geist-mono) m-auto">
2929
<div>
3030
{<div className="container">
3131
{postMatadata.map((post, postIndex) => {
@@ -38,12 +38,17 @@ export default function Home() {
3838
</ol>
3939
<div className="flex gap-4 items-center flex-col sm:flex-row m-auto">
4040
<Link
41-
className="rounded-full border border-solid border-black/8 dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
41+
className="rounded-full border border-solid color-background bg-foreground hover:opacity-80 transition-colors flex items-center justify-center text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
4242
href="https://scade.io/docs"
4343
>
4444
Get Started
4545
</Link>
4646
</div>
47+
<h3 className="font-light m-auto text-xl font-bold mt-16 mb-4 font-(family-name:--font-geist-mono)">
48+
Subscribe to the Swift for Android Newsletter
49+
</h3>
50+
<p className="font-light m-auto text-center mb-0 font-(family-name:--font-geist-mono)">We send updates once a month</p>
51+
<iframe src="/MailerLite.html" frameBorder="0" className="m-auto w-[450px] h-[320px] max-w-full inline-block"></iframe>
4752
<div className="flex items-center m-auto"><FooterSmall/></div>
4853
</main>
4954

‎components/FooterSmall.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@
1919
font-size: 16px; /* Adjust font size if needed */
2020
}
2121

22+
.footer-nav a.block {
23+
display: block;
24+
width: 100%;
25+
}
26+
2227
.footer-nav a svg {
2328
margin-right: 8px; /* Add spacing between the icon and text */
2429
}

‎components/FooterSmall.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const FooterSmall = () => {
1010
return (
1111
<footer className="footer">
1212
<nav className="footer-nav">
13-
<Link href="/docs">© {currentYear} SCADE, Inc.</Link>
13+
<Link href="/docs" className="w-1 md:w-auto block text-center">© {currentYear} SCADE, Inc.</Link>
1414
<Link href="https://www.linkedin.com/company/scade-mobile/" target="_blank" aria-label="LinkedIn">
1515
<FaLinkedin />
1616
</Link>

‎public/MailerLite.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Newsletter</title>
5+
<script>
6+
(function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[])
7+
.push(arguments);},l=d.createElement(e),l.async=1,l.src=u,
8+
n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})
9+
(window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
10+
ml('account', '1686884');
11+
</script>
12+
<link href="/form-styles.css" rel="stylesheet">
13+
</head>
14+
<body id="mailerlite">
15+
<div class="ml-embedded" data-form="UNb2oI"></div>
16+
</body>
17+
</html>

‎public/form-styles.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
:root {
2+
--background: #ffffff;
3+
--foreground: #0a0a0a;
4+
--muted: #7F7F7F;
5+
--muted-text: #7F7F7F;
6+
--accent: #1B6081;
7+
--ios: #FD9226;
8+
--android: #51A637;
9+
--breakpoint-xs: 480px;
10+
--breakpoint-sm: 576px;
11+
--breakpoint-md: 768px;
12+
--breakpoint-lg: 992px;
13+
--breakpoint-xl: 1200px;
14+
--border-radius: 30px;
15+
--icon-color: var(--foreground);
16+
--foreground-with-opacity: rgba(0, 0, 0, 0.1);
17+
}
18+
19+
@media (prefers-color-scheme: dark) {
20+
:root {
21+
--background: #0a0a0a;
22+
--foreground: #ffffff;
23+
--accent: #56bef3;
24+
--muted: #474747;
25+
--muted-text: #d3d3d3;
26+
--ios: #FD9226;
27+
--android: #51A637;
28+
--foreground-with-opacity: rgba(255, 255, 255, 0.1);
29+
}
30+
}
31+
html, body, .ml-form-embedWrapper{
32+
background: var(--background)!important;
33+
color: var(--foreground)!important;
34+
}
35+
.ml-form-embedWrapper h4,
36+
.ml-form-embedWrapper p,
37+
.ml-form-embedWrapper label{
38+
color: var(--muted-text)!important;
39+
}
40+
#mailerlite .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button{
41+
background: var(--muted)!important;
42+
color: var(--foreground)!important;
43+
}
44+
45+
#mailerlite .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover{
46+
background: var(--muted)!important;
47+
color: var(--foreground)!important;
48+
opacity: 0.8;
49+
}
50+
#mailerlite .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent > *,
51+
#mailerlite .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent > *{
52+
text-align: center!important;
53+
}
54+
#mailerlite .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow textarea,
55+
#mailerlite .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow textarea,
56+
#mailerlite .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input{
57+
background: var(--muted)!important;
58+
color: var(--foreground)!important;
59+
border: none!important;
60+
}
61+
62+
@media (prefers-color-scheme: light) {
63+
#mailerlite .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button{
64+
background: var(--muted)!important;
65+
color: var(--background)!important;
66+
}
67+
68+
#mailerlite .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover{
69+
background: var(--muted)!important;
70+
color: var(--background)!important;
71+
opacity: 0.8;
72+
}
73+
#mailerlite .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow textarea,
74+
#mailerlite .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow textarea,
75+
#mailerlite .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input{
76+
background: var(--background)!important;
77+
color: var(--foreground)!important;
78+
border: 1px solid var(--muted)!important;
79+
}
80+
}
81+
body {
82+
margin: 0!important;
83+
}
84+
.ml-embedded {
85+
height: 100dvh;
86+
width: 100dvw;
87+
}
88+
.embedForm{
89+
width: 100%!important;
90+
max-width: 100%!important;
91+
}
92+
.ml-embedded > .ml-form-embedContainer{
93+
height: 100dvh;
94+
}

0 commit comments

Comments
 (0)