Merge pull request #26 from ETLOnline/feature/ui-hanzla-13-contact-us…

…-page

feat(ui): contact-us page design

src/app/(home)/contact-us/contact-us.css

@@ -0,0 +1,6 @@
+.section-text{
+  @apply text-muted-foreground mx-4
+}
+.contact-section-content{
+  @apply lg:grid lg:grid-cols-12 gap-5 mx-6 mt-4 lg:mt-8 mb-8
+}

src/app/(home)/contact-us/page.tsx

@@ -0,0 +1,24 @@
+import ContactCardForm from '@/src/components/ContactCard/ContactCardForm'
+import ContactCardList from '@/src/components/ContactCard/ContactCardList'
+import React from 'react'
+import './contact-us.css'
+
+
+export default function ContactUsPage() {
+  return (
+
+    <div className="section">
+      <h2 className='section-title text-center'>Getin Touch</h2>
+      <p className="section-text text-center">Have questions? we're here to help and would love to hear from you</p>
+      <div className="contact-section-content">
+          <ContactCardList />
+          <ContactCardForm />
+
+
+      </div>
+    </div>
+
+
+
+  )
+}

src/app/(home)/page.tsx

@@ -122,7 +122,7 @@ export default function Home() {
 				<Container>
 					<div className="section">
 						<h2 className="section-title text-center">Helping the world one mentor at a time</h2>
-						<div className="section-text text-center">
+						<div className="section-content text-center">
 							<p className='pb-4'>sifting through the overwhelming content on the internet will slow you down.break through the <br /> noise abd get specific advice directly from the experts.</p>
 							<Button variant={'outline'}>Let's Find a Mentor</Button>
 						</div>
@@ -173,7 +173,7 @@ export default function Home() {
 					<div className="section-title text-center">
 						<h2>Upcoming Sessions</h2>
 					</div>
-					<div className="section-text text-center">
+					<div className="text-center">
 						<p>Sign Up to one of our session and start your journey</p>
 					</div>
 

src/app/globals.css

@@ -99,9 +99,9 @@ body {
     @apply  pt-8 pb-8
   }
   .section-title{
-      @apply text-3xl font-bold  mb-6 
+      @apply text-3xl font-bold  mb-5
   }
   .section-content{
-    @apply  mt-10
+    @apply  mt-8
   }
 }

src/components/ContactCard/ContactCard.tsx

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react'
+import { Card, CardContent } from '../ui/card'
+import { LucideProps } from 'lucide-react'
+
+interface ContactCardProps {
+  icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>
+  title: string
+  description: ReactNode
+  value: ReactNode
+}
+
+const ContactCard = ({ icon, title, description, value }: ContactCardProps) => {
+  const Icon = icon
+  return (
+    <Card className='w-[100%] sm:w-[48%] md:w-[48%] mt-4 lg:mt-0 lg:w-full'>
+      <CardContent className="flex flex-wrap  space-x-4 p-6">
+        <Icon className="h-6 w-6 text-primary" />
+        <div className='flex-wrap'>
+          <h3 className="font-semibold">{title}</h3>
+          <p className="text-sm text-muted-foreground mb-1">{description}</p>
+          <p className="text-sm font-medium">{value}</p>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ContactCard

src/components/ContactCard/ContactCardForm.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
+import { Label } from '@radix-ui/react-label'
+import { Input } from '../ui/input'
+import { Textarea } from '../ui/textarea'
+import { Button } from '../ui/button'
+
+function ContactCardForm() {
+  return (
+    <Card className="lg:col-start-5 col-span-12 mt-4 lg:mt-0">
+        <CardHeader>
+          <CardTitle>Send us a Message</CardTitle>
+          <CardDescription>
+            Fill out the form below and we'll get back to you as soon as possible.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="first-name">First name</Label>
+                <Input id="first-name" placeholder="Enter your first name" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="last-name">Last name</Label>
+                <Input id="last-name" placeholder="Enter your last name" />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" placeholder="Enter your email" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="subject">Subject</Label>
+              <Input id="subject" placeholder="Enter your subject" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="message">Message</Label>
+              <Textarea
+                id="message"
+                placeholder="Enter your message"
+                className="min-h-[150px]"
+              />
+            </div>
+            <Button type="submit" className="w-full">
+              Send Message
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+  )
+}
+
+export default ContactCardForm

src/components/ContactCard/ContactCardList.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import ContactCard from './ContactCard'
+import { Mail, MapPin, MessageSquare, Phone } from 'lucide-react'
+
+const ContactCards = [
+  {
+    icon: Mail,
+    title: "Email",
+    description: "Drop us a line anytime.",
+    value: "hello@mentorplatform.com",
+  },
+  {
+    icon: Phone,
+    title: "Phone",
+    description: "Mon-Fri from 8am to 5pm.",
+    value: "+1 (555) 000-0000",
+  },
+  {
+    icon: MapPin,
+    title: "Office",
+    description: "Come say hello.",
+    value: "123 Mentor Street, SF, CA 94103",
+  },
+  {
+    icon: MessageSquare,
+    title: "Live Chat",
+    description: "Available 24/7.",
+    value: "Start a conversation",
+  },
+]
+
+function ContactCardList() {
+  return (
+    <div className="flex flex-wrap justify-between lg:gap-0 lg:col-start-1 col-span-4 space-y-4">
+      {
+        ContactCards.map(({ icon, title, description, value }, i) => {
+          return (
+            <ContactCard key={i} icon={icon} title={title} description={description} value={value} />
+          )
+        })
+      }
+    </div>
+  )
+}
+
+export default ContactCardList

src/components/NavBar/NavbarItems.tsx

@@ -6,34 +6,34 @@ function Navbaritems() {
 	return (
 		<div className='navbar'>
 
-			<Link className='nav-brand' href="#">
-				<Image width={50} height={50} src="/logo/spark-logo-no-bg.png" alt='Spark logo' />
-			</Link>
+            <Link className='nav-brand' href="/">
+                <Image width={50} height={50} src="/logo/spark-logo-no-bg.png" alt='Spark logo' />
+            </Link>
 
-			<ul className='nav'>
-				<li className='nav-item'>
-					<Link className='nav-link' href="/dashboard">
-						Dashboard</Link>
-				</li>
-				<li className='nav-item'>
-					<Link className='nav-link' href="#">
-						Find a Mentor</Link>
-				</li>
-				<li className='nav-item'>
-					<Link className='nav-link' href="#">
-						About Us</Link>
-				</li>
-				<li className='nav-item'>
-					<Link className='nav-link' href="#">
-						Pricing</Link>
-				</li>
-				<li className='nav-item'>
-					<Link className='nav-link' href="#">
-						Become a Member</Link>
-				</li>
-			</ul>
-		</div>
-	)
+            <ul className='nav'>
+                <li className='nav-item'>
+                    <Link className='nav-link' href="/dashboard">
+                        Dashboard</Link>
+                </li>
+                <li className='nav-item'>
+                    <Link className='nav-link' href="#">
+                        Find a Mentor</Link>
+                </li>
+                <li className='nav-item'>
+                    <Link className='nav-link' href="#">
+                        About Us</Link>
+                </li>
+                <li className='nav-item'>
+                    <Link className='nav-link' href="/contact-us">
+                        Contact Us</Link>
+                </li>
+                <li className='nav-item'>
+                    <Link className='nav-link' href="#">
+                        Become a Member</Link>
+                </li>
+            </ul>
+        </div>
+    )
 }
 
 export default Navbaritems

src/middleware.ts

@@ -11,6 +11,7 @@ export const config = {
     // Skip Next.js internals and all static files, unless found in search params
     // '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
     '/',
+    '/contact-us',
     '/profile(.*)',
     // Always run for API routes
     // '/(api|trpc)(.*)',