init: Replot

desirablesolutions · Jan 26, 2025 · 85410bf · 85410bf
1 parent 2e40f0c
commit 85410bf
Show file tree

Hide file tree

Showing 35 changed files with 337 additions and 263 deletions.
diff --git a/app/package.json b/app/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "app",
+  "name": "atidylawn",
   "version": "0.1.0",
   "private": true,
   "scripts": {

diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { ThemeProvider } from "@/views/components/theme-context";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -13,10 +14,16 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "A Tidy Lawn",
+  description: "Intelligent Lawn Care",
 };
 
+
+const styles = {
+  container: () => `min-h-screen bg-white dark:bg-black font-thin cursor-none`,
+}
+
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -27,7 +34,14 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <ThemeProvider>
+
+          <div className={styles.container()}>
+            {children}
+
+          </div>
+
+        </ThemeProvider>
       </body>
     </html>
   );

diff --git a/app/src/app/page.tsx b/app/src/app/page.tsx
@@ -1,176 +1,15 @@
-"use client"
+import { Contact } from "@/views/includes/contact"
 
-import { Header } from "@/components/header"
-import { ContactForm } from "@/components/contact-form"
-import { ThemeProvider } from "@/components/theme-context"
-import { SERVICES, TEAM_MEMBERS, SITE_VERSION } from "@/lib/constants"
-import { GrapeIcon as Grass, Users, Info, Phone, Flower, TreesIcon as Tree, Droplet } from "lucide-react"
-import Image from "next/image"
-import { CustomCursor } from "@/components/custom-cursor"
-import { AIHelp } from "@/components/ai-help"
-import { MultiStepForm } from "@/components/multi-step-form"
 
