feat: Contact Section

Author: rob-at-cortex

.storybook/public/assets/images/contact.png

@@ -74,6 +74,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "semantic-release": "^24.2.0",
+    "sonner": "^1.7.1",
     "storybook": "^8.4.7",
     "style-loader": "^4.0.0",
     "tailwind-merge": "^2.6.0",
@@ -109,16 +110,19 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
+    "formik": "^2.4.6",
     "prism-react-renderer": "^2.4.1",
     "r18gs": "^3.0.1",
-    "react-icons": "^5.4.0"
+    "react-icons": "^5.4.0",
+    "yup": "^1.6.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.8",
     "framer-motion": "^11.15.0",
     "lucide-react": "^0.469.0",
     "next": ">=10",
-    "react": ">=16.8"
+    "react": ">=16.8",
+    "sonner": "^1.7.1"
   },
   "peerDependenciesMeta": {
     "next": {

package.json

@@ -0,0 +1,23 @@
+import { cn } from '@/lib/utils'
+
+export function inputFieldCommonClassesGenerator({ className }: { className?: string }): string {
+  return cn(
+    // Layout styles
+    'flex items-center min-h-[3.5rem]  md:min-h-[3.75rem] w-full rounded-5 px-4 md:px-5 py-2',
+
+    // General styles
+    ' bg-transparent text-accent-800 placeholder:text-accent-800 dark:text-body dark:placeholder:text-body',
+
+    // Border styles
+    ' border border-solid border-accent-900 border-opacity-20 dark:border-opacity-20 dark:border-accent-200',
+
+    // Focus styles
+    ' focus:border-accent-900 focus:ring-0 focus-visible:outline-0 focus-visible:ring-0 focus-visible:ring-offset-0',
+
+    // Animation
+    'transition-all duration-300',
+
+    // Additional custom className (optional)
+    className,
+  )
+}

pnpm-lock.yaml

@@ -0,0 +1,25 @@
+import { ComponentProps } from 'react'
+import { inputFieldCommonClassesGenerator } from '../common/styles'
+
+export type InputProps = ComponentProps<'input'>
+
+function Input({ className, ...props }: InputProps) {
+  return <input {...props} className={inputFieldCommonClassesGenerator({ className })} />
+}
+
+export interface TextInputProps extends InputProps {
+  icon?: React.ReactNode
+}
+
+export function TextInput({ icon, ...props }: TextInputProps) {
+  return (
+    <div className="relative w-full">
+      <Input {...props} />
+      {icon && (
+        <span className="absolute right-5 top-1/2 w-[14px] -translate-y-1/2 text-primary">
+          {icon}
+        </span>
+      )}
+    </div>
+  )
+}

src/components/ui/inputs/common/styles/index.ts

@@ -0,0 +1,31 @@
+import { ComponentProps } from 'react'
+import { inputFieldCommonClassesGenerator } from '../common/styles'
+import { cn } from '@/lib/utils/cn'
+
+export type TextareaProps = ComponentProps<'textarea'>
+
+function Input({ className, ...props }: TextareaProps) {
+  return (
+    <textarea
+      {...props}
+      className={cn(
+        inputFieldCommonClassesGenerator({}),
+        'resize-none md:min-h-[130px]',
+        className,
+      )}
+    />
+  )
+}
+
+export interface TextareaInputProps extends TextareaProps {
+  icon?: React.ReactNode
+}
+
+export function TextAreaInput({ icon, ...props }: TextareaInputProps) {
+  return (
+    <div className="relative w-full">
+      <Input {...props} />
+      {icon && <span className="absolute right-5 top-[18px] w-[14px] text-primary">{icon}</span>}
+    </div>
+  )
+}

src/components/ui/inputs/text-input/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { ContactSection, type ContactSectionProps } from './ContactSection';
+import { Toaster } from 'sonner'
+
+export default {
+  title: 'Sections/ContactSection',
+  component: ContactSection,
+  tags: ['autodocs'],
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'A card component that displays a service with an icon, title, description, and a link.',
+      },
+    },
+  },
+  argTypes: {
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <Story />
+      <Toaster richColors position="top-right" closeButton visibleToasts={9} />
+      </>
+    ),
+  ],
+} as Meta;
+
+const Template: StoryFn<ContactSectionProps> = (args) => <ContactSection {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  sectionHeading: {
+    title: 'Get in Touch',
+    subtitle: 'We would love to hear from you',
+  },
+  image: {
+    src: '/assets/images/contact.png',
+    alt: 'Contact Us',
+    blurDataURL: 'data:image/jpeg;base64,...', // Add your blur data URL here
+  },
+  contactInfo: {
+    sectionHeading: {
+      title: 'Contact Information',
+      subtitle: 'Reach out to us through any of the following methods',
+    },
+    location: '123 Main Street, Anytown, AT 12345',
+    mail: 'info@example.com',
+    phone: '+1 (555) 123-4567',
+  },
+  locations: [
+    {
+      title: 'Head Office',
+      location: '123 Main Street, Anytown, AT 12345',
+      mails: ['headoffice@example.com'],
+      phoneNumbers: ['+1 (555) 123-4567'],
+      embedUrl: 'https://www.google.com/maps/embed?...', // Add your Google Maps embed URL here
+    },
+    {
+      title: 'Branch Office',
+      location: '456 Elm Street, Othertown, OT 67890',
+      mails: ['branchoffice@example.com'],
+      phoneNumbers: ['+1 (555) 987-6543'],
+      embedUrl: 'https://www.google.com/maps/embed?...', // Add your Google Maps embed URL here
+    },
+  ],
+};