Skip to content

Commit

Permalink
add ContactForm section
Browse files Browse the repository at this point in the history
  • Loading branch information
@milewskibogumil
milewskibogumil committed Oct 26, 2024
1 parent ee6630f commit e751d55
Show file tree
Hide file tree
Showing 38 changed files with 744 additions and 142 deletions.
7 changes: 7 additions & 0 deletions apps/astro/astro.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { defineConfig } from "astro/config";
import preact from '@astrojs/preact';
import vercel from "@astrojs/vercel/serverless";
import sitemap from "@astrojs/sitemap";
import { DOMAIN } from "./src/global/constants";
Expand All @@ -8,6 +9,7 @@ import redirects from "./redirects";
export default defineConfig({
site: DOMAIN,
integrations: [
preact({ compat: true }),
sitemap(),
],
image: {
Expand All @@ -16,6 +18,11 @@ export default defineConfig({
hostname: "cdn.sanity.io"
}],
},
vite: {
ssr: {
noExternal: ['react-hook-form']
}
},
prefetch: {
prefetchAll: true
},
Expand Down
6 changes: 6 additions & 0 deletions apps/astro/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,14 @@
},
"dependencies": {
"@astrojs/check": "^0.9.3",
"@astrojs/preact": "^3.5.3",
"@astrojs/sitemap": "^3.1.6",
"@astrojs/vercel": "^7.8.1",
"@sanity/client": "^6.21.3",
"astro": "^4.15.8",
"astro-portabletext": "^0.10.0",
"lenis": "^1.1.13",
"react-hook-form": "^7.53.1",
"sharp-ico": "^0.1.5",
"typescript": "^5.6.2"
},
Expand All @@ -27,5 +29,9 @@
"eslint-plugin-astro": "^1.2.4",
"eslint-plugin-jsx-a11y": "^6.10.0",
"sass": "^1.79.3"
},
"overrides": {
"react": "bun:@preact/compat@latest",
"react-dom": "bun:@preact/compat@latest"
}
}
3 changes: 3 additions & 0 deletions apps/astro/src/components/Components.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import HighlightedPerson, { HighlightedPerson_Query } from '@/components/global/
import PeopleShowcase, { PeopleShowcase_Query } from '@/components/global/PeopleShowcase.astro'
import ImagesMarquee, { ImagesMarquee_Query } from '@/components/global/ImagesMarquee.astro'
import TextBlockCtaAndImage, { TextBlockCtaAndImage_Query } from '@/components/global/TextBlockCtaAndImage.astro'
import ContactForm, { ContactForm_Query } from '@/components/global/ContactForm'
const components = {
SimpleCtaSection,
Expand All @@ -40,6 +41,7 @@ const components = {
PeopleShowcase,
ImagesMarquee,
TextBlockCtaAndImage,
ContactForm,
}
type ComponentsMap = {
Expand Down Expand Up @@ -76,6 +78,7 @@ export const Components_Query = /* groq */ `
${PeopleShowcase_Query}
${ImagesMarquee_Query}
${TextBlockCtaAndImage_Query}
${ContactForm_Query}
},
`
---
Expand Down
2 changes: 1 addition & 1 deletion apps/astro/src/components/global/BorderedFullImage.astro
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
import PortableText, { PortableTextQuery, type PortableTextValue } from '@/components/ui/portable-text'
import Image, { ImageDataQuery, type ImageDataProps } from '@/components/ui/image'
import Image, { ImageDataQuery, type ImageDataProps } from '@/src/components/ui/Image'
export const BorderedFullImage_Query = `
_type == "BorderedFullImage" => {
Expand Down
272 changes: 272 additions & 0 deletions apps/astro/src/components/global/ContactForm/ContactForm.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,272 @@
---
import sanityFetch from '@/src/utils/sanity.fetch'
import Form from './Form.tsx'
import PortableText, { PortableTextQuery, type PortableTextValue } from '@/components/ui/portable-text'
import Image, { ImageDataQuery, type ImageDataProps } from '@/src/components/ui/Image'
import CopyToClipboard from '@/components/ui/CopyToClipboard.astro'
export const ContactForm_Query = `
_type == "ContactForm" => {
${ImageDataQuery('img')}
${PortableTextQuery('heading')}
responseTime,
},
`
export type Props = {
index: number
img: ImageDataProps
heading: PortableTextValue
responseTime?: string
}
const { index, img, heading, responseTime } = Astro.props
const { email, tel, address, socials, companyInfo } = await sanityFetch<{
email: string
tel: string
address: {
address: string
link: string
}
socials: {
facebook: string
instagram: string
}
companyInfo: {
nip: string
krs: string
}
}>({
query: `
*[_type == 'global'][0] {
email,
tel,
address {
address,
link
},
socials {
facebook,
instagram,
},
companyInfo {
nip,
krs,
},
}
`,
})
---

<section class="ContactForm">
<div class="wrapper">
<Image {...img} sizes="100vw" priority={index === 0} />
<header>
<PortableText value={heading} heading={index === 0 ? 'h1' : 'h2'} class="heading h3" />
{
responseTime && (
<p class="response-time">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none">
<path stroke="#374776" stroke-linecap="round" stroke-linejoin="round" d="M10 5v5l3.333 1.667" />
<circle cx="10" cy="10" r="7.5" stroke="#374776" stroke-linecap="round" stroke-linejoin="round" />
</svg>
{responseTime}
</p>
)
}
<Form email={email} tel={tel} facebook={socials.facebook} instagram={socials.instagram} client:idle />
</header>
<div class="info">
<ul class="socials">
<li>
<a href={socials.facebook} aria-label="Facebook" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none">
<path
stroke="#374776"
stroke-linecap="round"
stroke-linejoin="round"
d="M5.417 8.333v3.334h2.5V17.5h3.333v-5.833h2.5l.834-3.334H11.25V6.667c0-.454.38-.834.834-.834h2.5V2.5h-2.5c-2.27 0-4.167 1.897-4.167 4.167v1.666h-2.5Z">
</path>
</svg>
</a>
</li>
<li>
<a href={socials.instagram} aria-label="Instagram" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none">
<path
stroke="#374776"
stroke-linecap="round"
stroke-linejoin="round"
d="M12.885 9.572a2.917 2.917 0 1 1-5.771.856 2.917 2.917 0 0 1 5.77-.856ZM14.167 5.417h.417">
</path>
<path
stroke="#374776"
stroke-linecap="round"
stroke-linejoin="round"
d="M2.5 7.833c0-1.867 0-2.8.363-3.513.32-.627.83-1.137 1.457-1.457C5.033 2.5 5.966 2.5 7.833 2.5h4.334c1.867 0 2.8 0 3.513.363.627.32 1.137.83 1.457 1.457.363.713.363 1.646.363 3.513v4.334c0 1.867 0 2.8-.363 3.513a3.334 3.334 0 0 1-1.457 1.457c-.713.363-1.646.363-3.513.363H7.833c-1.867 0-2.8 0-3.513-.363a3.333 3.333 0 0 1-1.457-1.457c-.363-.713-.363-1.646-.363-3.513V7.833Z">
</path>
</svg>
</a>
</li>
</ul>
<p class="address">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" fill="none">
<path
stroke="#374776"
stroke-linecap="round"
stroke-linejoin="round"
d="M10 19.204s6.666-5.926 6.666-10.37a6.667 6.667 0 1 0-13.333 0c0 4.444 6.667 10.37 6.667 10.37Z">
</path>
<path
stroke="#374776"
stroke-linecap="round"
stroke-linejoin="round"
d="M12.13 8.556a2.13 2.13 0 1 1-4.26 0 2.13 2.13 0 0 1 4.26 0Z">
</path>
</svg>
<a href={address.link} target="_blank" rel="noopener" class="link">
{address.address}
</a>
</p>
<p class="tel">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" fill="none">
<path
stroke="#374776"
stroke-linecap="round"
stroke-linejoin="round"
d="M17.22 16.142s-.966.949-1.203 1.227c-.385.411-.84.605-1.435.605-.057 0-.118 0-.176-.003-1.133-.073-2.186-.515-2.976-.892a16.947 16.947 0 0 1-5.633-4.402C4.495 11.11 3.625 9.664 3.049 8.11c-.355-.948-.485-1.687-.428-2.384.039-.446.21-.815.527-1.131L4.45 3.296c.187-.175.386-.27.58-.27.241 0 .436.144.558.266l.011.012c.233.217.454.441.687.681.118.122.24.244.363.37l1.042 1.04c.404.403.404.777 0 1.18-.111.11-.218.221-.329.328-.32.327-.068.076-.4.373-.008.008-.016.012-.02.02-.328.327-.267.647-.198.864l.012.034c.27.655.652 1.272 1.232 2.007l.004.004c1.053 1.295 2.164 2.304 3.389 3.077.156.1.317.18.47.255.137.069.267.134.377.202.015.008.03.02.046.027a.83.83 0 0 0 .378.095c.317 0 .515-.198.58-.263l.748-.746c.13-.13.336-.286.576-.286.237 0 .432.149.55.278l.008.008 2.102 2.098c.393.389.004 1.192.004 1.192Z">
</path>
</svg>
<a href={`tel:${tel}`}>{tel}</a>
<CopyToClipboard data={tel} />
</p>
<p class="email">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" fill="none">
<path
stroke="#374776"
stroke-linecap="round"
stroke-linejoin="round"
d="M3.438 5.604 10 9.823l7.031-4.219M4.375 15.754A1.875 1.875 0 0 1 2.5 13.879V6.542c0-1.036.84-1.875 1.875-1.875h11.25c1.035 0 1.875.84 1.875 1.875v7.337c0 1.035-.84 1.875-1.875 1.875H4.375Z">
</path>
</svg>
<a href={`mailto:${email}`}>{email}</a>
<CopyToClipboard data={email} />
</p>
<p class="krs">
<span>KRS:</span>
{companyInfo.krs}
</p>
<p class="nip">
<span>NIP:</span>
{companyInfo.nip}
</p>
</div>
</div>
</section>

<style lang="scss">
.ContactForm {
padding: clamp(3rem, calc(4vw / 0.48), 5rem) 0;
.wrapper {
padding: 2rem var(--page-margin);
margin: 0 calc(var(--page-margin) * -1);
position: relative;
display: grid;
grid-template-columns: auto auto;
gap: 1rem 2rem;
justify-content: space-between;
align-items: flex-end;
img {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 100%;
}
}
header {
max-width: 27rem;
background-color: var(--primary-100, #fffefd);
padding: 2rem clamp(1rem, calc(2vw / 0.48), 2rem);
.heading {
margin-bottom: 1rem;
}
.response-time {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.75rem;
font-size: 0.875rem;
svg {
margin-top: 0.125rem;
}
}
:global(.Form) {
margin-top: clamp(2rem, calc(2.52vw / 0.48), 2.5rem);
}
}
.info {
max-width: 23rem;
background-color: var(--primary-100, #fffefd);
padding: 2rem clamp(1rem, calc(2vw / 0.48), 2rem);
font-size: 0.875rem;
.socials {
display: flex;
align-items: center;
gap: 0.5rem;
margin: -0.75rem;
margin-bottom: 1.5rem;
a {
width: 2.75rem;
height: 2.75rem;
display: grid;
place-items: center;
}
}
.address,
.tel,
.email,
.krs,
.nip {
display: flex;
align-items: center;
gap: calc(8rem / 16);
}
.address,
.tel,
.email {
margin-bottom: 1rem;
}
.krs {
margin-top: clamp(2rem, calc(4vw / 0.48), 5rem);
margin-bottom: 1rem;
}
}
@media (max-width: 56rem) {
.wrapper {
grid-template-columns: 1fr;
justify-items: center;
gap: 0.5rem;
padding: 0;
background-color: var(--primary-300, #f4efe8);
img {
position: relative;
z-index: 2;
}
}
header,
.info {
max-width: 38rem;
width: calc(100% - 1rem);
padding-left: var(--page-margin);
padding-right: var(--page-margin);
margin: 0 0.5rem;
}
.info {
margin-bottom: 0.5rem;
}
}
}
</style>
Loading

0 comments on commit e751d55

Please sign in to comment.