-const icons = {
-  grass: Grass,
-  flower: Flower,
-  tree: Tree,
-  droplet: Droplet,
-}
-
-export default function Home() {
-  return (
-    <ThemeProvider>
-      <div className="min-h-screen bg-white dark:bg-gray-900 font-thin cursor-none">
-        <Header />
-        <CustomCursor />
-        <AIHelp />
 
-        {/* Hero Section */}
-        <section className="pt-32 pb-16 px-4">
-          <div className="container mx-auto text-center">
-            <h1 className="text-5xl md:text-7xl font-thin mb-6 text-green-700 dark:text-green-400">
-              Your One-Stop Shop for Perfect Lawns
-            </h1>
-            <p className="text-xl md:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
-              Professional landscaping services, products, and expertise - all in one place.
-            </p>
-          </div>
-        </section>
 
-        {/* Services Section */}
-        <section id="services" className="py-16 px-4 bg-gray-50 dark:bg-gray-800">
-          <div className="container mx-auto">
-            <h2 className="text-4xl font-thin text-center mb-12 text-green-700 dark:text-green-400">Our Services</h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-              {SERVICES.map((service) => {
-                const Icon = icons[service.icon as keyof typeof icons]
-                return (
-                  <div
-                    key={service.id}
-                    className="p-6 bg-white dark:bg-gray-900 rounded-lg shadow-sm hover:shadow-md 
-                             transition-shadow duration-300 border border-transparent hover:border-green-500 
-                             dark:hover:border-green-400"
-                  >
-                    <Icon className="h-12 w-12 text-green-600 dark:text-green-400 mb-4" />
-                    <h3 className="text-xl font-thin mb-2">{service.title}</h3>
-                    <p className="text-gray-600 dark:text-gray-400 mb-4">{service.description}</p>
-                    <p className="text-green-600 dark:text-green-400">{service.price}</p>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        </section>
-
-        {/* Team Section */}
-        <section id="team" className="py-16 px-4">
-          <div className="container mx-auto">
-            <h2 className="text-4xl font-thin text-center mb-12 text-green-700 dark:text-green-400">Our Team</h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-              {TEAM_MEMBERS.map((member) => (
-                <div
-                  key={member.id}
-                  className="text-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-sm hover:shadow-md 
-                           transition-shadow duration-300"
-                >
-                  <Image
-                    src={member.image || "/placeholder.svg"}
-                    alt={member.name}
-                    width={200}
-                    height={200}
-                    className="rounded-full mx-auto mb-4"
-                  />
-                  <h3 className="text-xl font-thin mb-2">{member.name}</h3>
-                  <p className="text-green-600 dark:text-green-400 mb-2">{member.role}</p>
-                  <p className="text-gray-600 dark:text-gray-400">{member.bio}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-        </section>
-
-        {/* About Section */}
-        <section id="about" className="py-16 px-4 bg-gray-50 dark:bg-gray-800">
-          <div className="container mx-auto">
-            <h2 className="text-4xl font-thin text-center mb-12 text-green-700 dark:text-green-400">
-              About A Tidy Lawn
-            </h2>
-            <div className="max-w-3xl mx-auto text-center">
-              <p className="text-gray-600 dark:text-gray-300 mb-6">
-                A Tidy Lawn is your comprehensive solution for all landscaping needs. We combine expertise, quality
-                products, and professional service to transform your outdoor spaces into beautiful, sustainable
-                environments.
-              </p>
-              <p className="text-gray-600 dark:text-gray-300">
-                Our team of experienced professionals is dedicated to providing exceptional service and maintaining the
-                highest standards in the industry.
-              </p>
-            </div>
-          </div>
-        </section>
+export default function Home() {
 
-        {/* Contact Section */}
-        <section id="contact" className="py-16 px-4">
-          <div className="container mx-auto">
-            <h2 className="text-4xl font-thin text-center mb-12 text-green-700 dark:text-green-400">Get in Touch</h2>
-            <MultiStepForm />
-          </div>
-        </section>
+  return (
+    <>
+<Contact/>
 
-        {/* Footer */}
-        <footer className="bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-12">
-          <div className="container mx-auto px-4">
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
-              <div>
-                <h3 className="text-lg font-thin mb-4 text-green-700 dark:text-green-400">A Tidy Lawn</h3>
-                <p className="text-gray-600 dark:text-gray-400">
-                  Your one-stop destination for professional landscaping services and products.
-                </p>
-              </div>
-              <div>
-                <h3 className="text-lg font-thin mb-4 text-green-700 dark:text-green-400">Quick Links</h3>
-                <ul className="space-y-2">
-                  {["Services", "Team", "About", "Contact"].map((item) => (
-                    <li key={item}>
-                      <a
-                        href={`#${item.toLowerCase()}`}
-                        className="text-gray-600 hover:text-green-600 dark:text-gray-400 
-                                 dark:hover:text-green-400"
-                      >
-                        {item}
-                      </a>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-              <div>
-                <h3 className="text-lg font-thin mb-4 text-green-700 dark:text-green-400">Contact</h3>
-                <ul className="space-y-2 text-gray-600 dark:text-gray-400">
-                  <li>[email protected]</li>
-                  <li>1-800-TIDY-LAWN</li>
-                  <li>123 Garden Street</li>
-                  <li>Green City, ST 12345</li>
-                </ul>
-              </div>
-              <div>
-                <h3 className="text-lg font-thin mb-4 text-green-700 dark:text-green-400">Hours</h3>
-                <ul className="space-y-2 text-gray-600 dark:text-gray-400">
-                  <li>Monday - Friday: 8am - 6pm</li>
-                  <li>Saturday: 9am - 4pm</li>
-                  <li>Sunday: Closed</li>
-                </ul>
-              </div>
-            </div>
-            <div className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
-              <div className="text-center text-gray-600 dark:text-gray-400 text-sm">
-                <p>© {new Date().getFullYear()} A Tidy Lawn. All rights reserved.</p>
-                <p>Hosted by Desirable Solutions | Version {SITE_VERSION}</p>
-              </div>
-            </div>
-          </div>
-        </footer>
-      </div>
-    </ThemeProvider>
+    </>
   )
 }
 
diff --git a/app/src/lib/animation-variants.ts → ...src/controllers/lib/animation-variants.ts b/app/src/lib/animation-variants.ts → ...src/controllers/lib/animation-variants.ts
diff --git a/app/src/lib/constants.ts → app/src/controllers/lib/constants.ts b/app/src/lib/constants.ts → app/src/controllers/lib/constants.ts
diff --git a/app/src/lib/notion.ts → app/src/controllers/lib/notion.ts b/app/src/lib/notion.ts → app/src/controllers/lib/notion.ts
diff --git a/app/src/lib/types.ts → app/src/controllers/lib/types.ts b/app/src/lib/types.ts → app/src/controllers/lib/types.ts
diff --git a/app/src/lib/use-debounce.ts → app/src/controllers/lib/use-debounce.ts b/app/src/lib/use-debounce.ts → app/src/controllers/lib/use-debounce.ts
diff --git a/app/src/lib/utils.ts → app/src/controllers/lib/utils.ts b/app/src/lib/utils.ts → app/src/controllers/lib/utils.ts
diff --git a/app/src/components/ai-help.tsx → app/src/views/components/ai-help.tsx b/app/src/components/ai-help.tsx → app/src/views/components/ai-help.tsx
@@ -26,10 +26,10 @@ import {
   DialogTitle,
   DialogDescription,
   DialogClose,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
-import { fadeInUp, staggerChildren, rotateIn } from "@/lib/animation-variants"
+} from "@/views/components/ui/dialog"
+import { Input } from "@/views/components/ui/input"
+import { Button } from "@/views/components/ui/button"
+import { fadeInUp, staggerChildren, rotateIn } from "@/controllers/lib/animation-variants"
 
 interface Message {
   type: "user" | "ai"

diff --git a/app/src/components/contact-form.tsx → app/src/views/components/contact-form.tsx b/app/src/components/contact-form.tsx → app/src/views/components/contact-form.tsx
@@ -1,11 +1,11 @@
 "use client"
 
 import { useState } from "react"
-import { submitToNotion } from "@/lib/notion"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
-import { SERVICES } from "@/lib/constants"
+import { submitToNotion } from "@/controllers/lib/notion"
+import { Button } from "@/views/components/ui/button"
+import { Input } from "@/views/components/ui/input"
+import { Textarea } from "@/views/components/ui/textarea"
+import { SERVICES } from "@/controllers/lib/constants"
 
 export function ContactForm() {
   const [isSubmitting, setIsSubmitting] = useState(false)

diff --git a/app/src/components/custom-cursor.tsx → app/src/views/components/custom-cursor.tsx b/app/src/components/custom-cursor.tsx → app/src/views/components/custom-cursor.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState, useCallback } from "react"
 import { motion, useMotionValue, useSpring } from "framer-motion"
-import { debounce } from "@/lib/use-debounce"
+import { debounce } from "@/controllers/lib/use-debounce"
 
 interface CursorState {
   clicked: boolean

diff --git a/app/src/views/components/hero/hero.tsx b/app/src/views/components/hero/hero.tsx
@@ -0,0 +1,31 @@
+export type HeroProps = Partial<{
+  title: string,
+  subtitle: string, 
+}>
+
+
+export const defaultProps: HeroProps = {
+  title: 'Landscaping Services',
+  subtitle: 'We provide professional landscaping services for residential and commercial properties.'
+} as const  
+
+export function Hero(props: HeroProps) {
+
+  const { title, subtitle } = props; 
+
+    return (
+
+          <section className="pt-32 pb-16 px-4">
+          <div className="container mx-auto text-center">
+            <h1 className="text-5xl md:text-7xl font-thin mb-6 text-green-700 dark:text-green-400">
+             {title ? title : defaultProps.title}
+            </h1>
+            <p className="text-xl md:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+            {subtitle ?  subtitle: defaultProps.subtitle}
+            </p>
+          </div>
+        </section>
+    )
+}
+
+Hero.defaultProps = defaultProps; 
diff --git a/app/src/views/components/hero/index.ts b/app/src/views/components/hero/index.ts
@@ -0,0 +1 @@
+export * from "./hero"
diff --git a/app/src/components/multi-step-form.tsx → app/src/views/components/multi-step-form.tsx b/app/src/components/multi-step-form.tsx → app/src/views/components/multi-step-form.tsx
@@ -2,14 +2,14 @@
 
 import { useState, useEffect } from "react"
 import { motion, AnimatePresence } from "framer-motion"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
-import { Slider } from "@/components/ui/slider"
-import { SERVICES } from "@/lib/constants"
-import { submitToNotion } from "@/lib/notion"
+import { Button } from "@/views/components/ui/button"
+import { Input } from "@/views/components/ui/input"
+import { Textarea } from "@/views/components/ui/textarea"
+import { Slider } from "@/views/components/ui/slider"
+import { SERVICES } from "@/controllers/lib/constants"
+import { submitToNotion } from "@/controllers/lib/notion"
 import { CheckCircle, Circle, Calendar, Clock, MapPin, CreditCard, Send, Users } from "lucide-react"
-import { fadeInUp, staggerChildren, scaleIn } from "@/lib/animation-variants"
+import { fadeInUp, staggerChildren, scaleIn } from "@/controllers/lib/animation-variants"
 
 // Enhanced form data interface
 interface FormData {
@@ -169,7 +169,7 @@ export function MultiStepForm() {
           <h3 className="text-lg font-thin">Form Progress</h3>
           <span className="text-green-500">{Math.round(formProgress)}% Complete</span>
         </div>
-        <div className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+        <div className="relative h-2 bg-gray-200 dark:bg-black rounded-full overflow-hidden">
           <motion.div
             className="absolute top-0 left-0 h-full bg-green-500 dark:bg-green-400"
             initial={{ width: 0 }}
@@ -245,19 +245,19 @@ export function MultiStepForm() {
       <motion.div variants={fadeInUp} className="mt-8 p-6 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-lg">
         <h3 className="text-xl font-thin mb-4">Service Summary</h3>
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div className="p-4 bg-white dark:bg-gray-700 rounded-lg">
+          <div className="p-4 bg-white dark:bg-black rounded-lg">
             <p className="text-sm text-gray-500 dark:text-gray-400">Selected Services</p>
             <p className="text-2xl font-thin">{formData.selectedServices.length}</p>
           </div>
-          <div className="p-4 bg-white dark:bg-gray-700 rounded-lg">
+          <div className="p-4 bg-white dark:bg-black rounded-lg">
             <p className="text-sm text-gray-500 dark:text-gray-400">Property Size</p>
             <p className="text-2xl font-thin">{formData.propertySize} sq ft</p>
           </div>
-          <div className="p-4 bg-white dark:bg-gray-700 rounded-lg">
+          <div className="p-4 bg-white dark:bg-black rounded-lg">
             <p className="text-sm text-gray-500 dark:text-gray-400">Frequency</p>
             <p className="text-2xl font-thin capitalize">{formData.frequency}</p>
           </div>
-          <div className="p-4 bg-white dark:bg-gray-700 rounded-lg">
+          <div className="p-4 bg-white dark:bg-black rounded-lg">
             <p className="text-sm text-gray-500 dark:text-gray-400">Estimated Total</p>
             <p className="text-2xl font-thin">${calculateTotal(formData)}</p>
           </div>

diff --git a/app/src/components/theme-context.tsx → app/src/views/components/theme-context.tsx b/app/src/components/theme-context.tsx → app/src/views/components/theme-context.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { createContext, useContext, useEffect, useState } from "react"
-import type { Theme } from "@/lib/types"
+import type { Theme } from "@/controllers/lib/types"
 
 interface ThemeContextType {
   theme: Theme

diff --git a/app/src/components/ui/button.tsx → app/src/views/components/ui/button.tsx b/app/src/components/ui/button.tsx → app/src/views/components/ui/button.tsx
@@ -2,7 +2,7 @@ import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/controllers/lib/utils"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",

diff --git a/app/src/components/ui/dialog.tsx → app/src/views/components/ui/dialog.tsx b/app/src/components/ui/dialog.tsx → app/src/views/components/ui/dialog.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { X } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/controllers/lib/utils"
 
 const Dialog = DialogPrimitive.Root
 

diff --git a/app/src/components/ui/input.tsx → app/src/views/components/ui/input.tsx b/app/src/components/ui/input.tsx → app/src/views/components/ui/input.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/controllers/lib/utils"
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {