diff --git a/frontend/app/globals.css b/frontend/app/globals.css index 491435b..405715a 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -87,3 +87,69 @@ body { @apply bg-background text-foreground; } } + +@layer utilities { + .text-balance { + text-wrap: balance; + } +} + +/* Add custom styles for the blog content */ +.prose h2 { + @apply text-2xl font-semibold mt-8 mb-4; +} + +.prose p { + @apply mb-4 leading-relaxed; +} + +.prose ul { + @apply list-disc pl-6 mb-4 space-y-2; +} + +/* Animation utilities */ +@keyframes blob { + 0%, + 100% { + transform: translate(0, 0) scale(1); + } + 25% { + transform: translate(20px, 15px) scale(1.1); + } + 50% { + transform: translate(-15px, 10px) scale(0.9); + } + 75% { + transform: translate(15px, -25px) scale(1.05); + } +} + +@keyframes float { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-15px); + } +} + +.animate-blob { + animation: blob 15s infinite; +} + +.animate-float { + animation: float 6s ease-in-out infinite; +} + +.animation-delay-2000 { + animation-delay: 2s; +} + +.animation-delay-4000 { + animation-delay: 4s; +} + +.animation-delay-1000 { + animation-delay: 1s; +} diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index 2664cbf..e574d77 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -1,69 +1,274 @@ import Image from "next/image"; import Link from "next/link"; -import { ArrowRight, Cloud, BarChart, Zap } from "lucide-react"; -import { Leaf } from "lucide-react"; +import { ArrowRight, Cloud, BarChart, Zap, Leaf, ChevronRight, Users, Shield, LineChart } from "lucide-react"; import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; export default function Home() { return ( -
-
- - - - ForFarm - - - - - Documentation - - - Get started - - -
+
+ {/* Animated background elements */} +
+
+
+
+
-
-
- ForFarm Icon -

Your Smart Farming Platform

-

- It's a smart and easy way to optimize your agricultural business, with the help of AI-driven insights and - real-time data. -

- - - + {/* 3D floating elements */} +
+
+
-
+
+
+
+
+
+
- {/*
*/} +
+
+ + + + ForFarm + + + BETA + + + +
+ + Log in + + + Get started + +
+
-
- - Terms - - {" • "} - - Privacy - - {" • "} - - Cookies - -
+
+ {/* Hero section */} +
+
+ + Smart Farming Solution + +

+ Grow Smarter,
+ + Harvest Better + +

+

+ Optimize your agricultural business with AI-driven insights and real-time data monitoring. ForFarm helps + you make informed decisions for sustainable farming. +

+
+ + + + + + +
+ +
+
+ {[1, 2, 3, 4].map((i) => ( +
+ User +
+ ))} +
+
+ 500+ farmers already using ForFarm +
+
+
+ +
+
+
+
+ +
+ ForFarm Dashboard Preview +
+
+

Farm Dashboard

+

Real-time monitoring

+
+ Live Demo +
+
+
+
+ + {/* Features section */} +
+
+ + Why Choose ForFarm + +

Smart Features for Modern Farming

+

+ Our platform combines cutting-edge technology with agricultural expertise to help you optimize every + aspect of your farm. +

+
+ +
+ {[ + { + icon: , + title: "Data-Driven Insights", + description: + "Make informed decisions with comprehensive analytics and reporting on all aspects of your farm.", + }, + { + icon: , + title: "Weather Integration", + description: + "Get real-time weather forecasts and alerts tailored to your specific location and crops.", + }, + { + icon: , + title: "Resource Optimization", + description: "Reduce waste and maximize efficiency with smart resource management tools.", + }, + { + icon: , + title: "Team Collaboration", + description: "Coordinate farm activities and share information seamlessly with your entire team.", + }, + { + icon: , + title: "Crop Protection", + description: "Identify potential threats to your crops early and get recommendations for protection.", + }, + { + icon: , + title: "Yield Prediction", + description: "Use AI-powered models to forecast yields and plan your harvests more effectively.", + }, + ].map((feature, index) => ( +
+
+
+
{feature.icon}
+

{feature.title}

+

{feature.description}

+
+
+ ))} +
+
+ + {/* CTA section */} +
+
+
+
+

Ready to transform your farming?

+

+ Join hundreds of farmers who are already using ForFarm to increase yields, reduce costs, and farm more + sustainably. +

+
+ + + +
+
+
+ + +
); } diff --git a/frontend/components/ui/calendar.tsx b/frontend/components/ui/calendar.tsx new file mode 100644 index 0000000..115cff9 --- /dev/null +++ b/frontend/components/ui/calendar.tsx @@ -0,0 +1,76 @@ +"use client" + +import * as React from "react" +import { ChevronLeft, ChevronRight } from "lucide-react" +import { DayPicker } from "react-day-picker" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" + +export type CalendarProps = React.ComponentProps + +function Calendar({ + className, + classNames, + showOutsideDays = true, + ...props +}: CalendarProps) { + return ( + .day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" + : "[&:has([aria-selected])]:rounded-md" + ), + day: cn( + buttonVariants({ variant: "ghost" }), + "h-8 w-8 p-0 font-normal aria-selected:opacity-100" + ), + day_range_start: "day-range-start", + day_range_end: "day-range-end", + day_selected: + "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", + day_today: "bg-accent text-accent-foreground", + day_outside: + "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground", + day_disabled: "text-muted-foreground opacity-50", + day_range_middle: + "aria-selected:bg-accent aria-selected:text-accent-foreground", + day_hidden: "invisible", + ...classNames, + }} + components={{ + IconLeft: ({ className, ...props }) => ( + + ), + IconRight: ({ className, ...props }) => ( + + ), + }} + {...props} + /> + ) +} +Calendar.displayName = "Calendar" + +export { Calendar } diff --git a/frontend/components/ui/pagination.tsx b/frontend/components/ui/pagination.tsx new file mode 100644 index 0000000..d331105 --- /dev/null +++ b/frontend/components/ui/pagination.tsx @@ -0,0 +1,117 @@ +import * as React from "react" +import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react" + +import { cn } from "@/lib/utils" +import { ButtonProps, buttonVariants } from "@/components/ui/button" + +const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => ( +